Merge pull request #3383 from EvanSmith93/fix/table-headers

Fix table headers not working correctly
udecode · Jul 20, 2024 · 284a2ad · 284a2ad
2 parents 7ada424 + ea62175
commit 284a2ad
Show file tree

Hide file tree

Showing 5 changed files with 29 additions and 7 deletions.
diff --git a/.changeset/violet-worms-guess.md 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
@@ -258,6 +258,9 @@ The editor instance.
 <APIItem name="options" type="GetEmptyRowNodeOptions" optional>
 Extends `GetEmptyCellNodeOptions`.
 <APISubList>
+<APISubListItem parent="options" name="header" type="boolean" optional>
+Specify `true` if the row is a header row.
+</APISubListItem>
 <APISubListItem parent="options" name="colCount" type="number" optional>
 The number of columns in the row.
 
@@ -286,7 +289,7 @@ The editor instance.
 <APIItem name="options" type="GetEmptyTableNodeOptions" optional>
 Extends `GetEmptyRowNodeOptions`.
 <APISubList>
-<APISubListItem parent="options" name="header" type="boolean | undefined" optional>
+<APISubListItem parent="options" name="header" type="boolean" optional>
 Specify `true` if the table has a header row.
 </APISubListItem>
 <APISubListItem parent="options" name="rowCount" type="number" optional>
@@ -628,7 +631,7 @@ The number of columns in the table.
 
 </APISubListItem>
 <APISubListItem parent="getEmptyTableNodeOptions" name="header" type="boolean" optional>
-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.
 </APISubListItem>
 </APISubList>
 

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
@@ -148,7 +148,9 @@ export function PlaygroundFixedToolbarButtons({ id }: { id?: ValueId }) {
                 <MediaToolbarButton nodeType={ELEMENT_IMAGE} />
               )}
 
-              {isEnabled('table', id) && <TableDropdownMenu />}
+              {(isEnabled('table', id) || isEnabled('tableMerge', id)) && (
+                <TableDropdownMenu />
+              )}
 
               {isEnabled('emoji', id) && <EmojiDropdownMenu />}
 

diff --git a/packages/table/src/utils/getEmptyCellNode.ts b/packages/table/src/utils/getEmptyCellNode.ts
@@ -15,11 +15,12 @@ export const getEmptyCellNode = <V extends Value>(
   { 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
@@ -18,11 +18,22 @@ export interface GetEmptyTableNodeOptions extends GetEmptyRowNodeOptions {
 
 export const getEmptyTableNode = <V extends Value>(
   editor: PlateEditor<V>,
-  { 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,