diff --git a/.gitignore b/.gitignore
index 6240da8b..f3c36888 100644
--- a/.gitignore
+++ b/.gitignore
@@ -19,3 +19,5 @@ pnpm-debug.log*
 
 # macOS-specific files
 .DS_Store
+.kiro
+.vscode
\ No newline at end of file
diff --git a/src/components/feature-coverage/FeatureCoverage.tsx b/src/components/feature-coverage/FeatureCoverage.tsx
index 76fa034e..c70b9b1d 100644
--- a/src/components/feature-coverage/FeatureCoverage.tsx
+++ b/src/components/feature-coverage/FeatureCoverage.tsx
@@ -1,4 +1,4 @@
-import React from "react";
+import React from 'react';
 const jsonData = import.meta.glob('/src/data/coverage/*.json');
 import {
   Table,
@@ -7,7 +7,7 @@ import {
   TableRow,
   TableHead,
   TableCell,
-} from "@/components/ui/table";
+} from '@/components/ui/table';
 import {
   useReactTable,
   getCoreRowModel,
@@ -15,52 +15,59 @@ import {
   flexRender,
   getFilteredRowModel,
   getPaginationRowModel,
-} from "@tanstack/react-table";
-import type { SortingState, ColumnDef, ColumnFiltersState } from "@tanstack/react-table";
+} from '@tanstack/react-table';
+import type {
+  SortingState,
+  ColumnDef,
+  ColumnFiltersState,
+} from '@tanstack/react-table';
+
 
 const columns: ColumnDef<any>[] = [
   {
-    id: "operation",
-    accessorFn: (row) => (
-        Object.keys(row)[0]
-    ),
-    header: () => "Operation",
+    id: 'operation',
+    accessorFn: (row) => Object.keys(row)[0],
+    header: () => 'Operation',
     enableColumnFilter: true,
-    filterFn: (row, columnId, filterValue) => {
+    filterFn: (row, _, filterValue) => {
       let operation = Object.keys(row.original)[0];
       return operation
         .toLowerCase()
-        .includes((filterValue ?? "").toLowerCase());
+        .includes((filterValue ?? '').toLowerCase());
     },
-    meta: { className: "w-1/3" },
+    enableResizing: false,
   },
   {
-    id: "implemented",
-    accessorFn: row => row[Object.keys(row)[0]].implemented,
-    header: () => "Implemented",
-    cell: ({ getValue }) => (getValue() ? "✔️" : ""),
-    meta: { className: "w-1/6" },
+    id: 'implemented',
+    accessorFn: (row) => row[Object.keys(row)[0]].implemented,
+    header: () => 'Implemented',
+    cell: ({ getValue }) => (getValue() ? '✔️' : ''),
     enableSorting: true,
+    enableResizing: false,
   },
   {
-    id: "image",
-    accessorFn: row => row[Object.keys(row)[0]].availability,
-    header: () => "Image",
-    meta: { className: "w-1/6" },
+    id: 'image',
+    accessorFn: (row) => row[Object.keys(row)[0]].availability,
+    header: () => 'Image',
     enableSorting: false,
+    enableResizing: false,
   },
 ];
 
-export default function PersistenceCoverage({service}: {service: string}) {
+export default function PersistenceCoverage({ service }: { service: string }) {
   const [coverage, setCoverage] = React.useState<any[]>([]);
   const [sorting, setSorting] = React.useState<SortingState>([
-    { id: "operation", desc: false },
+    { id: 'operation', desc: false },
   ]);
-  const [columnFilters, setColumnFilters] = React.useState<ColumnFiltersState>([]);
+  const [columnFilters, setColumnFilters] = React.useState<ColumnFiltersState>(
+    []
+  );
 
   React.useEffect(() => {
     const loadData = async () => {
-      const moduleData = await jsonData[`/src/data/coverage/${service}.json`]() as { default: Record<string, any> };
+      const moduleData = (await jsonData[
+        `/src/data/coverage/${service}.json`
+      ]()) as { default: Record<string, any> };
       setCoverage(moduleData.default.operations);
     };
     loadData();
@@ -69,7 +76,10 @@ export default function PersistenceCoverage({service}: {service: string}) {
   const table = useReactTable({
     data: coverage,
     columns,
-    state: { sorting, columnFilters },
+    state: { 
+      sorting, 
+      columnFilters,
+    },
     onSortingChange: setSorting,
     onColumnFiltersChange: setColumnFilters,
     getCoreRowModel: getCoreRowModel(),
@@ -87,39 +97,65 @@ export default function PersistenceCoverage({service}: {service: string}) {
           type="text"
           placeholder="Filter by operation name..."
           value={
-            table.getColumn("operation")?.getFilterValue() as string || ""
+            (table.getColumn('operation')?.getFilterValue() as string) || ''
           }
-          onChange={e =>
-            table.getColumn("operation")?.setFilterValue(e.target.value)
+          onChange={(e) =>
+            table.getColumn('operation')?.setFilterValue(e.target.value)
           }
           className="border rounded px-2 py-1 w-full max-w-xs"
         />
       </div>
-      <div className="rounded-md border">
-        <Table>
+      <div className="rounded-md border w-full overflow-hidden">
+        <Table 
+          className="w-full" 
+          style={{ 
+            width: '100%',
+            tableLayout: 'fixed',
+          }}
+        >
           <TableHeader>
             {table.getHeaderGroups().map((headerGroup) => (
               <TableRow key={headerGroup.id}>
                 {headerGroup.headers.map((header) => {
                   const canSort = header.column.getCanSort();
-                  const meta = header.column.columnDef.meta as { className?: string } | undefined;
+                  // Calculate percentage-based widths: Operation 60%, others 20% each
+                  const getColumnWidth = (columnId: string) => {
+                    switch (columnId) {
+                      case 'operation':
+                        return '75%';
+                      case 'implemented':
+                      case 'image':
+                        return '15%';
+                      default:
+                        return 'auto';
+                    }
+                  };
+                  
                   return (
                     <TableHead
                       key={header.id}
-                      onClick={canSort ? header.column.getToggleSortingHandler() : undefined}
-                      className={
-                        (meta?.className || "") +
-                        (canSort ? " cursor-pointer select-none" : "")
+                      onClick={
+                        canSort
+                          ? header.column.getToggleSortingHandler()
+                          : undefined
                       }
+                      className={canSort ? 'cursor-pointer select-none' : ''}
+                      style={{
+                        width: getColumnWidth(header.id),
+                        textAlign: header.id === 'operation' ? 'left' : 'center',
+                      }}
                     >
-                      {flexRender(header.column.columnDef.header, header.getContext())}
+                      {flexRender(
+                        header.column.columnDef.header,
+                        header.getContext()
+                      )}
                       {canSort && (
                         <span>
-                          {header.column.getIsSorted() === "asc"
-                            ? " ▲"
-                            : header.column.getIsSorted() === "desc"
-                            ? " ▼"
-                            : ""}
+                          {header.column.getIsSorted() === 'asc'
+                            ? ' ▲'
+                            : header.column.getIsSorted() === 'desc'
+                            ? ' ▼'
+                            : ''}
                         </span>
                       )}
                     </TableHead>
@@ -132,13 +168,34 @@ export default function PersistenceCoverage({service}: {service: string}) {
             {table.getRowModel().rows.map((row) => (
               <TableRow key={row.id}>
                 {row.getVisibleCells().map((cell) => {
-                  const meta = cell.column.columnDef.meta as { className?: string } | undefined;
+                  // Same width calculation for cells
+                  const getColumnWidth = (columnId: string) => {
+                    switch (columnId) {
+                      case 'operation':
+                        return '60%';
+                      case 'implemented':
+                      case 'image':
+                        return '20%';
+                      default:
+                        return 'auto';
+                    }
+                  };
+                  
                   return (
                     <TableCell
                       key={cell.id}
-                      className={meta?.className || undefined}
+                      style={{
+                        width: getColumnWidth(cell.column.id),
+                        textAlign: cell.column.id === 'operation' ? 'left' : 'center',
+                        overflow: 'hidden',
+                        textOverflow: 'ellipsis',
+                        whiteSpace: cell.column.id === 'operation' ? 'normal' : 'nowrap',
+                      }}
                     >
-                      {flexRender(cell.column.columnDef.cell, cell.getContext())}
+                      {flexRender(
+                        cell.column.columnDef.cell,
+                        cell.getContext()
+                      )}
                     </TableCell>
                   );
                 })}
@@ -156,7 +213,8 @@ export default function PersistenceCoverage({service}: {service: string}) {
           Previous
         </button>
         <span>
-          Page {table.getState().pagination.pageIndex + 1} of {table.getPageCount()}
+          Page {table.getState().pagination.pageIndex + 1} of{' '}
+          {table.getPageCount()}
         </span>
         <button
           className="px-3 py-1 border rounded disabled:opacity-50"
@@ -168,4 +226,4 @@ export default function PersistenceCoverage({service}: {service: string}) {
       </div>
     </div>
   );
-} 
\ No newline at end of file
+}
diff --git a/src/components/persistence-coverage/PersistenceCoverage.tsx b/src/components/persistence-coverage/PersistenceCoverage.tsx
index 961ff2bf..471d6919 100644
--- a/src/components/persistence-coverage/PersistenceCoverage.tsx
+++ b/src/components/persistence-coverage/PersistenceCoverage.tsx
@@ -1,5 +1,5 @@
-import React from "react";
-import data from "@/data/persistence/coverage.json";
+import React from 'react';
+import data from '@/data/persistence/coverage.json';
 import {
   Table,
   TableHeader,
@@ -7,7 +7,7 @@ import {
   TableRow,
   TableHead,
   TableCell,
-} from "@/components/ui/table";
+} from '@/components/ui/table';
 import {
   useReactTable,
   getCoreRowModel,
@@ -15,15 +15,19 @@ import {
   flexRender,
   getFilteredRowModel,
   getPaginationRowModel,
-} from "@tanstack/react-table";
-import type { SortingState, ColumnDef, ColumnFiltersState } from "@tanstack/react-table";
+} from '@tanstack/react-table';
+import type {
+  SortingState,
+  ColumnDef,
+  ColumnFiltersState,
+} from '@tanstack/react-table';
 
 const coverage = Object.values(data);
 
 const columns: ColumnDef<any>[] = [
   {
-    accessorKey: "full_name",
-    header: () => "Service",
+    accessorKey: 'full_name',
+    header: () => 'Service',
     cell: ({ row }) => (
       <a href={`/aws/${row.original.service}`}>{row.original.full_name}</a>
     ),
@@ -31,53 +35,55 @@ const columns: ColumnDef<any>[] = [
     filterFn: (row, columnId, filterValue) => {
       return row.original.full_name
         .toLowerCase()
-        .includes((filterValue ?? "").toLowerCase());
+        .includes((filterValue ?? '').toLowerCase());
     },
-    meta: { className: "w-1/3" },
+    meta: { className: 'w-[30%]' },
   },
   {
-    accessorKey: "support",
-    header: () => "Supported",
+    accessorKey: 'support',
+    header: () => 'Supported',
     cell: ({ row }) =>
-      row.original.support === "supported" ||
-      row.original.support === "supported with limitations"
-        ? "✔️"
-        : "",
-    meta: { className: "w-1/6" },
+      row.original.support === 'supported' ||
+      row.original.support === 'supported with limitations'
+        ? '✔️'
+        : '',
+    meta: { className: 'w-[15%] text-center' },
     enableSorting: true,
     sortingFn: (rowA, rowB) => {
       // Sort supported to the top
       const a = rowA.original.support;
       const b = rowB.original.support;
       if (a === b) return 0;
-      if (a === "supported") return -1;
-      if (b === "supported") return 1;
-      if (a === "supported with limitations") return -1;
-      if (b === "supported with limitations") return 1;
+      if (a === 'supported') return -1;
+      if (b === 'supported') return 1;
+      if (a === 'supported with limitations') return -1;
+      if (b === 'supported with limitations') return 1;
       return a.localeCompare(b);
     },
   },
   {
-    accessorKey: "test_suite",
-    header: () => "Persistence Test Suite",
-    cell: ({ row }) => (row.original.test_suite ? "✔️" : ""),
-    meta: { className: "w-1/6" },
+    accessorKey: 'test_suite',
+    header: () => 'Persistence Test Suite',
+    cell: ({ row }) => (row.original.test_suite ? '✔️' : ''),
+    meta: { className: 'w-[20%] text-center' },
     enableSorting: true,
   },
   {
-    accessorKey: "limitations",
-    header: () => "Limitations",
+    accessorKey: 'limitations',
+    header: () => 'Limitations',
     cell: ({ row }) => row.original.limitations,
     enableSorting: false,
-    meta: { className: "whitespace-normal" },
+    meta: { className: 'w-[35%] whitespace-normal' },
   },
 ];
 
 export default function PersistenceCoverage() {
   const [sorting, setSorting] = React.useState<SortingState>([
-    { id: "full_name", desc: false },
+    { id: 'full_name', desc: false },
   ]);
-  const [columnFilters, setColumnFilters] = React.useState<ColumnFiltersState>([]);
+  const [columnFilters, setColumnFilters] = React.useState<ColumnFiltersState>(
+    []
+  );
 
   const table = useReactTable({
     data: coverage,
@@ -100,39 +106,53 @@ export default function PersistenceCoverage() {
           type="text"
           placeholder="Filter by service name..."
           value={
-            table.getColumn("full_name")?.getFilterValue() as string || ""
+            (table.getColumn('full_name')?.getFilterValue() as string) || ''
           }
-          onChange={e =>
-            table.getColumn("full_name")?.setFilterValue(e.target.value)
+          onChange={(e) =>
+            table.getColumn('full_name')?.setFilterValue(e.target.value)
           }
           className="border rounded px-2 py-1 w-full max-w-xs"
         />
       </div>
-      <div className="rounded-md border">
-        <Table>
+      <div className="rounded-md border w-full">
+        <Table className="w-full table-fixed">
           <TableHeader>
             {table.getHeaderGroups().map((headerGroup) => (
               <TableRow key={headerGroup.id}>
                 {headerGroup.headers.map((header) => {
                   const canSort = header.column.getCanSort();
-                  const meta = header.column.columnDef.meta as { className?: string } | undefined;
+                  const meta = header.column.columnDef.meta as
+                    | { className?: string }
+                    | undefined;
                   return (
                     <TableHead
                       key={header.id}
-                      onClick={canSort ? header.column.getToggleSortingHandler() : undefined}
+                      onClick={
+                        canSort
+                          ? header.column.getToggleSortingHandler()
+                          : undefined
+                      }
                       className={
-                        (meta?.className || "") +
-                        (canSort ? " cursor-pointer select-none" : "")
+                        (meta?.className || '') +
+                        (canSort ? ' cursor-pointer select-none' : '')
                       }
+                      style={{
+                        width: meta?.className?.includes('w-[')
+                          ? meta.className.match(/w-\[(\d+)%\]/)?.[1] + '%'
+                          : 'auto',
+                      }}
                     >
-                      {flexRender(header.column.columnDef.header, header.getContext())}
+                      {flexRender(
+                        header.column.columnDef.header,
+                        header.getContext()
+                      )}
                       {canSort && (
                         <span>
-                          {header.column.getIsSorted() === "asc"
-                            ? " ▲"
-                            : header.column.getIsSorted() === "desc"
-                            ? " ▼"
-                            : ""}
+                          {header.column.getIsSorted() === 'asc'
+                            ? ' ▲'
+                            : header.column.getIsSorted() === 'desc'
+                            ? ' ▼'
+                            : ''}
                         </span>
                       )}
                     </TableHead>
@@ -145,13 +165,23 @@ export default function PersistenceCoverage() {
             {table.getRowModel().rows.map((row) => (
               <TableRow key={row.id}>
                 {row.getVisibleCells().map((cell) => {
-                  const meta = cell.column.columnDef.meta as { className?: string } | undefined;
+                  const meta = cell.column.columnDef.meta as
+                    | { className?: string }
+                    | undefined;
                   return (
                     <TableCell
                       key={cell.id}
                       className={meta?.className || undefined}
+                      style={{
+                        width: meta?.className?.includes('w-[')
+                          ? meta.className.match(/w-\[(\d+)%\]/)?.[1] + '%'
+                          : 'auto',
+                      }}
                     >
-                      {flexRender(cell.column.columnDef.cell, cell.getContext())}
+                      {flexRender(
+                        cell.column.columnDef.cell,
+                        cell.getContext()
+                      )}
                     </TableCell>
                   );
                 })}
@@ -169,7 +199,8 @@ export default function PersistenceCoverage() {
           Previous
         </button>
         <span>
-          Page {table.getState().pagination.pageIndex + 1} of {table.getPageCount()}
+          Page {table.getState().pagination.pageIndex + 1} of{' '}
+          {table.getPageCount()}
         </span>
         <button
           className="px-3 py-1 border rounded disabled:opacity-50"
@@ -181,4 +212,4 @@ export default function PersistenceCoverage() {
       </div>
     </div>
   );
-} 
\ No newline at end of file
+}
diff --git a/src/components/replicator-coverage/ReplicatorCoverage.tsx b/src/components/replicator-coverage/ReplicatorCoverage.tsx
index 260f5f20..68ed7970 100644
--- a/src/components/replicator-coverage/ReplicatorCoverage.tsx
+++ b/src/components/replicator-coverage/ReplicatorCoverage.tsx
@@ -1,5 +1,5 @@
-import React from "react";
-import data from "@/data/replicator/coverage.json";
+import React from 'react';
+import data from '@/data/replicator/coverage.json';
 import {
   Table,
   TableHeader,
@@ -7,35 +7,46 @@ import {
   TableRow,
   TableHead,
   TableCell,
-} from "@/components/ui/table";
+} from '@/components/ui/table';
 import {
   useReactTable,
   getCoreRowModel,
   flexRender,
-} from "@tanstack/react-table";
-import type { ColumnDef } from "@tanstack/react-table";
+} from '@tanstack/react-table';
+import type { ColumnDef, ColumnSizingState } from '@tanstack/react-table';
+import { useTableColumnSizing } from '@/hooks/useTableColumnSizing';
+import { useState } from 'react';
 
 const coverage = Object.values(data);
 
 const columns: ColumnDef<any>[] = [
   {
-    accessorKey: "resource_type",
-    header: () => "Resource Type",
+    accessorKey: 'resource_type',
+    header: () => 'Resource Type',
     cell: ({ row }) => row.original.resource_type,
+    size: 150,
+    minSize: 120,
+    maxSize: 200,
   },
   {
-    accessorKey: "service",
-    header: () => "Service",
+    accessorKey: 'service',
+    header: () => 'Service',
     cell: ({ row }) => row.original.service,
+    size: 120,
+    minSize: 100,
+    maxSize: 150,
   },
   {
-    accessorKey: "identifier",
-    header: () => "Identifier",
+    accessorKey: 'identifier',
+    header: () => 'Identifier',
     cell: ({ row }) => row.original.identifier,
+    size: 150,
+    minSize: 120,
+    maxSize: 200,
   },
   {
-    accessorKey: "policy_statements",
-    header: () => "Required Actions",
+    accessorKey: 'policy_statements',
+    header: () => 'Required Actions',
     cell: ({ row }) => (
       <>
         {row.original.policy_statements.map((s: string, i: number) => (
@@ -43,37 +54,97 @@ const columns: ColumnDef<any>[] = [
         ))}
       </>
     ),
+    size: 300,
+    minSize: 200,
+    maxSize: 500,
   },
   {
-    id: "arn_support",
-    header: () => "Arn Support",
-    cell: () => "✔️",
+    id: 'arn_support',
+    header: () => 'Arn Support',
+    cell: () => '✔️',
+    size: 100,
+    minSize: 80,
+    maxSize: 120,
   },
 ];
 
-export default function PersistenceCoverage() {
+export default function ReplicatorCoverage() {
+  // Use the reusable hook for column sizing
+  const { columnSizing, setColumnSizing } = useTableColumnSizing(columns);
+
   const table = useReactTable({
     data: coverage,
     columns,
+    state: {
+      columnSizing,
+    },
+    onColumnSizingChange: setColumnSizing,
+    columnResizeMode: 'onChange',
     getCoreRowModel: getCoreRowModel(),
     debugTable: false,
   });
 
+  // For testing purposes, we can log the column sizing state
+  // console.log('Column sizing state:', columnSizing);
+
+  // Add CSS for resizer
+  const resizerStyle = `
+    .resizer {
+      position: absolute;
+      right: 0;
+      top: 0;
+      height: 100%;
+      width: 5px;
+      background: rgba(0, 0, 0, 0.1);
+      cursor: col-resize;
+      user-select: none;
+      touch-action: none;
+    }
+    .resizer.isResizing {
+      background: rgba(0, 0, 0, 0.2);
+      opacity: 1;
+    }
+    @media (hover: hover) {
+      .resizer {
+        opacity: 0;
+      }
+      *:hover > .resizer {
+        opacity: 1;
+      }
+    }
+  `;
+
   return (
     <div className="w-full">
-      <div className="rounded-md border">
-        <Table>
+      <style>{resizerStyle}</style>
+      <div className="rounded-md border overflow-x-auto">
+        <Table className="table-fixed w-full">
           <TableHeader>
             {table.getHeaderGroups().map((headerGroup) => (
               <TableRow key={headerGroup.id}>
                 {headerGroup.headers.map((header) => {
-                  const meta = header.column.columnDef.meta as { className?: string } | undefined;
+                  const meta = header.column.columnDef.meta as
+                    | { className?: string }
+                    | undefined;
                   return (
                     <TableHead
                       key={header.id}
-                      className={meta?.className || ""}
+                      className={meta?.className || ''}
+                      style={{ width: header.getSize() }}
                     >
-                      {flexRender(header.column.columnDef.header, header.getContext())}
+                      {flexRender(
+                        header.column.columnDef.header,
+                        header.getContext()
+                      )}
+                      {header.column.getCanResize() && (
+                        <div
+                          onMouseDown={header.getResizeHandler()}
+                          onTouchStart={header.getResizeHandler()}
+                          className={`resizer ${
+                            header.column.getIsResizing() ? 'isResizing' : ''
+                          }`}
+                        ></div>
+                      )}
                     </TableHead>
                   );
                 })}
@@ -84,13 +155,19 @@ export default function PersistenceCoverage() {
             {table.getRowModel().rows.map((row) => (
               <TableRow key={row.id}>
                 {row.getVisibleCells().map((cell) => {
-                  const meta = cell.column.columnDef.meta as { className?: string } | undefined;
+                  const meta = cell.column.columnDef.meta as
+                    | { className?: string }
+                    | undefined;
                   return (
                     <TableCell
                       key={cell.id}
                       className={meta?.className || undefined}
+                      style={{ width: cell.column.getSize() }}
                     >
-                      {flexRender(cell.column.columnDef.cell, cell.getContext())}
+                      {flexRender(
+                        cell.column.columnDef.cell,
+                        cell.getContext()
+                      )}
                     </TableCell>
                   );
                 })}
@@ -101,4 +178,11 @@ export default function PersistenceCoverage() {
       </div>
     </div>
   );
-} 
\ No newline at end of file
+}
+
+// Testing instructions:
+// 1. Verify that the table expands to 100% width of its container
+// 2. Check that columns maintain their widths during pagination
+// 3. Test with different viewport sizes to ensure responsive behavior
+// 4. Try resizing columns to ensure the resize functionality works
+// 5. Verify that content in cells is properly displayed with ellipsis for overflow
diff --git a/src/components/ui/table.tsx b/src/components/ui/table.tsx
index 5513a5cd..f41393e1 100644
--- a/src/components/ui/table.tsx
+++ b/src/components/ui/table.tsx
@@ -1,8 +1,8 @@
-import * as React from "react"
+import * as React from 'react';
 
-import { cn } from "@/lib/utils"
+import { cn } from '@/lib/utils';
 
-function Table({ className, ...props }: React.ComponentProps<"table">) {
+function Table({ className, ...props }: React.ComponentProps<'table'>) {
   return (
     <div
       data-slot="table-container"
@@ -10,96 +10,97 @@ function Table({ className, ...props }: React.ComponentProps<"table">) {
     >
       <table
         data-slot="table"
-        className={cn("w-full caption-bottom text-sm", className)}
+        className={cn('w-full caption-bottom text-sm min-w-full', className)}
+        style={{ tableLayout: 'fixed' }}
         {...props}
       />
     </div>
-  )
+  );
 }
 
-function TableHeader({ className, ...props }: React.ComponentProps<"thead">) {
+function TableHeader({ className, ...props }: React.ComponentProps<'thead'>) {
   return (
     <thead
       data-slot="table-header"
-      className={cn("[&_tr]:border-b", className)}
+      className={cn('[&_tr]:border-b', className)}
       {...props}
     />
-  )
+  );
 }
 
-function TableBody({ className, ...props }: React.ComponentProps<"tbody">) {
+function TableBody({ className, ...props }: React.ComponentProps<'tbody'>) {
   return (
     <tbody
       data-slot="table-body"
-      className={cn("[&_tr:last-child]:border-0", className)}
+      className={cn('[&_tr:last-child]:border-0', className)}
       {...props}
     />
-  )
+  );
 }
 
-function TableFooter({ className, ...props }: React.ComponentProps<"tfoot">) {
+function TableFooter({ className, ...props }: React.ComponentProps<'tfoot'>) {
   return (
     <tfoot
       data-slot="table-footer"
       className={cn(
-        "bg-muted/50 border-t font-medium [&>tr]:last:border-b-0",
+        'bg-muted/50 border-t font-medium [&>tr]:last:border-b-0',
         className
       )}
       {...props}
     />
-  )
+  );
 }
 
-function TableRow({ className, ...props }: React.ComponentProps<"tr">) {
+function TableRow({ className, ...props }: React.ComponentProps<'tr'>) {
   return (
     <tr
       data-slot="table-row"
       className={cn(
-        "hover:bg-muted/50 data-[state=selected]:bg-muted border-b transition-colors",
+        'hover:bg-muted/50 data-[state=selected]:bg-muted border-b transition-colors',
         className
       )}
       {...props}
     />
-  )
+  );
 }
 
-function TableHead({ className, ...props }: React.ComponentProps<"th">) {
+function TableHead({ className, ...props }: React.ComponentProps<'th'>) {
   return (
     <th
       data-slot="table-head"
       className={cn(
-        "text-foreground h-10 px-2 text-left align-middle font-medium whitespace-nowrap [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[2px]",
+        'text-foreground h-10 px-2 text-left align-middle font-medium overflow-hidden text-ellipsis [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[2px]',
         className
       )}
       {...props}
     />
-  )
+  );
 }
 
-function TableCell({ className, ...props }: React.ComponentProps<"td">) {
+function TableCell({ className, ...props }: React.ComponentProps<'td'>) {
   return (
     <td
       data-slot="table-cell"
       className={cn(
-        "p-2 align-middle whitespace-nowrap [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[2px]",
+        'p-2 align-middle overflow-hidden text-ellipsis [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[2px]',
         className
       )}
       {...props}
     />
-  )
+  );
 }
 
 function TableCaption({
   className,
   ...props
-}: React.ComponentProps<"caption">) {
+}: React.ComponentProps<'caption'>) {
   return (
     <caption
       data-slot="table-caption"
-      className={cn("text-muted-foreground mt-4 text-sm", className)}
+      className={cn('text-muted-foreground mt-4 text-sm', className)}
       {...props}
     />
-  )
+  );
 }
 
 export {
@@ -111,4 +112,4 @@ export {
   TableRow,
   TableCell,
   TableCaption,
-}
+};
diff --git a/src/hooks/useTableColumnSizing.ts b/src/hooks/useTableColumnSizing.ts
new file mode 100644
index 00000000..49afa578
--- /dev/null
+++ b/src/hooks/useTableColumnSizing.ts
@@ -0,0 +1,28 @@
+import { useState, useEffect } from 'react';
+import type { ColumnDef, ColumnSizingState } from '@tanstack/react-table';
+
+/**
+ * A hook to manage column sizing for tables
+ * @param columns The column definitions with size information
+ * @returns An object with column sizing state and setter
+ */
+export function useTableColumnSizing<T>(columns: ColumnDef<T>[]) {
+  const [columnSizing, setColumnSizing] = useState<ColumnSizingState>({});
+
+  // Initialize column sizing with default values from column definitions
+  useEffect(() => {
+    const initialSizing: ColumnSizingState = {};
+    columns.forEach(col => {
+      const columnId = typeof col.accessorKey === 'string' ? col.accessorKey : col.id as string;
+      if (columnId) {
+        initialSizing[columnId] = col.size || 150;
+      }
+    });
+    setColumnSizing(initialSizing);
+  }, [columns]);
+
+  return {
+    columnSizing,
+    setColumnSizing,
+  };
+}
\ No newline at end of file