The standard NerdWallet table.

Usage

The interface for this component is based loosely on https://www.npmjs.com/package/rc-table. The two primary props are columns (controls table header and columns) and data (controls rows).

import Table from '@nerdwallet/react-table';
const columns = {[
{
id: 'name',
heading: 'Name',
width: 200,
fixed: true,
rowHeader: true,
},
{
id: 'age',
heading: 'Age',
},
]}
const data = {[
{
key: 'harry-potter',
name: 'Harry Potter',
age: 29,
},
{
key: 'yoda'
name: 'Yoda',
age: <marquee>? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?</marquee>,
},
]};
<Table columns={columns} data={data}/>

Loading examples...

Supported Props

{
columns: [{
id, // Unique identifier used as a reference when outputting cells.
heading, // Heading to be rendered in the <th>.
width, // Fixed width for column.
fixed, // Affix the column to the left (for responsive, horizontal scrolling).
rowHeader, // Define a row header (applies <th scope="row">).
className, // Classes applied to all cells in the column.
}],
data: [{
// Props correlating with column id's. For example:
firstName: 'Foo bar',
lastName: <div>JSX works too</div>,
key, // React key applied to the row.
className, // Classes applied to all cells in the row.
}],
striped, // Whether or not to add a background color to alternating rows (default: true).
className, // Classes to apply to the base table.
}

Maintainers

This component was created by Mickey Kay.

See Also