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
Sydnee
Bode
Female
36
03960
Elenora10@hotmail.com
2
Madie
Flatley
Female
44
48037
Kelsi.DAmore50@hotmail.com
3
Deon
Bernhard
Female
39
20708
Ceasar7@gmail.com
4
Charlie
Emard
Male
33
06800
Pinkie52@gmail.com
5
Jessy
Donnelly
Male
41
58361
Jarrod_Greenfelder72@yahoo.com
6
Schuyler
Parker
Male
38
68096-8758
Jerome.Jacobs24@yahoo.com
7
Bruce
Willms
Male
22
79441
Kylie43@yahoo.com
8
Tyson
Kertzmann
Female
26
26064-4437
Melody.Harber2@hotmail.com
9
Hubert
Bernhard
Male
46
55104
Broderick_Thiel@gmail.com
10
Darion
Tillman
Female
47
69128
Mathias48@gmail.com
11
Brennan
Ferry
Female
22
57178-3764
Alexie_Rath@hotmail.com
12
Cyrus
Adams
Male
46
12284
Kyle.Keeling22@gmail.com
13
Myah
Skiles
Female
36
67882
Michael_Gulgowski@gmail.com
14
Andreanne
Hirthe
Male
41
92504
Cristian52@gmail.com
15
Joel
Hahn
Female
39
80550
Austen97@gmail.com
16
Eugene
Runolfsson
Male
26
00741
Percy75@hotmail.com
17
Hassie
Weimann
Male
31
70817
Elmore44@yahoo.com
18
Lamar
Schaden
Female
31
24240-9408
Jaquelin45@gmail.com
19
Bertrand
Hahn
Male
42
01539-3371
Sven8@hotmail.com
20
Aiyana
White
Male
36
67902
Neal_Smith@yahoo.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
Carley
Luettgen
Female
Mayertport
2
Ransom
Mayer
Female
Sallyfort
3
Anne
Jaskolski
Male
Kutchmouth
4
Kennedy
Pouros
Female
Norfolk
5
Kenya
Goodwin
Female
Farmington Hills
6
Devan
Jaskolski
Female
West Myrtle
7
Andreanne
Steuber
Female
Port Jovani
8
Tyrel
Buckridge
Male
Pasadena
9
Wanda
Rice
Male
Hegmanntown
10
Alf
Baumbach
Female
Port Anibal
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
Bertrand
Zieme
Male
28
South Danniemouth
Louvenia85@yahoo.com
2
Jerome
Mayer
Male
36
Minervamouth
Joanne51@gmail.com
3
Ethel
Reynolds
Female
31
Spencerland
Ana.Hoppe@hotmail.com
4
Jovanny
Wiegand
Female
42
West Magnus
Hunter_Champlin13@hotmail.com
5
Danielle
Farrell
Male
25
Port Carmelberg
Alejandra0@hotmail.com
6
Pierre
Ernser
Female
21
Lake Kellenboro
Adan.Hilpert@hotmail.com
7
Santa
Adams
Female
43
West Mercedes
Lincoln.McClure31@hotmail.com
8
Lazaro
Simonis
Male
40
Kenner
Bethel20@yahoo.com
9
Carley
Baumbach
Female
19
Riverview
Danyka_Mayer@yahoo.com
10
Audreanne
Runolfsson
Male
43
Glendora
Domenic56@hotmail.com
11
Donnie
Oberbrunner
Female
36
Fort Faefurt
Kenna31@gmail.com
12
Pedro
Johns
Male
34
Lauriannebury
Casimir_Hamill61@yahoo.com
13
Dahlia
Brown
Male
42
Sporerfort
Mylene6@yahoo.com
Loading...

Custom Cell

Avartar
Name
Skill Proficiency
Rating
Income
⭐️⭐️
$79287.41
⭐️⭐️
$84964.31
⭐️⭐️⭐️⭐️
$87221.58
⭐️⭐️⭐️⭐️
$48175.63
⭐️⭐️⭐️
$16444.06
⭐️⭐️⭐️⭐️
$11350.40
⭐️⭐️⭐️
$20526.35
⭐️⭐️⭐️
$46545.01
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
Elza
Schroeder
Kettering
Jerrod16@yahoo.com
2
Alexane
Larkin
Evansville
Alec_Grady@hotmail.com
3
Garry
Cruickshank
Meghanstead
Zack35@hotmail.com
4
Dejuan
Kreiger
East Margaretta
Robbie94@gmail.com
5
Wallace
Erdman
West Hollis
Jeanne_Willms29@gmail.com
6
Elmer
D'Amore
Lakeland
Henry83@gmail.com
7
Camren
Nitzsche
Karashire
Renee.Dickinson@hotmail.com
8
Camryn
Luettgen
Gutkowskimouth
Tyrese_Becker36@hotmail.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
Marjolaine Metz
Sporerberg
Peyton.Jenkins53@hotmail.com
2
Melyssa Barrows
Emmanuellecester
Orlo_Bednar14@gmail.com
3
Scottie McKenzie DDS
Lake Marvin
Max.Effertz@yahoo.com
4
Jose Lindgren
East Carleton
Lolita.Moore95@gmail.com
5
Providenci Tromp
Gastonia
Molly.Russel80@yahoo.com
6
Shyann Hessel
Baileyburgh
Saul.Hamill@gmail.com
7
Adelbert Adams
Fond du Lac
Forrest.Homenick93@hotmail.com
8
Augustus Corkery
South Idell
Lelah97@yahoo.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
Dorcas Reichert
Male
20
Gordon_Nicolas84@hotmail.com
2
Celestine Leannon
Female
40
Angie.Stark57@hotmail.com
3
Jakayla Russel I
Male
21
Maude85@hotmail.com
4
Dariana Huel
Male
18
Onie_Satterfield65@hotmail.com
5
Koby Jakubowski
Male
29
Reagan75@yahoo.com
6
Amina Lubowitz
Male
46
Burnice.Bradtke88@yahoo.com
7
Franco Dare
Female
23
Sebastian_Miller@yahoo.com
8
Emmie Murray III
Male
32
Norwood_Dach77@hotmail.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
Claudie
Bartell
West Hassanstad
Fidel_Kutch25@hotmail.com
2
Rosa
Hickle
Fort Percychester
Maud.West@yahoo.com
3
Osvaldo
Grady
Friedaview
Justice12@hotmail.com
4
Cordelia
Erdman
Evansville
Edd.Rodriguez54@yahoo.com
5
Reanna
Littel
Franeckiton
Rosa.Doyle12@hotmail.com
6
Alden
Mueller
Averyside
Coty_Hoeger@gmail.com
7
Cheyenne
Doyle
Elyssaworth
Finn_Haag84@gmail.com
8
Brandyn
Kuhic
Goyettetown
Irma.Leffler@hotmail.com
9
Buddy
Shanahan
Oceanside
Christina_Mosciski13@yahoo.com
10
Hal
Corkery
Nampa
Noble.Ratke96@gmail.com
Loading...
Total Rows: 100
Go to

Tree

Vehicle 🚗
Rating ⭐️
Price 💰
Volvo
⭐️⭐️⭐️
$130018
Electric
⭐️⭐️⭐️⭐️
$755698
Mazda Model T
⭐️⭐️
$114564
Mini Alpine
⭐️⭐️⭐️⭐️
$115198
Maserati Civic
⭐️⭐️⭐️⭐️
$898591
Electric
⭐️⭐️⭐️⭐️
$424687
Dodge Fortwo
⭐️⭐️⭐️
$66428
Nissan El Camino
⭐️⭐️⭐️
$712656
Polestar Altima
⭐️⭐️⭐️
$586538
Gasoline
⭐️⭐️
$855218
Ford XTS
⭐️⭐️
$409315
BMW Model S
⭐️⭐️⭐️
$743526
Volkswagen XC90
⭐️⭐️⭐️
$290976
Volkswagen
⭐️⭐️⭐️
$215225
Diesel
⭐️⭐️⭐️
$651284
Jeep Wrangler
⭐️⭐️
$156723
Volkswagen Escalade
⭐️⭐️
$218051
Toyota Malibu
⭐️⭐️⭐️⭐️
$548727
Gasoline
⭐️⭐️⭐️⭐️
$32251
Honda Roadster
⭐️⭐️⭐️
$208837
BMW Wrangler
⭐️⭐️⭐️
$68544
Cadillac Cruze
⭐️⭐️⭐️⭐️
$652282
Gasoline
⭐️⭐️
$784629
Volkswagen Altima
⭐️⭐️⭐️⭐️
$145806
Dodge Grand Caravan
⭐️⭐️
$634100
Smart Spyder
⭐️⭐️
$526725
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
Adell
Fahey
Female
44
Emeryhaven
Hertha
Bashirian
Female
46
East Stanford
Lucius
Wisoky
Male
21
East Kevon
Reba
Lind
Female
42
Fort Lennymouth
Kurtis
Kessler
Female
27
Port Janiyaton
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
...
Tina
Ondricka
Robert96@hotmail.com
Fred
Hamill
Yasmeen18@hotmail.com
Kurt
Mayer
Alberto_Reilly@yahoo.com
Faustino
Funk
Ben27@gmail.com
Annie
Bogisich
Aubree51@yahoo.com
Warren
Paucek
Alexzander_Kunde42@hotmail.com
Mario
Stracke
Cleta.Huels46@yahoo.com
Jeffry
Kunze
Alanis.Reichert71@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
19,615
24,914
Elisha Williamson
234
266
Dr. Tomas Lehner
4,367
6,920
Vincent VonRueden
6,460
2,457
Miss Natasha Lubowitz
674
8,728
Katelyn Kiehn
7,880
6,543
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
Etha
Swaniawski
Marisolview
Female
27
60331-6949
Piper_Tillman@yahoo.com
2
Lavina
Dach
West Katlynnmouth
Male
26
16117
Bertrand49@hotmail.com
3
Tobin
Wilkinson
Salmaville
Female
18
77983-7989
Maximus18@gmail.com
4
Neha
Hoeger
Brookehaven
Female
31
10867
Erika.Gusikowski@hotmail.com
5
Elnora
O'Conner
Milford
Male
25
99148-2513
Garrison.Effertz23@hotmail.com
6
Elisabeth
Bosco
Washington
Female
40
53077
Ava.Gulgowski72@gmail.com
7
Brandon
Kris
Satterfieldmouth
Male
28
04718
Bradley.Tremblay@hotmail.com
8
Elisabeth
Hills
Fort Kasey
Male
28
64161
Clay32@hotmail.com
9
Clinton
Fadel
Fort Dorianborough
Male
40
34948
Rusty.Christiansen87@hotmail.com
10
Carolina
Bernhard
Hunterhaven
Male
35
16750
Antonio.Schuster3@yahoo.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