The standard NerdWallet table.
Variants
Basic Example
Fixed Columns
Development
import Table from '@nerdwallet/react-table';<Table columns={[ { id: 'label', heading: 'Label', }, ]} data={[ { key: 'data', label: 'Data', }, { key: 'data', label: 'Data', }, ]}/>;Props
<Table>
className
string
Classes to apply to the <table> component.
Default
null
columns
Array<Object>
Columns configuration - based on https://www.npmjs.com/package/rc-table.
Array<{/**
Unique ID to be referenced as a prop in row data.
*/
id: string Required/**
Heading to appear in the column's <th>.
*/
heading: node/**
Explicit width for the column. Only supported for Table.
*/
width: number | string/**
Explicit minimum width for the column. Only supported for in Table Simple
*/
minWidth: number | string/**
Left-affix the column for responsive behavior. This is supported for multiple columns, however they must be adjacent.
*/
fixed: bool/**
Classes to apply to all cells in the column.
*/
className: string/**
colSpan value for this cell in the header row
*/
colSpan: number/**
how to align all cells in this column
*/
align: "center" | "left" | "right"data
Array<Object>
Rows configuration - based on https://www.npmjs.com/package/rc-table.
Array<{/**
Unique ID to use for a row's React key.
*/
key: string/**
Classes to apply to all cells in the row.
*/
className: string/**
Object that defines colSpan values for column ids Eg: { myColumnId: 3, myOtherColumnId: 2 }
*/
colSpans: {/**
how to align all cells in this row
*/
align: "center" | "left" | "right"hasTableHeader
boolean
Renders table header row
Default
true
rowHover
boolean
Hover highlighting on rows
Default
false
striped
boolean
Alternate background color for every other row.
Default
true