Under maintenanceMVP Verson: 0.9.7 beta
Lang Icon
Toggle Icon
Table
A responsive table component.
Default
PreviewCode
Name
Age
Math Score
English Score
Address
John
32
80
87
New York No. 1 Lake Park
Lucy
42
60
105
London No. 1 Lake Park
Brown
45
75
90
Sydney No. 1 Lake Park
Action
PreviewCode
Name
Age
Math Score
English Score
Address
Action
John
32
80
87
New York No. 1 Lake Park
Lucy
42
60
105
London No. 1 Lake Park
Brown
45
75
90
Sydney No. 1 Lake Park
Hide
PreviewCode
Name
Age
Sex
Math Score
English Score
Address
John
32
male
80
87
New York No. 1 Lake Park
Lucy
42
female
60
105
London No. 1 Lake Park
Brown
45
male
75
90
Sydney No. 1 Lake Park
Styles
PreviewCode
Name
Age
Math Score
English Score
Address
John
32
80
87
New York No. 1 Lake Park
Lucy
42
60
105
London No. 1 Lake Park
Brown
45
75
90
Sydney No. 1 Lake Park
Usage
rowStyle

Grammar

Grammar1: rowStyle = (row, rowIndex, rowParity) => {...}
Grammar2: rowStyle = {{ backgroundColor: "red", color: "white" }}

Example

// example 1 (simple):
<Table
  dataSource={dataSource}
  columns={columns}
  rowStyle={(row, rowIndex, rowParity) =>
    rowParity === "odd" ? { backgroundColor: "#f9f9f9" } : {}
  }
/>

// example 2 (full):
<Table
  dataSource={dataSource}
  columns={columns}
  rowStyle={(row, rowIndex, rowParity) => {
    if (rowIndex === 0) {
      return { fontWeight: "bold" }; // first line bold
    }
    if (row.status === "error") {
      return { backgroundColor: "#ffe6e6" }; // error status lines are marked in red
    }
    if (rowParity === "odd") {
      return { backgroundColor: "#f9f9f9" }; // odd row background color
    }
    return {};
  }}
/>

Use the rowStyle property to adjust the style of the row. If you want to update the precise style of each cell, including the style of each row, or more complex requirements such as zebra crossings, highlighting key columns, etc., then use the more powerful cellStyle property.

Params
Discription
row
The entire row data object where the current cell is located (a record in dataSource)
rowIndex
The index of the current row (starting from 0)
rowParity
The parity status string of the current row, the value is 'even' or 'odd' (calculated internally by rowIndex % 2 in the component)
cellStyle

Grammar

Grammar1: cellStyle = (row, col, rowIndex, colIndex, rowParity, colParity) => {...}
Grammar2: cellStyle = {{ backgroundColor: "red", color: "white" }}

Example

// example 1 (simple):
<Table
  dataSource={dataSource}
  columns={columns}
  cellStyle={(row, col, rowIndex, colIndex, rowParity, colParity) =>
    colParity === "even" ? { color: "blue" } : {}
  }
/>

// example 2 (full):
<Table
  dataSource={dataSource}
  columns={columns}
  cellStyle={(
    row,        // the data object of the current row
    col,        // the configuration object for the current column
    rowIndex,   // current row index
    colIndex,   // current column index
    rowParity,  // the parity of the current row
    colParity   // the parity of the current column
  ) => {
    if (rowIndex === 0) return { fontWeight: "bold" }; // first line bold
    if (colIndex === 0) return { color: "blue" }; // first column text color
    if (rowParity === "odd") return { backgroundColor: "#f9f9f9" }; // odd row background
    if (colParity === "even") return { color: "green" }; // even column text color
    if (row[col.dataIndex] > 100) return { color: "red" }; // greater than 100 marked in red
    return {};
  }}
/>

Using the cellStyle property, you can precisely control the style of each cell, such as setting the background color or font color, and can customize it as needed. cellStyle takes precedence over rowStyle and will override the default style at the rendering level. If you only want to set the style for an entire row, use the rowStyle property.

Suggestion:
   Entire row style: use rowStyle
   Cell style: use cellStyle

Params
Discription
row
The entire row data object where the current cell is located (a record in dataSource)
col
The column definition object corresponding to the current cell (an item in columns, including title, dataIndex, etc.)
rowIndex
The index of the current row (starting from 0)
colIndex
The index of the current column (starting from 0)
rowParity
The parity status string of the current row, the value is 'even' or 'odd' (calculated internally by rowIndex % 2 in the component)
colParity
The parity status string of the current column, the value is 'even' or 'odd' (calculated internally by colIndex % 2 in the component)
Props
Table
Prop
Type
Accepted Values
Description
Default
Verson
dataSource
object[]
-
Data array for table rows
-
-
columns
ColumnsType[]
-
Configuration description of table columns
-
-
tableWrapperClassName
string
-
Custom className for tableWrapper.
0.3.5
tableWapperStyles
object
-
Custom inline styles for tableWrapper.
-
0.3.5
containerClassName
string
-
Custom className for container.
-
0.3.5
containerStyles
object
-
Custom inline styles for container.
-
0.3.5
theadClassName
string
-
Custom className for thead.
-
0.3.5
theadStyles
object
-
Custom inline styles for thead.
-
0.3.5
trClassName
string
-
Custom className for tr inside thead.
-
0.3.5
trStyles
object
-
Custom inline styles for tr inside thead.
-
0.3.5
rowClassName
string
-
Custom className for row.
-
0.3.5
rowStyle
() => void | object
-
Custom inline styles for row.
-
0.3.5
cellClassName
string
-
Custom className for cell.
-
0.3.5
cellStyle
() => void | object
-
Custom inline styles for cell.
-
0.3.5
hoverColor
string
-
Custom style when hover.
#f1f1f1
0.3.5
hide
string[]
-
Custom witch column do you want hide.
-
0.3.5
Columns
Prop
Type
Accepted Values
Description
Default
Verson
title
String
String
col name
-
-
dataIndex
String
String
the data field corresponding to the current column
-
-
key
String | Number
-
the unique identifier when rendering the list, usually written the same as dataIndex
-
-
render
function(value, record, index) {}
-
Render function for generating complex data. Parameters are: current cell value, current row data, and row index
-
-
width
string
-
Custom column width
-
0.3.5
hide
boolean
-
Custom witch column do you want hide
-
0.3.5
Render
Prop
Type
Accepted Values
Description
Default
Verson
text
Undefined
Undefined
the value of the current cell, corresponding to the dataIndex of this column (for example, the value of record[dataIndex]).
{}
render
Object
Object
the data object of the current entire row
-