Merge pull request #30 from jacksonkasi1/dev

fix(table): prevent column resize layout shift

Author: jacksonkasi1

README.md

@@ -1,5 +1,5 @@
 <p align="center">
-  <img src="./assets/demo.gif" alt="TableCraft - Complex table setup in 5 minutes" width="100%" />
+  <img src="./assets/demo.png" alt="TableCraft - Complex table setup in 5 minutes" width="100%" />
 </p>
 
 # TableCraft

assets/demo.gif

@@ -1,6 +1,6 @@
 {
   "name": "@tablecraft/table",
-  "version": "0.2.23",
+  "version": "0.2.25",
   "description": "Schema-driven data table for React — built on TanStack Table + Shadcn UI with native TableCraft engine support",
   "type": "module",
   "main": "dist/index.js",

assets/demo.png

@@ -670,6 +670,26 @@ export function DataTable<T extends Record<string, unknown>>({
     pageSizeOptionsProp ??
     tableConfig.pageSizeOptions ?? [10, 20, 30, 40, 50];
 
+  const resizePlaceholderColumnCount = tableConfig.enableColumnResizing ? 1 : 0;
+
+  const getVisibleColumnCount = (columnCount: number) =>
+    columnCount + resizePlaceholderColumnCount;
+
+  const renderResizePlaceholderCell = (cellTag: "th" | "td") => {
+    if (!resizePlaceholderColumnCount) {
+      return null;
+    }
+
+    return React.createElement(cellTag, {
+      "aria-hidden": true,
+      role: "presentation",
+    });
+  };
+
+  const totalVisibleColumns = getVisibleColumnCount(
+    table.getVisibleLeafColumns().length
+  );
+
   return (
     <div className={cn("space-y-4", className)}>
       {tableConfig.enableToolbar && (
@@ -753,6 +773,7 @@ export function DataTable<T extends Record<string, unknown>>({
                         )}
                     </th>
                   ))}
+                  {renderResizePlaceholderCell("th")}
                 </tr>
               ))}
             </thead>
@@ -780,6 +801,7 @@ export function DataTable<T extends Record<string, unknown>>({
                         <div className="h-6 w-full animate-pulse rounded bg-muted" />
                       </td>
                     ))}
+                    {renderResizePlaceholderCell("td")}
                   </tr>
                 ))
               ) : table.getRowModel().rows?.length ? (
@@ -825,10 +847,14 @@ export function DataTable<T extends Record<string, unknown>>({
                         )}
                       </td>
                     ))}
+                    {renderResizePlaceholderCell("td")}
                   </tr>
                   {row.getIsExpanded() && renderSubRow && (
                     <tr key={`expanded-${row.id}`} className="bg-muted/30 hover:bg-muted/30 border-b">
-                      <td colSpan={row.getVisibleCells().length} className="p-0">
+                      <td
+                        colSpan={getVisibleColumnCount(row.getVisibleCells().length)}
+                        className="p-0"
+                      >
                         {renderSubRow({ row: row.original, table: tableContextRef.current })}
                       </td>
                     </tr>
@@ -839,7 +865,7 @@ export function DataTable<T extends Record<string, unknown>>({
                 <tr data-slot="table-row">
                   <td
                     data-slot="table-cell"
-                    colSpan={resolvedColumns.length}
+                    colSpan={totalVisibleColumns}
                     className="h-24 text-center text-muted-foreground"
                   >
                     No results.

packages/table/package.json

@@ -113,10 +113,15 @@ input[type="week"] {
    ──────────────────────────────────────────────────────────────────────────── */
 
 @layer components {
-  /* Prevent layout shifts during resize */
+  /*
+   * Prevent layout shifts during resize while keeping the table full width by
+   * default. The overflow-x-auto container intentionally absorbs the extra
+   * horizontal overflow once resized columns exceed the available space.
+   */
   .resizable-table {
     table-layout: fixed;
-    width: 100%;
+    width: max-content;
+    min-width: 100%;
     will-change: contents;
   }