From 35032b08d63d2538576c180a96c8dbb2cba6ef6b Mon Sep 17 00:00:00 2001
From: tapo4ek <tapo4ek@yandex-team.ru>
Date: Fri, 25 Oct 2024 17:06:23 +0300
Subject: [PATCH] fix(TableSettings): review fixes

---
 README.md                                              |  2 +-
 .../TableSettings/TableSettings.extentions.ts          |  2 +-
 .../__stories__/stories/TableSettingsColumnStory.tsx   | 10 ++++++++--
 .../TableSettingsColumn/TableSettingsColumn.tsx        |  8 +++++---
 src/constants/actionsColumn.tsx                        |  3 +++
 src/constants/dragHandleColumn.tsx                     |  3 +++
 6 files changed, 21 insertions(+), 7 deletions(-)

diff --git a/README.md b/README.md
index bbc26e9..5bf4ae8 100644
--- a/README.md
+++ b/README.md
@@ -362,7 +362,7 @@ const columns: ColumnDef<Person>[] = [
     header: ({table}) => <TableSettings table={table} />,
     meta: {
       hideInSettings: false, // Optional. Allows to hide this column from settings popover
-      inSettings: 'some string or any html', // Optional. Overrides header field for settings popover (if you need different content for header and settings popover)
+      titleInSettings: 'ReactNode', // Optional. Overrides header field for settings popover (if you need different content for header and settings popover)
     },
   }, // or you can use function getSettingsColumn
 ];
diff --git a/src/components/TableSettings/TableSettings.extentions.ts b/src/components/TableSettings/TableSettings.extentions.ts
index fea0702..b0f641d 100644
--- a/src/components/TableSettings/TableSettings.extentions.ts
+++ b/src/components/TableSettings/TableSettings.extentions.ts
@@ -3,6 +3,6 @@ import type {Column, RowData} from '@tanstack/react-table';
 declare module '@tanstack/react-table' {
     interface ColumnMeta<TData extends RowData, TValue> {
         hideInSettings?: boolean;
-        inSettings?: ((column: Column<TData, TValue>) => string | React.ReactNode) | string;
+        titleInSettings?: ((column: Column<TData, TValue>) => React.ReactNode) | React.ReactNode;
     }
 }
diff --git a/src/components/TableSettings/__stories__/stories/TableSettingsColumnStory.tsx b/src/components/TableSettings/__stories__/stories/TableSettingsColumnStory.tsx
index a7b2b8c..0408413 100644
--- a/src/components/TableSettings/__stories__/stories/TableSettingsColumnStory.tsx
+++ b/src/components/TableSettings/__stories__/stories/TableSettingsColumnStory.tsx
@@ -51,7 +51,7 @@ const data: Item[] = [
     },
 ];
 
-const columns: ColumnDef<Item>[] = [
+const tableColumns: ColumnDef<Item>[] = [
     {
         id: 'contact_group_group',
         header: 'Contact Group',
@@ -103,8 +103,14 @@ export const TableSettingsColumnStory = (options: TableSettingsOptions) => {
         left: ['_select'],
         right: [SETTINGS_COLUMN_ID],
     });
+
+    const columns = React.useMemo(
+        () => [selectionColumn as ColumnDef<Item>, ...tableColumns, settingsColumn],
+        [settingsColumn],
+    );
+
     const table = useTable({
-        columns: [selectionColumn as ColumnDef<Item>, ...columns, settingsColumn],
+        columns,
         data,
         enableColumnPinning: true,
         state: {rowSelection, columnPinning},
diff --git a/src/components/TableSettingsColumn/TableSettingsColumn.tsx b/src/components/TableSettingsColumn/TableSettingsColumn.tsx
index b922eb9..fac7ae4 100644
--- a/src/components/TableSettingsColumn/TableSettingsColumn.tsx
+++ b/src/components/TableSettingsColumn/TableSettingsColumn.tsx
@@ -46,9 +46,11 @@ export const TableSettingsColumn = <TData extends unknown>({
     const context = header?.getContext();
 
     const renderColumn = (columnDef: ColumnDef<TData, unknown>) => {
-        if (columnDef.meta?.inSettings) {
-            const inSettings = columnDef.meta?.inSettings;
-            return typeof inSettings === 'function' ? inSettings(column) : inSettings;
+        if (columnDef.meta?.titleInSettings) {
+            const titleInSettings = columnDef.meta?.titleInSettings;
+            return typeof titleInSettings === 'function'
+                ? titleInSettings(column)
+                : titleInSettings;
         }
 
         const columnHeader = columnDef.header;
diff --git a/src/constants/actionsColumn.tsx b/src/constants/actionsColumn.tsx
index 84bcc80..04ca8c0 100644
--- a/src/constants/actionsColumn.tsx
+++ b/src/constants/actionsColumn.tsx
@@ -18,5 +18,8 @@ export const getActionsColumn = <TValue extends unknown>(
         size: ACTIONS_COLUMN_SIZE,
         minSize: ACTIONS_COLUMN_SIZE,
         cell: (props) => <ActionsCell {...options} row={props.row} />,
+        meta: {
+            hideInSettings: true,
+        },
     };
 };
diff --git a/src/constants/dragHandleColumn.tsx b/src/constants/dragHandleColumn.tsx
index 9b9a050..0fd19a2 100644
--- a/src/constants/dragHandleColumn.tsx
+++ b/src/constants/dragHandleColumn.tsx
@@ -10,4 +10,7 @@ export const dragHandleColumn: ColumnDef<unknown> = {
     cell: ({row}) => <DragHandle row={row} />,
     size: 32,
     minSize: 32,
+    meta: {
+        hideInSettings: true,
+    },
 };