Table #

A table displays rows of data.

Import #

• <Table> Table component
• <Table.Column> Table definition column component
• <Table.ColumnGroup> Used for column header grouping
• <Table.HeaderCell> Column Header cell component
• <Table.Cell> Cell component

Examples #

Basic #

Appearance #

Loading #

Table Height #

Fill Height #

Force the height of the table to be equal to the height of its parent container. Cannot be used together with autoHeight.

Custom Cell #

Depending on your business scenario, you can define what you want to display in a cell, such as displaying a picture, like adding a few buttons, or displaying a text box that you can customize, and simply redefining the Cell component.

For example, display a picture, define a Imagecell component:

const ImageCell = ({ rowData, dataKey, ...props }) => (
  <Cell {...props}>
    <img src={rowData[dataKey]} width="50" />
  </Cell>
);

Use:

<Column width="{200}">
  <HeaderCell>Avartar</HeaderCell>
  <ImageCell dataKey="avartar" />
</Column>

The children property support function on <Cell> can get rowData to return a new children.

Use:

<Column width="{200}">
  <HeaderCell>Date</HeaderCell>
  <Cell>{rowData => rowData.date.toLocaleString()}</Cell>
</Column>

Custom row height

If you need to define row heights based on the content of your data in practical applications, you can use the following methods:

return (
  <Table
    rowHeight={rowData => {
      if (rowData?.tags.length > 4) {
        return 80;
      }
      return 40;
    }}
  >
    ...
  </Table>
);

Resizable #

Move the mouse to the column split line, will display a blue move handle, click Not to loosen and drag left and right to adjust the width of the column.

To support this feature, you need to set a resizable attribute in Column.

Fluid #

If you need to set a column to automatic width, you need to configure the flexGrow property. flexGrow is a number type. Will fill the Table remaining width according to the sum of all flexGrow.

Note: After setting flexGrow, you cannot set the width and resizable properties. You can set a minimum width by minwidth.

<Column flexGrow="{1}">
  <HeaderCell>City <code>flexGrow={1}</code></HeaderCell>
  <Cell dataKey="city" />
</Column>

<Column flexGrow="{2}">
  <HeaderCell>Company Name <code>flexGrow={2}</code></HeaderCell>
  <Cell dataKey="companyName" />
</Column>

...

Sort #

Set a sortable attribute in the column <Column> that you want to sort.

While the <Table> defines a onSortColumn callback function, clicking the column header to sort the icon triggers the method and returns sortColumn and sortType.

<Table onSortColumn={(sortColumn, sortType) => { console.log(sortColumn, sortType); }} >

<Column width="{50}" sortable>
  <HeaderCell>Id</HeaderCell>
  <Cell dataKey="id" />
</Column>

<Column width="{130}" sortable>
  <HeaderCell>First Name</HeaderCell>
  <Cell dataKey="firstName" />
</Column>

...

Pagination #

If you need table data paging, you must first filter the data paging (usually supported by the server data api), and then combine with the Pagination component to achieve table paging.

Expandable #

To implement a Table that can be expanded, a combination of the following attributes is required.

Step 1: Set properties for Table

• renderRowExpanded(rowData) => ReactNode: Used to return content that needs to be rendered in the expansion panel
• rowExpandedHeight: Sets the height of the expandable area. The default is 100
• expandedRowKeys (controlled) and defaultExpandedRowKeys are used to configure the rows that need to be expanded. Note that the parameters that these two properties receive are an array of Rowkey in the array.。
• rowKey: Give each row of data to a unique key, corresponding to a unique value in the key.

Step 2：Custom Cell

Customize a Cell and put a button inside to manipulate the value in expandedRowKeys.

Colspan #

In some cases, you need to merge the relationships between columns to organize your data, and you can set a ColSpan attribute on the <Column> component，and set the header grouping through<ColumnGroup>. for example:

<ColumnGroup header="Name">
  <Column width={130} colSpan={2}>
    <HeaderCell>First Name</HeaderCell>
    <Cell dataKey="firstName" />
  </Column>

  <Column width={130}>
    <HeaderCell>Last Name</HeaderCell>
    <Cell dataKey="lastName" />
  </Column>
</ColumnGroup>

When lastName corresponds to a column value of null or undefined, it is merged by the firstName column.

Rowspan #

Summary #

Show full text of cells #

Display the hidden text in its entirety when hovering over the cell.

Word Wrap #

⚠️ We do not recommend using wordWrap with virtualized, because virtualized only achieves the best performance with a fixed line height. You can use the fullText property to solve the problem of not displaying the full text.

More Examples #

• Table Virtualized
• Tree Table
• Table Affix
• Table Editable

Accessibility #

• <Table> has role grid.
• <Table> has role treegrid, when <Table> is set with isTree.
• <HeanderCell> has role columnheader.
• <Cell> has role gridcell.
• Rows dynamically generated from data in the <Table> has role row.
• Use the aria-rowcount prop to identify the total number of rows available, and the aria-rowindex prop to identify the index of the row.
• Use the aria-colcount prop to identify the total number of available columns, and the aria-colindex prop to identify the index of the column.
• When sorting a column, you can apply the aria-sort prop to the column header to indicate the sorting method.

Props #

<Table> #

Table ref #

<Table.Column> #

sortable is used to define whether the column is sortable, but depending on what key sort needs to set a dataKey in Cell. The sort here is the service-side sort, so you need to handle the logic in the ' Onsortcolumn ' callback function of <Table>, and the callback function returns sortColumn, sortType values.

<Table.ColumnGroup> #

<Table.HeaderCell> #

<Table.Cell> #