Skip to content

Table

Status: Stable

Latest released: 2018

Current version: v1.9.1

Storybook
GitHub

The standard NerdWallet table.


Variants

Default

Column 1Column 2Column 3
DataDataData
DataDataData

Fixed Column

Column 1Column 2Column 3Column 4Column 5Column 6Column 7Column 8
DataDataDataDataDataDataDataData
DataDataDataDataDataDataDataData

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

{
enabled: bool
payload: {
elementName: string
sectionName: string
sectionPosition: number
}
}

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>

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

= true

boolean

Renders table header row


rowHover

boolean

Hover highlighting on rows


striped

= true

boolean

Alternate background color for every other row.