Table
A responsive table component.
Default
PreviewCode
Action
PreviewCode
Hide
PreviewCode
Styles
PreviewCode
Usage
rowStyle
Grammar
rowStyle = (row, rowIndex, rowParity) => {...}
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.
cellStyle
Grammar
cellStyle = (row, col, rowIndex, colIndex, rowParity, colParity) => {...}
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
Props
Table
Columns
Render