Skip to main content

Table

The table plugin enables table rendering with these behaviors:

  • Arrow navigation (up/down)
  • Select cells as a grid
  • Expand cell selection with ⇧ + arrow keys
  • Copy paste cells

Installation#

npm install @udecode/plate
# or
npm install @udecode/plate-table
npm install @udecode/plate-ui-table

Usage#

import React from 'react';
import {
  createExitBreakPlugin,
  createSoftBreakPlugin,
  createTablePlugin,
  Plate,
  PlateProvider,
} from '@udecode/plate';
import { basicNodesPlugins } from './basic-nodes/basicNodesPlugins';
import { editableProps } from './common/editableProps';
import { plateUI } from './common/plateUI';
import { exitBreakPlugin } from './exit-break/exitBreakPlugin';
import { softBreakPlugin } from './soft-break/softBreakPlugin';
import { TableToolbarButtons } from './table/TableToolbarButtons';
import { tableValue } from './table/tableValue';
import { Toolbar } from './toolbar/Toolbar';
import { createMyPlugins, MyValue } from './typescript/plateTypes';

const plugins = createMyPlugins(
  [
    ...basicNodesPlugins,
    createSoftBreakPlugin(softBreakPlugin),
    createExitBreakPlugin(exitBreakPlugin),
    createTablePlugin({
      options: {
        initialTableWidth: 600,
      },
    }),
  ],
  {
    components: plateUI,
  }
);

export default () => (
  <PlateProvider<MyValue> plugins={plugins} initialValue={tableValue}>
    <Toolbar>
      <TableToolbarButtons />
    </Toolbar>

    <Plate<MyValue> editableProps={editableProps} />
  </PlateProvider>

Source Code#

Edit this page