import { StoryWithControls } from '../../../src/components/StorybookWrapper';

TableView

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

Live Example

<StoryWithControls component="TableView" props={{ accessor: "summary", Header: "Summary", sortable: true, id: 456, age: 10, name: "John Smith", summary: "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: "No data here", pageSize: 2, showRowCount: true, withPagination: true, scrollTopOnPagination: false, 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." } ] }} controls={[ { name: "accessor", label: "Accessor", type: "text" }, { name: "Header", label: "Header", type: "text" }, { name: "sortable", label: "Sortable", type: "boolean" }, { name: "id", label: "ID", type: "number" }, { name: "age", label: "Age", type: "number" }, { name: "name", label: "Name", type: "text" }, { name: "summary", label: "Summary", type: "text" }, { name: "noDataText", label: "No Data Text", type: "text", description: "Text displayed when the table has no data." }, { name: "pageSize", label: "Page Size", type: "number", description: "Number of rows displayed per page." }, { name: "showRowCount", label: "Show Row Count", type: "boolean", description: "Whether to display the total row count alongside pagination." }, { name: "withPagination", label: "With Pagination", type: "boolean", description: "Whether to show pagination controls below the table." }, { name: "scrollTopOnPagination", label: "Scroll Top On Pagination", type: "boolean", description: "Whether to scroll to the top of the table when changing pages." }, { name: "emptyWrapperType", label: "Empty Wrapper Type", type: "select", description: "Style of the empty state wrapper." }, { name: "initialPageIndex", label: "Initial Page Index", type: "number", description: "Initial page to display (zero-based)." } ]} />

Try It

Edit the code below to experiment with the component:

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
    />
  );
}

Without Pagination

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}
    />
  );
}

Empty State

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

With Sorting

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}
    />
  );
}

Props

Import

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

:::tip[Improve this page] This documentation is auto-generated from the component's Storybook story. Help improve it by editing the story file. :::