Table

A table displays rows of data.

  • <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

Import

import { Table } from 'rsuite';

// or
import Table from 'rsuite/Table';

Examples

Basic

Id
First Name
Last Name
Gender
Age
Postcode
Email
...
1
Eliezer
Schumm
Male
37
05145-5054
Alysson.Toy4@hotmail.com
2
Narciso
Zieme
Female
19
25436
Douglas_Grady@gmail.com
3
Neoma
Spencer
Female
35
03827
Rosamond90@hotmail.com
4
Candido
Jerde
Female
46
36514-7142
Ryder55@hotmail.com
5
Omer
Pollich
Male
28
43533-9895
Kody.Zboncak@yahoo.com
6
Yvonne
Gleason
Male
40
78078
Sandy_Abernathy@gmail.com
7
Leon
Swift
Male
44
57332-1092
Kathleen12@yahoo.com
8
Grace
Leffler
Male
38
68387
Ruth70@gmail.com
9
Cristina
Feeney
Female
41
58356
Fabian_Streich@hotmail.com
10
Alaina
Simonis
Female
35
44493-9267
Kristoffer88@yahoo.com
11
Rick
Tillman
Female
47
55755
Kellen65@yahoo.com
12
Alisa
Willms
Female
37
42178-8250
Winfield.Carter@hotmail.com
13
Madilyn
Haley
Female
18
83255-8089
Elta92@hotmail.com
14
Delbert
Ortiz
Female
23
41760
Kaden90@gmail.com
15
Michelle
Koepp
Female
37
88081-1708
Shaina_Johnston@hotmail.com
16
Dedric
Gottlieb
Female
35
99092-9007
Thurman99@yahoo.com
17
Norma
Brakus
Female
25
84010
Jerrold_Littel29@gmail.com
18
Lisa
Mills
Male
31
14723
Theresia_McClure@hotmail.com
19
Jeffery
Jacobi
Female
26
20174-3019
Hester27@hotmail.com
20
Jannie
Adams
Female
45
70866-2990
Ferne.Heidenreich@gmail.com
Loading...

Appearance

Compact:Bordered:Show Header:Hover:
Loading:No data:Auto Height:Fill Height:

Columns:
Id
First Name
Last Name
Gender
City

Id
First Name
Last Name
Gender
City
1
Arthur
Pfannerstill
Male
New Emmy
2
Jesus
Miller
Female
East Ignatiusburgh
3
Adolfo
Wintheiser
Female
Salinas
4
Kaya
Prosacco
Male
Reynoldfield
5
Henri
Daugherty
Female
Port Mauricioside
6
Loy
Hansen
Female
North Norval
7
Alyce
Bauch
Female
Amirafield
8
Tyler
Stroman
Female
Gerryville
9
Malachi
Miller
Male
Schmidtfort
10
Harley
Towne
Female
East Orange
Loading...
  • autoHeight: The height of the table will be automatically expanded according to the number of data rows, and no vertical scroll bar will appear.
  • fillHeight: Force the height of the table to be equal to the height of its parent container. Cannot be used together with autoHeight.

Virtualized

Support virtualized, effectively render large tabular data.

Id
First Name
Last Name
Gender
Age
City
Email
1
Mylene
Heller
Female
32
Lake Arielworth
Dee_Emard39@hotmail.com
2
Elinore
Murazik
Male
31
Goodyear
Brando_Gaylord@hotmail.com
3
Alia
Hills
Female
22
New Keagantown
Jonathon61@hotmail.com
4
Ericka
Kassulke
Female
26
Stiedemanncester
Jovanny30@gmail.com
5
Dora
Prosacco
Male
41
Hegmannborough
Birdie78@yahoo.com
6
Sam
Heathcote
Female
21
Port Andy
Giles68@gmail.com
7
Nedra
Schulist
Female
18
Noemyhaven
Ericka.Boehm@hotmail.com
8
Madison
Hudson
Female
32
Lake Max
Easter_Abbott@hotmail.com
9
Lewis
Hintz
Female
27
San Marcos
Raul.Emmerich76@yahoo.com
10
Linwood
Franey
Female
28
Jodyboro
Norbert70@yahoo.com
11
Nadia
Thiel
Female
39
North Hunter
Wava.Moen@gmail.com
12
Gonzalo
Braun
Male
31
Mullerstad
Norbert_Kassulke45@yahoo.com
13
Rogers
Carroll
Female
45
Jaleelland
Noble_Mueller@yahoo.com
Loading...

Custom Cell

Avartar
Name
Skill Proficiency
Rating
Income
⭐️⭐️⭐️
$30182.99
⭐️⭐️⭐️⭐️
$26768.10
⭐️⭐️
$74971.05
⭐️⭐️⭐️⭐️
$71916.71
⭐️⭐️⭐️⭐️
$30770.07
⭐️⭐️⭐️
$79203.14
⭐️⭐️
$83150.56
⭐️⭐️⭐️
$41270.25
Loading...

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

Id
First Name
Last Name
City
Email
1
Edgardo
Nikolaus
Port Shaniastead
Jovany.Crist@gmail.com
2
Estrella
Douglas
Kearny
Trystan_Von@gmail.com
3
Candelario
Torp
West Kiarraview
Francesco98@gmail.com
4
Faye
Ward
Schmidtchester
Russ.Emard18@yahoo.com
5
Ursula
Rempel
Lake Stantonstead
Ava.Lehner22@gmail.com
6
Woodrow
Pouros
Torphyworth
Rossie_Parker@hotmail.com
7
Odie
VonRueden
Emmieshire
Valentin.Wiza@yahoo.com
8
Kade
Hessel
Fort Camylleside
Kelsi_Grady@gmail.com
Loading...

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

Id
Name flexGrow=2
City flexGrow=1
Email
1
Sarai Ziemann
North Ernestinahaven
Nona_Runte@gmail.com
2
Delfina Zulauf
Bednarhaven
Sherwood_Hamill@hotmail.com
3
Carroll Douglas
North Annamarie
Ola.Price@yahoo.com
4
Eloise Quigley
East Joyfurt
Dalton_Reinger99@gmail.com
5
Felicia Gerlach
Lafayette
Libby41@yahoo.com
6
Miss Josefa Howe
Shannyworth
Lorna.Gislason@gmail.com
7
Destini Schiller
Port Marielaport
Brandy50@gmail.com
8
Ms. Kurtis Durgan
Lake Demond
Julien_Dooley64@hotmail.com
Loading...

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

Id
Name
Gender
Age
Email
1
Kayley Balistreri
Female
47
Burnice53@gmail.com
2
Derrick Lehner
Male
46
Devonte35@yahoo.com
3
Jake Runolfsson
Male
41
Bonnie.Jacobi41@hotmail.com
4
Price Beier II
Female
34
Edd.Wyman89@yahoo.com
5
Dr. Camryn Pollich
Female
30
Gust39@hotmail.com
6
Agustin DuBuque
Male
23
Rollin.Wolf@gmail.com
7
Mariela Hoppe
Male
35
Annamae_Kutch@gmail.com
8
Guadalupe Padberg
Male
23
Cassandra_Yost26@gmail.com
Loading...

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.

Id
First Name
Last Name
City
Email
1
Grady
Dare
Carmichael
Olga20@yahoo.com
2
Abbie
Huel
Port Emie
Marilie.Gottlieb12@yahoo.com
3
Darrion
Bauch
Isaiahmouth
Jakayla_Boyer@gmail.com
4
Lydia
Waters
South Chayabury
Winifred57@hotmail.com
5
Yazmin
Wyman
South Dion
Adeline.Brekke57@yahoo.com
6
Deven
Mante
Wardstad
Rusty.Schneider@hotmail.com
7
Misty
Weissnat
Spokane Valley
Delphia67@gmail.com
8
Hayden
King
North Aurelia
Serena49@yahoo.com
9
Dylan
Mueller
Hartmannchester
Johnathon.Paucek73@gmail.com
10
Lillie
Bauch
Wilmington
Cecil_Wolff@hotmail.com
Loading...
Total Rows: 100
Go to

Tree

Vehicle 🚗
Rating ⭐️
Price 💰
Volkswagen
⭐️⭐️
$864256
Gasoline
⭐️⭐️⭐️
$797179
Mazda Taurus
⭐️⭐️⭐️⭐️
$966609
Volvo Countach
⭐️⭐️⭐️⭐️
$858218
Rolls Royce Cruze
⭐️⭐️⭐️
$505649
Gasoline
⭐️⭐️⭐️⭐️
$125320
Kia Countach
⭐️⭐️
$180615
Aston Martin Civic
⭐️⭐️
$217256
Lamborghini Spyder
⭐️⭐️⭐️
$406988
Gasoline
⭐️⭐️⭐️
$430031
Aston Martin El Camino
⭐️⭐️⭐️⭐️
$771383
Dodge Model S
⭐️⭐️⭐️⭐️
$924320
Kia A4
⭐️⭐️⭐️
$483317
Volvo
⭐️⭐️⭐️
$597232
Gasoline
⭐️⭐️
$437774
Ford ATS
⭐️⭐️⭐️
$630930
Porsche Prius
⭐️⭐️⭐️
$102052
Hyundai PT Cruiser
⭐️⭐️⭐️⭐️
$596836
Gasoline
⭐️⭐️
$811408
Chrysler Land Cruiser
⭐️⭐️⭐️⭐️
$785643
Bugatti Roadster
⭐️⭐️⭐️
$145287
Tesla Golf
⭐️⭐️⭐️⭐️
$886623
Gasoline
⭐️⭐️
$939210
Volvo Impala
⭐️⭐️⭐️⭐️
$235650
Honda Land Cruiser
⭐️⭐️⭐️⭐️
$271303
Smart Impala
⭐️⭐️⭐️
$703842
Loading...

A tree table, primarily to show structured data, requires a isTree attribute to be set on the Table component, while the data is used to define the relational structure through children.

const data = [
  {
    id: '1',
    labelName: 'Car',
    status: 'ENABLED',
    children: [
      {
        id: '1-1',
        labelName: 'Mercedes Benz',
        status: 'ENABLED',
        count: 460
      }
    ]
  }
];
<Table data={data} isTree rowKey="id" />;

Dealing with related properties for a tree table

  • defaultExpandAllRows:boolean :Expand all nodes By default
  • 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. (You can set the rowKey in <Table>, the default value is key)
  • renderTreeToggle:() => ReactNode : Custom Toggle
  • onExpandChange:(expanded:boolean,rowData:object) => void: To open/close a node's callback function.
  • treeCol is an attribute on <Table.Column>, you can specify that the column is displayed as a tree.

When customizing the cell, it should be noted that if it is a tree table, then rowData needs to be passed to the Cell of the rendering tree, because it will be used inside the Cell to record the state of the node. #issue/2666

const CustomCell = ({ rowData, ...rest }) => {
  return (
    <Cell rowData={rowData} {...rest}>
      {rowData.name}
    </Cell>
  );
};

Expandable

#
First Name
Last Name
Gender
Age
City
Nicolas
Brekke
Female
44
Port Celestine
Rory
Nader
Female
19
Crookschester
Barton
Abbott
Male
33
East Celiaport
Clovis
King
Female
28
Fairfield
Ronaldo
Shanahan
Female
23
Bellflower
Loading...

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.

Editable

First Name
Last Name
Email
...
Laron
Feil
Ferne65@hotmail.com
Vergie
Heathcote
Maryam6@hotmail.com
Rebekah
Auer
Edgardo91@gmail.com
Delmer
Halvorson
Eladio_Jacobs@gmail.com
Sarina
Zulauf
Stacy48@yahoo.com
Zaria
Mills
Johan.Rath@hotmail.com
Quinten
Torp
Clyde.OKon@hotmail.com
Vella
Ullrich
Reina.Olson@hotmail.com
Loading...

Editable tables, just customize a Cell on the line

export const EditCell = ({ rowData, dataKey, onChange, ...props }) => {
  return (
    <Cell {...props}>
      {rowData.status === 'EDIT' ? (
        <input
          className="input"
          defaultValue={rowData[dataKey]}
          onChange={event => {
            onChange && onChange(rowData.id, dataKey, event.target.value);
          }}
        />
      ) : (
        rowData[dataKey]
      )}
    </Cell>
  );
};

Colspan

Id
Name
First Name
Last Name
Address
Company Name
1
Ernest Schuppe Anderson
New Gust
Lebsack - Nicolas
2
Janis
Bode
New Gust
Glover - Hermiston
3
Makenzie Vandervort
New Gust
Williamson - Kassulke
4
Ciara
Towne
Vandervort
Hilpert, Eichmann and Brown
5
Suzanne
Wolff
Vandervort
Mayer - Considine
6
Alessandra
Vandervort
Nikolaus and Sons
7
Margret
Heller
Vandervort
Corwin, Maggio and Wintheiser
8
Emiliano
Moore
Gilberthaven
Gulgowski - Botsford
9
Alessandra
Smith
Gilberthaven
Maggio LLC
Loading...

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

Id
City
Street
First Name
Last Name
Company Name
...
1
New Gust
Dickinson Keys
Ernest Schuppe Anderson
Lebsack - Nicolas
Edit
2
Janis
Bode
Glover - Hermiston
Edit
3
Legros Divide
Makenzie Vandervort
Williamson - Kassulke
Edit
4
Vandervort
Mosciski Estate
Ciara
Towne
Hilpert, Eichmann and Brown
Edit
5
Suzanne
Wolff
Mayer - Considine
Edit
6
Kali Spurs
Alessandra
Nikolaus and Sons
Edit
7
Margret
Heller
Corwin, Maggio and Wintheiser
Edit
8
Gilberthaven
Emiliano
Moore
Gulgowski - Botsford
Edit
9
Kali Spurs
Alessandra
Smith
Maggio LLC
Edit
Loading...

Summary

Name
35,423
32,961
Margot Bernier
9,536
9,651
Ms. Jed Dooley
1,816
3,457
Ofelia Barrows
6,302
8,706
Zachary Heathcote
8,904
6,065
Lazaro Reynolds
8,865
5,082
Loading...

Word Wrap

Id
First Name
Last Name
City
Company Name
1
Red Wacky League AntlezBroketheStereoNeon Kitching Josh Bennett Evolution Dreams 红色古怪联盟丹尼尔梅斯马修
Schuppe
New Gust
Lebsack - Nicolas
2
Janis
Bode
New Gust
Glover - Hermiston
3
Makenzie Vandervort
New Gust
Williamson - Kassulke
4
Ciara
Towne
Vandervort
Hilpert, Eichmann and Brown
Loading...

If you want the cell to wrap, you just need to set wordWrap

Affix header & scrollbar

  • autoHeight: Table will expand the height according to the content.
  • affixHeader: Affix the table header to the specified location on the page.
  • affixHorizontalScrollbar: Affix the table horizontal scrollbar to the specified position on the page.
Id
First Name
Last Name
City
Gender
Age
Postcode
Email
Id
First Name
Last Name
City
Gender
Age
Postcode
Email
1
Queen
Daniel
West Shakirafort
Male
23
18864
Rosetta.Dach64@hotmail.com
2
Rudy
Cartwright
North Mallory
Female
41
54389
Jaron_Glover@yahoo.com
3
Marcelina
Von
Newton
Female
39
79791
Ova.Schowalter@hotmail.com
4
Maxwell
Schowalter
Tampa
Female
28
93550
Angeline_Crooks80@gmail.com
5
Merlin
Donnelly
Lelandchester
Male
21
04154
Aidan.Brekke@gmail.com
6
Anjali
Bayer
Lake Gennaro
Male
28
68361
Jazlyn24@hotmail.com
7
Leopoldo
Kozey
West Johnpaul
Male
25
22174-0630
Vida_Koepp0@gmail.com
8
Zelma
Hackett
Port Sean
Male
18
22849-5023
Sigurd_Shields6@gmail.com
9
Kianna
Fritsch
Rainabury
Male
27
18059-9934
Haven_Monahan82@gmail.com
10
Newton
Lowe
Lake Hermina
Female
18
97905-2185
Alanis.Spencer50@hotmail.com
Loading...

Draggable(with react-dnd)

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.
aria-sort Description
ascending Data are sorted in ascending order.
descending Data are sorted in descending order.
none Default (no sort applied).
other Data are sorted by an algorithm other than ascending or descending.

Props

<Table>

Property Type (Default) Description
affixHeader boolean | number Affix the table header to the specified location on the page
affixHorizontalScrollbar boolean | number Affix the table horizontal scrollbar to the specified position on the page
autoHeight boolean The height of the table will be automatically expanded according to the number of data rows, and no vertical scroll bar will appear
bordered boolean Show border
cellBordered boolean Show cell border
data * object[] Table data
defaultExpandAllRows boolean Expand all nodes By default
defaultExpandedRowKeys string[] Specify the default expanded row by rowkey
defaultSortType 'desc' | 'asc' Sort type
expandedRowKeys string[] Specify the default expanded row by rowkey (Controlled)
fillHeight boolean Force the height of the table to be equal to the height of its parent container. Cannot be used together with autoHeight.
headerHeight number(40) Table Header Height
height number(200) Table height
hover boolean (true) The row of the table has a mouseover effect
isTree boolean Show as Tree table
loading boolean Show loading
locale TableLocaleType Locale text
minHeight number (0) Minimum height
onDataUpdated (nextData: object[], scrollTo: (coord: { x: number; y: number }) => void) => void Callback after table data update.
onExpandChange (expanded:boolean, rowData:object) => void Tree table, the callback function in the expanded node
onRowClick (rowData:object) => void Click the callback function after the row and return to rowDate
onScroll (scrollX:object, scrollY:object) => void Callback function for scroll bar scrolling
onSortColumn (dataKey:string, sortType:string) => void Click the callback function of the sort sequence to return the value sortColumn, sortType
renderEmpty (info: ReactNode) => ReactNode Customized data is empty display content
renderLoading (loading: ReactNode) => ReactNode Customize the display content in the data load
renderRow (children?: ReactNode, rowData?: RowDataType) => ReactNode Custom row element
renderRowExpanded (rowDate?: Object) => ReactNode Customize what you can do to expand a zone
renderTreeToggle (icon:node, rowData:object, expanded:boolean) => ReactNode Tree table, the callback function in the expanded node
rowClassName string | (rowData:object) => string Add an optional extra class name to row
rowExpandedHeight number (100) Set the height of an expandable area
rowHeight (rowData:object) => number, number(46) Row height
rowKey string ('key') Each row corresponds to the unique key in data
shouldUpdateScroll boolean | (event)=>({x,y}) (true) Use the return value of shouldUpdateScroll to determine whether to update the scroll after the table size is updated
showHeader boolean (true) Display header
sortColumn string Sort column name
sortType 'desc' | 'asc' Sort type (Controlled)
virtualized boolean Effectively render large tabular data
width number Table width
wordWrap boolean | 'break-all' | 'break-word' | 'keep-all' Whether to appear line breaks where text overflows its content box

Table methods

  • scrollTop

The vertical scroll bar scrolls to the specified position

scrollTop: (top: number) => void;
  • scrollLeft

The horizontal scroll bar scrolls to the specified position

scrollLeft: (left: number) => void;

<Table.Column>

Property Type (Default) Description
align 'left' | 'center' | 'right' Alignment
colSpan number Merges column cells to merge when the dataKey value for the merged column is null or undefined.
fixed boolean | 'left' | 'right' Fixed column
flexGrow number Set the column width automatically adjusts, when set flexGrow cannot set resizable and width property
minWidth number(200) When you use flexGrow, you can set a minimum width by minwidth
onResize (columnWidth?: number, dataKey?: string) => void Callback after column width change
resizable boolean Customizable Resize Column width
rowSpan (rowData: any) => number Merges rows on the specified column.
sortable boolean Sortable
treeCol boolean A column of a tree.
verticalAlign 'top' | 'middle' | 'bottom' Vertical alignment
width number Column width

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>

Property Type (Default) Description
align 'left' | 'center' | 'right' Alignment
fixed boolean, 'left', 'right' Fixed column group
groupHeaderHeight number The height of the header of the merged cell group. The default value is 50% of the table headerHeight
header ReactNode Group header
verticalAlign 'top' | 'middle' | 'bottom' Vertical alignment

<Table.HeaderCell>

Property Type (Default) Description
children ReactNode The table column header displays the content
renderSortIcon (sortType?: 'desc' | 'asc' ) => ReactNode Custom render sort icons on column headers

<Table.Cell>

Property Type (Default) Description
dataKey string Data binding key, but also a sort of key
rowData object Row data
rowIndex number Row number
Vercel banner