Skip to content

Table

Display tabular data in row format, built with React Table. Some examples use the following variables for brevity:

const columns = [
  {
    Header: 'First Name',
    accessor: 'first'
  },
  {
    Header: 'Last Name',
    accessor: 'last'
  },
  {
    Header: 'Email',
    accessor: 'email'
  }
]

const data = [
  {
    first: 'John',
    last: 'Doe',
    email: 'john@doe.com'
  },
  {
    first: 'Dorothy',
    last: 'Boe',
    email: 'dorothy@boe.com'
  },
  {
    first: 'Baby',
    last: 'Moe',
    email: 'baby@moe.com'
  }
]

Default

Always provide a caption. Columns and data must be memoized.

A basic table.
First Name
Last Name
Email
JohnDoejohn@doe.com
DorothyBoedorothy@boe.com
BabyMoebaby@moe.com
Code Editor

Placeholder

A table with placeholder rows.
First Name
Last Name
Email
Code Editor

Empty

Use the same number of placeholder rows used while loading to avoid layout shift.

An empty table.
First Name
Last Name
Email
No rows to display. Import a project?
Code Editor

Column Align

Set the align property to change text alignment. Left by default.

A table with right and left aligned columns.
First Name
Last Name
Email
JohnDoejohn@doe.com
DorothyBoedorothy@boe.com
BabyMoebaby@moe.com
Code Editor

Overflow

Pass a number to change the minimum width of the table. Disable with a falsy value.

A table with minimum with of 1000px.
First Name
Last Name
Email
JohnDoejohn@doe.com
DorothyBoedorothy@boe.com
BabyMoebaby@moe.com
Code Editor

Column Class

Passing columnClassName applies the class to all headers and cells of the column.

A basic table with columnClassName applied to the second column.
First Name
Last Name
Email
JohnDoejohn@doe.com
DorothyBoedorothy@boe.com
BabyMoebaby@moe.com
Code Editor

Fixed Layout

Ensures column widths are stable, regardless of cell contents.

A table with fixed layout.
First Name
Last Name
Email
JohnDoejohn@doe.com
DorothyBoedorothy@boe.com
BabyMoebaby@moe.com
Code Editor

Fixed Column Widths

Manually set a column width.

A table with fixed column widths.
First Name
Last Name
Email
governmentyakant
feelingthoughtsponge
ticketgrowthinspector
Code Editor

Fixed Column Widths and Cell Overflow

Long cell values will wrap within the cell.

A table with data that is really long and fixed.
First Name
Last Name
Email
Hubert BlaineWolfeschlegelsteinhausenbergerdorffjohn@wolfeschlegelsteinhausenbergerdorff.com
TarquinFin-tim-lin-bin-whin-bim-lim-bus-stop-F’tang-F’tang-Olé-Biscuitbarreltarquin@Fin-tim-lin-bin-whin-bim-lim-bus-stop-F’tang-F’tang-Olé-Biscuitbarrel.com
Pablo Diego José Francisco de Paula Juan NepomucenoMaría de los Remedios Cipriano de la Santísima Trinidad Ruiz y Picassosuperlongemailaddress010100100101010101001@email.com
ThisIsASuperLongSingleWordThatShouldBeHandledThisIsAnotherSuperLongSingleWordThatShouldBeHandledthisIsAnotherSuperLongSingleWordThatShouldBeHandled@email.com
Code Editor

No Header

Columns are still required, fixed widths are respected.

A table without a table header.
First Name
Last Name
Email
JohnDoejohn@doe.com
DorothyBoedorothy@boe.com
BabyMoebaby@moe.com
Code Editor

Ellipsis

Enabled per column, long cell values are automatically truncated. Requires fixed layout.

A table that truncates long cells.
Column One
Column Two
Column Three
Column Four
jumbled-perspective-protest-achieveshrill-profit-digestion-carethoughtful-toe-box-reignlocal-cabinet-dress-inject
unequal-record-car-tapglorious-blood-haircut-offerunderstood-crayon-house-calculateelegant-difficulty-hose-bleed
black-stitch-depression-shrinkmellow-analysis-smash-instituteoldfashioned-fishing-bomb-naildisturbed-shopping-boot-consist
pink-smile-negotiation-actedabiding-ladybug-fact-proofreadmarvelous-produce-pain-banunequaled-brake-breath-stimulate
beautiful-estate-thrill-rinselast-car-process-keptgray-distance-elevator-demonstratedescriptive-bonus-oatmeal-travel
Code Editor

Sticky Header

Specify a number to change the offset from 0.

A table with a sticky header.
First Name
Last Name
Email
JohnDoejohn@doe.com
DorothyBoedorothy@boe.com
BabyMoebaby@moe.com
JohnDoejohn@doe.com
DorothyBoedorothy@boe.com
BabyMoebaby@moe.com
JohnDoejohn@doe.com
DorothyBoedorothy@boe.com
BabyMoebaby@moe.com
Code Editor

Sortable rows

Hold shift to sort by multiple columns. Columns can disable sorting.

A table with sortable columns.
First Name
Last Name
Email
goaldetaillibrary
youthlovepush
supportpagetoad
Code Editor

Custom sorted column

Sort function must be memoized. Sorts alphanumerically by default.

A table with sortable columns.
First Name
Last Name
Age
JohnDoe36
DorothyBoe45
BabyMoe2
Code Editor

Selectable rows

Hold shift to toggle many rows.

A table with selectable rows.
First Name
Last Name
Email
dogsecuritydetail
gradelovemember
improvementuserbells
LOAD MORE
Code Editor

Disabled selection rows

Disable items in rowActions for disabled rows as needed.

A table with selectable and disabled rows.
First Name
Last Name
Email
JohnDoejohn@doe.com
brushgroupjoke
lakedepressionwaste
climatechincattle
LOAD MORE
Code Editor

Filtered rows

Filter rows that already displayed. This is not used for server-side search. Common filter function like useTextFilter are provided.

A table with a search filter.
First Name
Last Name
Email
wavechessbulb
brainideacurve
bitemployerpower
Code Editor

Expandable rows

Only specify the first property to render full width content.

A table with expandable rows.
Item
Count
Unit Price
Price
Preview Deployment Suffix1$100$100
Additional Items
More Details
Code Editor

Custom Filters

Filters should be memoized, and are applied sequentially.

A table with a search filter and selectable rows.
Project
URL
Deployed
Blogvercel.com/blog23h ago
Homevercel.com7d ago
Design Systemvercel.com/design30m ago
Homevercel.com14d ago
Code Editor