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>
`
import {
defineBaseKeymap,
defineHistory,
union,
} from 'prosekit/core'
import { defineDoc } from 'prosekit/extensions/doc'
import { defineGapCursor } from 'prosekit/extensions/gap-cursor'
import { defineParagraph } from 'prosekit/extensions/paragraph'
import { defineTable } from 'prosekit/extensions/table'
import { defineText } from 'prosekit/extensions/text'
export function defineExtension() {
return union(
defineBaseKeymap(),
defineDoc(),
defineText(),
defineParagraph(),
defineTable(),
defineHistory(),
defineGapCursor(),
)
}
export type EditorExtension = ReturnType<typeof defineExtension>
import type { Editor } from 'prosekit/core'
import { useEditorDerivedValue } from 'prosekit/react'
import {
TableHandleColumnRoot,
TableHandleColumnTrigger,
TableHandlePopoverContent,
TableHandlePopoverItem,
TableHandleRoot,
TableHandleRowRoot,
TableHandleRowTrigger,
} from 'prosekit/react/table-handle'
import type { EditorExtension } from './extension'
function getTableHandleState(editor: Editor<EditorExtension>) {
return {
addTableColumnBefore: {
canExec: editor.commands.addTableColumnBefore.canExec(),
command: () => editor.commands.addTableColumnBefore(),
},
addTableColumnAfter: {
canExec: editor.commands.addTableColumnAfter.canExec(),
command: () => editor.commands.addTableColumnAfter(),
},
deleteCellSelection: {
canExec: editor.commands.deleteCellSelection.canExec(),
command: () => editor.commands.deleteCellSelection(),
},
deleteTableColumn: {
canExec: editor.commands.deleteTableColumn.canExec(),
command: () => editor.commands.deleteTableColumn(),
},
addTableRowAbove: {
canExec: editor.commands.addTableRowAbove.canExec(),
command: () => editor.commands.addTableRowAbove(),
},
addTableRowBelow: {
canExec: editor.commands.addTableRowBelow.canExec(),
command: () => editor.commands.addTableRowBelow(),
},
deleteTableRow: {
canExec: editor.commands.deleteTableRow.canExec(),
command: () => editor.commands.deleteTableRow(),
},
}
}
export function TableHandle() {
const state = useEditorDerivedValue(getTableHandleState)
return (
<TableHandleRoot className="contents">
<TableHandleColumnRoot className="flex items-center box-border justify-center h-[1.2em] w-[1.5em] bg-white hover:bg-gray-100 dark:hover:bg-gray-800 rounded text-gray-500/50 dark:text-gray-500/50 translate-y-3 border border-gray-200 dark:border-gray-800 border-solid [&:not([data-state])]:hidden will-change-transform data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=open]:fade-in-0 data-[state=closed]:fade-out-0 data-[state=open]:zoom-in-95 data-[state=closed]:zoom-out-95 data-[state=open]:animate-duration-150 data-[state=closed]:animate-duration-200">
<TableHandleColumnTrigger>
<div className="i-lucide-grip-horizontal h-5 w-5"></div>
</TableHandleColumnTrigger>
<TableHandlePopoverContent className="relative block max-h-[25rem] min-w-[8rem] select-none overflow-auto whitespace-nowrap p-1 z-10 box-border rounded-lg border border-gray-200 dark:border-gray-800 bg-white dark:bg-gray-950 shadow-lg [&:not([data-state])]:hidden">
{state.addTableColumnBefore.canExec && (
<TableHandlePopoverItem
className="relative min-w-[8rem] scroll-my-1 rounded px-3 py-1.5 flex items-center justify-between gap-8 data-[disabled=true]:pointer-events-none data-[disabled=true]:opacity-50 hover:data-[disabled=true]:opacity-50 box-border cursor-default select-none whitespace-nowrap outline-none data-[focused]:bg-gray-100 dark:data-[focused]:bg-gray-800"
onSelect={state.addTableColumnBefore.command}
>
<span>Insert Left</span>
</TableHandlePopoverItem>
)}
{state.addTableColumnAfter.canExec && (
<TableHandlePopoverItem
className="relative min-w-[8rem] scroll-my-1 rounded px-3 py-1.5 flex items-center justify-between gap-8 data-[disabled=true]:pointer-events-none data-[disabled=true]:opacity-50 hover:data-[disabled=true]:opacity-50 box-border cursor-default select-none whitespace-nowrap outline-none data-[focused]:bg-gray-100 dark:data-[focused]:bg-gray-800"
onSelect={state.addTableColumnAfter.command}
>
<span>Insert Right</span>
</TableHandlePopoverItem>
)}
{state.deleteCellSelection.canExec && (
<TableHandlePopoverItem
className="relative min-w-[8rem] scroll-my-1 rounded px-3 py-1.5 flex items-center justify-between gap-8 data-[disabled=true]:pointer-events-none data-[disabled=true]:opacity-50 hover:data-[disabled=true]:opacity-50 box-border cursor-default select-none whitespace-nowrap outline-none data-[focused]:bg-gray-100 dark:data-[focused]:bg-gray-800"
onSelect={state.deleteCellSelection.command}
>
<span>Clear Contents</span>
<span className="text-xs tracking-widest text-gray-500 dark:text-gray-500">Del</span>
</TableHandlePopoverItem>
)}
{state.deleteTableColumn.canExec && (
<TableHandlePopoverItem
className="relative min-w-[8rem] scroll-my-1 rounded px-3 py-1.5 flex items-center justify-between gap-8 data-[disabled=true]:pointer-events-none data-[disabled=true]:opacity-50 hover:data-[disabled=true]:opacity-50 box-border cursor-default select-none whitespace-nowrap outline-none data-[focused]:bg-gray-100 dark:data-[focused]:bg-gray-800"
onSelect={state.deleteTableColumn.command}
>
<span>Delete Column</span>
</TableHandlePopoverItem>
)}
</TableHandlePopoverContent>
</TableHandleColumnRoot>
<TableHandleRowRoot className="flex items-center box-border justify-center h-[1.5em] w-[1.2em] bg-white hover:bg-gray-100 dark:hover:bg-gray-800 rounded text-gray-500/50 dark:text-gray-500/50 translate-x-3 border border-gray-200 dark:border-gray-800 border-solid [&:not([data-state])]:hidden will-change-transform data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=open]:fade-in-0 data-[state=closed]:fade-out-0 data-[state=open]:zoom-in-95 data-[state=closed]:zoom-out-95 data-[state=open]:animate-duration-150 data-[state=closed]:animate-duration-200">
<TableHandleRowTrigger>
<div className="i-lucide-grip-vertical h-5 w-5"></div>
</TableHandleRowTrigger>
<TableHandlePopoverContent className="relative block max-h-[25rem] min-w-[8rem] select-none overflow-auto whitespace-nowrap p-1 z-10 box-border rounded-lg border border-gray-200 dark:border-gray-800 bg-white dark:bg-gray-950 shadow-lg [&:not([data-state])]:hidden">
{state.addTableRowAbove.canExec && (
<TableHandlePopoverItem
className="relative min-w-[8rem] scroll-my-1 rounded px-3 py-1.5 flex items-center justify-between gap-8 data-[disabled=true]:pointer-events-none data-[disabled=true]:opacity-50 hover:data-[disabled=true]:opacity-50 box-border cursor-default select-none whitespace-nowrap outline-none data-[focused]:bg-gray-100 dark:data-[focused]:bg-gray-800"
onSelect={state.addTableRowAbove.command}
>
<span>Insert Above</span>
</TableHandlePopoverItem>
)}
{state.addTableRowBelow.canExec && (
<TableHandlePopoverItem
className="relative min-w-[8rem] scroll-my-1 rounded px-3 py-1.5 flex items-center justify-between gap-8 data-[disabled=true]:pointer-events-none data-[disabled=true]:opacity-50 hover:data-[disabled=true]:opacity-50 box-border cursor-default select-none whitespace-nowrap outline-none data-[focused]:bg-gray-100 dark:data-[focused]:bg-gray-800"
onSelect={state.addTableRowBelow.command}
>
<span>Insert Below</span>
</TableHandlePopoverItem>
)}
{state.deleteCellSelection.canExec && (
<TableHandlePopoverItem
className="relative min-w-[8rem] scroll-my-1 rounded px-3 py-1.5 flex items-center justify-between gap-8 data-[disabled=true]:pointer-events-none data-[disabled=true]:opacity-50 hover:data-[disabled=true]:opacity-50 box-border cursor-default select-none whitespace-nowrap outline-none data-[focused]:bg-gray-100 dark:data-[focused]:bg-gray-800"
onSelect={state.deleteCellSelection.command}
>
<span>Clear Contents</span>
<span className="text-xs tracking-widest text-gray-500 dark:text-gray-500">Del</span>
</TableHandlePopoverItem>
)}
{state.deleteTableRow.canExec && (
<TableHandlePopoverItem
className="relative min-w-[8rem] scroll-my-1 rounded px-3 py-1.5 flex items-center justify-between gap-8 data-[disabled=true]:pointer-events-none data-[disabled=true]:opacity-50 hover:data-[disabled=true]:opacity-50 box-border cursor-default select-none whitespace-nowrap outline-none data-[focused]:bg-gray-100 dark:data-[focused]:bg-gray-800"
onSelect={state.deleteTableRow.command}
>
<span>Delete Row</span>
</TableHandlePopoverItem>
)}
</TableHandlePopoverContent>
</TableHandleRowRoot>
</TableHandleRoot>
)
}
<script setup lang="ts">
import 'prosekit/basic/style.css'
import 'prosekit/basic/typography.css'
import { createEditor } from 'prosekit/core'
import { ProseKit } from 'prosekit/vue'
import {
ref,
watchPostEffect,
} from 'vue'
import { defineExtension } from './extension'
import TableHandle from './table-handle.vue'
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>
`
const editor = createEditor({ extension: defineExtension(), defaultContent })
const editorRef = ref<HTMLDivElement | null>(null)
watchPostEffect((onCleanup) => {
editor.mount(editorRef.value)
onCleanup(() => editor.unmount())
})
function addTable() {
editor.commands.exitTable()
editor.commands.insertTable({ row: 3, col: 3, header: true })
}
</script>
<template>
<button @click="addTable">Add table</button>
<ProseKit :editor="editor">
<div class="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 class="relative w-full flex-1 box-border overflow-y-scroll">
<div ref="editorRef" class="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>
</ProseKit>
</template>
import { defineBaseKeymap } from 'prosekit/core'
import { union } from 'prosekit/core'
import { defineDoc } from 'prosekit/extensions/doc'
import { defineParagraph } from 'prosekit/extensions/paragraph'
import { defineTable } from 'prosekit/extensions/table'
import { defineText } from 'prosekit/extensions/text'
export function defineExtension() {
return union(
defineBaseKeymap(),
defineDoc(),
defineText(),
defineParagraph(),
defineTable(),
)
}
export type EditorExtension = ReturnType<typeof defineExtension>
<script setup lang="ts">
import { useEditor } from 'prosekit/vue'
import {
TableHandleColumnRoot,
TableHandleColumnTrigger,
TableHandlePopoverContent,
TableHandlePopoverItem,
TableHandleRoot,
TableHandleRowRoot,
TableHandleRowTrigger,
} from 'prosekit/vue/table-handle'
import type { EditorExtension } from './extension'
const editor = useEditor<EditorExtension>({ update: true })
</script>
<template>
<TableHandleRoot class="contents">
<TableHandleColumnRoot class="flex items-center box-border justify-center h-[1.2em] w-[1.5em] bg-white hover:bg-gray-100 dark:hover:bg-gray-800 rounded text-gray-500/50 dark:text-gray-500/50 translate-y-3 border border-gray-200 dark:border-gray-800 border-solid [&:not([data-state])]:hidden will-change-transform data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=open]:fade-in-0 data-[state=closed]:fade-out-0 data-[state=open]:zoom-in-95 data-[state=closed]:zoom-out-95 data-[state=open]:animate-duration-150 data-[state=closed]:animate-duration-200">
<TableHandleColumnTrigger>
<div class="i-lucide-grip-horizontal h-5 w-5"></div>
</TableHandleColumnTrigger>
<TableHandlePopoverContent class="relative block max-h-[25rem] min-w-[8rem] select-none overflow-auto whitespace-nowrap p-1 z-10 box-border rounded-lg border border-gray-200 dark:border-gray-800 bg-white dark:bg-gray-950 shadow-lg [&:not([data-state])]:hidden">
<TableHandlePopoverItem
v-if="editor.commands.addTableColumnBefore.canExec()"
class="relative min-w-[8rem] scroll-my-1 rounded px-3 py-1.5 flex items-center justify-between gap-8 data-[disabled=true]:pointer-events-none data-[disabled=true]:opacity-50 hover:data-[disabled=true]:opacity-50 box-border cursor-default select-none whitespace-nowrap outline-none data-[focused]:bg-gray-100 dark:data-[focused]:bg-gray-800"
@select="editor.commands.addTableColumnBefore"
>
<span>Insert Left</span>
</TableHandlePopoverItem>
<TableHandlePopoverItem
v-if="editor.commands.addTableColumnAfter.canExec()"
class="relative min-w-[8rem] scroll-my-1 rounded px-3 py-1.5 flex items-center justify-between gap-8 data-[disabled=true]:pointer-events-none data-[disabled=true]:opacity-50 hover:data-[disabled=true]:opacity-50 box-border cursor-default select-none whitespace-nowrap outline-none data-[focused]:bg-gray-100 dark:data-[focused]:bg-gray-800"
@select="editor.commands.addTableColumnAfter"
>
<span>Insert Right</span>
</TableHandlePopoverItem>
<TableHandlePopoverItem
v-if="editor.commands.deleteCellSelection.canExec()"
class="relative min-w-[8rem] scroll-my-1 rounded px-3 py-1.5 flex items-center justify-between gap-8 data-[disabled=true]:pointer-events-none data-[disabled=true]:opacity-50 hover:data-[disabled=true]:opacity-50 box-border cursor-default select-none whitespace-nowrap outline-none data-[focused]:bg-gray-100 dark:data-[focused]:bg-gray-800"
@select="editor.commands.deleteCellSelection"
>
<span>Clear Contents</span>
<span class="text-xs tracking-widest text-gray-500 dark:text-gray-500">Del</span>
</TableHandlePopoverItem>
<TableHandlePopoverItem
v-if="editor.commands.deleteTableColumn.canExec()"
class="relative min-w-[8rem] scroll-my-1 rounded px-3 py-1.5 flex items-center justify-between gap-8 data-[disabled=true]:pointer-events-none data-[disabled=true]:opacity-50 hover:data-[disabled=true]:opacity-50 box-border cursor-default select-none whitespace-nowrap outline-none data-[focused]:bg-gray-100 dark:data-[focused]:bg-gray-800"
@select="editor.commands.deleteTableColumn"
>
<span>Delete Column</span>
</TableHandlePopoverItem>
</TableHandlePopoverContent>
</TableHandleColumnRoot>
<TableHandleRowRoot class="flex items-center box-border justify-center h-[1.5em] w-[1.2em] bg-white hover:bg-gray-100 dark:hover:bg-gray-800 rounded text-gray-500/50 dark:text-gray-500/50 translate-x-3 border border-gray-200 dark:border-gray-800 border-solid [&:not([data-state])]:hidden will-change-transform data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=open]:fade-in-0 data-[state=closed]:fade-out-0 data-[state=open]:zoom-in-95 data-[state=closed]:zoom-out-95 data-[state=open]:animate-duration-150 data-[state=closed]:animate-duration-200">
<TableHandleRowTrigger>
<div class="i-lucide-grip-vertical h-5 w-5"></div>
</TableHandleRowTrigger>
<TableHandlePopoverContent class="relative block max-h-[25rem] min-w-[8rem] select-none overflow-auto whitespace-nowrap p-1 z-10 box-border rounded-lg border border-gray-200 dark:border-gray-800 bg-white dark:bg-gray-950 shadow-lg [&:not([data-state])]:hidden">
<TableHandlePopoverItem
v-if="editor.commands.addTableRowAbove.canExec()"
class="relative min-w-[8rem] scroll-my-1 rounded px-3 py-1.5 flex items-center justify-between gap-8 data-[disabled=true]:pointer-events-none data-[disabled=true]:opacity-50 hover:data-[disabled=true]:opacity-50 box-border cursor-default select-none whitespace-nowrap outline-none data-[focused]:bg-gray-100 dark:data-[focused]:bg-gray-800"
@select="editor.commands.addTableRowAbove"
>
<span>Insert Above</span>
</TableHandlePopoverItem>
<TableHandlePopoverItem
v-if="editor.commands.addTableRowBelow.canExec()"
class="relative min-w-[8rem] scroll-my-1 rounded px-3 py-1.5 flex items-center justify-between gap-8 data-[disabled=true]:pointer-events-none data-[disabled=true]:opacity-50 hover:data-[disabled=true]:opacity-50 box-border cursor-default select-none whitespace-nowrap outline-none data-[focused]:bg-gray-100 dark:data-[focused]:bg-gray-800"
@select="editor.commands.addTableRowBelow"
>
<span>Insert Below</span>
</TableHandlePopoverItem>
<TableHandlePopoverItem
v-if="editor.commands.deleteCellSelection.canExec()"
class="relative min-w-[8rem] scroll-my-1 rounded px-3 py-1.5 flex items-center justify-between gap-8 data-[disabled=true]:pointer-events-none data-[disabled=true]:opacity-50 hover:data-[disabled=true]:opacity-50 box-border cursor-default select-none whitespace-nowrap outline-none data-[focused]:bg-gray-100 dark:data-[focused]:bg-gray-800"
@select="editor.commands.deleteCellSelection"
>
<span>Clear Contents</span>
<span class="text-xs tracking-widest text-gray-500 dark:text-gray-500">Del</span>
</TableHandlePopoverItem>
<TableHandlePopoverItem
v-if="editor.commands.deleteTableRow.canExec()"
class="relative min-w-[8rem] scroll-my-1 rounded px-3 py-1.5 flex items-center justify-between gap-8 data-[disabled=true]:pointer-events-none data-[disabled=true]:opacity-50 hover:data-[disabled=true]:opacity-50 box-border cursor-default select-none whitespace-nowrap outline-none data-[focused]:bg-gray-100 dark:data-[focused]:bg-gray-800"
@select="editor.commands.deleteTableRow"
>
<span>Delete Row</span>
</TableHandlePopoverItem>
</TableHandlePopoverContent>
</TableHandleRowRoot>
</TableHandleRoot>
</template>
import { defineTable function defineTable(): TableExtension
} from 'prosekit/extensions/table'
const extension const extension: TableExtension
= defineTable function defineTable(): TableExtension
()
Commands
Section titled “Commands”insertTable
Section titled “insertTable”Insert a new table.
editor const 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`. ({ row InsertTableOptions.row: number
The number of rows in the table. : 3, col InsertTableOptions.col: number
The number of columns in the table. : 3, header InsertTableOptions.header?: boolean | undefined
Whether the table has a header row. : true })
exitTable
Section titled “exitTable”Exit the table.
editor const 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.
editor const 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.
editor const 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.
editor const 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.
editor const 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.
editor const 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.
editor const 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.
editor const 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.
editor const 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.
editor const 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.
editor const 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.
editor const 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.
editor const 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.
editor const 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.
editor const 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 { defineTablePlugins function defineTablePlugins(): PlainExtension
} from 'prosekit/extensions/table'
const extension const extension: PlainExtension
= defineTablePlugins function defineTablePlugins(): PlainExtension
()
Components
Section titled “Components”TableHandle
Section titled “TableHandle”You can use the TableHandle
component to control the table.