How to Use

Please provide a "key" for each data item in the dataSource that is different from the value of the other data items, or use the row Key parameter to specify an attribute name as the primary key, alternative row operation functions such as row selection and expansion of the table.

Demos

Basic Table

JSX Writing

Note: JSX-written tables are not supported the parameter Resizable.

Row Selection Operation

• Click the selection box in the header, and all rows in the dataSource that are not in the state of disabled will be selected. The callback function for selecting all rows is onSelectAll;
• Clicking on the row selection box will select the current row. Its callback function is onSelect;

Note: Be sure to provide a "key" for each row of data that is different from other row values, or use the rowKey parameter to specify a property name as the primary key.

Custom Rendering

Table With Pagination

• In controlled mode, the paging state is passed entirely externally, depending on whether the pagination .currentPage field is passed. In general, the controlled mode is suitable for remotely pulling data and rendering.
• In uncontrolled mode, Table passes the incoming dataSource length as total to the Pagination component by default, and of course you can also pass a total field to overwrite the value of the Table component, but we do not recommend users to pass this field in uncontrolled paging mode.

Note: The custom pagination.total field passed in uncontrolled conditions is supported only after version 0.25.0.

Pull Remote Data

Fixed Column or Head

• Make sure that all elements inside the table do not affect the height of the cells after rendering (e.g. containing unloaded pictures, etc.). In this case, give the stator element a definite height to ensure that the left and right Fixed columns of cells are not deranged.
• If the column header is not aligned with the content or there is a column duplication, specify the width width of the fixed column. If the specified width is not effective, try to recommend leaving a column with no width to accommodate the elastic layout, or check for ultra-long continuous fields to destroy the layout.
• It is recommended to specify scroll.x as a fixed value or percentage greater than the width of the table. It is recommended to set a fixed value of >= the sum of all fixed column widths + the sum of all table column widths.

Table Header With Sorting and Filtering Function

Note: Be sure to provide a "key" for each row of data that is different from other row values, or use the rowKey parameter to specify a property name as the primary key.

Custom Filter Item Rendering

• onChange: e => void current filter item selection/reverse selection event;
• text: ReactNode copy of the current screening item;
• value: any the value of the current filter item;
• checked: boolean whether the current filter item has been selected;
• filteredValue: any[] all currently filtered values;
• level: number is the level of the current filter item, if it is a nested filter item, the value will be >= 1;
• filterMultiple: boolean whether the current filter item is multi-select.

A Table That Can Be Expanded

A Common Table That Can Be Expanded

• If rowKey is a Function, the result of rowKey(record) is taken as the row unique ID
• If rowKey is a string type, you take record[rowKey] as the row unique ID

The Unfold Button Is Rendered In a Separated Column

Turn Off Rendering of Expandable Button of a Row

Tree Data Display

Note: Be sure to provide a "key" for each row of data that is different from the other row values, or use the rowKey parameter to specify a property name as the primary key.

Simple example of tree data

Rows of Interchangeable Tree Data

Tree Selection

Custom Row or Cell Events and Properties

• The incoming onRow / onHeaderRow can define the native event or property of a table or table header line.
• The incoming Column.onCell / Column.onHeaderCell can define a table or header cell native event or property.

• The tr at the head of the watch defines onMouseEnter / onMouseLeave
• The tr of the table defines className
• The third line of the table defines onClick.

Zebra Pattern Table

Resizable Column

Basic Resizable Column

• resizable is set to true or an object
• Any column in columns that requires a telescopic function should specify the widthfield (if not passed, the column does not have a telescopic function and its column width will be automatically adjusted by the browser)

It is not recommended to use with fixed columns at the same time. Fixed columns need to specify scroll.x, which stipulates that the table has a width range, and the flexible column will expand the column width, which may cause the table to be misaligned

Advanced Telescopic Columns

• onResize
• onResizeStart
• onResizeStop

Drag Sorting

Table Grouping

Note: Be sure to provide a "key" for each row of data that is different from other row values, or use the rowKey parameter to specify a property name as the primary key.

Virtualized Table

• Must pass scroll.y (number) andstyle.width (number);
• Need to pass the height of each line virtualized.itemSize (when not transmitting, the normal line height defaults to 56, and the group head line height defaults to 56), can be of the following types:
  • number
  • (index, { sectionRow?: boolean, expandedRow?: boolean }) => number
• Table grouping virtualization requires version >= 0.37.0.

Infinite Scroll

Controlled Dynamic Tables

Fully custom rendering

The example below renders the checkbox and content into the same cell and header.

Header Merge

Combined Header Configuration Writing

Merge Header JSX Writing

colSpan and rowSpan

• In addition to merging the headers by writing children, you can merge the headers by setting column.colSpan.
• Table supports row/column merging. When the cell attribute colSpan or rowSpan in render is set to 0, the set table will not be rendered.

API Reference

Table

onRow/onHeaderRow Usage

Also in column.onCell column.onHeaderCell Properties or events supported by td / th can also be returned.

Column

rowSelection

scroll

pagination

Resizable

Methods

Accessibility

ARIA

• The role of the table is grid, and the role of the tree table is treegrid
• the row's role is row, and the cell's role is gridcell
• Added aria-rowcount and aria-colcount attributes to the table to indicate the number of rows and columns
• The row has added aria-rowindex to indicate which row it currently belongs to, and the first row is 1
• The row of the tree table has aria-level representing the tree level of the current row, the first level is 1
• Expandable table rows have the aria-expanded attribute, indicating whether the current row is expanded
• The new aria-colindex of the cell indicates which column the current grid belongs to, and the first column is 1
• Added aria-label to column filter and sort buttons, and added aria-label attribute to row select buttons

Content Guidelines

• Table title
  • The title of the table should clearly make the user perceive the purpose of the table;
  • Add descriptions to complex tables to provide users with more contextual information about the table;
  • use sentence case;
• Column headers
  • Keep column headings concise, it is recommended to use 1-2 words as column headings;
  • When the column header is long, it is recommended to display it in 2 lines, and the remaining text is abbreviated and displayed completely in the Tooltip;
  • Adopt the capitalization rules of Sentence case;
  • Use sentence case for column headings;
• Table operation area
  • You can follow Button's content Guidelines

Design Tokens

FAQ

• Why is the table data not updated?
  At present, all parameters of the table component are shallow comparison. That is to say, if the parameter value type is an array or object, you need to manually change its reference to trigger the update. Similarly, if you don't want to trigger additional updates, try not to use literal values when passing parameters directly or define reference parameter values in the render process:
  The above writing method will trigger the update of data in the table every time render (the current selected row will be cleared and the row key array will be expanded, etc.). In order to improve performance and avoid some exceptions, please define some reference type parameters outside the render method as far as possible (if hooks are used, please use useMemo or useState for storage).**
• Why can't my form line be selected and expanded?
  Please specify a rowKey or set a different "key" attribute for each item of the dataSource. All rows related operations in the table need to be used.
• How to implement custom sorting or pass parameters to the server for sorting when clicking the sort button?
  The input parameters of the onChange method include pagination, filters, and sorter. Users can customize the sorting of the dataSource according to the sorter.
• How to add className to a row?
  Use onRow or onHeaderRow.
• How to style the table cell?
  It can be controlled by column.onHeaderCell and column.onCell.
• Why cache the previously selected keys for the first parameter of rowSelection onChange?
  This is for the scenario where the selected row keys are lost when data is selected on the first page during paging, and then the data is selected on the second page. If you don't want to use the cached keys, you can filter it from the current dataSource or use the second parameter of rowSelection onChange.
• Does it support single row selection?
  Table currently does not support single-row selection function, and users can implement single selection in a custom way. Please check the FAQ.
• How is Table implemented, I want to know more details?
  Please click Semi Table component design