Table
Organize and display data in a structured and resizable tabular format.
🏓 Table
Plugin | Element | Inline | Void |
|---|---|---|---|
Heading | Yes | No | No |
Image | Yes | No | Yes |
Mention | Yes | Yes | Yes |
Heading | |
|---|---|
Cell 1 | Cell 2 |
Installation
npm install @udecode/plate-tableUsage
// ...
import { createTablePlugin } from '@udecode/plate-table';
const plugins = [
// ...otherPlugins,
createTablePlugin({
options: {
initialTableWidth: 600,
},
}),
];API
createTablePlugin
Attributes
- Default: an empty paragraph
- Default:
insertTableColumn - Default:
insertTableRow - Default:
48
Options.
Disables the expansion of the table when inserting cells.
Disables the left resizer of the first column in the table.
Disables unsetting the width of the first column when the table has only one column. Set this to true if you want to resize the table width when there's only one column. Leave it false if you have a full-width table.
Defines the content of a newly inserted cell.
The function to insert a new column into the table.
The function to insert a new row into the table.
If defined, a normalizer will set each undefined table colSizes to this value divided by the number of columns. Note that merged cells are not yet supported.
The minimum width of a column in the table.
deleteColumn
deleteRow
deleteTable
getCellInNextTableRow
getCellInPreviousTableRow
getCellType
getEmptyCellNode
getEmptyRowNode
getEmptyTableNode
getLeftTableCell
getNextTableCell
getPreviousTableCell
getTableAbove
getTableColumnCount
getTableColumnIndex
getTableEntries
getTableGridAbove
getTableGridByRange
getTableOverriddenColSizes
getTableRowIndex
getTopTableCell
insertTable
insertTableColumn
insertTableRow
isTableBorderHidden
moveSelectionFromCell
overrideSelectionFromCell
setBorderSize
setTableColSize
setTableMarginLeft
setTableRowSize
API Plugin
onKeyDownTable
withDeleteTable
withGetFragmentTable
withInsertFragmentTable
withInsertTextTable
withNormalizeTable
withSelectionTable
withSetFragmentDataTable
withTable
API Components
TableCellElementResizable
getOnSelectTableBorderFactory
getTableCellBorders
roundCellSizeToStep
tableStore
useIsCellSelected
useSelectedCells
useTableBordersDropdownMenuContentState
useTableCellElementState
useTableColSizes
useTableElement
Keyboard Interactions
| Key | Description |
|---|---|
| Shift + ArrowUp | Add the cell above to selection. |
| Shift + ArrowDown | Add the cell below to selection. |
| Shift + ArrowLeft | Add the left cell to selection. |
| Shift + ArrowRight | Add the right cell to selection. |
| Shift + Tab | Select the previous cell. |
| Tab | Select the next cell. |
| Cmd + A | Select all the table cells. |