Skip to content

Table

Status: Stable

Latest released: 2018

Current version: v1.8.1

Storybook
GitHub

The standard NerdWallet table.

Variants

Basic Example

LabelLabelLabelLabel
DataDataDataData
DataDataDataData
Open in Playroom

Fixed Columns

LabelLabelLabelLabel
DataDataDataData
DataDataDataData
Open in Playroom

Development

import Table from '@nerdwallet/react-table';
<Table
  columns={[
    {
      id: 'label',
      heading: 'Label',
    },
  ]}
  data={[
    {
      key: 'data',
      label: 'Data',
    },
    {
      key: 'data',
      label: 'Data',
    },
  ]}
/>;

Props

<Table>

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.