MVP Verson: 0.4.8 beta
Lang Icon
Toggle Icon
Table
A responsive table component.
Default
PreviewCode
NameAgeMath ScoreEnglish ScoreAddress
John328087New York No. 1 Lake Park
Lucy4260105London No. 1 Lake Park
Brown457590Sydney No. 1 Lake Park
Action
PreviewCode
NameAgeMath ScoreEnglish ScoreAddressAction
John328087New York No. 1 Lake Park
Lucy4260105London No. 1 Lake Park
Brown457590Sydney No. 1 Lake Park
Hide
PreviewCode
NameAgeSexMath ScoreEnglish ScoreAddress
John32male8087New York No. 1 Lake Park
Lucy42female60105London No. 1 Lake Park
Brown45male7590Sydney No. 1 Lake Park
Styles
PreviewCode
NameAgeMath ScoreEnglish ScoreAddress
John328087New York No. 1 Lake Park
Lucy4260105London No. 1 Lake Park
Brown457590Sydney No. 1 Lake Park
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.

ParamsDiscription
rowThe entire row data object where the current cell is located (a record in dataSource)
rowIndexThe index of the current row (starting from 0)
rowParityThe parity status string of the current row, the value is 'even' or 'odd' (calculated internally by rowIndex % 2 in the component)
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

ParamsDiscription
rowThe entire row data object where the current cell is located (a record in dataSource)
colThe column definition object corresponding to the current cell (an item in columns, including title, dataIndex, etc.)
rowIndexThe index of the current row (starting from 0)
colIndexThe index of the current column (starting from 0)
rowParityThe parity status string of the current row, the value is 'even' or 'odd' (calculated internally by rowIndex % 2 in the component)
colParityThe parity status string of the current column, the value is 'even' or 'odd' (calculated internally by colIndex % 2 in the component)
Props
Table
PropTypeAccepted ValuesDescriptionDefaultVerson
dataSourceobject[]-Data array for table rows--
columnsColumnsType[]-Configuration description of table columns--
tableWrapperClassNamestring-Custom className for tableWrapper.0.3.5
tableWapperStylesobject-Custom inline styles for tableWrapper.-0.3.5
containerClassNamestring-Custom className for container.-0.3.5
containerStylesobject-Custom inline styles for container.-0.3.5
theadClassNamestring-Custom className for thead.-0.3.5
theadStylesobject-Custom inline styles for thead.-0.3.5
trClassNamestring-Custom className for tr inside thead.-0.3.5
trStylesobject-Custom inline styles for tr inside thead.-0.3.5
rowClassNamestring-Custom className for row.-0.3.5
rowStyle() => void-Custom inline styles for row.-0.3.5
cellClassNamestring-Custom className for cell.-0.3.5
cellStyle() => void-Custom inline styles for cell.-0.3.5
hoverColorstring-Custom style when hover.#f1f1f10.3.5
hidestring[]-Custom witch column do you want hide.-0.3.5
Columns
PropTypeAccepted ValuesDescriptionDefaultVerson
titleStringStringcol name--
dataIndexStringStringthe data field corresponding to the current column--
keyString | Number-the unique identifier when rendering the list, usually written the same as dataIndex--
renderfunction(value, record, index) {}-Render function for generating complex data. Parameters are: current cell value, current row data, and row index--
widthstring-Custom column width-0.3.5
hideboolean-Custom witch column do you want hide-0.3.5
Render
PropTypeAccepted ValuesDescriptionDefaultVerson
textUndefinedUndefinedthe value of the current cell, corresponding to the dataIndex of this column (for example, the value of record[dataIndex]).{}
renderObjectObjectthe data object of the current entire row-