Lexical DataGrid Plugin

A Lexical editor plugin that provides an interactive data grid/spreadsheet component using jspreadsheet.

Features

• 🎯 Fully integrated Lexical decorator node
• 📊 Interactive spreadsheet powered by jspreadsheet
• ✏️ Inline editing with full CRUD operations
• 💾 Automatic state synchronization
• 🎨 Customizable columns and styling
• 📱 Responsive design

Installation

npm install lexical-datagrid-plugin
# or
yarn add lexical-datagrid-plugin
# or
pnpm add lexical-datagrid-plugin

Usage

1. Register the TableNode in your Lexical configuration

import { LexicalComposer } from '@lexical/react/LexicalComposer';
import { TableNode } from 'lexical-datagrid-plugin';

const initialConfig = {
  namespace: 'MyEditor',
  nodes: [
    TableNode,
    // ... other nodes
  ],
  onError: (error: Error) => {
    console.error(error);
  },
};

function Editor() {
  return (
    <LexicalComposer initialConfig={initialConfig}>
      {/* Your editor components */}
    </LexicalComposer>
  );
}

2. Add the TablePlugin to your editor

import { TablePlugin, INSERT_TABLE_COMMAND } from 'lexical-datagrid-plugin';

function MyEditor() {
  const [editor] = useLexicalComposerContext();

  const insertTable = () => {
    editor.dispatchCommand(INSERT_TABLE_COMMAND, {
      rows: 3,
      cols: 4,
    });
  };

  return (
    <div>
      <button onClick={insertTable}>Insert Table</button>
      <TablePlugin />
      {/* Other plugins and editor UI */}
    </div>
  );
}

3. Import the required CSS

import 'lexical-datagrid-plugin/styles';

Or import directly in your CSS:

@import 'lexical-datagrid-plugin/styles';

API

Components

TablePlugin

The main plugin component that handles table insertion and management.

<TablePlugin />

Nodes

TableNode

The Lexical decorator node for rendering tables.

Functions:

• $createTableNode(tableData?: string): TableNode - Create a new table node
• $isTableNode(node): boolean - Type guard for table nodes

Commands

INSERT_TABLE_COMMAND

Command to insert a new table into the editor.

editor.dispatchCommand(INSERT_TABLE_COMMAND, {
  rows: 2,    // optional, default: 2
  cols: 2,    // optional, default: 2
});

Types

TableData

type TableData = {
  data: string[][];
  columns?: Array<{
    title?: string;
    width?: number;
    type?: string;
  }>;
  minDimensions?: [number, number];
};

Requirements

• React 18+ or 19+
• Lexical ^0.38.0
• @lexical/react ^0.38.0
• @lexical/utils ^0.38.0

License

MIT