@xcelsior/ui-spreadsheets 1.2.1 → 1.3.0

package/src/components/RowIndexColumnHeader.tsx

@@ -2,8 +2,8 @@ import { cn } from '../utils';
 import { ColumnHeaderActions } from './ColumnHeaderActions';
 import { ROW_INDEX_COLUMN_WIDTH } from '../hooks/useSpreadsheetPinning';
 
-const cellPaddingCompact = 'px-1 py-0.5';
-const cellPaddingNormal = 'px-2 py-1.5';
+const cellPaddingCompact = 'px-1.5 py-1';
+const cellPaddingNormal = 'px-2 py-2';
 
 export interface RowIndexColumnHeaderProps {
     /** Whether highlighting is enabled */
@@ -16,7 +16,7 @@ export interface RowIndexColumnHeaderProps {
     onHighlightClick?: () => void;
     /** Callback when pin button is clicked */
     onPinClick?: () => void;
-    /** Whether this is the empty placeholder cell in the second header row (column headers row) */
+    /** Whether this is the empty placeholder cell in the group header row */
     isSecondRow?: boolean;
     /** Whether compact mode is enabled */
     compactMode?: boolean;
@@ -27,6 +27,7 @@ export interface RowIndexColumnHeaderProps {
 /**
  * Row index column header (#) with highlight and pin actions.
  * Uses the same ColumnHeaderActions component as regular columns for consistency.
+ * Vertical sticking is handled by the parent <thead>, this only handles horizontal sticking when pinned.
  */
 export function RowIndexColumnHeader({
     enableHighlighting = false,
@@ -40,23 +41,21 @@ export function RowIndexColumnHeader({
 }: RowIndexColumnHeaderProps) {
     const cellPadding = compactMode ? cellPaddingCompact : cellPaddingNormal;
 
-    // Second row is an empty placeholder cell - no content, just maintains alignment
+    // Group header row placeholder - always sticky left
     if (isSecondRow) {
         return (
             <th
                 className={cn(
-                    'border border-gray-200 text-center font-bold text-gray-700',
-                    compactMode ? 'text-[10px]' : 'text-xs',
+                    'border border-gray-200 text-center font-bold text-gray-700 sticky',
+                    compactMode ? 'text-xs' : 'text-sm',
                     cellPadding,
-                    isPinned ? 'z-30' : 'z-20',
                     className
                 )}
                 style={{
                     minWidth: `${ROW_INDEX_COLUMN_WIDTH}px`,
                     width: `${ROW_INDEX_COLUMN_WIDTH}px`,
-                    position: 'sticky',
-                    top: 0,
-                    left: isPinned ? 0 : undefined,
+                    left: 0,
+                    zIndex: 50,
                     backgroundColor: highlightColor || 'rgb(243 244 246)',
                 }}
             />
@@ -66,18 +65,16 @@ export function RowIndexColumnHeader({
     return (
         <th
             className={cn(
-                'border border-gray-200 text-center font-bold text-gray-700 group',
-                compactMode ? 'text-[10px]' : 'text-xs',
+                'border border-gray-200 text-center font-bold text-gray-700 group sticky',
+                compactMode ? 'text-xs' : 'text-sm',
                 cellPadding,
-                isPinned ? 'z-30' : 'z-20',
                 className
             )}
             style={{
                 minWidth: `${ROW_INDEX_COLUMN_WIDTH}px`,
                 width: `${ROW_INDEX_COLUMN_WIDTH}px`,
-                position: 'sticky',
-                top: 0,
-                left: isPinned ? 0 : undefined,
+                left: 0,
+                zIndex: 50,
                 backgroundColor: highlightColor || 'rgb(243 244 246)',
             }}
         >

package/src/components/SelectionSummaryBar.tsx

@@ -0,0 +1,103 @@
+import type { SelectionSummary } from '../hooks/useSpreadsheetSummary';
+import type { CellPosition, SpreadsheetColumn } from '../types';
+
+export interface SelectionSummaryBarProps<T> {
+    /** Computed summary for numeric selections */
+    summary: SelectionSummary | null;
+    /** Currently focused cell */
+    focusedCell: CellPosition | null;
+    /** Column definitions */
+    columns: SpreadsheetColumn<T>[];
+    /** Current page's data */
+    data: T[];
+    /** Function to get row ID */
+    getRowId: (row: T) => string | number;
+    /** Current page number */
+    currentPage: number;
+    /** Page size */
+    pageSize: number;
+}
+
+/**
+ * Combined status bar showing cell address (left) and selection summary (right).
+ * Similar to Excel's bottom status bar.
+ */
+export function SelectionSummaryBar<T extends Record<string, any>>({
+    summary,
+    focusedCell,
+    columns,
+    data,
+    getRowId,
+    currentPage,
+    pageSize,
+}: SelectionSummaryBarProps<T>) {
+    // Compute address info
+    let addressDisplay: string | null = null;
+    let valueDisplay: string | null = null;
+
+    if (focusedCell) {
+        const column = columns.find((c) => c.id === focusedCell.columnId);
+        const rowIndex = data.findIndex((r) => getRowId(r) === focusedCell.rowId);
+        const row = rowIndex !== -1 ? data[rowIndex] : null;
+
+        if (column && row) {
+            const displayRowIndex = rowIndex + 1 + (currentPage - 1) * pageSize;
+            addressDisplay = `Row ${displayRowIndex} / ${column.label}`;
+            const value = column.getValue ? column.getValue(row) : row[focusedCell.columnId];
+            if (value !== null && value !== undefined && value !== '') {
+                valueDisplay = String(value);
+            }
+        }
+    }
+
+    // Don't render if nothing to show
+    if (!addressDisplay && !summary) return null;
+
+    return (
+        <div className="flex items-center justify-between px-3 py-1.5 bg-gray-50 border-t border-gray-200 text-xs text-gray-600">
+            {/* Left: Cell address + value */}
+            <div className="flex items-center gap-2 min-w-0">
+                {addressDisplay && (
+                    <>
+                        <span className="font-medium text-gray-500 bg-white px-2 py-0.5 rounded border border-gray-200 shrink-0">
+                            {addressDisplay}
+                        </span>
+                        {valueDisplay && (
+                            <span className="text-gray-700 truncate" title={valueDisplay}>
+                                {valueDisplay}
+                            </span>
+                        )}
+                    </>
+                )}
+            </div>
+
+            {/* Right: Selection summary */}
+            {summary && (
+                <div className="flex items-center gap-4 shrink-0">
+                    <span>
+                        <span className="text-gray-400 mr-1">Count:</span>
+                        <span className="font-medium text-gray-700">{summary.numericCount}</span>
+                    </span>
+                    <span>
+                        <span className="text-gray-400 mr-1">Sum:</span>
+                        <span className="font-medium text-gray-700">{summary.sum.toLocaleString()}</span>
+                    </span>
+                    <span>
+                        <span className="text-gray-400 mr-1">Avg:</span>
+                        <span className="font-medium text-gray-700">{summary.avg.toLocaleString()}</span>
+                    </span>
+                    <span>
+                        <span className="text-gray-400 mr-1">Min:</span>
+                        <span className="font-medium text-gray-700">{summary.min.toLocaleString()}</span>
+                    </span>
+                    <span>
+                        <span className="text-gray-400 mr-1">Max:</span>
+                        <span className="font-medium text-gray-700">{summary.max.toLocaleString()}</span>
+                    </span>
+                </div>
+            )}
+        </div>
+    );
+}
+
+SelectionSummaryBar.displayName = 'SelectionSummaryBar';

package/src/components/Spreadsheet.stories.tsx

@@ -368,6 +368,148 @@ export const WithColumnGroups: Story = {
     },
 };
 
+// With column groups and vertical scrolling to test sticky headers
+export const WithColumnGroupsScrolling: Story = {
+    render: () => {
+        // Generate more data to ensure we need to scroll
+        const largeUserData = Array.from({ length: 200 }, (_, i) => ({
+            id: i + 1,
+            name: `User ${i + 1}`,
+            email: `user${i + 1}@example.com`,
+            department: ['Engineering', 'Marketing', 'Sales', 'HR', 'Finance'][i % 5],
+            role: ['Admin', 'Manager', 'Developer', 'Designer', 'Analyst'][i % 5],
+            status: ['Active', 'Inactive', 'Pending'][i % 3],
+            salary: 50000 + Math.floor(Math.random() * 100000),
+            startDate: new Date(2020 + (i % 5), i % 12, (i % 28) + 1).toISOString().split('T')[0],
+            isActive: i % 3 !== 1,
+            // Additional work fields
+            manager: `Manager ${(i % 10) + 1}`,
+            team: ['Alpha', 'Beta', 'Gamma', 'Delta', 'Epsilon'][i % 5],
+            location: ['New York', 'San Francisco', 'London', 'Tokyo', 'Sydney'][i % 5],
+            level: ['Junior', 'Mid', 'Senior', 'Lead', 'Principal'][i % 5],
+            yearsExp: (i % 15) + 1,
+        }));
+
+        // Extended columns including additional work fields
+        const extendedColumns: SpreadsheetColumn<any>[] = [
+            { id: 'id', label: 'ID', width: 60, sortable: true, align: 'center' },
+            { id: 'name', label: 'Name', width: 150, sortable: true, filterable: true },
+            { id: 'email', label: 'Email', width: 220, sortable: true, filterable: true },
+            { id: 'department', label: 'Department', width: 120, sortable: true, filterable: true },
+            { id: 'role', label: 'Role', width: 120, sortable: true, filterable: true },
+            { id: 'status', label: 'Status', width: 100, sortable: true, filterable: true },
+            { id: 'manager', label: 'Manager', width: 120, sortable: true, filterable: true },
+            { id: 'team', label: 'Team', width: 100, sortable: true, filterable: true },
+            { id: 'location', label: 'Location', width: 120, sortable: true, filterable: true },
+            { id: 'level', label: 'Level', width: 100, sortable: true, filterable: true },
+            {
+                id: 'yearsExp',
+                label: 'Years Exp',
+                width: 90,
+                sortable: true,
+                type: 'number',
+                align: 'right',
+            },
+            {
+                id: 'salary',
+                label: 'Salary',
+                width: 120,
+                sortable: true,
+                type: 'number',
+                align: 'right',
+                render: (value) => `$${value.toLocaleString()}`,
+            },
+            { id: 'startDate', label: 'Start Date', width: 120, sortable: true, type: 'date' },
+            { id: 'isActive', label: 'Active', width: 80, type: 'boolean', align: 'center' },
+        ];
+
+        // Column groups with long names - work group has many columns so when collapsed the label wraps
+        const longNameColumnGroups: SpreadsheetColumnGroup[] = [
+            {
+                id: 'personal',
+                label: 'Personal Information Details',
+                columns: ['name', 'email'],
+                collapsible: true,
+                headerColor: '#e0f2fe',
+            },
+            {
+                id: 'work',
+                label: 'Work & Employment Information & Organization Structure',
+                columns: [
+                    'department',
+                    'role',
+                    'status',
+                    'manager',
+                    'team',
+                    'location',
+                    'level',
+                    'yearsExp',
+                ],
+                collapsible: true,
+                headerColor: '#fef3c7',
+            },
+            {
+                id: 'compensation',
+                label: 'Compensation & Benefits Package',
+                columns: ['salary', 'startDate'],
+                collapsible: true,
+                headerColor: '#d1fae5',
+            },
+        ];
+
+        return (
+            <div className="p-4">
+                <div className="mb-4 p-4 bg-amber-50 rounded-lg border border-amber-200">
+                    <h3 className="font-semibold text-amber-900 mb-2">
+                        Column Groups with Sticky Header Test
+                    </h3>
+                    <p className="text-sm text-amber-700 mb-3">
+                        This story tests the sticky header behavior when using column groups. Scroll
+                        down to verify that:
+                    </p>
+                    <ul className="text-sm text-amber-700 space-y-1 ml-4 list-disc">
+                        <li>
+                            The column group headers (Personal Info, Work Info, Compensation) stay
+                            fixed at the top
+                        </li>
+                        <li>
+                            The column headers (Name, Email, etc.) stay fixed below the group
+                            headers
+                        </li>
+                        <li>The row index column stays visible</li>
+                        <li>Group collapse/expand still works while scrolled</li>
+                    </ul>
+                    <p className="text-sm text-red-600 mt-3 font-medium">
+                        Bug to reproduce: Collapse the "Work & Employment Information & Organization
+                        Structure" group - the long header text wraps to 2 lines, which causes
+                        scrolling issues with the sticky header.
+                    </p>
+                </div>
+
+                <div
+                    style={{
+                        height: '500px',
+                        overflow: 'auto',
+                        border: '1px solid #e5e7eb',
+                        borderRadius: '8px',
+                    }}
+                >
+                    <Spreadsheet
+                        data={largeUserData}
+                        columns={extendedColumns}
+                        columnGroups={longNameColumnGroups}
+                        getRowId={(row) => row.id}
+                        showToolbar={false}
+                        showPagination={false}
+                        enableRowSelection
+                        enableCellEditing={false}
+                    />
+                </div>
+            </div>
+        );
+    },
+};
+
 // Products spreadsheet
 export const ProductsSpreadsheet: Story = {
     args: {
@@ -1973,6 +2115,260 @@ export const PinnedColumnsWithGroups: Story = {
 };
 
 // With Right-Pinned Columns
+/**
+ * Comprehensive test story that simulates a real-world logistics spreadsheet.
+ * 30+ columns across 5 groups, editable cells, 200 rows — enough to test:
+ * - Horizontal scrolling with many columns
+ * - Double-click to edit
+ * - Drag-to-select
+ * - Ctrl/Cmd+A select all
+ * - Zebra striping
+ * - Sticky row index
+ * - Enter to submit filter
+ * - Compact vs normal mode toggle
+ */
+interface DocketRecord {
+    id: number;
+    rego: string;
+    driver: string;
+    type: string;
+    date: string;
+    job: string;
+    customer: string;
+    custInv: string;
+    from: string;
+    tipSite: string;
+    comment: string;
+    docket: string;
+    custDocket: string;
+    uom: string;
+    qty: number;
+    rate: number;
+    totalPre: number;
+    totalPost: number;
+    tipName: string;
+    tipUom: string;
+    tipQty: number;
+    tipRate: number;
+    tipPre: number;
+    tipPost: number;
+    tipInvoice: string;
+    truckPre: number;
+    truckPost: number;
+    subRate: number;
+    subPre: number;
+    subPost: number;
+    subInvoice: string;
+    weekEnding: string;
+    profit: number;
+}
+
+const docketData: DocketRecord[] = Array.from({ length: 200 }, (_, i) => {
+    const qty = Math.round((1 + Math.random() * 50) * 100) / 100;
+    const rate = Math.round((10 + Math.random() * 90) * 100) / 100;
+    const totalPre = Math.round(qty * rate * 100) / 100;
+    const tipQty = Math.round((1 + Math.random() * 30) * 100) / 100;
+    const tipRate = Math.round((5 + Math.random() * 40) * 100) / 100;
+    const tipPre = Math.round(tipQty * tipRate * 100) / 100;
+    const subRate = Math.round((20 + Math.random() * 60) * 100) / 100;
+    const subPre = Math.round(qty * subRate * 100) / 100;
+    const profit = Math.round((totalPre - tipPre - subPre) * 100) / 100;
+
+    return {
+        id: i + 1,
+        rego: ['SPR4RO', 'XO78SR', 'KO04KW', 'CL24SS', 'XP60LQ'][i % 5],
+        driver: ['Donald Strathaam', 'James Urewis', 'Shaun Davis', 'Matthew Maddick', 'Steven Ayers'][i % 5],
+        type: ['LNG', 'SUBBY'][i % 2],
+        date: `2026-03-${String((i % 28) + 1).padStart(2, '0')}`,
+        job: ['BORAL ALLOCATION', 'HOLCIM LYNWOOD - PEJAR', 'EARTHWORK FIVEDOCK', 'GAMUDA ECOR'][i % 4],
+        customer: ['Boral Transport Ltd', 'Holcim (Australia) Pty Ltd', 'Earthworks Group', 'Gamuda Engineering'][i % 4],
+        custInv: `INV-${String(i + 1).padStart(5, '0')}`,
+        from: ['Unnamed Road, Marulan NSW 2579', 'Burrows Road South, Saint Peters NSW 2044', '25 Burrows Road South'][i % 3],
+        tipSite: ['Goulburn Road, Pejar NSW 2583', 'Ada Avenue, Brookvale NSW 2100', '52 Bay Road, Taren Point'][i % 3],
+        comment: i % 7 === 0 ? 'Check weight docket' : '',
+        docket: `E0100${String(i + 24).padStart(2, '0')}`,
+        custDocket: i % 3 === 0 ? `CD-${i + 100}` : '',
+        uom: ['Tonne', 'Load', 'Hour'][i % 3],
+        qty,
+        rate,
+        totalPre,
+        totalPost: Math.round(totalPre * 1.1 * 100) / 100,
+        tipName: ['Pejar Tip', 'Brookvale Tip', 'Taren Point Tip'][i % 3],
+        tipUom: ['Tonne', 'Load'][i % 2],
+        tipQty,
+        tipRate,
+        tipPre,
+        tipPost: Math.round(tipPre * 1.1 * 100) / 100,
+        tipInvoice: i % 4 === 0 ? `TIP-${i + 200}` : '',
+        truckPre: Math.round((500 + Math.random() * 1500) * 100) / 100,
+        truckPost: Math.round((550 + Math.random() * 1650) * 100) / 100,
+        subRate,
+        subPre,
+        subPost: Math.round(subPre * 1.1 * 100) / 100,
+        subInvoice: i % 5 === 0 ? `SUB-${i + 300}` : '',
+        weekEnding: `2026-03-${String(Math.min(28, ((Math.floor(i / 7) + 1) * 7))).padStart(2, '0')}`,
+        profit,
+    };
+});
+
+const docketColumns: SpreadsheetColumn<DocketRecord>[] = [
+    { id: 'rego', label: 'Rego', width: 85, sortable: true, filterable: true, editable: true },
+    { id: 'driver', label: 'Driver', width: 160, sortable: true, filterable: true },
+    { id: 'type', label: 'Type', width: 70, sortable: true, filterable: true, editable: true, type: 'select', options: ['LNG', 'SUBBY'] },
+    { id: 'date', label: 'Date', width: 100, sortable: true, filterable: true, type: 'date' },
+    { id: 'job', label: 'Job', width: 180, sortable: true, filterable: true },
+    { id: 'customer', label: 'Customer', width: 180, sortable: true, filterable: true },
+    { id: 'custInv', label: 'Cust Inv#', width: 100, sortable: true, filterable: true, editable: true },
+    { id: 'from', label: 'From', width: 200, sortable: true, filterable: true, editable: true },
+    { id: 'tipSite', label: 'Tip Site', width: 200, sortable: true, filterable: true, editable: true },
+    { id: 'comment', label: 'Comment', width: 150, sortable: true, filterable: true, editable: true },
+    { id: 'docket', label: 'Docket', width: 90, sortable: true, filterable: true },
+    { id: 'custDocket', label: 'Cust Docket', width: 100, sortable: true, filterable: true, editable: true },
+    { id: 'uom', label: 'UoM', width: 70, editable: true, type: 'select', options: ['Tonne', 'Load', 'Hour'] },
+    { id: 'qty', label: 'Qty', width: 70, sortable: true, type: 'number', align: 'right', editable: true },
+    { id: 'rate', label: 'Rate', width: 70, sortable: true, type: 'number', align: 'right', editable: true },
+    { id: 'totalPre', label: 'Total Pre', width: 85, type: 'number', align: 'right', render: (v) => `$${Number(v).toFixed(2)}` },
+    { id: 'totalPost', label: 'Total Post', width: 85, type: 'number', align: 'right', render: (v) => `$${Number(v).toFixed(2)}` },
+    { id: 'tipName', label: 'Tip Name', width: 140, sortable: true, filterable: true, editable: true },
+    { id: 'tipUom', label: 'Tip UoM', width: 70, editable: true, type: 'select', options: ['Tonne', 'Load'] },
+    { id: 'tipQty', label: 'Tip Qty', width: 70, sortable: true, filterable: true, type: 'number', align: 'right', editable: true },
+    { id: 'tipRate', label: 'Tip Rate', width: 70, sortable: true, filterable: true, type: 'number', align: 'right', editable: true },
+    { id: 'tipPre', label: 'Tip Pre', width: 80, type: 'number', align: 'right', render: (v) => `$${Number(v).toFixed(2)}` },
+    { id: 'tipPost', label: 'Tip Post', width: 80, type: 'number', align: 'right', render: (v) => `$${Number(v).toFixed(2)}` },
+    { id: 'tipInvoice', label: 'Tip Invoice', width: 100, sortable: true, filterable: true, editable: true },
+    { id: 'truckPre', label: 'Truck Pre', width: 85, type: 'number', align: 'right', render: (v) => `$${Number(v).toFixed(2)}` },
+    { id: 'truckPost', label: 'Truck Post', width: 85, type: 'number', align: 'right', render: (v) => `$${Number(v).toFixed(2)}` },
+    { id: 'subRate', label: 'Sub Rate', width: 80, sortable: true, filterable: true, type: 'number', align: 'right', editable: true },
+    { id: 'subPre', label: 'Sub Pre', width: 80, type: 'number', align: 'right', render: (v) => `$${Number(v).toFixed(2)}` },
+    { id: 'subPost', label: 'Sub Post', width: 80, type: 'number', align: 'right', render: (v) => `$${Number(v).toFixed(2)}` },
+    { id: 'subInvoice', label: 'Sub Invoice', width: 100, sortable: true, filterable: true, editable: true },
+    { id: 'weekEnding', label: 'Week Ending', width: 100, sortable: true },
+    {
+        id: 'profit',
+        label: 'Profit',
+        width: 90,
+        type: 'number',
+        align: 'right',
+        sortable: true,
+        render: (v) => {
+            const num = Number(v);
+            const color = num < 0 ? 'text-red-600' : 'text-green-600';
+            return <span className={`font-medium ${color}`}>${num.toFixed(2)}</span>;
+        },
+    },
+];
+
+const docketColumnGroups: SpreadsheetColumnGroup[] = [
+    {
+        id: 'customer-billing',
+        label: 'Customer & Billing',
+        columns: ['rego', 'driver', 'type', 'date', 'job', 'customer', 'custInv', 'from', 'tipSite', 'comment', 'docket', 'custDocket', 'uom', 'qty', 'rate', 'totalPre', 'totalPost'],
+        headerColor: '#93C5FD',
+        collapsible: true,
+    },
+    {
+        id: 'tip-site',
+        label: 'Tip Site',
+        columns: ['tipName', 'tipUom', 'tipQty', 'tipRate', 'tipPre', 'tipPost', 'tipInvoice'],
+        headerColor: '#86EFAC',
+        collapsible: true,
+    },
+    {
+        id: 'truck-hire',
+        label: 'Truck Hire',
+        columns: ['truckPre', 'truckPost'],
+        headerColor: '#FDBA74',
+        collapsible: true,
+    },
+    {
+        id: 'subcontractor',
+        label: 'Subcontractor',
+        columns: ['subRate', 'subPre', 'subPost', 'subInvoice'],
+        headerColor: '#D8B4FE',
+        collapsible: true,
+    },
+    {
+        id: 'summary',
+        label: 'Summary',
+        columns: ['weekEnding', 'profit'],
+        headerColor: '#D1D5DB',
+        collapsible: true,
+    },
+];
+
+const COMPREHENSIVE_STORAGE_KEY = 'storybook-comprehensive-test-settings';
+
+const getStoredComprehensiveSettings = () => {
+    try {
+        const stored = localStorage.getItem(COMPREHENSIVE_STORAGE_KEY);
+        return stored ? JSON.parse(stored) : null;
+    } catch { return null; }
+};
+
+export const ComprehensiveTest: Story = {
+    render: () => {
+        const [data, setData] = useState(docketData);
+        const storedSettings = getStoredComprehensiveSettings();
+
+        const handleCellsEdit = (edits: CellEdit[]) => {
+            setData((prev) =>
+                prev.map((row) => {
+                    const editsForRow = edits.filter((e) => e.rowId === row.id);
+                    if (editsForRow.length > 0) {
+                        const updates = editsForRow.reduce(
+                            (acc, edit) => ({ ...acc, [edit.columnId]: edit.value }),
+                            {}
+                        );
+                        return { ...row, ...updates };
+                    }
+                    return row;
+                })
+            );
+        };
+
+        return (
+            <div className="flex flex-col h-screen">
+                <div className="p-3 bg-blue-50 border-b border-blue-200 shrink-0">
+                    <h3 className="font-semibold text-blue-900 mb-1">
+                        Comprehensive Test — Docket Management
+                    </h3>
+                    <p className="text-xs text-blue-700">
+                        32 columns, 5 groups, 200 rows. Double-click to edit | Shift+Click for range | Cmd+A select all | Click header to select column | Sort via icon | Enter to submit filter | Resize columns by dragging header edges
+                    </p>
+                </div>
+
+                <div className="flex-1 min-h-0 p-2">
+                <Spreadsheet
+                    data={data}
+                    columns={docketColumns}
+                    columnGroups={docketColumnGroups}
+                    getRowId={(row) => row.id}
+                    onCellsEdit={handleCellsEdit}
+                    showToolbar
+                    showPagination
+                    enableRowSelection
+                    enableCellEditing
+                    enableHighlighting
+                    enableComments
+                    enableUndoRedo
+                    settings={{
+                        defaultPinnedColumns: storedSettings?.defaultPinnedColumns ?? ['__row_index__'],
+                        defaultPageSize: storedSettings?.defaultPageSize ?? 100,
+                        defaultZoom: storedSettings?.defaultZoom ?? 100,
+                        autoSave: storedSettings?.autoSave ?? true,
+                        compactView: storedSettings?.compactView ?? false,
+                        columnWidths: storedSettings?.columnWidths,
+                    }}
+                    onSettingsChange={(settings) => {
+                        localStorage.setItem(COMPREHENSIVE_STORAGE_KEY, JSON.stringify(settings));
+                    }}
+                />
+                </div>
+            </div>
+        );
+    },
+};
+
 export const WithRightPinnedColumns: Story = {
     render: () => {
         const [data, setData] = useState(sampleUsers);