Table View

"use client";

import { TableView } from "@notion-kit/table-view";
import type { ColumnDefs, Row } from "@notion-kit/table-view";

const mockProps: ColumnDefs = [
  {
    id: "prop-1",
    type: "title",
    name: "Name",
    width: "216px",
  },
  {
    id: "prop-2",
    type: "text",
    name: "Desc.",
    width: "100px",
  },
  {
    id: "prop-3",
    type: "checkbox",
    name: "Done",
    width: "90px",
  },
];

const timeData = { createdAt: Date.now(), lastEditedAt: Date.now() };
const mockData: Row[] = [
  {
    id: "row-1",
    properties: {
      "prop-1": { id: "prop-1-1", value: "page 1" },
      "prop-2": { id: "prop-1-2", value: "desc1" },
      "prop-3": { id: "prop-1-3", value: true },
    },
    ...timeData,
  },
  {
    id: "row-2",
    properties: {
      "prop-1": { id: "prop-2-1", value: "page 2" },
      "prop-2": { id: "prop-2-2", value: "desc2" },
      "prop-3": { id: "prop-2-3", value: false },
    },
    ...timeData,
  },
];

export default function Demo() {
  return <TableView properties={mockProps} data={mockData} />;
}

"use client";import { TableView } from "@notion-kit/table-view";import type { ColumnDefs, Row } from "@notion-kit/table-view";const mockProps: ColumnDefs = [  {    id: "prop-1",    type: "title",    name: "Name",    width: "216px",  },  {    id: "prop-2",    type: "text",    name: "Desc.",    width: "100px",  },  {    id: "prop-3",    type: "checkbox",    name: "Done",    width: "90px",  },];const timeData = { createdAt: Date.now(), lastEditedAt: Date.now() };const mockData: Row[] = [  {    id: "row-1",    properties: {      "prop-1": { id: "prop-1-1", value: "page 1" },      "prop-2": { id: "prop-1-2", value: "desc1" },      "prop-3": { id: "prop-1-3", value: true },    },    ...timeData,  },  {    id: "row-2",    properties: {      "prop-1": { id: "prop-2-1", value: "page 2" },      "prop-2": { id: "prop-2-2", value: "desc2" },      "prop-3": { id: "prop-2-3", value: false },    },    ...timeData,  },];export default function Demo() {  return <TableView properties={mockProps} data={mockData} />;}

Supported Features

Controlled/Uncontrolled state management
Column actions: CRUD, DND, duplicating
Row actions: CRUD, DND, duplicating
Column wrapping
Column pinning
Column type changing
Table: sorting, grouping
Table Views: Table, List, Board
Cells plugins
- Required plugins: title, text
- Selectable: checkbox, select, multi-select
- Numeric inputs: number
- External links: email, phone, url
- Date & time: date, created-time, last-edited-time
Open row as: center dialog, side peek, or full page

Installation

pnpm add @notion-kit/table-view

pnpm add @notion-kit/table-view

Note

1. Every table should have at least two plugins: title() and text()
1. Every table should have exactly one title property.

Examples

Uncontrolled Table

<TableView
  properties={properties}
  data={data}
/>

<TableView  properties={properties}  data={data}/>

Controlled Table

<TableView
  properties={properties}
  data={data}
  onDataChange={setData}
  onPropertiesChange={setProperties}
/>

<TableView  properties={properties}  data={data}  onDataChange={setData}  onPropertiesChange={setProperties}/>

API Reference

TableView

A TableView is a generic component TableView<TPlugins> where TPlugins extends CellPlugin[]. It provides a table view with editable cells and supports various plugins for cell types.

Prop	Type	Description
`plugins`	`TPlugins`	The plugins to use for the table. Each table should contain at least `title()` and `text()` plugins.
`properties`*	`ColumnDefs<TPlugins>`	The column definitions of the table.
`data`*	`Row<TPlugins>[]`	The rows of the table.
`table`	`Partial<TableGlobalState>`	The global state of the table.
`onDataChange`	`OnChangeFn<Row<TPlugins>[]>`	Callback function that is called when the table data changes.
`onPropertiesChange`	`OnChangeFn<ColumnDefs<TPlugins>>`	Callback function that is called when the table properties change.
`onTableChange`	`OnChangeFn<TableGlobalState>`	Callback function that is called when the table global state changes.

`type` TableState

A TableState is a generic type TableState<TPlugins> that represents the state of a table, including its column definitions and row data.

Prop	Type	Default	Description
`properties`*	`ColumnDefs<TPlugins>`	-	The column definitions of the table.
`data`*	`Row<TPlugins>[]`	-	The rows of the table.

`type` TableGlobalState

Prop	Type	Default	Description
`layout`	`"table" \| "list" \| "board"`	`"table"`	The layout view of the table.
`locked`	`boolean`	`false`	Whether the table is locked (non-editable).
`rowView`	`"center" \| "side" \| "full"`	`"side"`	The view type of the opened row.
`openedRowId`	`string \| null`	`null`	The unique identifier of the opened row.

Table View

On this page