impact-ui 4.0.18 → 5.0.0-beta.1

package/dist/mcp-component-registry.json

@@ -1,6 +1,6 @@
 {
   "version": 1,
-  "generatedAt": "2026-10-08T07:26:08.289Z",
+  "generatedAt": "2026-10-08T08:41:21.357Z",
   "components": {
     "Menu": {
       "title": "Components/Menu",
@@ -188,7 +188,7 @@
     "TableChat": {
       "title": "Components/TableChat",
       "category": "Components",
-      "description": "# Table Chat Feature\n\nThe Table Chat feature provides a comprehensive real-time messaging system integrated with the Table component. It includes:\n\n- **Channel Management**: Organize conversations by channels\n- **Real-time Messaging**: Live message updates with WebSocket support\n- **Rich Text Editor**: Full-featured text editor with mentions, formatting, and emoji support\n- **File & Image Sharing**: Upload and share files and images\n- **Message Actions**: Pin, reply, bookmark, edit, and delete messages\n- **Participant Management**: Add/remove participants and manage permissions\n- **Search**: Search messages and participants\n- **Notifications**: Configurable notification settings\n- **Thread Support**: Threaded conversations for better organization\n\n## Architecture\n\nThe chat feature consists of several key components:\n\n### 1. TableChatSidePanel\nThe main container component that manages the chat interface state and handles the communication between left and right panels.\n\n### 2. TableChatRightSection\nHandles the message display, infinite scroll, real-time updates, and message interactions.\n\n### 3. ChatInput\nRich text editor with mention support, formatting tools, file upload, and emoji picker.\n\n### 4. ChatHeader\nHeader with participant management, search functionality, and notification settings.\n\n## Configuration Structure\n\nThe chat feature is configured through a comprehensive \\",
+      "description": "# Table Chat Feature\n\nThe Table Chat feature provides a comprehensive real-time messaging system integrated with TableV36. It includes:\n\n- **Channel Management**: Organize conversations by channels\n- **Real-time Messaging**: Live message updates with WebSocket support\n- **Rich Text Editor**: Full-featured text editor with mentions, formatting, and emoji support\n- **File & Image Sharing**: Upload and share files and images\n- **Message Actions**: Pin, reply, bookmark, edit, and delete messages\n- **Participant Management**: Add/remove participants and manage permissions\n- **Search**: Search messages and participants\n- **Notifications**: Configurable notification settings\n- **Thread Support**: Threaded conversations for better organization\n\n## Architecture\n\nThe chat feature consists of several key components:\n\n### 1. TableChatSidePanel\nThe main container component that manages the chat interface state and handles the communication between left and right panels.\n\n### 2. TableChatRightSection\nHandles the message display, infinite scroll, real-time updates, and message interactions.\n\n### 3. ChatInput\nRich text editor with mention support, formatting tools, file upload, and emoji picker.\n\n### 4. ChatHeader\nHeader with participant management, search functionality, and notification settings.\n\n## Configuration Structure\n\nThe chat feature is configured through a comprehensive \\",
       "examples": [],
       "props": {
         "isChatEnabled": {
@@ -347,7 +347,7 @@
       "storyFile": "src/stories/AccordionModern.stories.tsx"
     },
     "AdvanceSearch": {
-      "title": "Components/Table/Advance Search",
+      "title": "Components/TableV36/Advance Search",
       "category": "Components",
       "description": "Interaction coverage for the advance search modal: attribute selection, operator",
       "examples": [],
@@ -356,7 +356,7 @@
       "storyFile": "src/stories/AdvanceSearch.stories.tsx"
     },
     "AdvanceSearchAtScale": {
-      "title": "Components/Table/Advance Search at Scale",
+      "title": "Components/TableV36/Advance Search at Scale",
       "category": "Components",
       "description": "A wide, heavy grid for exercising advance search against every value shape at",
       "examples": [],
@@ -2541,6 +2541,15 @@
       },
       "storyFile": "src/stories/DateRangePicker.stories.tsx"
     },
+    "DesignTokensConsumerGuide": {
+      "title": "Getting Started/Design tokens & theming/Consumer guide",
+      "category": "Components",
+      "description": "Step-by-step: provider & muiIntegration → CSS vars → semanticColorVar → getSemanticColor → getColorToken → compose. Page background follows Theme toolbar.",
+      "examples": [],
+      "props": {},
+      "storyArgs": {},
+      "storyFile": "src/stories/DesignTokensConsumerGuide.stories.tsx"
+    },
     "EmptyState": {
       "title": "Components/EmptyState",
       "category": "Components",
@@ -3965,6 +3974,71 @@
       },
       "storyFile": "src/stories/Notification.stories.tsx"
     },
+    "OnboardingTour": {
+      "title": "Components/OnboardingTour",
+      "category": "Components",
+      "description": "A unified onboarding component that orchestrates three stages:",
+      "examples": [],
+      "props": {
+        "badgeLabel": {
+          "description": "Optional badge label displayed above the title.",
+          "type": "unknown",
+          "required": true
+        },
+        "title": {
+          "description": "Modal title.",
+          "type": "unknown",
+          "required": true
+        },
+        "description": {
+          "description": "Optional modal description.",
+          "type": "unknown",
+          "required": true
+        },
+        "onClose": {
+          "description": "Callback fired when the close icon is clicked.",
+          "type": "() => void",
+          "required": true
+        },
+        "primaryAction": {
+          "description": "Primary footer action configuration.",
+          "type": "{ label: string; onClick: () => void; variant?: string }",
+          "required": true
+        },
+        "secondaryAction": {
+          "description": "Secondary footer action configuration.",
+          "type": "{ label: string; onClick: () => void; variant?: string }",
+          "required": true
+        },
+        "carouselScreens": {
+          "description": "Optional array of slides to render inside the built-in carousel.",
+          "type": "ReactNode[]",
+          "required": true
+        },
+        "carouselDurations": {
+          "description": "Optional durations (ms) for each carousel slide before auto-advancing.",
+          "type": "number[]",
+          "required": true
+        },
+        "carouselOnActiveIndexChange": {
+          "description": "Callback invoked when the active carousel slide changes.",
+          "type": "(index: number) => void",
+          "required": true
+        },
+        "tooltip": {
+          "description": "Tooltip data + required callbacks. When provided, Try now on the modal advances to the tooltip stage.",
+          "type": "unknown",
+          "required": true
+        },
+        "productTour": {
+          "description": "Product tour data + required callbacks. When provided, Skip on tooltip advances to the minimized product tour.",
+          "type": "unknown",
+          "required": true
+        }
+      },
+      "storyArgs": {},
+      "storyFile": "src/stories/OnboardingTour.stories.tsx"
+    },
     "Panel": {
       "title": "Components/Panel",
       "category": "Components",
@@ -4096,6 +4170,9 @@
         }
       },
       "storyArgs": {
+        "OpenForThemeCheck": {
+          "open": true
+        },
         "Default": {
           "className": "",
           "anchor": "left",
@@ -4189,6 +4266,17 @@
       },
       "storyFile": "src/stories/Popover.stories.tsx"
     },
+    "ProfileMenu": {
+      "title": "Components/ProfileMenu",
+      "category": "Components",
+      "description": "Header-avatar profile popover: banner + avatar + name/email, then a settings-style",
+      "examples": [
+        "Default"
+      ],
+      "props": {},
+      "storyArgs": {},
+      "storyFile": "src/stories/ProfileMenu.stories.tsx"
+    },
     "ProgressBar": {
       "title": "Components/ProgressBar",
       "category": "Components",
@@ -5247,10 +5335,135 @@
       },
       "storyFile": "src/stories/Switch.stories.tsx"
     },
-    "Table": {
-      "title": "Components/Table",
+    "TableV36.Performance": {
+      "title": "Components/TableV36/Performance",
+      "category": "Components",
+      "description": "Performance benchmarks for \\",
+      "examples": [],
+      "props": {
+        "rowCount": {
+          "description": "",
+          "type": "unknown",
+          "required": true
+        },
+        "columnCount": {
+          "description": "",
+          "type": "unknown",
+          "required": true
+        },
+        "rowBuffer": {
+          "description": "",
+          "type": "unknown",
+          "required": true
+        },
+        "animateRows": {
+          "description": "",
+          "type": "unknown",
+          "required": true
+        },
+        "suppressColumnMoveAnimation": {
+          "description": "",
+          "type": "unknown",
+          "required": true
+        },
+        "suppressRowHoverHighlight": {
+          "description": "",
+          "type": "unknown",
+          "required": true
+        },
+        "enableValueCache": {
+          "description": "",
+          "type": "unknown",
+          "required": true
+        },
+        "domLayout": {
+          "description": "",
+          "type": "unknown",
+          "options": [
+            "normal",
+            "autoHeight"
+          ],
+          "required": true
+        }
+      },
+      "storyArgs": {
+        "BasicLargeData": {
+          "rowCount": 10000,
+          "columnCount": 15,
+          "rowBuffer": 8,
+          "animateRows": false,
+          "enableValueCache": false,
+          "domLayout": "normal"
+        },
+        "HeavyCellRenderer": {
+          "rowCount": 10000,
+          "columnCount": 50,
+          "rowBuffer": 8,
+          "animateRows": false,
+          "suppressRowHoverHighlight": true,
+          "enableValueCache": true,
+          "domLayout": "normal"
+        },
+        "ColumnDragging": {
+          "rowCount": 2000,
+          "columnCount": 50,
+          "rowBuffer": 8,
+          "suppressColumnMoveAnimation": true,
+          "animateRows": false,
+          "domLayout": "normal"
+        },
+        "VirtualizationStress": {
+          "rowCount": 50000,
+          "columnCount": 100,
+          "rowBuffer": 8,
+          "animateRows": false,
+          "suppressRowHoverHighlight": true,
+          "suppressColumnMoveAnimation": true,
+          "enableValueCache": true,
+          "domLayout": "normal"
+        },
+        "StatePersistence": {
+          "rowCount": 5000,
+          "columnCount": 25,
+          "rowBuffer": 8,
+          "animateRows": false,
+          "suppressColumnMoveAnimation": true,
+          "domLayout": "normal"
+        },
+        "DomLayoutAutoHeight": {
+          "rowCount": 30,
+          "columnCount": 8,
+          "domLayout": "autoHeight",
+          "rowBuffer": 8
+        },
+        "DomLayoutNormal": {
+          "rowCount": 5000,
+          "columnCount": 12,
+          "domLayout": "normal",
+          "rowBuffer": 8
+        },
+        "NestedGroupedColumnsSearch": {
+          "rowCount": 50000,
+          "rowBuffer": 8,
+          "animateRows": false,
+          "suppressRowHoverHighlight": true,
+          "suppressColumnMoveAnimation": true,
+          "enableValueCache": true,
+          "domLayout": "normal"
+        },
+        "RowBufferBenchmark": {
+          "rowCount": 10000,
+          "columnCount": 15,
+          "rowBuffer": 8,
+          "domLayout": "normal"
+        }
+      },
+      "storyFile": "src/stories/TableV36.Performance.stories.tsx"
+    },
+    "TableV36": {
+      "title": "Components/TableV36",
       "category": "Components",
-      "description": "All the props that you can pass to AG-Grid can be passed to Table component. <strong style=\"font-weight:bold;\">Note:</strong> This Table is based on V32 and still in testing phase.",
+      "description": "## TableV36 (AG Grid v36)\n\nData grid built on **AG Grid v36**.\n\n### Install\n\n\\",
       "examples": [
         "ListViewIntegration"
       ],
@@ -5289,6 +5502,12 @@
           ],
           "required": false
         },
+        "enableRowTextWrap": {
+          "description": "When true, default/comfort body cells wrap and clamp to the row height. Compact stays single-line ellipsis.",
+          "type": "boolean",
+          "defaultValue": "false",
+          "required": false
+        },
         "topLeftOptions": {
           "description": "React Children you want to render along with header at the Top Left Table Header Section.",
           "type": "React Children",
@@ -5542,6 +5761,12 @@
           ],
           "required": false
         },
+        "extraNumericFormatOptions": {
+          "description": "Additional Numeric Values options appended after Full / K / M / B in Table Settings → Format.",
+          "type": "Array<{ label: string; value: string }>",
+          "defaultValue": "undefined",
+          "required": false
+        },
         "isSaveViewEnabled": {
           "description": "If true, enables Save View feature in table settings.",
           "type": "boolean",
@@ -5703,11 +5928,16 @@
       },
       "storyArgs": {
         "Default": {
-          "tableHeader": "Default Table",
+          "tableHeader": "Table",
           "cardContainer": true,
           "emptyStateText": "No data to display",
-          "rowData": "carsData.map((car",
-          "electric1": "["
+          "rowData": "carsData",
+          "showBulkActionBar": false,
+          "advanceSortEnabled": true,
+          "bulkActionBarProps": "{",
+          "actionBarLabel": "",
+          "enableSelectAll": true,
+          "totalRowCount": 0
         },
         "SaveView": {
           "tableHeader": "Table with Save View",
@@ -5746,6 +5976,7 @@
           "cardContainer": true,
           "rowSelection": "multiple",
           "viewPoint": "list",
+          "suppressRowClickSelection": true,
           "suppressColumnMenu": true,
           "defaultColDef": "{",
           "maxWidth": 120
@@ -5754,6 +5985,7 @@
           "cardContainer": true,
           "rowSelection": "multiple",
           "viewPoint": "list",
+          "suppressRowClickSelection": true,
           "suppressColumnMenu": true,
           "columnDefs": "[",
           "colId": "checkbox",
@@ -5793,7 +6025,8 @@
           "hideRowHeightOptionMenu": false,
           "defaultColDef": "{",
           "sortable": true,
-          "filter": true
+          "filter": true,
+          "flex": 1
         },
         "IaRecommendationAdvanceSearchReopen": {
           "tableHeader": "IA Recommendation Advance Search Reopen",
@@ -5804,7 +6037,8 @@
           "defaultColDef": "{",
           "sortable": true,
           "filter": true,
-          "resizable": true
+          "resizable": true,
+          "flex": 1
         },
         "EmptyStateText": {
           "rowData": "[]",
@@ -5825,14 +6059,12 @@
           "paginationPageSizeSelector": "[10",
           "cacheBlockSize": 20,
           "advanceSortEnabled": true,
+          "domLayout": "autoHeight",
           "defaultColDef": "{",
           "sortable": true,
           "resizable": true,
           "filter": true
         },
-        "ColumnSettings500Columns": {
-          "columnSettingsMode": "STORY_COLUMN_SETTINGS_MODE"
-        },
         "Frozen": {
           "rowData": "carsData",
           "columnDefs": "[",
@@ -5843,7 +6075,7 @@
           "rowData": "carsData",
           "rowSelection": "multiple",
           "columnDefs": "[",
-          "field": "Selection",
+          "field": "",
           "checkboxSelection": true,
           "headerCheckboxSelection": true,
           "headerComponent": "SelectAllComponent",
@@ -5859,6 +6091,13 @@
           "autoGroupColumnDef": "{",
           "headerName": "Grouped Rows"
         },
+        "RowGroupWithCheckboxes": {
+          "rowData": "olympicData",
+          "enableHierarchyLevelColors": true,
+          "autoGroupColumnDef": "{",
+          "headerName": "Country > Year > Athlete > Sport > Gold > Silver",
+          "minWidth": 250
+        },
         "CellRenderer": {
           "rowData": "olympicData",
           "columnDefs": "[",
@@ -5893,6 +6132,19 @@
           "columnDefs": "[",
           "field": "make"
         },
+        "CellAndRowStates": {
+          "tableHeader": "Cell & Row States",
+          "cardContainer": true,
+          "rowHeight": "default",
+          "rowSelection": "multiple",
+          "rowData": "[",
+          "id": "1",
+          "make": "Tesla",
+          "model": "Model Y",
+          "status": "ok",
+          "price": 64950,
+          "note": "Default cell"
+        },
         "HeaderComponent": {
           "rowData": "carsData",
           "columnDefs": "[",
@@ -5929,331 +6181,33 @@
           "delivery_date": "2025-11-05",
           "status": "active",
           "category": "Electronics"
-        }
-      },
-      "storyFile": "src/stories/Table.stories.tsx"
-    },
-    "TableOld": {
-      "title": "Components/Old Table",
-      "category": "Components",
-      "description": "All the props that you can pass to AG-Grid can be passed to Table component. <strong style=\"font-weight:bold;\">Note:</strong> This Table is based on V27 and still in testing phase.",
-      "examples": [
-        "ListViewIntegration"
-      ],
-      "props": {
-        "tableHeader": {
-          "description": "Title of the Table.",
-          "type": "string",
-          "required": true
-        },
-        "cardContainer": {
-          "description": "If true, display Table component in the card UI.",
-          "type": "boolean",
-          "defaultValue": "true",
-          "required": false
-        },
-        "rowData": {
-          "description": "Array object holding different rows data of the Table.",
-          "type": "Array Object",
-          "defaultValue": [],
-          "required": false
-        },
-        "columnDefs": {
-          "description": "Array object holding different columns header data of the Table. \n        <code>\n          <ul class=\"storybook-order-list\">\n            <li><strong>field</strong>: field of the column [string]</li>\n            <li><strong>isSearchable?</strong>: If true, display search <br/>icon on the Column Header. [boolean]</li>\n          </ul>\n        </code>",
-          "type": "Array Object",
-          "defaultValue": [],
-          "required": false
-        },
-        "rowHeight": {
-          "description": "You can choose different height of the Row of the Table.",
-          "type": "string",
-          "defaultValue": "default",
-          "options": [
-            "compact",
-            "comfort",
-            "default"
-          ],
-          "required": false
-        },
-        "topLeftOptions": {
-          "description": "React Children you want to render along with header at the Top Left Table Header Section.",
-          "type": "React Children",
-          "required": true
-        },
-        "topRightOptions": {
-          "description": "React Children you want to render at the Top Right Table Header Section.",
-          "type": "React Children",
-          "required": true
-        },
-        "tableActionOptions": {
-          "description": "",
-          "type": "React Children",
-          "required": true
-        },
-        "bottomLeftOptions": {
-          "description": "React Children you want to render at the Bottom Left Table Header Section.",
-          "type": "React Children",
-          "required": true
-        },
-        "bottomCenterOptions": {
-          "description": "React Children you want to render at the Bottom Right Table Header Section.",
-          "type": "React Children",
-          "required": true
-        },
-        "onNumberFormatChange": {
-          "description": "You can handle the event when number format changes in Table Setting Section.",
-          "type": "Function",
-          "required": true
-        },
-        "onColumnSearchClick": {
-          "description": "You can handle the search event when user click on the search icon in the Table Header.",
-          "type": "Function",
-          "required": true
-        },
-        "hideRowHeightOptionMenu": {
-          "description": "If true, disabled the rowHeight option menu.",
-          "type": "boolean",
-          "defaultValue": "false",
-          "required": false
-        },
-        "hidePaginationPageSizeSelector": {
-          "description": "If true, disabled the pagination page size selector.",
-          "type": "boolean",
-          "defaultValue": "false",
-          "options": [
-            true,
-            false
-          ],
-          "required": false
-        },
-        "onTableActionsTabClick": {
-          "description": "Callback function that is called when the table actions tab is clicked in the table settings panel.",
-          "type": "() => void",
-          "required": true
-        },
-        "customGetMainMenuItems": {
-          "description": "Custom function to override the default column menu items. This function receives the column parameters and should return an array of menu items.\n      <br/>\n      <br/>\n      Example:\n      <br/>\n      <code>\n      const customGetMainMenuItems = (params) => {\n        const { column } = params;\n        return [\n          {\n            name: \"Custom Menu Item\",\n            action: () => {\n              console.log(\"Custom action for column:\", column.colId);\n            }\n          }\n        ];\n      };\n      </code>",
-          "type": "(params: { column: Column }) => Array<MenuItem>",
-          "defaultValue": "null",
-          "required": false
-        },
-        "onAdvanceSearchClick": {
-          "description": "Callback function that is called when the advance search button is clicked in the table header.",
-          "type": "() => void",
-          "required": true
-        },
-        "customHeaderIcons": {
-          "description": "Array of custom icons to be displayed in the table header. Each icon should be a React element.\n      <br/>\n      <br/>\n      Example:\n      <br/>\n      <code>\n      const customHeaderIcons = [\n        {\n          icon: <SearchIcon />,\n          onClick: () => console.log(\"Search clicked\"),\n          tooltip: \"Search\"\n        }\n      ];\n      </code>",
-          "type": "Array<{ icon: ReactNode, onClick: () => void, tooltip?: string }>",
-          "defaultValue": [],
-          "required": false
-        },
-        "handleInlineSearch": {
-          "description": "Callback function that is called when inline search is performed in the table.",
-          "type": "(searchText: string) => void",
-          "required": true
-        },
-        "tableActions": {
-          "description": "Custom actions to be displayed in the table settings panel. This can be any valid React element or component.\n      <br/>\n      <br/>\n      Example:\n      <br/>\n      <code>\n      <Button\n        iconPlacement=\"left\"\n        onClick={() => {}}\n        size=\"large\"\n        variant=\"primary\"\n      >\n        Table Actions\n      </Button>\n      </code>",
-          "type": "React.ReactNode",
-          "defaultValue": "null",
-          "required": false
-        },
-        "hideTableFormat": {
-          "description": "If true, hide the table format section in the table settings panel.",
-          "type": "boolean",
-          "defaultValue": "false",
-          "required": false
-        },
-        "hideTableActions": {
-          "description": "If true, hide the table actions section in the table settings panel.",
-          "type": "boolean",
-          "defaultValue": "false",
-          "required": false
-        },
-        "handleClearSearchInline": {
-          "description": "Callback function that is called when the clear search button is clicked in the inline search input.",
-          "type": "() => void",
-          "required": true
-        },
-        "handleCloseInputField": {
-          "description": "Callback function that is called when the input field is closed in the table settings panel.",
-          "type": "() => void",
-          "defaultValue": "null",
-          "required": false
-        },
-        "aboveTableComponent": {
-          "description": "React Children to be rendered above the table.",
-          "type": "React.ReactNode",
-          "defaultValue": "null",
-          "required": false
-        },
-        "explicitlyCloseTableSetting": {
-          "description": "If true, explicitly close the table settings panel.",
-          "type": "boolean",
-          "defaultValue": "false",
-          "required": false
-        },
-        "hideTableSetting": {
-          "description": "If true, hide the table settings panel.",
-          "type": "boolean",
-          "defaultValue": "false",
-          "required": false
-        },
-        "customHeaderComponent": {
-          "description": "React Children to be rendered in the table header.",
-          "type": "React.ReactNode",
-          "defaultValue": "null",
-          "required": false
-        },
-        "onContentDensityChange": {
-          "description": "Callback function that is called when the content density is changed.",
-          "type": "() => void",
-          "required": true
         },
-        "isViewNameUniqueAcrossTypes": {
-          "description": "Controls how Save View checks for duplicate names. If true, a view name must be unique across all view types (e.g. a",
-          "type": "boolean",
-          "defaultValue": "false",
-          "required": false
-        }
-      },
-      "storyArgs": {
-        "Default": {
-          "rowHeight": "default",
-          "cardContainer": false,
-          "rowData": "carsData",
-          "emptyStateText": "No data to display",
-          "showBulkActionBar": false,
-          "bulkActionBarProps": "{",
-          "actionBarLabel": "",
-          "enableSelectAll": true,
-          "totalRowCount": 0
-        },
-        "EmptyStateText": {
-          "rowData": "[]",
-          "tableHeader": "Table",
-          "cardContainer": true,
-          "emptyStateText": "No data to display",
-          "showBulkActionBar": false,
-          "advanceSortEnabled": true
+        "ClientSideInitialLoading": {
+          "tableHeader": "Client-side initial loading",
+          "loading": true,
+          "columnDefs": "skeletonColumnDefs"
         },
-        "ListView": {
-          "cardContainer": true,
-          "rowSelection": "multiple",
-          "viewPoint": "list",
-          "suppressRowClickSelection": true,
-          "suppressColumnMenu": true,
-          "defaultColDef": "{",
-          "maxWidth": 120
-        },
-        "ListViewIntegration": {
-          "cardContainer": true,
-          "rowSelection": "multiple",
-          "viewPoint": "list",
-          "suppressRowClickSelection": true,
-          "suppressColumnMenu": true,
-          "columnDefs": "[",
-          "colId": "checkbox",
-          "field": "",
-          "checkboxSelection": true,
-          "headerCheckboxSelection": true,
-          "suppressMenu": true,
-          "filter": false,
-          "sortable": false,
-          "order": 1
-        },
-        "ApiDrivenSaveViewFeature": {
-          "tableHeader": "API Driven Save View Feature",
-          "isSaveViewEnabled": true,
-          "maxSavedViews": "null",
-          "savedViewsOptions": "initialApiDrivenSavedViews",
-          "isSaveViewLoading": false,
-          "isDeleteViewLoading": false,
-          "isViewNameUniqueAcrossTypes": false
-        },
-        "ColumnSettings500Columns": {
-          "columnSettingsMode": "STORY_COLUMN_SETTINGS_MODE"
-        },
-        "Frozen": {
-          "rowData": "carsData",
-          "columnDefs": "[",
-          "field": "make"
-        },
-        "RowSelect": {
-          "rowData": "carsData",
-          "columnDefs": "[",
-          "field": "",
-          "checkboxSelection": true,
-          "headerCheckboxSelection": true,
-          "suppressMenu": true,
-          "filter": false,
-          "sortable": false,
-          "pinned": "left"
-        },
-        "RowGroup": {
-          "rowData": "olympicData",
-          "columnDefs": "[",
-          "field": "athlete"
-        },
-        "CellRenderer": {
-          "rowData": "olympicData",
-          "columnDefs": "[",
-          "field": "athlete",
-          "minWidth": 200,
-          "pinned": "left"
-        },
-        "Master": {
-          "rowData": "masterData",
-          "columnDefs": "[",
-          "field": "name",
-          "cellRenderer": "agGroupCellRenderer"
-        },
-        "Aggregation": {
-          "rowData": "[",
-          "make": "Toyota",
-          "model": "Celica",
-          "price": 35000
-        },
-        "Paginated": {
-          "rowData": "olympicData",
-          "columnDefs": "[",
-          "field": "athlete"
-        },
-        "ColumnGroup": {
-          "rowData": "carsData",
-          "columnDefs": "[",
-          "headerName": "Some header",
-          "children": "[",
-          "field": "make",
-          "columnGroupShow": "open"
-        },
-        "EditableColumn": {
-          "rowData": "carsData",
-          "columnDefs": "[",
-          "field": "make"
-        },
-        "HeaderComponent": {
-          "rowData": "carsData",
-          "columnDefs": "[",
-          "field": "make"
-        },
-        "ServerSide": {
-          "rowModelType": "serverSide",
-          "columnDefs": "[",
-          "field": "id",
-          "headerName": "ID",
-          "filter": "agNumberColumnFilter",
-          "cellClass": "cell-renderer",
-          "isSearchable": true
-        },
-        "nestedTable": {
-          "rowData": "carsData",
-          "columnDefs": "[",
-          "field": "make"
+        "ClientSideLoaded": {
+          "tableHeader": "Client-side loaded",
+          "loading": false,
+          "columnDefs": "skeletonColumnDefs",
+          "rowData": "skeletonRowData"
+        },
+        "ClientSideLoadingManyColumns": {
+          "tableHeader": "Client-side loading with many columns",
+          "loading": true,
+          "columnDefs": "manySkeletonColumnDefs",
+          "height": 420,
+          "domLayout": "normal"
+        },
+        "ClientSideLoadingCheckboxColumn": {
+          "tableHeader": "Client-side loading with checkbox column",
+          "loading": true,
+          "columnDefs": "checkboxSkeletonColumnDefs",
+          "rowSelection": "multiple"
         }
       },
-      "storyFile": "src/stories/TableOld.stories.tsx"
+      "storyFile": "src/stories/TableV36.stories.tsx"
     },
     "Tabs": {
       "title": "Components/Tabs",