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
John	Doe	john@doe.com
Dorothy	Boe	dorothy@boe.com
Baby	Moe	baby@moe.com

Code Editor

<Table
  columns={columns}
  data={data}
  caption="A basic table."
/>

<Table
  columns={columns}
  data={data}
  caption="A basic table."
/>

Placeholder

A table with placeholder rows.
First Name	Last Name	Email

Code Editor

<Table
  columns={columns}
  data={[]}
  caption="A table with placeholder rows."
  defaultRows={3}
  placeholder
/>

<Table
  columns={columns}
  data={[]}
  caption="A table with placeholder rows."
  defaultRows={3}
  placeholder
/>

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

<Table
  columns={columns}
  data={[]}
  caption="An empty table."
  defaultRows={3}
  empty={
    <>
      No rows to display.{' '}
      <Link href="#" type="highlight">
        Import a project?
      </Link>
    </>
  }
/>

<Table
  columns={columns}
  data={[]}
  caption="An empty table."
  defaultRows={3}
  empty={
    <>
      No rows to display.{' '}
      <Link href="#" type="highlight">
        Import a project?
      </Link>
    </>
  }
/>

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
John	Doe	john@doe.com
Dorothy	Boe	dorothy@boe.com
Baby	Moe	baby@moe.com

Code Editor

() => {
  const columns = useMemo(() => [
    {
      Header: 'First Name',
      accessor: 'first'
    },
    {
      Header: 'Last Name',
      accessor: 'last',
      align: 'center'
    },
    {
      Header: 'Email',
      accessor: 'email',
      align: 'right'
    }
  ], [])

  return (
    <Table
      columns={columns}
      data={data}
      caption="A table with right and left aligned columns."
    />
  )
}

() => {
  const columns = useMemo(() => [
    {
      Header: 'First Name',
      accessor: 'first'
    },
    {
      Header: 'Last Name',
      accessor: 'last',
      align: 'center'
    },
    {
      Header: 'Email',
      accessor: 'email',
      align: 'right'
    }
  ], [])
  return (
    <Table
      columns={columns}
      data={data}
      caption="A table with right and left aligned columns."
    />
  )
}

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
John	Doe	john@doe.com
Dorothy	Boe	dorothy@boe.com
Baby	Moe	baby@moe.com

Code Editor

<Table
  columns={columns}
  data={data}
  caption="A table with minimum with of 1000px."
  overflow={1000}
/>

<Table
  columns={columns}
  data={data}
  caption="A table with minimum with of 1000px."
  overflow={1000}
/>

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
John	Doe	john@doe.com
Dorothy	Boe	dorothy@boe.com
Baby	Moe	baby@moe.com

Code Editor

() => {
  const columns = useMemo(() => [
    {
      Header: 'First Name',
      accessor: 'first'
    },
    {
      Header: 'Last Name',
      accessor: 'last',
      columnClassName: 'last-name-col'
    },
    {
      Header: 'Email',
      accessor: 'email'
    }
  ], [])

  return (
    <Table
      columns={columns}
      data={data}
      caption="A basic table with columnClassName applied to the second column."
    />
  )
}

() => {
  const columns = useMemo(() => [
    {
      Header: 'First Name',
      accessor: 'first'
    },
    {
      Header: 'Last Name',
      accessor: 'last',
      columnClassName: 'last-name-col'
    },
    {
      Header: 'Email',
      accessor: 'email'
    }
  ], [])
  return (
    <Table
      columns={columns}
      data={data}
      caption="A basic table with columnClassName applied to the second column."
    />
  )
}

Fixed Layout

Ensures column widths are stable, regardless of cell contents.

A table with fixed layout.
First Name	Last Name	Email
John	Doe	john@doe.com
Dorothy	Boe	dorothy@boe.com
Baby	Moe	baby@moe.com

Code Editor

<Table
  columns={columns}
  data={data}
  caption="A table with fixed layout."
  fixed
/>

<Table
  columns={columns}
  data={data}
  caption="A table with fixed layout."
  fixed
/>

Fixed Column Widths

Manually set a column width.

A table with fixed column widths.
First Name	Last Name	Email
visitor	meaning	smell
potato	rate	application
lettuce	title	cars

Code Editor

() => {
  const columns = useMemo(() => {
    return [
      {
        Header: 'First Name',
        accessor: 'first',
        fixedWidth: 150,
      },
      {
        Header: 'Last Name',
        accessor: 'last',
        fixedWidth: 250
      },
      {
        Header: 'Email',
        accessor: 'email'
      }
    ]
  }, [])

  const data = useMemo(() => generateData(columns, 3), [])

  return (
    <Table
      columns={columns}
      data={data}
      caption="A table with fixed column widths."
      fixed
    />
  )
}

() => {
  const columns = useMemo(() => {
    return [
      {
        Header: 'First Name',
        accessor: 'first',
        fixedWidth: 150,
      },
      {
        Header: 'Last Name',
        accessor: 'last',
        fixedWidth: 250
      },
      {
        Header: 'Email',
        accessor: 'email'
      }
    ]
  }, [])
  const data = useMemo(() => generateData(columns, 3), [])
  return (
    <Table
      columns={columns}
      data={data}
      caption="A table with fixed column widths."
      fixed
    />
  )
}

No Header

Columns are still required, fixed widths are respected.

A table without a table header.
First Name	Last Name	Email
John	Doe	john@doe.com
Dorothy	Boe	dorothy@boe.com
Baby	Moe	baby@moe.com

Code Editor

<Table
  columns={columns}
  data={data}
  caption="A table without a table header."
  header={false}
/>

<Table
  columns={columns}
  data={data}
  caption="A table without a table header."
  header={false}
/>

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
clammy-beef-rail-indicate	bloody-stop-knot-tickle	irate-sense-entry-participate	parallel-protection-peace-measure
unfair-consequence-requirement-consider	tremendous-religion-arithmetic-drown	shaggy-harmony-appointment-part	dear-cannon-confusion-care
petite-direction-company-suppose	scattered-giraffe-governor-dislike	educational-trousers-hobbies-stink	nonchalant-yarn-pen-risk
barbarous-clouds-bottle-collect	unbiased-cub-plough-shape	financial-finger-fish-approach	fluffy-apple-honey-paddle
fast-desire-midnight-arise	flaky-army-floor-trot	suitable-basin-rings-enter	tidy-vegetable-safety-report

Code Editor

() => {
  const columns = useMemo(() => [
    {
      Header: 'Column One',
      accessor: 'one',
      ellipsis: true
    },
    {
      Header: 'Column Two',
      accessor: 'two',
      ellipsis: true
    },
    {
      Header: 'Column Three',
      accessor: 'three'
    },
    {
      Header: 'Column Four',
      accessor: 'four'
    }
  ])

  const data = useMemo(() => generateData(columns, 5, 4), [])

  return (
    <Table
      columns={columns}
      data={data}
      caption="A table that truncates long cells."
      fixed
    />
  )
}

() => {
  const columns = useMemo(() => [
    {
      Header: 'Column One',
      accessor: 'one',
      ellipsis: true
    },
    {
      Header: 'Column Two',
      accessor: 'two',
      ellipsis: true
    },
    {
      Header: 'Column Three',
      accessor: 'three'
    },
    {
      Header: 'Column Four',
      accessor: 'four'
    }
  ])
  const data = useMemo(() => generateData(columns, 5, 4), [])
  return (
    <Table
      columns={columns}
      data={data}
      caption="A table that truncates long cells."
      fixed
    />
  )
}

Specify a number to change the offset from 0.

A table with a sticky header.
First Name	Last Name	Email
John	Doe	john@doe.com
Dorothy	Boe	dorothy@boe.com
Baby	Moe	baby@moe.com
John	Doe	john@doe.com
Dorothy	Boe	dorothy@boe.com
Baby	Moe	baby@moe.com
John	Doe	john@doe.com
Dorothy	Boe	dorothy@boe.com
Baby	Moe	baby@moe.com

Code Editor

<Table
  columns={columns}
  data={[...data, ...data, ...data]}
  caption="A table with a sticky header."
  sticky
/>

<Table
  columns={columns}
  data={[...data, ...data, ...data]}
  caption="A table with a sticky header."
  sticky
/>

Sortable rows

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

A table with sortable columns.
First Name	Last Name	Email
leadership	reputation	wax
height	player	government
location	bubble	historian

Code Editor

() => {
  const columns = useMemo(() => [
    {
      Header: 'First Name',
      accessor: 'first'
    },
    {
      Header: 'Last Name',
      accessor: 'last'
    },
    {
      Header: 'Email',
      accessor: 'email',
      disableSortBy: true
    }
  ], [])

  const data = useMemo(() => generateData(columns, 3), [])

  return (
    <Table
      columns={columns}
      data={data}
      caption="A table with sortable columns."
      sortable
    />
  )
}

() => {
  const columns = useMemo(() => [
    {
      Header: 'First Name',
      accessor: 'first'
    },
    {
      Header: 'Last Name',
      accessor: 'last'
    },
    {
      Header: 'Email',
      accessor: 'email',
      disableSortBy: true
    }
  ], [])
  const data = useMemo(() => generateData(columns, 3), [])
  return (
    <Table
      columns={columns}
      data={data}
      caption="A table with sortable columns."
      sortable
    />
  )
}

Custom sorted column

Sort function must be memoized. Sorts alphanumerically by default.

A table with sortable columns.
First Name	Last Name	Age
John	Doe	36
Dorothy	Boe	45
Baby	Moe	2

Code Editor

() => {
  const sortAge = useCallback((rowA, rowB, colId, isDesc) => {
    const a = rowA.values[colId]
    const b = rowB.values[colId]

    return a === b ? 0 : a > b ? 1 : -1
  }, [])

  const columns = useMemo(() => [
    {
      Header: 'First Name',
      accessor: 'first'
    },
    {
      Header: 'Last Name',
      accessor: 'last'
    },
    {
      Header: 'Age',
      accessor: 'age',
      sortType: sortAge
    }
  ], [])

  const data = useMemo(() => [
    {
      first: 'John',
      last: 'Doe',
      age: 36
    },
    {
      first: 'Dorothy',
      last: 'Boe',
      age: 45
    },
    {
      first: 'Baby',
      last: 'Moe',
      age: 2
    }
  ], [])

  return (
    <Table
      columns={columns}
      data={data}
      caption="A table with sortable columns."
      sortable
    />
  )
}

() => {
  const sortAge = useCallback((rowA, rowB, colId, isDesc) => {
    const a = rowA.values[colId]
    const b = rowB.values[colId]
    return a === b ? 0 : a > b ? 1 : -1
  }, [])
  const columns = useMemo(() => [
    {
      Header: 'First Name',
      accessor: 'first'
    },
    {
      Header: 'Last Name',
      accessor: 'last'
    },
    {
      Header: 'Age',
      accessor: 'age',
      sortType: sortAge
    }
  ], [])
  const data = useMemo(() => [
    {
      first: 'John',
      last: 'Doe',
      age: 36
    },
    {
      first: 'Dorothy',
      last: 'Boe',
      age: 45
    },
    {
      first: 'Baby',
      last: 'Moe',
      age: 2
    }
  ], [])
  return (
    <Table
      columns={columns}
      data={data}
      caption="A table with sortable columns."
      sortable
    />
  )
}

Selectable rows

Hold shift to toggle many rows.

A table with selectable rows.
First Name	Last Name	Email
jeans	steel	resolution
organization	quarter	beds
watch	surgery	politics

Code Editor

() => {
  const [data, setData] = useState(generateData(columns, 3))

  return (
    <>
      <Table
        columns={columns}
        data={data}
        caption="A table with selectable rows."
        defaultRows={3}
        selectable
        headerActions={headerActions}
        rowActions={rowActions}
      />
      <LoadMore
        onClick={() => {
          setData([...data, ...generateData(columns, 3)])
        }}
      />
    </>
  )
}

() => {
  const [data, setData] = useState(generateData(columns, 3))
  return (
    <>
      <Table
        columns={columns}
        data={data}
        caption="A table with selectable rows."
        defaultRows={3}
        selectable
        headerActions={headerActions}
        rowActions={rowActions}
      />
      <LoadMore
        onClick={() => {
          setData([...data, ...generateData(columns, 3)])
        }}
      />
    </>
  )
}

Disabled selection rows

Disable items in rowActions for disabled rows as needed.

A table with selectable and disabled rows.
First Name	Last Name	Email
John	Doe	john@doe.com
cork	box	reputation
lace	mountain	rain
eyes	grain	farm

Code Editor

() => {
  const initialRow = useMemo(() => ({
    id: 'disabled-row',
    first: 'John',
    last: 'Doe',
    email: 'john@doe.com',
    disableSelection: true
  }), [])

  const [data, setData] = useState([initialRow, ...generateData(columns, 3)])

  return (
    <>
      <Table
        columns={columns}
        data={data}
        caption="A table with selectable and disabled rows."
        defaultRows={3}
        selectable
        headerActions={headerActions}
        rowActions={rowActions}
      />
      <LoadMore
        onClick={() => {
          setData([...data, ...generateData(columns, 3)])
        }}
      />
    </>
  )
}

() => {
  const initialRow = useMemo(() => ({
    id: 'disabled-row',
    first: 'John',
    last: 'Doe',
    email: 'john@doe.com',
    disableSelection: true
  }), [])
  const [data, setData] = useState([initialRow, ...generateData(columns, 3)])
  return (
    <>
      <Table
        columns={columns}
        data={data}
        caption="A table with selectable and disabled rows."
        defaultRows={3}
        selectable
        headerActions={headerActions}
        rowActions={rowActions}
      />
      <LoadMore
        onClick={() => {
          setData([...data, ...generateData(columns, 3)])
        }}
      />
    </>
  )
}

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
knowledge	product	law
duck	measurement	brick
mitten	customer	worm

Code Editor

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

  const data = useMemo(() => generateData(columns, 3), [])
  const [search, setSearch] = useState('')

  return (
    <Table
      columns={columns}
      data={data}
      caption="A table with a search filter."
      defaultRows={3}
      filters={[[useTextFilter, search]]}
    >
      <SearchInput value={search} onChange={e => setSearch(e.target.value)} size="small" />
    </Table>
  )
}

() => {
  const columns = useMemo(() => [
    {
      Header: 'First Name',
      accessor: 'first'
    },
    {
      Header: 'Last Name',
      accessor: 'last'
    },
    {
      Header: 'Email',
      accessor: 'email'
    }
  ], [])
  const data = useMemo(() => generateData(columns, 3), [])
  const [search, setSearch] = useState('')
  return (
    <Table
      columns={columns}
      data={data}
      caption="A table with a search filter."
      defaultRows={3}
      filters={[[useTextFilter, search]]}
    >
      <SearchInput value={search} onChange={e => setSearch(e.target.value)} size="small" />
    </Table>
  )
}

Expandable rows

Only specify the first property to render full width content.

A table with expandable rows.
Item	Count	Unit Price	Price
Preview Deployment Suffix	1	$100	$100
Additional Items
More Details

Code Editor

() => {
  const columns = useMemo(
    () => [
      {
        Header: 'Item',
        accessor: 'item',
        expandable: true,
        fixedWidth: 300
      },
      {
        Header: 'Count',
        accessor: 'count'
      },
      {
        Header: 'Unit Price',
        accessor: 'unit',
        Cell: ({ value }) => {
          if (!value) return ''
          return '$' + value
        }
      },
      {
        Header: 'Price',
        accessor: 'price',
        Cell: ({ value }) => {
          if (!value) return ''
          return '$' + value
        }
      }
    ],
    []
  )

  const data = useMemo(
    () => [
      {
        item: 'Preview Deployment Suffix',
        count: '1',
        unit: '100',
        price: '100'
      },
      {
        item: 'Additional Items',
        subRows: [
          {
            item: 'Password Protection',
            count: '1',
            unit: '100',
            price: '100'
          },
          {
            item: 'Team Seats',
            count: '5',
            unit: '20',
            price: '100'
          }
        ]
      },
      {
        item: 'More Details',
        subRows: [
          {
            item: 'Full width column text can go here.'
          }
        ]
      }
    ],
    []
  )

  return (
    <Table
      columns={columns}
      data={data}
      caption="A table with expandable rows."
      defaultRows={3}
    />
  )
}

() => {
  const columns = useMemo(
    () => [
      {
        Header: 'Item',
        accessor: 'item',
        expandable: true,
        fixedWidth: 300
      },
      {
        Header: 'Count',
        accessor: 'count'
      },
      {
        Header: 'Unit Price',
        accessor: 'unit',
        Cell: ({ value }) => {
          if (!value) return ''
          return '$' + value
        }
      },
      {
        Header: 'Price',
        accessor: 'price',
        Cell: ({ value }) => {
          if (!value) return ''
          return '$' + value
        }
      }
    ],
    []
  )
  const data = useMemo(
    () => [
      {
        item: 'Preview Deployment Suffix',
        count: '1',
        unit: '100',
        price: '100'
      },
      {
        item: 'Additional Items',
        subRows: [
          {
            item: 'Password Protection',
            count: '1',
            unit: '100',
            price: '100'
          },
          {
            item: 'Team Seats',
            count: '5',
            unit: '20',
            price: '100'
          }
        ]
      },
      {
        item: 'More Details',
        subRows: [
          {
            item: 'Full width column text can go here.'
          }
        ]
      }
    ],
    []
  )
  return (
    <Table
      columns={columns}
      data={data}
      caption="A table with expandable rows."
      defaultRows={3}
    />
  )
}

Custom Filters

Filters should be memoized, and are applied sequentially.

A table with a search filter and selectable rows.
Project	URL	Deployed
Blog	vercel.com/blog	23h ago
Home	vercel.com	7d ago
Design System	vercel.com/design	30m ago
Home	vercel.com	14d ago

Code Editor

() => {
  const columns = useMemo(
    () => [
      {
        Header: 'Project',
        accessor: 'project'
      },
      {
        Header: 'URL',
        accessor: 'url'
      },
      {
        Header: 'Deployed',
        accessor: 'deployed',
        Cell: ({ value }) => {
          return ms(Date.now() - value) + ' ago'
        }
      }
    ],
    []
  )

  const data = useMemo(
    () => [
      {
        project: 'Blog',
        url: 'vercel.com/blog',
        deployed: Date.now() - ms('23 hours'),
        id: 'blog'
      },
      {
        project: 'Home',
        url: 'vercel.com',
        deployed: Date.now() - ms('1 week'),
        id: 'home'
      },
      {
        project: 'Design System',
        url: 'vercel.com/design',
        deployed: Date.now() - ms('30 min'),
        id: 'design-system'
      },
      {
        project: 'Home',
        url: 'vercel.com',
        deployed: Date.now() - ms('2 week'),
        id: 'home-2'
      }
    ],
    []
  )

  const [filter, setFilter] = useState('all')
  const [project, setProject] = useState('all')
  const [search, setSearch] = useState('')

  const timeFilter = useCallback(
    rows => {
      if (filter === 'all') return rows
      return rows.filter(r => {
        const hourAgo = Date.now() - ms('1 day')
        return r.original.deployed >= hourAgo
      })
    },
    [filter]
  )

  const projectFilter = useCallback(
    rows => {
      if (project === 'all') return rows
      return rows.filter(r => r.original.project === project)
    },
    [project]
  )

  return (
    <Table
      columns={columns}
      data={data}
      caption="A table with a search filter and selectable rows."
      defaultRows={3}
      selectable
      sortable
      headerActions={headerActions}
      rowActions={rowActions}
      filters={[timeFilter, projectFilter, [useTextFilter, search]]}
    >
      <Container row>
        <Switch
          items={[
            {
              name: 'All',
              value: 'all',
              width: 50
            },
            {
              name: 'Recent',
              value: 'recent',
              width: 80
            }
          ]}
          active={filter}
          onChange={f => setFilter(f)}
          size="small"
        />
        <Spacer inline />
        <Select
          size="small"
          onChange={e => setProject(e.target.value)}
          value={project}
        >
          <option value="all">All Projects</option>
          {data.map(row => {
            return <option>{row.project}</option>
          })}
        </Select>
        <Spacer inline />
        <SearchInput
          value={search}
          onChange={e => setSearch(e.target.value)}
          size="small"
        />
      </Container>
    </Table>
  )
}

() => {
  const columns = useMemo(
    () => [
      {
        Header: 'Project',
        accessor: 'project'
      },
      {
        Header: 'URL',
        accessor: 'url'
      },
      {
        Header: 'Deployed',
        accessor: 'deployed',
        Cell: ({ value }) => {
          return ms(Date.now() - value) + ' ago'
        }
      }
    ],
    []
  )
  const data = useMemo(
    () => [
      {
        project: 'Blog',
        url: 'vercel.com/blog',
        deployed: Date.now() - ms('23 hours'),
        id: 'blog'
      },
      {
        project: 'Home',
        url: 'vercel.com',
        deployed: Date.now() - ms('1 week'),
        id: 'home'
      },
      {
        project: 'Design System',
        url: 'vercel.com/design',
        deployed: Date.now() - ms('30 min'),
        id: 'design-system'
      },
      {
        project: 'Home',
        url: 'vercel.com',
        deployed: Date.now() - ms('2 week'),
        id: 'home-2'
      }
    ],
    []
  )
  const [filter, setFilter] = useState('all')
  const [project, setProject] = useState('all')
  const [search, setSearch] = useState('')
  const timeFilter = useCallback(
    rows => {
      if (filter === 'all') return rows
      return rows.filter(r => {
        const hourAgo = Date.now() - ms('1 day')
        return r.original.deployed >= hourAgo
      })
    },
    [filter]
  )
  const projectFilter = useCallback(
    rows => {
      if (project === 'all') return rows
      return rows.filter(r => r.original.project === project)
    },
    [project]
  )
  return (
    <Table
      columns={columns}
      data={data}
      caption="A table with a search filter and selectable rows."
      defaultRows={3}
      selectable
      sortable
      headerActions={headerActions}
      rowActions={rowActions}
      filters={[timeFilter, projectFilter, [useTextFilter, search]]}
    >
      <Container row>
        <Switch
          items={[
            {
              name: 'All',
              value: 'all',
              width: 50
            },
            {
              name: 'Recent',
              value: 'recent',
              width: 80
            }
          ]}
          active={filter}
          onChange={f => setFilter(f)}
          size="small"
        />
        <Spacer inline />
        <Select
          size="small"
          onChange={e => setProject(e.target.value)}
          value={project}
        >
          <option value="all">All Projects</option>
          {data.map(row => {
            return <option>{row.project}</option>
          })}
        </Select>
        <Spacer inline />
        <SearchInput
          value={search}
          onChange={e => setSearch(e.target.value)}
          size="small"
        />
      </Container>
    </Table>
  )
}

Table

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

Default

Placeholder

Empty

Column Align

Overflow

Column Class

Fixed Layout

Fixed Column Widths

No Header

Ellipsis

Sticky Header

Sortable rows

Custom sorted column

Selectable rows

Disabled selection rows

Filtered rows

Expandable rows

Custom Filters