superset2/docs/developer_docs/components/ui/tableview.mdx

---
title: TableView
sidebar_label: TableView
---

<!--
    Licensed to the Apache Software Foundation (ASF) under one
    or more contributor license agreements.  See the NOTICE file
    distributed with this work for additional information
    regarding copyright ownership.  The ASF licenses this file
    to you under the Apache License, Version 2.0 (the
    "License"); you may not use this file except in compliance
    with the License.  You may obtain a copy of the License at

      http://www.apache.org/licenses/LICENSE-2.0

    Unless required by applicable law or agreed to in writing,
    software distributed under the License is distributed on an
    "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
    KIND, either express or implied.  See the License for the
    specific language governing permissions and limitations
    under the License.
-->

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:

```tsx live
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

```tsx live
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

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

## With Sorting

```tsx live
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

| 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

```tsx
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](https://github.com/apache/superset/edit/master/superset-frontend/packages/superset-ui-core/src/components/TableView/TableView.stories.tsx).
:::