[WIP]: row selection with table settings

src/components/TableSettings/__stories__/TableSettings.stories.tsx

@@ -2,7 +2,10 @@ import type {Meta, StoryObj} from '@storybook/react';
 
 import type {TableSettingsOptions} from '../TableSettings';
 
-import {TableSettingsColumnStory} from './stories/TableSettingsColumnStory';
+import {
+    TableSettingsColumnStory,
+    TableSettingsColumnWithGroupsStory,
+} from './stories/TableSettingsColumnStory';
 import {TableSettingsStory} from './stories/TableSettingsStory';
 
 const meta: Meta<TableSettingsOptions> = {
@@ -26,3 +29,7 @@ export const TableSettings: StoryObj<typeof TableSettingsStory> = {
 export const TableSettingsColumn: StoryObj<typeof TableSettingsColumnStory> = {
     render: TableSettingsColumnStory,
 };
+
+export const TableSettingsColumnWithGroups: StoryObj<typeof TableSettingsColumnWithGroupsStory> = {
+    render: TableSettingsColumnWithGroupsStory,
+};

src/components/TableSettings/__stories__/stories/TableSettingsColumnStory.tsx

@@ -52,6 +52,39 @@ const data: Item[] = [
 ];
 
 const tableColumns: ColumnDef<Item>[] = [
+    {
+        id: 'contact_group_name',
+        accessorKey: 'contactGroupName',
+        header: 'Name',
+        minSize: 250,
+    },
+    {
+        id: 'contact_group_type',
+        accessorKey: 'contactGroupType',
+        header: 'Type',
+        minSize: 230,
+    },
+    {
+        id: 'contacts_group_name',
+        accessorKey: 'contactName',
+        header: 'Name',
+        minSize: 200,
+    },
+    {
+        id: 'contacts_group_phone',
+        accessorKey: 'contactPhone',
+        header: 'Phone',
+        minSize: 230,
+    },
+    {
+        id: 'contacts_group_priority',
+        accessorKey: 'contactPriority',
+        header: 'Priority',
+        minSize: 200,
+    },
+];
+
+const tableColumnsWithGroups: ColumnDef<Item>[] = [
     {
         id: 'contact_group_group',
         header: 'Contact Group',
@@ -98,6 +131,42 @@ const tableColumns: ColumnDef<Item>[] = [
 
 export const TableSettingsColumnStory = ({sortable, filterable}: TableSettingsOptions) => {
     const [rowSelection, setRowSelection] = React.useState<RowSelectionState>({});
+
+    const columns = React.useMemo(
+        () => [
+            selectionColumn as ColumnDef<Item>,
+            ...tableColumns,
+            getSettingsColumn<Item>(SETTINGS_COLUMN_ID, {sortable, filterable}),
+        ],
+        [sortable, filterable],
+    );
+
+    const table = useTable({
+        columns,
+        data,
+        enableColumnPinning: true,
+        state: {rowSelection},
+        enableRowSelection: true,
+        enableMultiRowSelection: true,
+        onRowSelectionChange: setRowSelection,
+    });
+
+    return (
+        <div className={cnTableSettingsColumnStory()}>
+            <Table
+                table={table}
+                cellClassName={cnTableSettingsColumnStory('cell')}
+                headerCellClassName={cnTableSettingsColumnStory('header-cell')}
+            />
+        </div>
+    );
+};
+
+export const TableSettingsColumnWithGroupsStory = ({
+    sortable,
+    filterable,
+}: TableSettingsOptions) => {
+    const [rowSelection, setRowSelection] = React.useState<RowSelectionState>({});
     const [columnPinning, setColumnPinning] = React.useState<ColumnPinningState>({
         left: ['_select'],
         right: [SETTINGS_COLUMN_ID],
@@ -106,7 +175,7 @@ export const TableSettingsColumnStory = ({sortable, filterable}: TableSettingsOp
     const columns = React.useMemo(
         () => [
             selectionColumn as ColumnDef<Item>,
-            ...tableColumns,
+            ...tableColumnsWithGroups,
             getSettingsColumn<Item>(SETTINGS_COLUMN_ID, {sortable, filterable}),
         ],
         [sortable, filterable],