Skip to content

Table

Status: Stable

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

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

Deprecated
Classes to apply to the <table> component.
@deprecated

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.

@deprecated

*/

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.

@deprecated

*/

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.