TableV2
TableV2 is the new version of the Atlas Table.
Example
Variants
Alignment
left
, center
and medium
are the supported alignments, accessed using align prop under columns, left
as default.
Column Resizing
The Table supports the column resizing function. You can use isResizable
prop for making desired columns resizable. If you want to limit resizable column width
value, you can use for the column maxWidth
property.
You can use the onColumnResized
callback property to get the new width
of the column
that was resized. The callback will be passed a column argument which is of type TableColumn
.
You can use the minWidth
and maxWidth
properties to limitization the reached resized value. For more information pleace check the Min and Max width example
Compact Mode
There is a compact mode enabled by setting compact
to true.
Here we will be reducing the padding by half from left and right.
Custom Cell Renderer
There are Header
, Footer
, Cell
property within the column configuration.
With them you can define the custom render function for the header, the footer and a table cell accordingly.
Custom Cell Renderer on Row Hover
If you want to update your custom Cell component when the row it belongs to changes, you can use the getHoveredRowId
method to get the id of the row currently being hovered.
Custom backgroundColor for the Cells
Changing the default cell background color requires passing custom cell markup. Since table cells have a default padding, in order to render a custom cell that takes the full cell width and height, it must be turned off by setting hasPadding
to false
.
DND Column re-ordering
The Table supports the drag-and-drop column re-ordering function. You can use isDraggable
prop for making desired columns draggable for re-ordering.
You can also use onColumnRearrange
callback property to get an ordered array of column accessors as a first argument and perform any action after column is rearranged.
Empty State
You can add an Empty State by using prop emptyState
. It is shown if there is no data.
First and Last Column padding
You can align first and last columns using the firstColumnLeftPadding
& lastColumnRightPadding
props under visualProperties
.
Footer
The table also supports the footer cells by adding Footer
in column options.
Footerless
The prop isFooterless
is used for hiding table footers.
Flex Table
The prop flex
supports the flex layout feature by using width
as the flex-basis and flex-grow. This feature becomes useful when implementing both virtualized and resizable tables that must also be able to stretch to fill all available space
You can also add disableResizing: true
to column option to create a fixed width column. That column will not grow to fill positive free space.
info
To deal with the core column options width
, minWidth
, maxWidth
in a flex table, you should pay the attention as follows:
minWidth
is only used to limit column resizing. It does not define the minimum width for a column.width
is used as both the flex-basis and flex-grow. This means that it essentially acts as both the minimum width and flex-ratio of the column.maxWidth
is only used to limit column resizing. It does not define the maximum width for a column
warning
Flex table doesn't support column virtualization. Please be careful with number of columns will be rendered.
Global Search Filter
You can use this feature to globally search through all columns in the table. To exclude specific columns from global searching you can use the disableGlobalFilter
property in your column object.
Header Actions
Header cells support using additional actions, such as an Icon Button
for setting filters on the specific column.
As shown in the example, you can use the headerActions
property inside the column
object to assign custom actions to your column.
headerActions
accepts a ReactNode
type value, which means you can compose your custom components for this area.
info
It's recommended to exclusively employ the IconButton
component as the action trigger element within the headerActions
. Moreover, it's essential to ensure that all IconButton
s adhere to a uniform size="small"
prop. While exceptions can be contemplated, they should undergo a meticulous review process to ensure compatibility.
info
It's recommended to use isAutoWidth: true
in the Header options when the space is not enough for actions.
Header Alignment
By default, header cell and column cells are aligned according to align
property but there're use-cases when header cell needs a different alignment (e.g. RTL text direction). To align header-cell, alignHeader
property can be specified for any column within columns
array.
The alignHeader
property supports the following options (please refer to the table below which shows all of supported options):
left
- defaultleft-reversed
right
right-reversed
center
center-reversed
space-between
space-between-reversed
Header Groups
To use the grouped header feature, you must configure your columns as nested columns, as in the example below.
You can visually hide your group headers with the hideHeaderGroupTitle
prop.
Header Group Bordered
You can set border based on grouping using areColumnGroupsBordered
prop.
Header Menu
You can display a menu in header cells by providing your menu content with headerMenuItems
property. You can see the example usage of the headerMenuItems
property below.
The table uses the Action Menu component inside the header cells. You can also check the Action Menu component examples to get more info about different usages of menu content.
Headerless
The prop isHeaderless
is used for hiding table headers.
Hover Highlighting
isHoverable
prop can be used to toggle hover highlighting on table rows
. By default, it is set to false.
Inline editing in Table
You can have inline editing in Table by using updateData
prop and defining custom cell which includes needed editable component such as Input
, ComboBox
, Checkbox
, etc.
Here is another example with more editable cells with ComboBox, Checkbox, SegmentedButton and nested Objects:
Loading More Data (aka Infinite loading)
Table
supports infinite loading by calling onLoadMoreData
callback when Table gets scrolled to the end. To integrate infinite loading with React Query please refer to useInfiniteQuery hook and this example.
Loading State
You can active a loading state for the table by passing isLoading
to be true. This helps users to see a skeleton cell when data is loading.
Also the loader height adapts to the typeScales
of cellTypeScale
and width
is random, and also adapts the column alignments.
Min and Max width
The table supports a custom minimum width option for desired columns. You can use the minWidth
property for each column to change the minimum width value.
If you do not use the minWidth property for the column, column will take the minWidth 150px
width value by default.
The table supports a custom maximum width option for desired columns. You can use the maxWidth
property for each column to change the maximum width value.
If you do not use the maxWidth property for the column, column will take the maxWidth 500px width value by default.
Nested Rows
You can have nested rows by adding subRows
to data as the following example.
You can use the following callbacks to customize toggle in expandable rows by passing them to the Cell
render prop .
toggleRowExpanded(rowId, isExpanded?)
: toggle a specific row.toggleAllRowsExpanded(isExpanded?)
: toggle all rows.
You can add prop autoResetExpanded
to component to allow the expanded state to automatically reset if data changes, default is false.
Nested Rows Indentation
You can add or remove the indentation for the non-expandable rows of the table using isNestedTable
prop