The standard NerdWallet table.
Variants
Default
Fixed Column
Development
import Table from '@nerdwallet/react-table';<Table columns={[ { id: 'label', heading: 'Label', }, ]} data={[ { key: 'data', label: 'Data', }, { key: 'data', label: 'Data', }, ]}/>;
Props
<Table>
analytics
Object
The content used by that analytics module and the flag to determine if analytics is sent
aria-label
string
Text to be consumed by assistive technology (like screen readers) to better guide users on the context of what the table is showing. Eg. “Table of Today’s Mortgage Rates”.
aria-labelledby
string
Pass to `aria-labelledby` the unique ID of an existing label for the table. This can be useful if you have a visually existing title element for the table that you would like to associate which prevents assistive technologies from reading the title twice.
className
string
Classes to apply to the <table> component.
columns
Array<Object>
Columns configuration - based on https://www.npmjs.com/package/rc-table.
/**
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.
/**
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
= true
boolean
Renders table header row
rowHover
boolean
Hover highlighting on rows
striped
= true
boolean
Alternate background color for every other row.