Skip to main content

TableExtension

Summary

Add simple tables to the editor. This extension uses Prosemirror tables under the hood.

info

See React TableExtension for more advanced tables.

Usage

Installation

This extension is installed for you when you install the main remirror package.

You can use the imports in the following way:

import { TableExtension } from 'remirror/extensions';

The extension is provided by the @remirror/extension-tables package.

Examples

Source code
import { HeadingExtension, TableExtension, TextColorExtension } from 'remirror/extensions';
import {
EditorComponent,
Remirror,
ThemeProvider,
useRemirror,
useRemirrorContext,
} from '@remirror/react';

const CommandMenu = () => {
const ctx = useRemirrorContext();
const schema = ctx.schema;
const customCellContent = schema.nodes.heading.create({ level: 3 }, [
schema.text('hello', [schema.marks.textColor.create({ color: '#ffc0cb' })]),
schema.text('world', [schema.marks.textColor.create({ color: '#87cefa' })]),
]);
const commands = ctx.commands;

return (
<div>
<p>commands:</p>
<p
style={{
display: 'flex',
flexDirection: 'column',
justifyItems: 'flex-start',
alignItems: 'flex-start',
}}
>
<button
onMouseDown={(event) => event.preventDefault()}
onClick={() => commands.createTable()}
>
create a table with the default options
</button>

<button
onMouseDown={(event) => event.preventDefault()}
onClick={() =>
commands.createTable({ rowsCount: 4, columnsCount: 4, withHeaderRow: false })
}
>
create a 4*4 table without headers
</button>

<button
onMouseDown={(event) => event.preventDefault()}
onClick={() =>
commands.createTable({ rowsCount: 4, columnsCount: 4, withHeaderRow: true })
}
>
create a 4*4 table with headers
</button>

<button
onMouseDown={(event) => event.preventDefault()}
onClick={() => commands.createTable({ cellContent: customCellContent })}
>
create a table with custom cell content
</button>

<button
onMouseDown={(event) => event.preventDefault()}
onClick={() => commands.deleteTableColumn()}
>
delete the current column
</button>

<button
onMouseDown={(event) => event.preventDefault()}
onClick={() => commands.deleteTableRow()}
>
delete the current row
</button>

<button
onMouseDown={(event) => event.preventDefault()}
onClick={() => commands.addTableColumnAfter()}
>
add a column after the current one
</button>

<button
onMouseDown={(event) => event.preventDefault()}
onClick={() => commands.addTableRowBefore()}
>
add a row before the current one
</button>

<button
onMouseDown={(event) => event.preventDefault()}
onClick={() => commands.deleteTable()}
>
delete the table
</button>
</p>
</div>
);
};

const Basic = (): JSX.Element => {
const { manager, state } = useRemirror({ extensions });

return (
<ThemeProvider>
<Remirror manager={manager} initialContent={state}>
<EditorComponent />
<CommandMenu />
</Remirror>
</ThemeProvider>
);
};

const extensions = () => [new TableExtension(), new HeadingExtension(), new TextColorExtension()];

export default Basic;

API