From 53faaba21dbc55464508d49ef0a68e41c61a18ff Mon Sep 17 00:00:00 2001
From: joshunrau <contact@joshuaunrau.com>
Date: Sun, 29 Mar 2026 12:15:43 -0400
Subject: [PATCH] fix: issue where data table layout is broken with both pinned
 columns and actions

---
 .../DataTable/DataTable.stories.tsx           | 24 ++++++++++++++++---
 src/components/DataTable/utils.tsx            |  6 +++--
 2 files changed, 25 insertions(+), 5 deletions(-)

diff --git a/src/components/DataTable/DataTable.stories.tsx b/src/components/DataTable/DataTable.stories.tsx
index 54fd716..f60eb14 100644
--- a/src/components/DataTable/DataTable.stories.tsx
+++ b/src/components/DataTable/DataTable.stories.tsx
@@ -1,5 +1,6 @@
 import { useState } from 'react';
 
+import { toBasicISOString } from '@douglasneuroinformatics/libjs';
 import { faker } from '@faker-js/faker';
 import type { Meta, StoryObj } from '@storybook/react-vite';
 import type { ColumnDef } from '@tanstack/table-core';
@@ -15,6 +16,7 @@ type PaymentStatus = 'failed' | 'pending' | 'processing' | 'success';
 
 type Payment = {
   amount: number;
+  date: Date;
   email: string;
   id: string;
   status: PaymentStatus;
@@ -46,6 +48,7 @@ const statuses: readonly PaymentStatus[] = Object.freeze(['failed', 'pending', '
 const createData = (n: number): Payment[] => {
   return range(n).map((i) => ({
     amount: faker.number.int({ max: 100, min: 0 }),
+    date: faker.date.recent(),
     email: faker.internet.email(),
     id: String(i + 1),
     status: faker.helpers.arrayElement(statuses)
@@ -217,6 +220,11 @@ export const Empty: Story = {
 export const Grouped: Story = {
   args: {
     columns: [
+      {
+        accessorFn: (row) => toBasicISOString(row.date),
+        header: 'Date',
+        id: 'date'
+      },
       {
         columns: [
           {
@@ -229,7 +237,10 @@ export const Grouped: Story = {
           }
         ],
         enableResizing: false,
-        header: 'Internal'
+        header: 'Internal',
+        meta: {
+          centered: true
+        }
       },
       {
         columns: [
@@ -243,11 +254,18 @@ export const Grouped: Story = {
           }
         ],
         enableResizing: false,
-        header: 'Details'
+        header: 'Details',
+        meta: {
+          centered: true
+        }
       }
     ],
-
     data: createData(100),
+    initialState: {
+      columnPinning: {
+        left: ['date']
+      }
+    },
     onRowDoubleClick(row) {
       alert(`row with ID ${row.id} double clicked`);
     },
diff --git a/src/components/DataTable/utils.tsx b/src/components/DataTable/utils.tsx
index 8682e5e..4117679 100644
--- a/src/components/DataTable/utils.tsx
+++ b/src/components/DataTable/utils.tsx
@@ -130,8 +130,10 @@ function getTanstackTableState<T>({ initialState, rowActions }: DataTableStorePa
     sorting
   };
   if (rowActions) {
-    state.columnPinning.right ??= [];
-    state.columnPinning.right.push(ACTIONS_COLUMN_ID);
+    state.columnPinning = {
+      ...state.columnPinning,
+      right: [...(state.columnPinning.right ?? []), ACTIONS_COLUMN_ID]
+    };
   }
   return state;
 }