React

The React layer (@blocknote/block-view/react) provides hooks, components, and cell adapters for rendering database tables in React applications.

Hooks

useCollectionManager

Initializes a CollectionManager with React lifecycle management. Returns a three-state result.

import { useCollectionManager } from "@blocknote/block-view/react";

type UseCollectionManagerParams = {
  collectionId: string;
  user: string | { type: string; id: string };
  initialize: (params: {
    collectionId: string;
    user: { type: string; id: string };
  }) => Promise<Omit<InitializeCollectionOptions, "collectionId" | "user">>;
};

Returns:

| { status: "loading" }
| { status: "error"; error: Error }
| { status: "success"; manager: CollectionManager }

Example:

const state = useCollectionManager({
  collectionId: "tasks",
  user: "alice", // shorthand for { type: "user", id: "alice" }
  initialize: async () => ({
    collectionSource: new InMemoryCollectionSource(data),
    documentSource: new InMemoryDocumentSource(docs),
    pageSize: 25,
  }),
});

if (state.status === "loading") return <p>Loading...</p>;
if (state.status === "error") return <p>Error: {state.error.message}</p>;

// state.status === "success"
const manager = state.manager;

The initialize function is called once. The returned CollectionManager is automatically disposed when the component unmounts.

useCollectionTableView

Connects a CollectionManager to a table view. Returns a CollectionTable for rendering.

import { useCollectionTableView } from "@blocknote/block-view/react";

interface UseCollectionTableViewOptions {
  collectionManager: CollectionManager;
  viewId: string;
  propertyDefinitions: PropertyDefinition<any>[];
  getEditable?: (document: Document, property: Property) => boolean;
  editable?: () => boolean;
}

function useCollectionTableView(options: UseCollectionTableViewOptions): {
  table: CollectionTable;
};

Example:

const { table } = useCollectionTableView({
  collectionManager: manager,
  viewId: manager.views[0].id,
  propertyDefinitions: defaultPropertyDefinitions,
  editable: () => true,
});

return <TableView table={table} editable />;

The getEditable callback controls per-cell editability:

const { table } = useCollectionTableView({
  collectionManager: manager,
  viewId,
  propertyDefinitions: defaultPropertyDefinitions,
  getEditable: (document, property) => {
    // Only allow editing the "name" column
    return property.id === "name";
  },
});

useUndoRedoHotkeys

Registers keyboard shortcuts for undo (Ctrl/Cmd+Z) and redo (Ctrl/Cmd+Shift+Z).

import { useUndoRedoHotkeys } from "@blocknote/block-view/react";

function MyTable({ table }) {
  useUndoRedoHotkeys(table.undoRedoManager);
  return <TableView table={table} editable />;
}

TableView Component

The top-level component for rendering a database table. Supports compound component composition for customization.

import { TableView } from "@blocknote/block-view/react";

<TableView table={table} editable={true}>
  {/* Optional children to override default layout */}
</TableView>

Props

Prop	Type	Default	Description
`table`	`CollectionTable`	required	The table instance from `useCollectionTableView`
`editable`	`boolean`	`false`	Enable editing, footer, and mutation toolbar actions
`children`	`ReactNode`	`undefined`	Override the default layout with compound components

Default Rendering

Without children, TableView renders: Toolbars + Table (with HeaderRow + Body) + Footer (when editable).

Compound Components

All compound components are exported from @blocknote/block-view/react. Use them as children of <TableView> to customize the layout.

Layout Components

Toolbars

Container for toolbar rows.

<TableView table={table} editable>
  <Toolbars>
    <ActionsToolbar>
      <MainActionsToolbarGroup>
        <MainActionsToolbarGroupItems />
        {/* Custom buttons here */}
      </MainActionsToolbarGroup>
    </ActionsToolbar>
  </Toolbars>
</TableView>

Table

Container for header and body.

<Table>
  <HeaderRow menuAfter={<MenuItem>Custom item</MenuItem>} />
  <Body />
</Table>

Container for footer content.

<Footer>
  <AddDocumentFooterButton />
  <DeleteSelectedDocumentsFooterButton />
</Footer>

Component	Description
`Toolbars`	Container for all toolbar rows
`ActionsToolbar`	Primary toolbar (filter, sort, settings buttons)
`SortsFiltersToolbar`	Active filter/sort chip bar
`MainActionsToolbarGroup`	Group wrapper for toolbar buttons
`MainActionsToolbarGroupItems`	Renders the default toolbar buttons
`ShowFiltersToolbarButton`	Toggle filter chip bar
`ShowSortsToolbarButton`	Toggle sort chip bar
`SortSettingsComboboxRoot`	Sort settings popover
`PropertyVisibilitySettingsComboboxRoot`	Column visibility settings
`TableSettingsMenuRoot`	General settings dropdown
`MinimizeMainActionsToolbarButton`	Collapse toolbar button
`AddSortToolbarButton`	Add a new sort

Table Components

Component	Description
`Table`	Table container
`HeaderRow`	Column headers. Props: `menuAfter` (extra menu items)
`Body`	Data rows
`PropertyHeader`	Individual column header
`HeaderMenuRoot`	Column header dropdown menu
`HeaderResizeHandle`	Column resize drag handle
`AddPropertyHeader`	”+” button to add a new column
`SelectAllRowsHeader`	Checkbox header for row selection
`ChangePropertyTypeSubmenuRoot`	Submenu for changing property type

Component	Description
`Footer`	Footer container
`AddDocumentFooterButton`	”+ New” button to add a row
`DeleteSelectedDocumentsFooterButton`	Delete selected rows button

Context Hooks

Access table state from any component inside <TableView>:

useTableViewContext

import { useTableViewContext } from "@blocknote/block-view/react";

function MyComponent() {
  const { table, editable, ref } = useTableViewContext();
  // table: CollectionTable
  // editable: boolean
  // ref: RefObject<HTMLDivElement | null>
}

useTableContext

import { useTableContext } from "@blocknote/block-view/react";

Available inside <Table>. Returns table-specific rendering context.

useToolbarsContext

import { useToolbarsContext } from "@blocknote/block-view/react";

Available inside <Toolbars>. Returns toolbar-specific state (active filters, sorts, visibility).

Cell Adapters

Each adapter exports a React component (cell renderer) and a complete PropertyDefinition. Import from @blocknote/block-view/react or @blocknote/block-view/react/adapters.

Adapter	Component	Definition	Type
Plain Text	`PlainTextAdapter`	`stringDefinition`	`"string"`
Number	`NumberAdapter`	`numberDefinition`	`"number"`
Date	`DateAdapter`	`dateDefinition`	`"date"`
Checkbox	`CheckboxAdapter`	`checkboxDefinition`	`"checkbox"`
Single Select	`SingleSelectAdapter`	`singleSelectDefinition`	`"single-select"`
Multi Select	`MultiSelectAdapter`	`multiSelectDefinition`	`"multi-select"`

Adapter Conventions

Adapters may represent data differently internally than in the data model
Reading from the model uses parse (string to typed value)
Writing to the model uses serialize (typed value to string, returning null to cancel)
All adapters handle null/undefined values gracefully
Import only what you use for optimal tree-shaking

Example: Using Individual Adapters

import {
  stringDefinition,
  numberDefinition,
  checkboxDefinition,
} from "@blocknote/block-view/react";

const myDefinitions = [stringDefinition, numberDefinition, checkboxDefinition];

const { table } = useCollectionTableView({
  collectionManager: manager,
  viewId,
  propertyDefinitions: myDefinitions,
});

defaultPropertyDefinitions

A convenience array containing all six built-in property definitions.

import { defaultPropertyDefinitions } from "@blocknote/block-view/react";

// Equivalent to:
// [stringDefinition, numberDefinition, dateDefinition, checkboxDefinition, singleSelectDefinition, multiSelectDefinition]

Styles

Two CSS files must be imported for the default table appearance:

import "@blocknote/block-view/react/styles.css"; // Table layout and structure
import "@blocknote/block-view/react/adapters/styles.css"; // Cell adapter styles

Devtools

import { DevtoolsPanel, createDatabasePlugin } from "@blocknote/block-view/react/devtools";

DevtoolsPanel

A React component that renders a devtools panel showing operation history and collection snapshots.

createDatabasePlugin

Creates a TanStack Devtools plugin for the database:

import { createDatabasePlugin } from "@blocknote/block-view/react/devtools";

const databasePlugin = createDatabasePlugin();

// Use with TanStack Devtools

Enable devtools during initialization:

const state = useCollectionManager({
  collectionId: "tasks",
  user: "alice",
  initialize: async () => ({
    collectionSource,
    documentSource,
    devtools: true, // enables event emission
  }),
});