Skip to content
ProseKit
GitHubDiscord

Table

The table extension adds support for creating and editing tables in your document. It provides a set of commands and utilities for working with table structures.

 
import 'prosekit/basic/style.css'
import 'prosekit/basic/typography.css'

import { createEditor } from 'prosekit/core'
import { ProseKit } from 'prosekit/react'
import { useMemo } from 'react'

import { defineExtension } from './extension'
import TableHandle from './table-handle'

export default function Editor() {
  const editor = useMemo(() => {
    const extension = defineExtension()
    return createEditor({ extension, defaultContent })
  }, [])

  return (
    <ProseKit editor={editor}>
      <div className="box-border h-full w-full min-h-36 overflow-y-hidden overflow-x-hidden rounded-md border border-solid border-gray-200 dark:border-gray-700 shadow-sm flex flex-col bg-white dark:bg-gray-950 text-black dark:text-white">
        <div className="relative w-full flex-1 box-border overflow-y-scroll">
          <div ref={editor.mount} className="ProseMirror box-border min-h-full px-[max(4rem,calc(50%-20rem))] py-8 outline-hidden outline-0 [&_span[data-mention=user]]:text-blue-500 [&_span[data-mention=tag]]:text-violet-500"></div>
          <TableHandle />
        </div>
      </div>
    </ProseKit>
  )
}

const defaultContent = `
<table><tbody>
  <tr>
    <td>A1</td>
    <td>B1</td>
    <td>C1</td>
    <td>D1</td>
  </tr>
  <tr>
    <td>A2</td>
    <td>B2</td>
    <td>C2</td>
    <td>D2</td>
  </tr>
</tbody></table>
`

Usage

Section titled “Usage”
import { defineTablefunction defineTable(): TableExtension
@public
 } from 'prosekit/extensions/table'

const extensionconst extension: TableExtension = defineTablefunction defineTable(): TableExtension
@public
()

Commands

Section titled “Commands”

insertTable

Section titled “insertTable”

Insert a new table.

editorconst editor: Editor<TableExtension>.commands
Editor<TableExtension>.commands: ToCommandAction<{
    insertTable: [options: InsertTableOptions];
    exitTable: [];
    selectTable: [options?: SelectTableOptions];
    selectTableCell: [options?: SelectTableCellOptions];
    selectTableColumn: [options?: SelectTableColumnOptions];
    selectTableRow: [options?: SelectTableRowOptions];
    addTableColumnBefore: [];
    addTableColumnAfter: [];
    ... 9 more ...;
    moveTableColumn: [options: MoveTableColumnOptions];
}>
All 
{@link 
CommandAction
}
s defined by the editor.
.insertTable
insertTable: CommandAction
(options: InsertTableOptions) => boolean
Execute the current command. Return `true` if the command was successfully
executed, otherwise `false`.
({ rowInsertTableOptions.row: number
The number of rows in the table.
: 3, colInsertTableOptions.col: number
The number of columns in the table.
: 3, headerInsertTableOptions.header?: boolean | undefined
Whether the table has a header row.
@defaultfalse
: true })

exitTable

Section titled “exitTable”

Exit the table.

editorconst editor: Editor<TableExtension>.commands
Editor<TableExtension>.commands: ToCommandAction<{
    insertTable: [options: InsertTableOptions];
    exitTable: [];
    selectTable: [options?: SelectTableOptions];
    selectTableCell: [options?: SelectTableCellOptions];
    selectTableColumn: [options?: SelectTableColumnOptions];
    selectTableRow: [options?: SelectTableRowOptions];
    addTableColumnBefore: [];
    addTableColumnAfter: [];
    ... 9 more ...;
    moveTableColumn: [options: MoveTableColumnOptions];
}>
All 
{@link 
CommandAction
}
s defined by the editor.
.exitTable
exitTable: CommandAction
() => boolean
Execute the current command. Return `true` if the command was successfully
executed, otherwise `false`.
()

selectTable

Section titled “selectTable”

Select the table.

editorconst editor: Editor<TableExtension>.commands
Editor<TableExtension>.commands: ToCommandAction<{
    insertTable: [options: InsertTableOptions];
    exitTable: [];
    selectTable: [options?: SelectTableOptions];
    selectTableCell: [options?: SelectTableCellOptions];
    selectTableColumn: [options?: SelectTableColumnOptions];
    selectTableRow: [options?: SelectTableRowOptions];
    addTableColumnBefore: [];
    addTableColumnAfter: [];
    ... 9 more ...;
    moveTableColumn: [options: MoveTableColumnOptions];
}>
All 
{@link 
CommandAction
}
s defined by the editor.
.selectTable
selectTable: CommandAction
(options?: SelectTableOptions | undefined) => boolean
Execute the current command. Return `true` if the command was successfully
executed, otherwise `false`.
()

selectTableCell

Section titled “selectTableCell”

Select the table cell.

editorconst editor: Editor<TableExtension>.commands
Editor<TableExtension>.commands: ToCommandAction<{
    insertTable: [options: InsertTableOptions];
    exitTable: [];
    selectTable: [options?: SelectTableOptions];
    selectTableCell: [options?: SelectTableCellOptions];
    selectTableColumn: [options?: SelectTableColumnOptions];
    selectTableRow: [options?: SelectTableRowOptions];
    addTableColumnBefore: [];
    addTableColumnAfter: [];
    ... 9 more ...;
    moveTableColumn: [options: MoveTableColumnOptions];
}>
All 
{@link 
CommandAction
}
s defined by the editor.
.selectTableCell
selectTableCell: CommandAction
(options?: SelectTableCellOptions | undefined) => boolean
Execute the current command. Return `true` if the command was successfully
executed, otherwise `false`.
()

selectTableColumn

Section titled “selectTableColumn”

Select the table column.

editorconst editor: Editor<TableExtension>.commands
Editor<TableExtension>.commands: ToCommandAction<{
    insertTable: [options: InsertTableOptions];
    exitTable: [];
    selectTable: [options?: SelectTableOptions];
    selectTableCell: [options?: SelectTableCellOptions];
    selectTableColumn: [options?: SelectTableColumnOptions];
    selectTableRow: [options?: SelectTableRowOptions];
    addTableColumnBefore: [];
    addTableColumnAfter: [];
    ... 9 more ...;
    moveTableColumn: [options: MoveTableColumnOptions];
}>
All 
{@link 
CommandAction
}
s defined by the editor.
.selectTableColumn
selectTableColumn: CommandAction
(options?: SelectTableColumnOptions | undefined) => boolean
Execute the current command. Return `true` if the command was successfully
executed, otherwise `false`.
()

selectTableRow

Section titled “selectTableRow”

Select the table row.

editorconst editor: Editor<TableExtension>.commands
Editor<TableExtension>.commands: ToCommandAction<{
    insertTable: [options: InsertTableOptions];
    exitTable: [];
    selectTable: [options?: SelectTableOptions];
    selectTableCell: [options?: SelectTableCellOptions];
    selectTableColumn: [options?: SelectTableColumnOptions];
    selectTableRow: [options?: SelectTableRowOptions];
    addTableColumnBefore: [];
    addTableColumnAfter: [];
    ... 9 more ...;
    moveTableColumn: [options: MoveTableColumnOptions];
}>
All 
{@link 
CommandAction
}
s defined by the editor.
.selectTableRow
selectTableRow: CommandAction
(options?: SelectTableRowOptions | undefined) => boolean
Execute the current command. Return `true` if the command was successfully
executed, otherwise `false`.
()

addTableColumnBefore

Section titled “addTableColumnBefore”

Add a new column before the selected column.

editorconst editor: Editor<TableExtension>.commands
Editor<TableExtension>.commands: ToCommandAction<{
    insertTable: [options: InsertTableOptions];
    exitTable: [];
    selectTable: [options?: SelectTableOptions];
    selectTableCell: [options?: SelectTableCellOptions];
    selectTableColumn: [options?: SelectTableColumnOptions];
    selectTableRow: [options?: SelectTableRowOptions];
    addTableColumnBefore: [];
    addTableColumnAfter: [];
    ... 9 more ...;
    moveTableColumn: [options: MoveTableColumnOptions];
}>
All 
{@link 
CommandAction
}
s defined by the editor.
.addTableColumnBefore
addTableColumnBefore: CommandAction
() => boolean
Execute the current command. Return `true` if the command was successfully
executed, otherwise `false`.
()

addTableColumnAfter

Section titled “addTableColumnAfter”

Add a new column after the selected column.

editorconst editor: Editor<TableExtension>.commands
Editor<TableExtension>.commands: ToCommandAction<{
    insertTable: [options: InsertTableOptions];
    exitTable: [];
    selectTable: [options?: SelectTableOptions];
    selectTableCell: [options?: SelectTableCellOptions];
    selectTableColumn: [options?: SelectTableColumnOptions];
    selectTableRow: [options?: SelectTableRowOptions];
    addTableColumnBefore: [];
    addTableColumnAfter: [];
    ... 9 more ...;
    moveTableColumn: [options: MoveTableColumnOptions];
}>
All 
{@link 
CommandAction
}
s defined by the editor.
.addTableColumnAfter
addTableColumnAfter: CommandAction
() => boolean
Execute the current command. Return `true` if the command was successfully
executed, otherwise `false`.
()

addTableRowAbove

Section titled “addTableRowAbove”

Add a new row above the selected row or specific position.

editorconst editor: Editor<TableExtension>.commands
Editor<TableExtension>.commands: ToCommandAction<{
    insertTable: [options: InsertTableOptions];
    exitTable: [];
    selectTable: [options?: SelectTableOptions];
    selectTableCell: [options?: SelectTableCellOptions];
    selectTableColumn: [options?: SelectTableColumnOptions];
    selectTableRow: [options?: SelectTableRowOptions];
    addTableColumnBefore: [];
    addTableColumnAfter: [];
    ... 9 more ...;
    moveTableColumn: [options: MoveTableColumnOptions];
}>
All 
{@link 
CommandAction
}
s defined by the editor.
.addTableRowAbove
addTableRowAbove: CommandAction
() => boolean
Execute the current command. Return `true` if the command was successfully
executed, otherwise `false`.
()

addTableRowBelow

Section titled “addTableRowBelow”

Add a new row below the selected row or specific position.

editorconst editor: Editor<TableExtension>.commands
Editor<TableExtension>.commands: ToCommandAction<{
    insertTable: [options: InsertTableOptions];
    exitTable: [];
    selectTable: [options?: SelectTableOptions];
    selectTableCell: [options?: SelectTableCellOptions];
    selectTableColumn: [options?: SelectTableColumnOptions];
    selectTableRow: [options?: SelectTableRowOptions];
    addTableColumnBefore: [];
    addTableColumnAfter: [];
    ... 9 more ...;
    moveTableColumn: [options: MoveTableColumnOptions];
}>
All 
{@link 
CommandAction
}
s defined by the editor.
.addTableRowBelow
addTableRowBelow: CommandAction
() => boolean
Execute the current command. Return `true` if the command was successfully
executed, otherwise `false`.
()

deleteTable

Section titled “deleteTable”

Delete the selected table.

editorconst editor: Editor<TableExtension>.commands
Editor<TableExtension>.commands: ToCommandAction<{
    insertTable: [options: InsertTableOptions];
    exitTable: [];
    selectTable: [options?: SelectTableOptions];
    selectTableCell: [options?: SelectTableCellOptions];
    selectTableColumn: [options?: SelectTableColumnOptions];
    selectTableRow: [options?: SelectTableRowOptions];
    addTableColumnBefore: [];
    addTableColumnAfter: [];
    ... 9 more ...;
    moveTableColumn: [options: MoveTableColumnOptions];
}>
All 
{@link 
CommandAction
}
s defined by the editor.
.deleteTable
deleteTable: CommandAction
() => boolean
Execute the current command. Return `true` if the command was successfully
executed, otherwise `false`.
()

deleteTableColumn

Section titled “deleteTableColumn”

Delete the selected column or specific position.

editorconst editor: Editor<TableExtension>.commands
Editor<TableExtension>.commands: ToCommandAction<{
    insertTable: [options: InsertTableOptions];
    exitTable: [];
    selectTable: [options?: SelectTableOptions];
    selectTableCell: [options?: SelectTableCellOptions];
    selectTableColumn: [options?: SelectTableColumnOptions];
    selectTableRow: [options?: SelectTableRowOptions];
    addTableColumnBefore: [];
    addTableColumnAfter: [];
    ... 9 more ...;
    moveTableColumn: [options: MoveTableColumnOptions];
}>
All 
{@link 
CommandAction
}
s defined by the editor.
.deleteTableColumn
deleteTableColumn: CommandAction
() => boolean
Execute the current command. Return `true` if the command was successfully
executed, otherwise `false`.
()

deleteTableRow

Section titled “deleteTableRow”

Delete the selected row or specific position.

editorconst editor: Editor<TableExtension>.commands
Editor<TableExtension>.commands: ToCommandAction<{
    insertTable: [options: InsertTableOptions];
    exitTable: [];
    selectTable: [options?: SelectTableOptions];
    selectTableCell: [options?: SelectTableCellOptions];
    selectTableColumn: [options?: SelectTableColumnOptions];
    selectTableRow: [options?: SelectTableRowOptions];
    addTableColumnBefore: [];
    addTableColumnAfter: [];
    ... 9 more ...;
    moveTableColumn: [options: MoveTableColumnOptions];
}>
All 
{@link 
CommandAction
}
s defined by the editor.
.deleteTableRow
deleteTableRow: CommandAction
() => boolean
Execute the current command. Return `true` if the command was successfully
executed, otherwise `false`.
()

deleteCellSelection

Section titled “deleteCellSelection”

Delete the cell selection.

editorconst editor: Editor<TableExtension>.commands
Editor<TableExtension>.commands: ToCommandAction<{
    insertTable: [options: InsertTableOptions];
    exitTable: [];
    selectTable: [options?: SelectTableOptions];
    selectTableCell: [options?: SelectTableCellOptions];
    selectTableColumn: [options?: SelectTableColumnOptions];
    selectTableRow: [options?: SelectTableRowOptions];
    addTableColumnBefore: [];
    addTableColumnAfter: [];
    ... 9 more ...;
    moveTableColumn: [options: MoveTableColumnOptions];
}>
All 
{@link 
CommandAction
}
s defined by the editor.
.deleteCellSelection
deleteCellSelection: CommandAction
() => boolean
Execute the current command. Return `true` if the command was successfully
executed, otherwise `false`.
()

mergeTableCells

Section titled “mergeTableCells”

Merge the selected cells.

editorconst editor: Editor<TableExtension>.commands
Editor<TableExtension>.commands: ToCommandAction<{
    insertTable: [options: InsertTableOptions];
    exitTable: [];
    selectTable: [options?: SelectTableOptions];
    selectTableCell: [options?: SelectTableCellOptions];
    selectTableColumn: [options?: SelectTableColumnOptions];
    selectTableRow: [options?: SelectTableRowOptions];
    addTableColumnBefore: [];
    addTableColumnAfter: [];
    ... 9 more ...;
    moveTableColumn: [options: MoveTableColumnOptions];
}>
All 
{@link 
CommandAction
}
s defined by the editor.
.mergeTableCells
mergeTableCells: CommandAction
() => boolean
Execute the current command. Return `true` if the command was successfully
executed, otherwise `false`.
()

splitTableCell

Section titled “splitTableCell”

Split the selected cell.

editorconst editor: Editor<TableExtension>.commands
Editor<TableExtension>.commands: ToCommandAction<{
    insertTable: [options: InsertTableOptions];
    exitTable: [];
    selectTable: [options?: SelectTableOptions];
    selectTableCell: [options?: SelectTableCellOptions];
    selectTableColumn: [options?: SelectTableColumnOptions];
    selectTableRow: [options?: SelectTableRowOptions];
    addTableColumnBefore: [];
    addTableColumnAfter: [];
    ... 9 more ...;
    moveTableColumn: [options: MoveTableColumnOptions];
}>
All 
{@link 
CommandAction
}
s defined by the editor.
.splitTableCell
splitTableCell: CommandAction
() => boolean
Execute the current command. Return `true` if the command was successfully
executed, otherwise `false`.
()

moveTableColumn

Section titled “moveTableColumn”

Move a column.

// Move the second column to the first column
editorconst editor: Editor<TableExtension>.commands
Editor<TableExtension>.commands: ToCommandAction<{
    insertTable: [options: InsertTableOptions];
    exitTable: [];
    selectTable: [options?: SelectTableOptions];
    selectTableCell: [options?: SelectTableCellOptions];
    selectTableColumn: [options?: SelectTableColumnOptions];
    selectTableRow: [options?: SelectTableRowOptions];
    addTableColumnBefore: [];
    addTableColumnAfter: [];
    ... 9 more ...;
    moveTableColumn: [options: MoveTableColumnOptions];
}>
All 
{@link 
CommandAction
}
s defined by the editor.
.moveTableColumn
moveTableColumn: CommandAction
(options: MoveTableColumnOptions) => boolean
Execute the current command. Return `true` if the command was successfully
executed, otherwise `false`.
({ fromMoveTableColumnOptions.from: number
The source column index to move from.
: 1, toMoveTableColumnOptions.to: number
The destination column index to move to.
: 0 })

moveTableRow

Section titled “moveTableRow”

Move a row.

// Move the first row to the 4th row
editorconst editor: Editor<TableExtension>.commands
Editor<TableExtension>.commands: ToCommandAction<{
    insertTable: [options: InsertTableOptions];
    exitTable: [];
    selectTable: [options?: SelectTableOptions];
    selectTableCell: [options?: SelectTableCellOptions];
    selectTableColumn: [options?: SelectTableColumnOptions];
    selectTableRow: [options?: SelectTableRowOptions];
    addTableColumnBefore: [];
    addTableColumnAfter: [];
    ... 9 more ...;
    moveTableColumn: [options: MoveTableColumnOptions];
}>
All 
{@link 
CommandAction
}
s defined by the editor.
.moveTableRow
moveTableRow: CommandAction
(options: MoveTableRowOptions) => boolean
Execute the current command. Return `true` if the command was successfully
executed, otherwise `false`.
({ fromMoveTableRowOptions.from: number
The source row index to move from.
: 0, toMoveTableRowOptions.to: number
The destination row index to move to.
: 3 })

Plugins

Section titled “Plugins”

tableEditing and columnResizing

Section titled “tableEditing and columnResizing”

These plugins are built-in plugins in prosemirror-tables.

import { defineTablePluginsfunction defineTablePlugins(): PlainExtension
@public
 } from 'prosekit/extensions/table'

const extensionconst extension: PlainExtension = defineTablePluginsfunction defineTablePlugins(): PlainExtension
@public
()

Components

Section titled “Components”

TableHandle

Section titled “TableHandle”

You can use the TableHandle component to control the table.

API Reference

Section titled “API Reference”