Table

Status: Stable

Latest released: 2018

Current version: v1.9.1

The standard NerdWallet table.

Variants

Default

Column 1	Column 2	Column 3
Data	Data	Data
Data	Data	Data

Open in Playroom

<Table
  columns={[
    {
      id: 'column1',
      heading: 'Column 1',
    },
    {
      id: 'column2',
      heading: 'Column 2',
    },
    {
      id: 'column3',
      heading: 'Column 3',
    },
  ]}
  data={[
    {
      key: 'data1',
      column1: 'Data',
      column2: 'Data',
      column3: 'Data',
    },
    {
      key: 'data2',
      column1: 'Data',
      column2: 'Data',
      column3: 'Data',
    },
  ]}
/>

Fixed Column

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

Open in Playroom

<Table
  columns={[
    {
      id: 'column1',
      heading: 'Column 1',
      fixed: true,
    },
    {
      id: 'column2',
      heading: 'Column 2',
    },
    {
      id: 'column3',
      heading: 'Column 3',
    },
    {
      id: 'column4',
      heading: 'Column 4',
    },
    {
      id: 'column5',
      heading: 'Column 5',
    },
    {
      id: 'column6',
      heading: 'Column 6',
    },
    {
      id: 'column7',
      heading: 'Column 7',
    },
    {
      id: 'column8',
      heading: 'Column 8',
    },
  ]}
  data={[
    {
      key: 'data1',
      column1: 'Data',
      column2: 'Data',
      column3: 'Data',
      column4: 'Data',
      column5: 'Data',
      column6: 'Data',
      column7: 'Data',
      column8: 'Data',
    },
    {
      key: 'data2',
      column1: 'Data',
      column2: 'Data',
      column3: 'Data',
      column4: 'Data',
      column5: 'Data',
      column6: 'Data',
      column7: 'Data',
      column8: 'Data',
    },
  ]}
/>

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.