Tables

Tables are a simple way to display data in a grid.

Tables by default are a simple way to display data in a grid. But, BlockNote also supports more advanced features like:

• Split cells
• Cell background color
• Cell text color
• Header rows & columns

You can enable more advanced features by passing the tables option when creating the editor.

const editor = new BlockNoteEditor({
  tables: {
    splitCells: true,
    cellBackgroundColor: true,
    cellTextColor: true,
    headers: true,
  },
});

You can choose to enable only certain features, or none at all. Giving you the flexibility to use tables how you need in your app.

Block Shape

This describes the shape of a table block in BlockNote.

type TableBlock = {
  id: string;
  type: "table";
  props: DefaultProps;
  content: TableContent;
  children: Block[];
};

type TableContent = {
  type: "tableContent";
  columnWidths: number[];
  headerRows: number;
  rows: {
    cells: TableCell[];
  }[];
};

type TableCell = {
  type: "tableCell";
  props: {
    colspan?: number;
    rowspan?: number;
  } & DefaultProps;
  content: InlineContent[];
};

Options

Cell background color

To enable cell background color, you need to pass cellBackgroundColor: true to the tables option.

const editor = new BlockNoteEditor({
  tables: {
    cellBackgroundColor: true,
  },
});

Cell text color

To enable cell text color, you need to pass cellTextColor: true to the tables option.

const editor = new BlockNoteEditor({
  tables: {
    cellTextColor: true,
  },
});

Header rows & columns

BlockNote supports headers in tables, which are the first row and/or first column of a table.

To enable it, you need to pass headers: true to the tables option.

const editor = new BlockNoteEditor({
  tables: {
    headers: true,
  },
});

Split cells

Splitting and merging cells is a common feature of more advanced table editors.

To enable it, you need to pass splitCells: true to the tables option.

const editor = new BlockNoteEditor({
  tables: {
    splitCells: true,
  },
});