Skip to content
ProseKit
GitHub

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 flex flex-col bg-white dark:bg-gray-950 color-black dark:color-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-none 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>1</td>
    <td>2</td>
    <td>3</td>
    <td>4</td>
  </tr>
  <tr>
    <td>5</td>
    <td>6</td>
    <td>7</td>
    <td>8</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];
    ... 12 more ...;
    splitTableCell: [];
}>
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];
    ... 12 more ...;
    splitTableCell: [];
}>
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];
    ... 12 more ...;
    splitTableCell: [];
}>
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];
    ... 12 more ...;
    splitTableCell: [];
}>
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];
    ... 12 more ...;
    splitTableCell: [];
}>
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];
    ... 12 more ...;
    splitTableCell: [];
}>
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];
    ... 12 more ...;
    splitTableCell: [];
}>
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];
    ... 12 more ...;
    splitTableCell: [];
}>
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];
    ... 12 more ...;
    splitTableCell: [];
}>
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];
    ... 12 more ...;
    splitTableCell: [];
}>
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];
    ... 12 more ...;
    splitTableCell: [];
}>
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];
    ... 12 more ...;
    splitTableCell: [];
}>
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];
    ... 12 more ...;
    splitTableCell: [];
}>
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];
    ... 12 more ...;
    splitTableCell: [];
}>
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];
    ... 12 more ...;
    splitTableCell: [];
}>
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];
    ... 12 more ...;
    splitTableCell: [];
}>
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`.
()

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”