TableView

A data table component with sorting, pagination, text wrapping, and empty state support. Built on react-table.

Live Example

Loading component...

Try It

Edit the code below to experiment with the component:

Live Editor

function Demo() {
  return (
    <TableView
      columns={[
        { accessor: 'id', Header: 'ID', sortable: true, id: 'id' },
        { accessor: 'age', Header: 'Age', id: 'age' },
        { accessor: 'name', Header: 'Name', id: 'name' },
        { accessor: 'summary', Header: 'Summary', id: 'summary' },
      ]}
      data={[
        { id: 123, age: 27, name: 'Emily', summary: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit.' },
        { id: 321, age: 10, name: 'Kate', summary: 'Nam id porta neque, a vehicula orci.' },
        { id: 456, age: 10, name: 'John Smith', summary: 'Maecenas rhoncus elit sit amet purus convallis placerat.' },
      ]}
      initialSortBy={[{ id: 'name', desc: true }]}
      pageSize={2}
      withPagination
      showRowCount
    />
  );
}

Result

Loading...

Without Pagination

Live Editor

function NoPaginationDemo() {
  return (
    <TableView
      columns={[
        { accessor: 'name', Header: 'Name', id: 'name' },
        { accessor: 'email', Header: 'Email', id: 'email' },
        { accessor: 'status', Header: 'Status', id: 'status' },
      ]}
      data={[
        { name: 'Alice', email: 'alice@example.com', status: 'Active' },
        { name: 'Bob', email: 'bob@example.com', status: 'Inactive' },
        { name: 'Charlie', email: 'charlie@example.com', status: 'Active' },
      ]}
      withPagination={false}
    />
  );
}

Result

Loading...

Empty State

Live Editor

function EmptyDemo() {
  return (
    <TableView
      columns={[
        { accessor: 'name', Header: 'Name', id: 'name' },
        { accessor: 'value', Header: 'Value', id: 'value' },
      ]}
      data={[]}
      noDataText="No results found"
    />
  );
}

Result

Loading...

With Sorting

Live Editor

function SortingDemo() {
  return (
    <TableView
      columns={[
        { accessor: 'id', Header: 'ID', id: 'id', sortable: true },
        { accessor: 'name', Header: 'Name', id: 'name', sortable: true },
        { accessor: 'score', Header: 'Score', id: 'score', sortable: true },
      ]}
      data={[
        { id: 1, name: 'Dashboard A', score: 95 },
        { id: 2, name: 'Dashboard B', score: 72 },
        { id: 3, name: 'Dashboard C', score: 88 },
        { id: 4, name: 'Dashboard D', score: 64 },
      ]}
      initialSortBy={[{ id: 'score', desc: true }]}
      withPagination={false}
    />
  );
}

Result

Loading...

Props

Prop	Type	Default	Description
accessor	string	"summary"	-
Header	string	"Summary"	-
sortable	boolean	true	-
id	number	456	-
age	number	10	-
name	string	"John Smith"	-
summary	string	"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam id porta neque, a vehicula orci. Maecenas rhoncus elit sit amet purus convallis placerat in at nunc. Nulla nec viverra augue."	-
noDataText	string	"No data here"	Text displayed when the table has no data.
pageSize	number	2	Number of rows displayed per page.
showRowCount	boolean	true	Whether to display the total row count alongside pagination.
withPagination	boolean	true	Whether to show pagination controls below the table.
scrollTopOnPagination	boolean	false	Whether to scroll to the top of the table when changing pages.
columns	any	[{"accessor":"id","Header":"ID","sortable":true,"id":"id"},{"accessor":"age","Header":"Age","id":"age"},{"accessor":"name","Header":"Name","id":"name"},{"accessor":"summary","Header":"Summary","id":"summary"}]	-
data	any	[{"id":123,"age":27,"name":"Emily","summary":"Lorem ipsum dolor sit amet, consectetur adipiscing elit."},{"id":321,"age":10,"name":"Kate","summary":"Nam id porta neque, a vehicula orci."},{"id":456,"age":10,"name":"John Smith","summary":"Maecenas rhoncus elit sit amet purus convallis placerat."}]	-

Import

import { TableView } from '@superset/components';

---

Improve this page

This documentation is auto-generated from the component's Storybook story. Help improve it by editing the story file.