@spaced-out/ui-design-system 0.4.11 → 0.4.13

package/lib/components/Table/Table.docs.js

@@ -221,6 +221,77 @@ const TABLE_DOCS = exports.TABLE_DOCS = {
           summary: true
         }
       }
+    },
+    rowsCount: {
+      name: 'virtualizationOptions.rowsCount',
+      description: 'Total number of virtual rows.',
+      control: {
+        type: 'number'
+      },
+      table: {
+        type: {
+          summary: 'number'
+        },
+        defaultValue: {
+          summary: 20
+        }
+      }
+    },
+    rowHeight: {
+      name: 'virtualizationOptions.rowHeight',
+      description: 'Row height in CSS units (e.g., "48px"). Should be provided correctly, otherwise it will not work as expected.',
+      control: {
+        type: 'text'
+      },
+      table: {
+        type: {
+          summary: 'string'
+        },
+        defaultValue: {
+          summary: '48px'
+        }
+      }
+    },
+    isEndLoading: {
+      name: 'virtualizationOptions.isEndLoading',
+      description: 'Whether to show loading spinner at the bottom.',
+      control: {
+        type: 'boolean'
+      },
+      table: {
+        type: {
+          summary: 'boolean'
+        },
+        defaultValue: {
+          summary: false
+        }
+      }
+    },
+    isAllDataFetched: {
+      name: 'virtualizationOptions.isAllDataFetched',
+      description: 'Whether all rows are fetched (disables infinite loading).',
+      control: {
+        type: 'boolean'
+      },
+      table: {
+        type: {
+          summary: 'boolean'
+        },
+        defaultValue: {
+          summary: false
+        }
+      }
+    },
+    // Note: onEndReached can't be controlled, but you can mock it
+    onEndReached: {
+      name: 'virtualizationOptions.onEndReached',
+      description: 'Callback triggered when end of list is reached.',
+      action: 'onEndReached',
+      table: {
+        type: {
+          summary: '() => void'
+        }
+      }
     }
   },
   parameters: {
@@ -285,6 +356,15 @@ just CSS Wrappers for Button and SimpleButtonDropdown components
 * Use ButtonCta component to add a button CTA in the \`TableActionBar\`
 * Use DropdownCta component to add a dropdown CTA button in the \`TableActionBar\` for screen width less than size1280(1280px)
 
+### Handling Sticky Headers with Virtualization
+* When using **virtualization**, always assign a fixed \`min-width\` and \`max-width\` to sticky table headers with **same value**. 
+This ensures a strict, fixed width for header cells. Directly using \`width\` (non strict for table headers) alone is not sufficient, as 
+it can be overridden by content width due to table layout behavior, causing headers to shift.
+* If the cell content may exceed the defined width, or if you're unsure of its maximum width, also use \`white-space: normal;\` and \`word-break: break-word;\` 
+to ensure the content wraps within the cell instead of overflowing or causing layout shifts.
+
+This helps maintain consistent column alignment and improves readability across varying data lengths.
+
 \`\`\`jsx
 <Table
   headers={TABLE_HEADERS}

package/lib/components/Table/Table.docs.js.flow

@@ -181,6 +181,52 @@ export const TABLE_DOCS = {
         defaultValue: {summary: true},
       },
     },
+    rowsCount: {
+      name: 'virtualizationOptions.rowsCount',
+      description: 'Total number of virtual rows.',
+      control: {type: 'number'},
+      table: {
+        type: {summary: 'number'},
+        defaultValue: {summary: 20},
+      },
+    },
+    rowHeight: {
+      name: 'virtualizationOptions.rowHeight',
+      description:
+        'Row height in CSS units (e.g., "48px"). Should be provided correctly, otherwise it will not work as expected.',
+      control: {type: 'text'},
+      table: {
+        type: {summary: 'string'},
+        defaultValue: {summary: '48px'},
+      },
+    },
+    isEndLoading: {
+      name: 'virtualizationOptions.isEndLoading',
+      description: 'Whether to show loading spinner at the bottom.',
+      control: {type: 'boolean'},
+      table: {
+        type: {summary: 'boolean'},
+        defaultValue: {summary: false},
+      },
+    },
+    isAllDataFetched: {
+      name: 'virtualizationOptions.isAllDataFetched',
+      description: 'Whether all rows are fetched (disables infinite loading).',
+      control: {type: 'boolean'},
+      table: {
+        type: {summary: 'boolean'},
+        defaultValue: {summary: false},
+      },
+    },
+    // Note: onEndReached can't be controlled, but you can mock it
+    onEndReached: {
+      name: 'virtualizationOptions.onEndReached',
+      description: 'Callback triggered when end of list is reached.',
+      action: 'onEndReached',
+      table: {
+        type: {summary: '() => void'},
+      },
+    },
   },
   parameters: {
     docs: {
@@ -244,6 +290,15 @@ just CSS Wrappers for Button and SimpleButtonDropdown components
 * Use ButtonCta component to add a button CTA in the \`TableActionBar\`
 * Use DropdownCta component to add a dropdown CTA button in the \`TableActionBar\` for screen width less than size1280(1280px)
 
+### Handling Sticky Headers with Virtualization
+* When using **virtualization**, always assign a fixed \`min-width\` and \`max-width\` to sticky table headers with **same value**. 
+This ensures a strict, fixed width for header cells. Directly using \`width\` (non strict for table headers) alone is not sufficient, as 
+it can be overridden by content width due to table layout behavior, causing headers to shift.
+* If the cell content may exceed the defined width, or if you're unsure of its maximum width, also use \`white-space: normal;\` and \`word-break: break-word;\` 
+to ensure the content wraps within the cell instead of overflowing or causing layout shifts.
+
+This helps maintain consistent column alignment and improves readability across varying data lengths.
+
 \`\`\`jsx
 <Table
   headers={TABLE_HEADERS}

package/lib/components/Table/Table.js

@@ -50,7 +50,8 @@ function Table(props) {
     isLoading,
     idName = 'id',
     // eslint-disable-next-line unused-imports/no-unused-vars
-    emptyText
+    emptyText,
+    virtualizationOptions
   } = props;
 
   /**
@@ -67,9 +68,14 @@ function Table(props) {
     onSort,
     enableInternalSorting
   });
-  return /*#__PURE__*/React.createElement(_StaticTable.StaticTable, _extends({}, props, sortableProps, {
+  const virtualized = !!(virtualizationOptions && virtualizationOptions.rowsCount > 0);
+  return virtualized ? /*#__PURE__*/React.createElement(_StaticTable.StaticTableVirtualized, _extends({}, props, sortableProps, {
     sortable: sortable,
-    entries: entries,
+    entries: sortedEntries,
+    rowKeys: sortedKeys
+  })) : /*#__PURE__*/React.createElement(_StaticTable.StaticTable, _extends({}, props, sortableProps, {
+    sortable: sortable,
+    entries: sortedEntries,
     rowKeys: sortedKeys
   }));
 }

package/lib/components/Table/Table.js.flow

@@ -6,7 +6,7 @@ import type {TableRow} from './DefaultRow';
 import type {GenericHeaderItems} from './DefaultTableHeader';
 import type {SortDirection} from './hooks';
 import {useSortableEntries} from './hooks';
-import {StaticTable} from './StaticTable';
+import {StaticTable, StaticTableVirtualized} from './StaticTable';
 
 // type ClassNames = $ReadOnly<{wrapper?: string}>;
 
@@ -19,7 +19,7 @@ export type GenericObject = {
   +[key: string]: mixed,
 };
 
-type ClassNames = $ReadOnly<{
+export type ClassNames = $ReadOnly<{
   wrapper?: string,
   table?: string,
   tableHeader?: string,
@@ -28,6 +28,14 @@ type ClassNames = $ReadOnly<{
   checkbox?: string,
 }>;
 
+type VirtualizationOptions = {
+  rowsCount: number,
+  rowHeight?: string,
+  onEndReached?: () => void,
+  isEndLoading?: boolean,
+  isAllDataFetched?: boolean,
+};
+
 export type TableProps<T, U> = {
   classNames?: ClassNames,
   className?: string,
@@ -58,6 +66,7 @@ export type TableProps<T, U> = {
 
   // For this to work the table wrapper should be scrollable
   stickyHeader?: boolean,
+  virtualizationOptions?: VirtualizationOptions,
 };
 
 /**
@@ -103,6 +112,7 @@ export function Table<Data: GenericObject, Extras: GenericObject>(
     idName = 'id',
     // eslint-disable-next-line unused-imports/no-unused-vars
     emptyText,
+    virtualizationOptions,
   } = props;
 
   /**
@@ -120,12 +130,24 @@ export function Table<Data: GenericObject, Extras: GenericObject>(
     },
   );
 
-  return (
+  const virtualized = !!(
+    virtualizationOptions && virtualizationOptions.rowsCount > 0
+  );
+
+  return virtualized ? (
+    <StaticTableVirtualized
+      {...props}
+      {...sortableProps}
+      sortable={sortable}
+      entries={sortedEntries}
+      rowKeys={sortedKeys}
+    />
+  ) : (
     <StaticTable
       {...props}
       {...sortableProps}
       sortable={sortable}
-      entries={entries}
+      entries={sortedEntries}
       rowKeys={sortedKeys}
     />
   );

package/lib/components/Table/Table.module.css

@@ -10,11 +10,35 @@
   colorBackgroundTertiary,
   colorGrayLightest
 ) from '../../styles/variables/_color.css';
-@value (spaceNone, spaceXXSmall, spaceXSmall, spaceSmall, spaceMedium) from '../../styles/variables/_space.css';
-@value (sizeFluid, size2, size48, size60, size240, size300) from '../../styles/variables/_size.css';
-@value (borderWidthNone, borderWidthPrimary, borderRadiusNone, borderRadiusMedium, borderWidthSecondary) from '../../styles/variables/_border.css';
-@value (fontLineHeight170) from '../../styles/variables/_font.css';
-@value (elevationCard) from '../../styles/variables/_elevation.css';
+@value (
+  spaceNone, 
+  spaceXXSmall, 
+  spaceXSmall,
+   spaceSmall, 
+   spaceMedium
+) from '../../styles/variables/_space.css';
+@value (
+  sizeFluid, 
+  size2, 
+  size8, 
+  size48, 
+  size60, 
+  size240, 
+  size300
+) from '../../styles/variables/_size.css';
+@value (
+  borderWidthNone, 
+  borderWidthPrimary, 
+  borderRadiusNone, 
+  borderRadiusMedium, 
+  borderWidthSecondary
+) from '../../styles/variables/_border.css';
+@value (
+  fontLineHeight170
+) from '../../styles/variables/_font.css';
+@value (
+  elevationCard
+) from '../../styles/variables/_elevation.css';
 
 @value tableRowTotalPadding: calc(spaceMedium * 2);
 
@@ -287,3 +311,10 @@
   height: calc(size2 / 2);
   background: colorBorderPrimary;
 }
+
+.fetchMoreLoaderContainer {
+  display: flex;
+  text-align: center;
+  justify-content: center;
+  padding: size8;
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@spaced-out/ui-design-system",
-  "version": "0.4.11",
+  "version": "0.4.13",
   "main": "index.js",
   "description": "Sense UI components library",
   "author": {
@@ -45,6 +45,7 @@
   },
   "dependencies": {
     "@floating-ui/react": "^0.24.0",
+    "@tanstack/react-virtual": "^3.13.12",
     "date-fns": "^2.29.3",
     "highcharts": "^11.4.1",
     "highcharts-react-official": "^3.2.1",