Table View

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 mockData: Row[] = [
  {
    id: "row-1",
    properties: {
      "prop-1": { id: "prop-1-1", value: { value: "page 1" } },
      "prop-2": { id: "prop-1-2", value: "desc1" },
      "prop-3": { id: "prop-1-3", value: true },
    },
  },
  {
    id: "row-2",
    properties: {
      "prop-1": { id: "prop-2-1", value: { value: "page 2" } },
      "prop-2": { id: "prop-2-2", value: "desc2" },
      "prop-3": { id: "prop-2-3", value: false },
    },
  },
];
 
export default function Demo() {
  return <TableView defaultState={{ properties: mockProps, data: mockData }} />;
}

Supported Features

Controlled/Uncontrolled state management
Column & row CRUD
Column & row DND
Column & row duplicating
Column wrapping
Column pinning
Column type changing
Table sorting
Cells plugins: title, text, checkbox, select, multi-select

Installation

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
  defaultState={{ properties: mockProps, data: mockData }}
/>

Controlled Table

<TableView state={state} onStateChange={setState} />

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.
`defaultState`	`PartialTableState<TPlugins>`	The (uncontrolled) table state, consisting of column definitions and row data.
`state`	`PartialTableState<TPlugins>`	The (controlled) table state, consisting of column definitions and row data.
`onStateChange`	`(newState: PartialTableState<TPlugins>, type: TableViewAction<TPlugins>["type"]) => void`	Handler that is called when the table data is updated.
`dispatch`	`(action: TableViewAction<TPlugins>) => void`	Handler that is called when the table data is updated. This is useful when you want to customize the table action.

`type` PartialTableState

A PartialTableState is a generic type PartialTableState<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` TableViewAction

Possible actions of the <TableView />, where an "action" is given by

const action: TableViewAction = {
  type: "action-type",
  payload: {
    // ...
  },
};
// or updater
const action: TableViewAction = {
  type: "action-type",
  updater: (prev) => {
    // ...
  },
};

General Actions

Action type	Payload	Description
`add:col`	`{ id: string, name: string, type: PropertyType }`	The action to create a new column.
`update:col`	`{ id: string, data: UpdateColumnPayload }`	The action to update the column definition.
`update:col:visibility`	`{ id: string, hidden: boolean }`	The action to toggle the visibility of all columns.
`freeze:col`	`{ id: string \| null }`	The action to freeze or unfreeze up to a column.
`duplicate:col`	`{ id: string }`	The action to duplicate a column.
`delete:col`	`{ id: string }`	The action to delete a column.
`reorder:col`	`Updater<string>`	The action to reorder the columns (by DND).
`add:row`	`{ id: string, at: "prev" \| "next" } \| undefined`	The action to add a new row at bottom or add below/above of a given row.
`update:row:icon`	`{ id: string, icon: IconData \| null }`	The action to update the icon of the row title.
`duplicate:row`	`{ id: string }`	The action to duplicate a row.
`delete:row`	`{ id: string }`	The action to delete a row.
`reorder:row`	`Updater<string>`	The action to reorder the rows (by DND).
`update:count:cap`	`{ id: string, updater: Updater<boolean> }`	The action to set whether to cap the value when counting rows.
`update:sorting`	`Updater<SortingState>`	The action to set the sorting state of the table.
`reset`	-	The action to reset the table.

Actions based on Cell Plugins

Action type	Payload	Description
`update:col:type`	`{ id: string, type: PluginType }`	The action to change the column type.
`update:col:meta`	`{ type: PluginType, payload: { type: InferKey<TPlugin>, actions: InferActions<TPlugin> } }`	The action to update the column's configuration.
`update:cell`	`{ rowId: string, colId: string, data: Cell<TPlugin> }`	The action to update the cell data.

Table View

On this page