@heliux-org/design-system-core 0.0.481-AG-Test-07 → 0.0.484

package/src/components/AGTable/__stories__/AGTable.stories.tsx

@@ -1,10 +1,21 @@
 // BasicTable.stories.js
-import React from 'react';
+import React, { useMemo } from 'react';
 import AGTable from '../AGTable';
 import { ColDef } from 'ag-grid-community';
+import { AgGridReact } from 'ag-grid-react';
+import '../ag-grid-theme.scss';
+
+type Employee = {
+    id: number;
+    name: string;
+    position: string;
+    department: string;
+    salary: number;
+    startDate: string;
+};
 
 // Sample data for the stories
-const sampleEmployeeData = [
+const sampleEmployeeData: Employee[] = [
     { id: 1, name: 'John Doe', position: 'Developer', department: 'Engineering', salary: 75000, startDate: '2022-01-15' },
     { id: 2, name: 'Jane Smith', position: 'Designer', department: 'Design', salary: 68000, startDate: '2021-11-20' },
     { id: 3, name: 'Mike Johnson', position: 'Manager', department: 'Engineering', salary: 95000, startDate: '2020-03-10' },
@@ -15,25 +26,25 @@ const sampleEmployeeData = [
     { id: 8, name: 'Emma Taylor', position: 'HR Specialist', department: 'Human Resources', salary: 58000, startDate: '2022-06-25' },
 ];
 
-const basicColumnDefs = [
-    { field: 'id', headerName: 'ID', width: 70 },
-    { field: 'name', headerName: 'Name', width: 150, editable: true },
-    { field: 'position', headerName: 'Position', width: 150, editable: true },
-    { field: 'department', headerName: 'Department', width: 150, editable: true },
+const columnDefs: ColDef<Employee>[] = [
+    { field: 'id', headerName: 'ID' },
+    { field: 'name', headerName: 'Name', editable: true },
+    { field: 'position', headerName: 'Position', editable: true },
+    { field: 'department', headerName: 'Department', editable: true },
     {
         field: 'salary',
         headerName: 'Salary',
-        width: 120,
         valueFormatter: params => `$${params.value.toLocaleString()}`
     },
     {
         field: 'startDate',
         headerName: 'Start Date',
-        width: 120,
         valueFormatter: params => new Date(params.value).toLocaleDateString()
     },
 ];
 
+const defaultColDef = { cellStyle: { display: 'flex', alignItems: 'center' }, sortable: true, filter: true, resizable: true, flex: 1 };
+
 export default {
     title: 'Components/AGTable',
     component: AGTable,
@@ -86,10 +97,12 @@ export default {
 
 // Basic table story
 export const Basic = {
-    args: {
-        rowData: sampleEmployeeData,
-        columnDefs: basicColumnDefs,
-        height: '400px',
+    render: () => {
+        return (
+            <div style={{ height: '400px', width: "100%" }}>
+                <AgGridReact className='ag-grid' rowData={sampleEmployeeData} columnDefs={columnDefs} defaultColDef={defaultColDef} />
+            </div>
+        );
     },
     parameters: {
         docs: {
@@ -100,32 +113,14 @@ export const Basic = {
     },
 };
 
-// Table with pagination
-export const WithPagination = {
-    args: {
-        rowData: sampleEmployeeData,
-        columnDefs: basicColumnDefs,
-        pagination: true,
-        paginationPageSize: 5,
-        height: '400px',
-    },
-    parameters: {
-        docs: {
-            description: {
-                story: 'Table with pagination enabled, showing 5 rows per page.',
-            },
-        },
-    },
-};
-
 // Compact table
 export const Compact = {
-    args: {
-        rowData: sampleEmployeeData,
-        columnDefs: basicColumnDefs,
-        height: '300px',
-        headerHeight: 35,
-        rowHeight: 30,
+    render: () => {
+        return (
+            <div style={{ height: '300px', width: "100%" }}>
+                <AgGridReact className='ag-grid' rowData={sampleEmployeeData} columnDefs={columnDefs} defaultColDef={defaultColDef} headerHeight={35} rowHeight={30} />
+            </div>
+        );
     },
     parameters: {
         docs: {
@@ -138,11 +133,12 @@ export const Compact = {
 
 // Empty state
 export const EmptyState = {
-    args: {
-        rowData: [],
-        columnDefs: basicColumnDefs,
-        height: '400px',
-        overlayNoRowsTemplate: '<span style="padding: 20px; font-size: 16px;">No data available</span>',
+    render: () => {
+        return (
+            <div style={{ height: '400px', width: "100%" }}>
+                <AgGridReact className='ag-grid' rowData={[]} columnDefs={columnDefs} defaultColDef={defaultColDef} />
+            </div>
+        );
     },
     parameters: {
         docs: {
@@ -153,424 +149,505 @@ export const EmptyState = {
     },
 };
 
-// Editable table with string, dropdown, and date picker
-export const Editable = {
-    args: {
-        rowData: sampleEmployeeData,
-        columnDefs: [
-            {
-                field: 'name',
-                headerName: 'Name',
-                editable: true,
-            },
-            {
-                field: 'position',
-                headerName: 'Position',
-                editable: true,
-                cellEditor: 'agSelectCellEditor',
-                cellEditorParams: {
-                    values: ['Developer', 'Designer', 'Manager', 'Analyst', 'Marketing Lead', 'Sales Rep', 'HR Specialist']
-                },
-            },
-            {
-                field: 'startDate',
-                headerName: 'Start Date',
-                editable: true,
-                valueFormatter: params => new Date(params.value).toLocaleDateString(),
-            },
-            {
-                field: 'department',
-                headerName: 'Department',
-                editable: true,
-            },
-            {
-                field: 'salary',
-                headerName: 'Salary',
-                editable: true,
-                valueFormatter: params => `$${params.value.toLocaleString()}`,
-            },
-        ],
-        height: '500px',
-        undoRedoCellEditing: true,
-        undoRedoCellEditingLimit: 20,
-        onCellValueChanged: event => {
-            console.log('Cell changed:', {
-                field: event.colDef.field,
-                oldValue: event.oldValue,
-                newValue: event.newValue,
-                rowData: event.data,
-            });
-        },
+// Table with pagination
+export const WithPagination = {
+    render: () => {
+        // data with 500 rows
+        const data = Array.from({ length: 500 }, (_, index) => ({
+            id: index + 1,
+            name: `Employee ${index + 1}`,
+            position: `Position ${index + 1}`,
+            department: `Department ${index + 1}`,
+            salary: 75000 + index * 1000,
+            startDate: `2022-01-15`
+        }));
+        return (
+            <div style={{ height: '400px', width: "100%" }}>
+                <AgGridReact className='ag-grid' rowData={data} columnDefs={columnDefs} defaultColDef={defaultColDef} pagination={true} />
+            </div>
+        );
     },
     parameters: {
         docs: {
             description: {
-                story: 'Editable table with string editing, dropdowns, date pickers.',
+                story: 'Table with pagination enabled, showing 5 rows per page.',
             },
         },
     },
 };
 
-const cellSelection = {
-    handle: {
-        mode: 'fill' as const,
-    },
-};
-
-// Range Seection story
-export const RangeSelection = {
-
-    args: {
-        rowData: sampleEmployeeData,
-        columnDefs: basicColumnDefs,
-        height: '400px',
-        cellSelection,
+// Editable table with string, dropdown, and date picker
+export const Editable = {
+    render: () => {
+        return (
+            <div style={{ height: '400px', width: "100%" }}>
+                <AgGridReact
+                    className='ag-grid'
+                    rowData={sampleEmployeeData}
+                    columnDefs={[
+                        {
+                            field: 'name',
+                            headerName: 'Name',
+                            editable: true,
+                        },
+                        {
+                            field: 'position',
+                            headerName: 'Position',
+                            editable: true,
+                            cellEditor: 'agSelectCellEditor',
+                            cellEditorParams: {
+                                values: ['Developer', 'Designer', 'Manager', 'Analyst', 'Marketing Lead', 'Sales Rep', 'HR Specialist']
+                            },
+                        },
+                        {
+                            field: 'startDate',
+                            headerName: 'Start Date',
+                            editable: true,
+                            valueFormatter: params => new Date(params.value).toLocaleDateString(),
+                        },
+                        {
+                            field: 'department',
+                            headerName: 'Department',
+                            editable: true,
+                        },
+                        {
+                            field: 'salary',
+                            headerName: 'Salary',
+                            editable: true,
+                            valueFormatter: params => `$${params.value.toLocaleString()}`,
+                        },
+                    ]}
+                    defaultColDef={defaultColDef}
+                    undoRedoCellEditing={true}
+                    undoRedoCellEditingLimit={20}
+                    onCellValueChanged={event => {
+                        console.log('Cell changed:', {
+                            field: event.colDef.field,
+                            oldValue: event.oldValue,
+                            newValue: event.newValue,
+                            rowData: event.data,
+                        });
+                    }}
+                />
+            </div>
+        );
     },
     parameters: {
         docs: {
             description: {
-                story: 'A basic table with range selection.',
+                story: 'Editable table with string editing, dropdowns, date pickers.',
             },
         },
     },
 };
 
-// with sticky columns
-export const StickyColumns = {
-    args: {
-        rowData: sampleEmployeeData,
-        cellSelection,
-        columnDefs: [
-            { field: 'id', headerName: 'ID', width: 70, pinned: 'left' },
-            { field: 'name', headerName: 'Name', minWidth: 150, pinned: 'left', editable: true },
-            { field: 'position', headerName: 'Position', minWidth: 350 },
-            { field: 'department', headerName: 'Department', minWidth: 350 },
-            {
-                field: 'salary',
-                headerName: 'Salary',
-                minWidth: 350,
-                valueFormatter: params => `$${params.value.toLocaleString()}`
-            },
-            {
-                field: 'startDate',
-                headerName: 'Start Date',
-                width: 420,
-                pinned: 'right',
-                editable: true,
-                valueFormatter: params => new Date(params.value).toLocaleDateString(),
-                valueParser: params => {
-                    const dateValue = params.newValue;
-
-                    // If it's already in ISO format, return as is
-                    if (typeof dateValue === 'string' && dateValue.match(/^\d{4}-\d{2}-\d{2}/)) {
-                        return dateValue;
-                    }
-
-                    // If it's a formatted date string (like "6/24/2025"), parse it
-                    try {
-                        const parsedDate = new Date(dateValue);
-                        if (!isNaN(parsedDate.getTime())) {
-                            // Use local timezone offset to avoid date shifting
-                            const year = parsedDate.getFullYear();
-                            const month = String(parsedDate.getMonth() + 1).padStart(2, '0');
-                            const day = String(parsedDate.getDate()).padStart(2, '0');
-
-                            // Return in ISO format (YYYY-MM-DD) using local date components
-                            return `${year}-${month}-${day}`;
-                        }
-                    } catch (error) {
-                        console.warn('Failed to parse date:', dateValue);
-                    }
-
-                    // Fallback to original value
-                    return params.oldValue || dateValue;
-                },
-            },
-        ],
-        // Handle cell value changes to see the fill operation
-        onCellValueChanged: (event) => {
-            console.log('Cell value changed:', {
-                field: event.colDef.field,
-                oldValue: event.oldValue,
-                newValue: event.newValue,
-                rowIndex: event.rowIndex
-            });
-        },
+// Single row selection
+export const SingleRowSelection = {
 
+    render: () => {
+        return (
+            <div style={{ height: '400px', width: "100%" }}>
+                <AgGridReact
+                    className='ag-grid'
+                    rowData={sampleEmployeeData}
+                    columnDefs={columnDefs}
+                    defaultColDef={defaultColDef}
+                    rowSelection="single"
+                    onSelectionChanged={(event) => {
+                        console.log('Selected:', event.api.getSelectedRows());
+                    }}
+                />
+            </div>
+        );
     },
     parameters: {
         docs: {
             description: {
-                story: 'Table with sticky columns on the left side.',
+                story: 'A basic table with single selection.',
             },
         },
     },
 };
 
-export const SingleSelect = {
+// Multi row selection
+export const MultiRowsSelection = {
+    render: () => {
+        const rowSelection = useMemo(() => {
+            return {
+                mode: 'multiRow' as const,
+            };
+        }, []);
 
-    args: {
-        rowData: sampleEmployeeData,
-        columnDefs: basicColumnDefs,
-        height: '400px',
-        allowSingleSelect: true,
-        onRowSelectionChanged: (selectedRows) => {
-            console.log('Selected:', selectedRows);
-        }
+        return (
+            <div style={{ height: '400px', width: "100%" }}>
+                <AgGridReact
+                    className='ag-grid'
+                    rowData={sampleEmployeeData}
+                    columnDefs={columnDefs}
+                    defaultColDef={defaultColDef}
+                    rowSelection={rowSelection}
+                    onSelectionChanged={(event) => {
+                        console.log('Selected:', event.api.getSelectedRows());
+                    }}
+                />
+            </div>
+        );
     },
     parameters: {
         docs: {
             description: {
-                story: 'A basic table with single selection.',
+                story: 'A basic table with multi selection.',
             },
         },
     },
 };
 
-export const MultiSelect = {
-
-    args: {
-        rowData: sampleEmployeeData,
-        columnDefs: basicColumnDefs,
-        height: '800px',
-        allowMultiSelect: true,
-        onRowSelectionChanged: (selectedRows) => {
-            console.log('Selected:', selectedRows);
-        }
+// with sticky columns
+export const StickyColumns = {
+    render: () => {
+        return (
+            <div style={{ height: '400px', width: "1200px" }}>
+                <AgGridReact
+                    className='ag-grid'
+                    rowData={sampleEmployeeData}
+                    columnDefs={[
+                        { field: 'id', headerName: 'ID', width: 70, pinned: 'left' },
+                        { field: 'name', headerName: 'Name', minWidth: 150, pinned: 'left' },
+                        { field: 'position', headerName: 'Position', minWidth: 350 },
+                        { field: 'department', headerName: 'Department', minWidth: 350 },
+                        {
+                            field: 'salary',
+                            headerName: 'Salary',
+                            minWidth: 350,
+                            valueFormatter: params => `$${params.value.toLocaleString()}`
+                        },
+                        {
+                            field: 'startDate',
+                            headerName: 'Start Date',
+                            minWidth: 320,
+                            pinned: 'right',
+                            valueFormatter: params => new Date(params.value).toLocaleDateString(),
+                        },
+                    ]}
+                // defaultColDef={defaultColDef}
+                />
+            </div>
+        );
     },
     parameters: {
         docs: {
             description: {
-                story: 'A basic table with multi selection.',
+                story: 'Table with sticky columns on the left side.',
             },
         },
     },
 };
 
-type LineItem = {
-    id: string;
-    lineNo: number;
-    itemNo: string;
-    itemName: string;
-    revision: number;
-    level: string;
-    tier: string;
-    qty: number;
-    uom: string;
-    needBy: string;
-    commodity: string;
-    owner: string;
-};
-
-type PurchaseRequest = {
-    id: string;
-    prNo: string;
-    creator: string;
-    assignee: string;
-    needByDate: string;
-    submitDate: string;
-    demand: string;
-    status: string;
-    lineItems: LineItem[];
+const cellSelection = {
+    handle: {
+        mode: 'fill' as const,
+    },
 };
 
-const purchaseRequestData = [
-    {
-        id: 'a1b2c3d4e',
-        prNo: 'PRQ-186',
-        creator: "abdulrahman@foomotion.io",
-        assignee: "abdulrahman@foomotion.io",
-        needByDate: '10/22/2024 - 11/4/2024',
-        submitDate: '11/4/2024',
-        demand: 'Unplanned',
-        status: 'Processing',
-        lineItems: [
-            {
-                id: 'x1y2z3a4b',
-                lineNo: 1,
-                itemNo: 'HX-100001-001',
-                itemName: 'Ankle',
-                revision: 1,
-                level: '',
-                tier: 'Tier 4',
-                qty: 1,
-                uom: 'Each',
-                needBy: '10/22/2024',
-                commodity: '',
-                owner: "daniel@heliux.com"
-            },
-            {
-                id: 'c5d6e7f8g',
-                lineNo: 2,
-                itemNo: 'HX-100000-001',
-                itemName: 'Ankle 1',
-                revision: 1,
-                level: '',
-                tier: 'Tier 4',
-                qty: 1,
-                uom: 'Each',
-                needBy: '11/4/2024',
-                commodity: '',
-                owner: "daniel@heliux.com"
-            }
-        ]
-    },
-    {
-        id: 'h9i0j1k2l',
-        prNo: 'PRQ-187',
-        creator: "abdulrahman@foomotion.io",
-        assignee: "abdulrahman@foomotion.io",
-        needByDate: '10/24/2024',
-        submitDate: '3/2/2025',
-        demand: 'Unplanned',
-        status: 'Rejected',
-        lineItems: [
-            {
-                id: 'm3n4o5p6q',
-                lineNo: 1,
-                itemNo: 'AS1420_M4_25N',
-                itemName: 'AS 1420 - M4 x 25-N_AS 1420 - M4 x 25-N',
-                revision: 3,
-                level: '',
-                tier: 'Tier 4',
-                qty: 1,
-                uom: 'Each',
-                needBy: '10/24/2024',
-                commodity: '',
-                owner: "abdulrahman@foomotion.io"
-            }
-        ]
-    },
-    {
-        id: 'r7s8t9u0v',
-        prNo: 'PRQ-188',
-        creator: "daniel@heliux.com",
-        assignee: "ali@foomotion.io",
-        needByDate: '11/15/2024 - 12/1/2024',
-        submitDate: '11/10/2024',
-        demand: 'Planned',
-        status: 'Approved',
-        lineItems: [
-            {
-                id: 'w1x2y3z4a',
-                lineNo: 1,
-                itemNo: 'BX-200001-005',
-                itemName: 'Bearing Assembly',
-                revision: 2,
-                level: 'A',
-                tier: 'Tier 2',
-                qty: 5,
-                uom: 'Each',
-                needBy: '11/15/2024',
-                commodity: 'Mechanical',
-                owner: "abdulrahman@foomotion.io"
-            },
-            {
-                id: 'b5c6d7e8f',
-                lineNo: 2,
-                itemNo: 'BX-200002-010',
-                itemName: 'Gasket Set',
-                revision: 1,
-                level: 'B',
-                tier: 'Tier 3',
-                qty: 10,
-                uom: 'Set',
-                needBy: '11/20/2024',
-                commodity: 'Sealing',
-                owner: "abdulrahman@foomotion.io"
-            },
-            {
-                id: 'g9h0i1j2k',
-                lineNo: 3,
-                itemNo: 'BX-200003-001',
-                itemName: 'Control Module',
-                revision: 4,
-                level: 'A',
-                tier: 'Tier 1',
-                qty: 2,
-                uom: 'Each',
-                needBy: '12/1/2024',
-                commodity: 'Electronics',
-                owner: "abdulrahman@foomotion.io"
-            }
-        ]
-    }
-];
+// with Range Seection
+export const RangeSelection = {
+    render: () => {
+        return (
+            <div style={{ height: '400px', width: "100%" }}>
+                <AgGridReact
+                    className='ag-grid'
+                    rowData={sampleEmployeeData}
+                    columnDefs={[
+                        { field: 'id', headerName: 'ID', width: 70 },
+                        { field: 'name', headerName: 'Name', editable: true },
+                        { field: 'position', headerName: 'Position' },
+                        { field: 'department', headerName: 'Department' },
+                        {
+                            field: 'salary',
+                            headerName: 'Salary',
+                            valueFormatter: params => `$${params.value.toLocaleString()}`
+                        },
+                        {
+                            field: 'startDate',
+                            headerName: 'Start Date',
+                            editable: true,
+                            valueFormatter: params => new Date(params.value).toLocaleDateString(),
+                            valueParser: params => {
+                                const dateValue = params.newValue;
 
-const masterColumnDefs: ColDef<PurchaseRequest>[] = [
-    {
-        field: 'prNo',
-        headerName: 'PR No.',
-        cellRenderer: 'agGroupCellRenderer',
-        minWidth: 120,
-    },
-    {
-        field: 'creator',
-        headerName: 'Creator',
-        minWidth: 200,
-    },
-    {
-        field: 'assignee',
-        headerName: 'Assignee',
-        minWidth: 200,
-    },
-    { field: 'needByDate', headerName: 'Need-by Date', minWidth: 180 },
-    { field: 'submitDate', headerName: 'Submit Date', minWidth: 120 },
-    { field: 'demand', headerName: 'Demand', minWidth: 120 },
-    {
-        field: 'status',
-        headerName: 'Status',
-        minWidth: 120,
-    }
-];
+                                // If it's already in ISO format, return as is
+                                if (typeof dateValue === 'string' && dateValue.match(/^\d{4}-\d{2}-\d{2}/)) {
+                                    return dateValue;
+                                }
 
-const detailColumnDefs: ColDef<LineItem>[] = [
-    { field: 'lineNo', headerName: 'Line No.', minWidth: 80 },
-    { field: 'itemNo', headerName: 'Item No.', minWidth: 140 },
-    { field: 'itemName', headerName: 'Item Name', minWidth: 200, flex: 1 },
-    { field: 'revision', headerName: 'Revision', minWidth: 90 },
-    { field: 'level', headerName: 'Level', minWidth: 80 },
-    {
-        field: 'tier',
-        headerName: 'Tier',
-        minWidth: 100,
-    },
-    { field: 'qty', headerName: 'Qty', minWidth: 70 },
-    { field: 'uom', headerName: 'UoM', minWidth: 80 },
-    { field: 'needBy', headerName: 'Need by', minWidth: 110 },
-    { field: 'commodity', headerName: 'Commodity', minWidth: 120 },
-    {
-        field: 'owner',
-        headerName: 'Owner',
-        minWidth: 200,
-    }
-];
+                                // If it's a formatted date string (like "6/24/2025"), parse it
+                                try {
+                                    const parsedDate = new Date(dateValue);
+                                    if (!isNaN(parsedDate.getTime())) {
+                                        // Use local timezone offset to avoid date shifting
+                                        const year = parsedDate.getFullYear();
+                                        const month = String(parsedDate.getMonth() + 1).padStart(2, '0');
+                                        const day = String(parsedDate.getDate()).padStart(2, '0');
 
-const NestedTable = () => {
-    return (
-        <AGTable
-            rowData={purchaseRequestData}
-            columnDefs={masterColumnDefs}
-            detailColumnDefs={detailColumnDefs}
-            height="600px"
-            nestedTable={true}
-            allowMultiSelect={true}
-            onRowSelectionChanged={(selectedRows) => {
-                console.log('Selected:', selectedRows);
-            }}
-            childDataKey="lineItems"
-        />
-    );
-};
+                                        // Return in ISO format (YYYY-MM-DD) using local date components
+                                        return `${year}-${month}-${day}`;
+                                    }
+                                } catch (error) {
+                                    console.warn('Failed to parse date:', dateValue);
+                                }
 
-// Storybook story
-export const NestedTables = {
-    render: () => <NestedTable />,
+                                // Fallback to original value
+                                return params.oldValue || dateValue;
+                            },
+                        },
+                    ]}
+                    defaultColDef={defaultColDef}
+                    cellSelection={cellSelection}
+                    onCellValueChanged={(event) => {
+                        console.log('Cell value changed:', {
+                            field: event.colDef.field,
+                            oldValue: event.oldValue,
+                            newValue: event.newValue,
+                            rowIndex: event.rowIndex
+                        });
+                    }}
+                />
+            </div>
+        );
+    },
     parameters: {
         docs: {
             description: {
-                story: 'A master-detail table showing account holders with expandable call records. Features multi-row selection where selecting a master row also selects its detail rows.',
+                story: 'A basic table with range selection ans copy paste feature.',
             },
         },
     },
 };
+
+// type LineItem = {
+//     id: string;
+//     lineNo: number;
+//     itemNo: string;
+//     itemName: string;
+//     revision: number;
+//     level: string;
+//     tier: string;
+//     qty: number;
+//     uom: string;
+//     needBy: string;
+//     commodity: string;
+//     owner: string;
+// };
+
+// type PurchaseRequest = {
+//     id: string;
+//     prNo: string;
+//     creator: string;
+//     assignee: string;
+//     needByDate: string;
+//     submitDate: string;
+//     demand: string;
+//     status: string;
+//     lineItems: LineItem[];
+// };
+
+// const purchaseRequestData = [
+//     {
+//         id: 'a1b2c3d4e',
+//         prNo: 'PRQ-186',
+//         creator: "abdulrahman@foomotion.io",
+//         assignee: "abdulrahman@foomotion.io",
+//         needByDate: '10/22/2024 - 11/4/2024',
+//         submitDate: '11/4/2024',
+//         demand: 'Unplanned',
+//         status: 'Processing',
+//         lineItems: [
+//             {
+//                 id: 'x1y2z3a4b',
+//                 lineNo: 1,
+//                 itemNo: 'HX-100001-001',
+//                 itemName: 'Ankle',
+//                 revision: 1,
+//                 level: '',
+//                 tier: 'Tier 4',
+//                 qty: 1,
+//                 uom: 'Each',
+//                 needBy: '10/22/2024',
+//                 commodity: '',
+//                 owner: "daniel@heliux.com"
+//             },
+//             {
+//                 id: 'c5d6e7f8g',
+//                 lineNo: 2,
+//                 itemNo: 'HX-100000-001',
+//                 itemName: 'Ankle 1',
+//                 revision: 1,
+//                 level: '',
+//                 tier: 'Tier 4',
+//                 qty: 1,
+//                 uom: 'Each',
+//                 needBy: '11/4/2024',
+//                 commodity: '',
+//                 owner: "daniel@heliux.com"
+//             }
+//         ]
+//     },
+//     {
+//         id: 'h9i0j1k2l',
+//         prNo: 'PRQ-187',
+//         creator: "abdulrahman@foomotion.io",
+//         assignee: "abdulrahman@foomotion.io",
+//         needByDate: '10/24/2024',
+//         submitDate: '3/2/2025',
+//         demand: 'Unplanned',
+//         status: 'Rejected',
+//         lineItems: [
+//             {
+//                 id: 'm3n4o5p6q',
+//                 lineNo: 1,
+//                 itemNo: 'AS1420_M4_25N',
+//                 itemName: 'AS 1420 - M4 x 25-N_AS 1420 - M4 x 25-N',
+//                 revision: 3,
+//                 level: '',
+//                 tier: 'Tier 4',
+//                 qty: 1,
+//                 uom: 'Each',
+//                 needBy: '10/24/2024',
+//                 commodity: '',
+//                 owner: "abdulrahman@foomotion.io"
+//             }
+//         ]
+//     },
+//     {
+//         id: 'r7s8t9u0v',
+//         prNo: 'PRQ-188',
+//         creator: "daniel@heliux.com",
+//         assignee: "ali@foomotion.io",
+//         needByDate: '11/15/2024 - 12/1/2024',
+//         submitDate: '11/10/2024',
+//         demand: 'Planned',
+//         status: 'Approved',
+//         lineItems: [
+//             {
+//                 id: 'w1x2y3z4a',
+//                 lineNo: 1,
+//                 itemNo: 'BX-200001-005',
+//                 itemName: 'Bearing Assembly',
+//                 revision: 2,
+//                 level: 'A',
+//                 tier: 'Tier 2',
+//                 qty: 5,
+//                 uom: 'Each',
+//                 needBy: '11/15/2024',
+//                 commodity: 'Mechanical',
+//                 owner: "abdulrahman@foomotion.io"
+//             },
+//             {
+//                 id: 'b5c6d7e8f',
+//                 lineNo: 2,
+//                 itemNo: 'BX-200002-010',
+//                 itemName: 'Gasket Set',
+//                 revision: 1,
+//                 level: 'B',
+//                 tier: 'Tier 3',
+//                 qty: 10,
+//                 uom: 'Set',
+//                 needBy: '11/20/2024',
+//                 commodity: 'Sealing',
+//                 owner: "abdulrahman@foomotion.io"
+//             },
+//             {
+//                 id: 'g9h0i1j2k',
+//                 lineNo: 3,
+//                 itemNo: 'BX-200003-001',
+//                 itemName: 'Control Module',
+//                 revision: 4,
+//                 level: 'A',
+//                 tier: 'Tier 1',
+//                 qty: 2,
+//                 uom: 'Each',
+//                 needBy: '12/1/2024',
+//                 commodity: 'Electronics',
+//                 owner: "abdulrahman@foomotion.io"
+//             }
+//         ]
+//     }
+// ];
+
+// const masterColumnDefs: ColDef<PurchaseRequest>[] = [
+//     {
+//         field: 'prNo',
+//         headerName: 'PR No.',
+//         cellRenderer: 'agGroupCellRenderer',
+//         minWidth: 120,
+//     },
+//     {
+//         field: 'creator',
+//         headerName: 'Creator',
+//         minWidth: 200,
+//     },
+//     {
+//         field: 'assignee',
+//         headerName: 'Assignee',
+//         minWidth: 200,
+//     },
+//     { field: 'needByDate', headerName: 'Need-by Date', minWidth: 180 },
+//     { field: 'submitDate', headerName: 'Submit Date', minWidth: 120 },
+//     { field: 'demand', headerName: 'Demand', minWidth: 120 },
+//     {
+//         field: 'status',
+//         headerName: 'Status',
+//         minWidth: 120,
+//     }
+// ];
+
+// const detailColumnDefs: ColDef<LineItem>[] = [
+//     { field: 'lineNo', headerName: 'Line No.', minWidth: 80 },
+//     { field: 'itemNo', headerName: 'Item No.', minWidth: 140 },
+//     { field: 'itemName', headerName: 'Item Name', minWidth: 200, flex: 1 },
+//     { field: 'revision', headerName: 'Revision', minWidth: 90 },
+//     { field: 'level', headerName: 'Level', minWidth: 80 },
+//     {
+//         field: 'tier',
+//         headerName: 'Tier',
+//         minWidth: 100,
+//     },
+//     { field: 'qty', headerName: 'Qty', minWidth: 70 },
+//     { field: 'uom', headerName: 'UoM', minWidth: 80 },
+//     { field: 'needBy', headerName: 'Need by', minWidth: 110 },
+//     { field: 'commodity', headerName: 'Commodity', minWidth: 120 },
+//     {
+//         field: 'owner',
+//         headerName: 'Owner',
+//         minWidth: 200,
+//     }
+// ];
+
+// const NestedTable = () => {
+//     return (
+//         <AGTable
+//             rowData={purchaseRequestData}
+//             columnDefs={masterColumnDefs}
+//             detailColumnDefs={detailColumnDefs}
+//             height="600px"
+//             nestedTable={true}
+//             allowMultiSelect={true}
+//             onRowSelectionChanged={(selectedRows) => {
+//                 console.log('Selected:', selectedRows);
+//             }}
+//             childDataKey="lineItems"
+//         />
+//     );
+// };
+
+// // Storybook story
+// export const NestedTables = {
+//     render: () => <NestedTable />,
+//     parameters: {
+//         docs: {
+//             description: {
+//                 story: 'A master-detail table showing account holders with expandable call records. Features multi-row selection where selecting a master row also selects its detail rows.',
+//             },
+//         },
+//     },
+// };