fix(TableSettings): review fixes

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
 ];

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;
     }
 }

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},

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;

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,
+        },
     };
 };

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,
+    },
 };