Table

Status: Stable

Latest released: 2018

Current version: v1.7.1

Storybook
GitHub

The standard NerdWallet table.

Variants

Basic Example

LabelLabelLabelLabel
DataDataDataData
DataDataDataData

Fixed Columns

LabelLabelLabelLabel
DataDataDataData
DataDataDataData
LabelLabelLabelLabel
DataDataDataData
DataDataDataData

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>

Required

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>

Required

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: {
[key]: number
}

/**

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