Skip to main content

TableV2


TableV2 is the new version of the Atlas Table.

Example

Live Editor
Result
Loading...

Variants

Alignment

left, center and medium are the supported alignments, accessed using align prop under columns, left as default.

Live Editor
Result
Loading...

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

Live Editor
Result
Loading...

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.

Live Editor
Result
Loading...

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.

Live Editor
Result
Loading...

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.

Live Editor
Result
Loading...

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.

Live Editor
Result
Loading...

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.

Live Editor
Result
Loading...

Empty State

You can add an Empty State by using prop emptyState. It is shown if there is no data.

Live Editor
Result
Loading...

First and Last Column padding

You can align first and last columns using the firstColumnLeftPadding & lastColumnRightPadding props under visualProperties.

Live Editor
Result
Loading...

The table also supports the footer cells by adding Footer in column options.

Live Editor
Result
Loading...

Footerless

The prop isFooterless is used for hiding table footers.

Live Editor
Result
Loading...

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.

Live Editor
Result
Loading...

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.

Live Editor
Result
Loading...

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 IconButtons 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.

Live Editor
Result
Loading...

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):

  1. left - default
  2. left-reversed
  3. right
  4. right-reversed
  5. center
  6. center-reversed
  7. space-between
  8. space-between-reversed
Live Editor
Result
Loading...

Header Groups

To use the grouped header feature, you must configure your columns as nested columns, as in the example below.

Live Editor
Result
Loading...

You can visually hide your group headers with the hideHeaderGroupTitle prop.

Live Editor
Result
Loading...

Header Group Bordered

You can set border based on grouping using areColumnGroupsBordered prop.

Live Editor
Result
Loading...

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.

Live Editor
Result
Loading...

Headerless

The prop isHeaderless is used for hiding table headers.

Live Editor
Result
Loading...

Hover Highlighting

isHoverable prop can be used to toggle hover highlighting on table rows. By default, it is set to false.

Live Editor
Result
Loading...

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.

Live Editor
Result
Loading...

Here is another example with more editable cells with ComboBox, Checkbox, SegmentedButton and nested Objects:

Live Editor
Result
Loading...

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.

Live Editor
Result
Loading...

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.

Live Editor
Result
Loading...

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.

Live Editor
Result
Loading...

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.

Live Editor
Result
Loading...

Nested Rows Indentation

You can add or remove the indentation for the non-expandable rows of the table using isNestedTable prop

Live Editor