diff --git a/.changeset/violet-worms-guess.md b/.changeset/violet-worms-guess.md new file mode 100644 index 0000000000..d9d6a55032 --- /dev/null +++ b/.changeset/violet-worms-guess.md @@ -0,0 +1,5 @@ +--- +'@udecode/plate-table': patch +--- + +Fix table header property and apply header to only the top row of new tables diff --git a/apps/www/content/docs/table.mdx b/apps/www/content/docs/table.mdx index 76c4b5f292..84213a3b67 100644 --- a/apps/www/content/docs/table.mdx +++ b/apps/www/content/docs/table.mdx @@ -258,6 +258,9 @@ The editor instance. Extends `GetEmptyCellNodeOptions`. + +Specify `true` if the row is a header row. + The number of columns in the row. @@ -286,7 +289,7 @@ The editor instance. Extends `GetEmptyRowNodeOptions`. - + Specify `true` if the table has a header row. @@ -628,7 +631,7 @@ The number of columns in the table. -If true, the first row of the table will be treated as a header row. +If `true`, the first row of the table will be treated as a header row. diff --git a/apps/www/src/components/plate-ui/playground-fixed-toolbar-buttons.tsx b/apps/www/src/components/plate-ui/playground-fixed-toolbar-buttons.tsx index 680425a729..bc5c306b45 100644 --- a/apps/www/src/components/plate-ui/playground-fixed-toolbar-buttons.tsx +++ b/apps/www/src/components/plate-ui/playground-fixed-toolbar-buttons.tsx @@ -148,7 +148,9 @@ export function PlaygroundFixedToolbarButtons({ id }: { id?: ValueId }) { )} - {isEnabled('table', id) && } + {(isEnabled('table', id) || isEnabled('tableMerge', id)) && ( + + )} {isEnabled('emoji', id) && } diff --git a/packages/table/src/utils/getEmptyCellNode.ts b/packages/table/src/utils/getEmptyCellNode.ts index 3c737d2b4d..ddb371868d 100644 --- a/packages/table/src/utils/getEmptyCellNode.ts +++ b/packages/table/src/utils/getEmptyCellNode.ts @@ -15,11 +15,12 @@ export const getEmptyCellNode = ( { children, header, row }: CellFactoryOptions = {} ) => { header = - header ?? row + header ?? + (row ? (row as TElement).children.every( (c) => c.type === getPluginType(editor, ELEMENT_TH) ) - : false; + : false); return { children: children ?? [editor.blockFactory()], diff --git a/packages/table/src/utils/getEmptyTableNode.ts b/packages/table/src/utils/getEmptyTableNode.ts index 56b93f3590..996d143190 100644 --- a/packages/table/src/utils/getEmptyTableNode.ts +++ b/packages/table/src/utils/getEmptyTableNode.ts @@ -18,11 +18,22 @@ export interface GetEmptyTableNodeOptions extends GetEmptyRowNodeOptions { export const getEmptyTableNode = ( editor: PlateEditor, - { colCount, rowCount = 0, ...cellOptions }: GetEmptyTableNodeOptions = {} + { + colCount, + header, + rowCount = 0, + ...cellOptions + }: GetEmptyTableNodeOptions = {} ): TTableElement => { const rows = Array.from({ length: rowCount }) .fill(rowCount) - .map(() => getEmptyRowNode(editor, { colCount, ...cellOptions })); + .map((_, index) => + getEmptyRowNode(editor, { + colCount, + ...cellOptions, + header: header && index === 0, + }) + ); return { children: rows,