From 0029f84d508fdc5e739bcdecdf4dd3c2ee44f1a0 Mon Sep 17 00:00:00 2001
From: Philip Okugbe <16838612+Philipinho@users.noreply.github.com>
Date: Mon, 9 Jun 2025 05:39:43 +0100
Subject: [PATCH] feat: toggle table header row and column (#1203)

* feat: toggle table header row and column
* switch position
---
 .../editor/components/table/table-menu.tsx    | 36 +++++++++++++++++--
 1 file changed, 34 insertions(+), 2 deletions(-)

diff --git a/apps/client/src/features/editor/components/table/table-menu.tsx b/apps/client/src/features/editor/components/table/table-menu.tsx
index 5321b907..1d2985e8 100644
--- a/apps/client/src/features/editor/components/table/table-menu.tsx
+++ b/apps/client/src/features/editor/components/table/table-menu.tsx
@@ -17,9 +17,9 @@ import {
   IconColumnRemove,
   IconRowInsertBottom,
   IconRowInsertTop,
-  IconRowRemove,
+  IconRowRemove, IconTableColumn, IconTableRow,
   IconTrashX,
-} from "@tabler/icons-react";
+} from '@tabler/icons-react';
 import { isCellSelection } from "@docmost/editor-ext";
 import { useTranslation } from "react-i18next";
 
@@ -50,6 +50,14 @@ export const TableMenu = React.memo(
       return posToDOMRect(editor.view, selection.from, selection.to);
     }, [editor]);
 
+    const toggleHeaderColumn = useCallback(() => {
+      editor.chain().focus().toggleHeaderColumn().run();
+    }, [editor]);
+
+    const toggleHeaderRow = useCallback(() => {
+      editor.chain().focus().toggleHeaderRow().run();
+    }, [editor]);
+
     const addColumnLeft = useCallback(() => {
       editor.chain().focus().addColumnBefore().run();
     }, [editor]);
@@ -180,6 +188,30 @@ export const TableMenu = React.memo(
             </ActionIcon>
           </Tooltip>
 
+          <Tooltip position="top" label={t("Toggle header row")}
+          >
+            <ActionIcon
+              onClick={toggleHeaderRow}
+              variant="default"
+              size="lg"
+              aria-label={t("Toggle header row")}
+            >
+              <IconTableRow size={18} />
+            </ActionIcon>
+          </Tooltip>
+
+          <Tooltip position="top" label={t("Toggle header column")}
+          >
+            <ActionIcon
+              onClick={toggleHeaderColumn}
+              variant="default"
+              size="lg"
+              aria-label={t("Toggle header column")}
+            >
+              <IconTableColumn size={18} />
+            </ActionIcon>
+          </Tooltip>
+
           <Tooltip position="top" label={t("Delete table")}>
             <ActionIcon
               onClick={deleteTable}