Table View

A composable, editable data table with multiple layouts.

Features

Controlled or uncontrolled resources for rows, properties, and view state
Create, edit, duplicate, reorder, hide, and resize properties and rows
Sort, group, calculate, and bulk-edit selected rows
Table, List, Board, and Timeline layouts
Open rows in a center dialog, side pane, or full page
Built-in plugins for title, text, number, checkbox, select, multi-select, links, and dates

Installation

pnpm add @notion-kit/table-view

pnpm add @notion-kit/table-view

TableView uses DEFAULT_PLUGINS when no plugins prop is supplied. When you provide plugins, include the plugin factories your properties use. Every table needs exactly one title property so rows have a label in every layout.

Examples

Uncontrolled Table

Use defaultData, defaultProperties, and defaultView when the table owns its state. These defaults are read once when the component mounts; remount with a different key to reset the table.

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

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

Controlled Table

Pass a resource and apply each callback's next value to keep it authoritative. Rows, properties, and view state can be controlled independently.

<TableView
  properties={properties}
  data={data}
  onDataChange={({ next }) => setData(next)}
  onPropertiesChange={({ next }) => setProperties(next)}
  view={view}
  onViewChange={({ next }) => setView(next)}
/>

<TableView  properties={properties}  data={data}  onDataChange={({ next }) => setData(next)}  onPropertiesChange={({ next }) => setProperties(next)}  view={view}  onViewChange={({ next }) => setView(next)}/>

Do not switch a resource between controlled and uncontrolled during one mount.

Timeline layout

Set the layout to "timeline" and select a Date property for the timeline. The range can be daily, monthly, or quarterly.

const view = {
  layout: "timeline",
  timeline: {
    range: "monthly",
    datePropertyId: "due-date",
  },
};

<TableView
  defaultProperties={properties}
  defaultData={data}
  defaultView={view}
/>;

Prop	Type	Description
`plugins`	`CellPlugin[]`	Plugin factories available to the table. Defaults to `DEFAULT_PLUGINS`.
`data`	`Row[]`	Controlled rows resource.
`defaultData`	`Row[]`	Initial rows for an uncontrolled table.
`properties`	`ColumnDefs`	Controlled properties resource.
`defaultProperties`	`ColumnDefs`	Initial properties for an uncontrolled table.
`view`	`PartialTableViewState`	Controlled layout and presentation state.
`defaultView`	`PartialTableViewState`	Initial view state for an uncontrolled table.
`onDataChange`	`(change) => void`	Receives the next rows resource and its action.
`onPropertiesChange`	`(change) => void`	Receives the next properties resource and its action.
`onViewChange`	`(change) => void`	Receives the next view resource and its action.
`getRowUrl`	`(rowId: string) => string`	Returns the URL used when opening a row in a new tab.
`weekStartsOn`	`Weekday`	Sets the first day of the week for date-based features.
`defaultColumn`	`Partial<ColumnDef>`	Overrides the default TanStack Table column options.
`children`	`ReactNode`	Content rendered inside the Table View provider.

TableViewState

Field	Description
`layout`	The active layout. Table, List, Board, and Timeline have dedicated renderers; other layout values currently use the table renderer.
`locked`	Prevents table edits while leaving existing rows navigable.
`rowView`	Where an opened row appears: `center`, `side`, or `full`.
`openedRowId`	The currently opened row, or `null`.
`timeline`	Optional Timeline configuration containing `range` and `datePropertyId`.
`pluginMethods`	Persisted sorting, grouping, and group-sort choices for plugins.

Sidebar Presets

A collection of preset components in Notion sidebar.

Cell Plugins

Define how a table property stores, displays, edits, and groups its values.

Table View

Features

Installation

Requirements

Examples

Uncontrolled Table

Controlled Table

Timeline layout

Custom cell plugins

Create a Cell Plugin

Cell Plugin API

API Reference

TableView

TableViewState

On this page