Skip to content

Table

Status: Stable

The standard NerdWallet table.

Examples

Default

Column 1
Column 2
Column 3
DataDataData
DataDataData

Fixed Column

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

Props

<Table>

analytics

{ enabled?: boolean | undefined; }

columns

Required
Array<{
width?: string | number
align?: "center" | "left" | "right"
className?: string
colSpan?: number
fixed?: boolean
heading?: ReactNode
id: string
rowHeader?: boolean
}>

rowHover

boolean

style

Deprecated
CSSProperties

fixedHeader

boolean
Allows the table content to scroll while the header remains fixed (only on Desktop). If `fixedHeader` is present, it will override `fixed:true` from an individual column, preventing horizontal scroll

maxHeight

string | number
The maximum height for the table; use with the `fixedHeader` prop.

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. E.g. "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

data

Required
Array<TableDataItem>

hasTableHeader

boolean

striped

boolean

<TableSimple>

columns

Required
Array<{
minWidth?: string | number
align?: "center" | "left" | "right"
className?: string
colSpan?: number
fixed?: boolean
heading?: ReactNode
id: string
rowHeader?: boolean
}>

rowHover

boolean

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. E.g. "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

data

Required
Array<TableDataItem>

hasTableHeader

boolean

striped

boolean