@databiosphere/findable-ui 17.0.0 → 19.0.0

package/.release-please-manifest.json

@@ -1,3 +1,3 @@
 {
-  ".": "17.0.0"
+  ".": "19.0.0"
 }

package/CHANGELOG.md

@@ -1,5 +1,27 @@
 # Changelog
 
+## [19.0.0](https://github.com/DataBiosphere/findable-ui/compare/v18.0.0...v19.0.0) (2025-01-03)
+
+
+### ⚠ BREAKING CHANGES
+
+* implement group by list ([#302](https://github.com/DataBiosphere/findable-ui/issues/302)) (#303)
+
+### Features
+
+* implement group by list ([#302](https://github.com/DataBiosphere/findable-ui/issues/302)) ([#303](https://github.com/DataBiosphere/findable-ui/issues/303)) ([36e4330](https://github.com/DataBiosphere/findable-ui/commit/36e433053b1c2f17ddc75964c8e8eec35440b7bd))
+
+## [18.0.0](https://github.com/DataBiosphere/findable-ui/compare/v17.0.0...v18.0.0) (2024-12-18)
+
+
+### ⚠ BREAKING CHANGES
+
+* ensure select category value label is string and type key as unknown ([#298](https://github.com/DataBiosphere/findable-ui/issues/298)) (#299)
+
+### Bug Fixes
+
+* ensure select category value label is string and type key as unknown ([#298](https://github.com/DataBiosphere/findable-ui/issues/298)) ([#299](https://github.com/DataBiosphere/findable-ui/issues/299)) ([c7b5baa](https://github.com/DataBiosphere/findable-ui/commit/c7b5baae525f6e54493a2748070fa46cc36d9f67))
+
 ## [17.0.0](https://github.com/DataBiosphere/findable-ui/compare/v16.1.0...v17.0.0) (2024-12-12)
 
 

package/lib/apis/azul/common/filterTransformer.js

@@ -88,7 +88,7 @@ export function transformTermFacets(termFacets, filterState) {
             categoryValues.push({
                 count: 0,
                 key: term,
-                label: term ?? LABEL.UNSPECIFIED,
+                label: String(term ?? LABEL.UNSPECIFIED),
                 selected: false, // Selected state updated in filter hook
             });
         }

package/lib/apis/azul/common/utils.d.ts

@@ -4,4 +4,4 @@ import { ParamValue } from "./filterTransformer";
  * @param value - Filter value.
  * @returns filter parameter value.
  */
-export declare function getFilterParameterValue(value: string): ParamValue;
+export declare function getFilterParameterValue(value: unknown): ParamValue;

package/lib/apis/azul/common/utils.js

@@ -13,5 +13,9 @@ export function getFilterParameterValue(value) {
     if (value === "false") {
         return false;
     }
-    return value;
+    if (typeof value === "string" || typeof value === "boolean")
+        return value;
+    if (value === null || value === undefined)
+        return null;
+    return String(value);
 }

package/lib/common/entities.d.ts

@@ -13,7 +13,7 @@ export interface CategoryTag {
 /**
  * Category values to be used as keys. For example, "Homo sapiens" or "10X 3' v2 sequencing".
  */
-export type CategoryValueKey = string;
+export type CategoryValueKey = unknown;
 /**
  * Set of selected category values.
  */
@@ -46,7 +46,7 @@ export interface SelectCategory {
  */
 export interface SelectCategoryValue {
     count: number;
-    key: CategoryKey;
+    key: CategoryValueKey;
     label: string;
     selected: boolean;
 }
@@ -64,7 +64,7 @@ export interface SelectCategoryValueView {
  */
 export interface SelectCategoryView {
     isDisabled?: boolean;
-    key: CategoryValueKey;
+    key: CategoryKey;
     label: string;
     values: SelectCategoryValueView[];
 }

package/lib/components/Detail/components/Table/components/TableRows/components/CollapsableRows/collapsableRows.js

@@ -2,9 +2,11 @@ import React, { Fragment } from "react";
 import { isCollapsableRowDisabled } from "../../../../../../../Table/common/utils";
 import { CollapsableCell } from "../../../../../../../Table/components/TableCell/components/CollapsableCell/collapsableCell";
 import { TableRow } from "../../../../../../../Table/components/TableRow/tableRow.styles";
+import { useCollapsableRows } from "../../../../../../../Table/components/TableRows/components/CollapsableRows/hook";
 export const CollapsableRows = ({ tableInstance, }) => {
     const { getRowModel } = tableInstance;
     const { rows } = getRowModel();
+    useCollapsableRows(tableInstance);
     return (React.createElement(Fragment, null, rows.map((row) => {
         if (row.depth > 0)
             return null; // Hide sub rows.

package/lib/components/Detail/components/Table/components/TableRows/tableRows.js

@@ -9,7 +9,7 @@ export const TableRows = ({ tableInstance, tableView, }) => {
     const { tableCell } = tableView || {};
     const { size: tableCellSize = "medium" } = tableCell || {};
     return (React.createElement(Fragment, null, rows.map((row) => {
-        return (React.createElement(TableRow, { id: getRowId(row), isPreview: row.getIsPreview(), key: row.id }, row.getVisibleCells().map((cell) => {
+        return (React.createElement(TableRow, { key: row.id, isGrouped: row.getIsGrouped(), isPreview: row.getIsPreview() }, row.getVisibleCells().map((cell) => {
             if (cell.getIsAggregated())
                 return null; // Display of aggregated cells is currently not supported.
             if (cell.getIsPlaceholder())
@@ -18,17 +18,3 @@ export const TableRows = ({ tableInstance, tableView, }) => {
         })));
     })));
 };
-/**
- * Returns identifier for a row.
- * @param row - Row.
- * @returns row identifier.
- */
-function getRowId(row) {
-    const { depth, getIsGrouped, id } = row;
-    if (getIsGrouped()) {
-        return `grouped-row-${id}`;
-    }
-    if (depth > 0) {
-        return `sub-row-${id}`;
-    }
-}

package/lib/components/Export/components/ExportForm/components/ExportFileSummaryForm/exportFileSummaryForm.js

@@ -1,5 +1,5 @@
 import { Checkbox, FormControlLabel, FormHelperText, FormLabel, TableBody, TableCell, TableHead, TableRow, } from "@mui/material";
-import React, { Fragment } from "react";
+import React from "react";
 import { formatCountSize } from "../../../../../../utils/formatCountSize";
 import { formatFileSize } from "../../../../../../utils/formatFileSize";
 import { CheckedIcon } from "../../../../../common/CustomIcon/components/CheckedIcon/checkedIcon";
@@ -33,15 +33,14 @@ export const ExportFileSummaryForm = ({ error, fileSummaryFacet, onClearError, o
                                     } }) })),
                         React.createElement(TableCell, null, "File Count"),
                         hasFileSize && React.createElement(TableCell, null, "File Size"))),
-                React.createElement(TableBody, null,
-                    React.createElement(TableRow, null, fileSummaryFacet.terms.map(({ count, name, selected, size = 0 }) => (React.createElement(Fragment, { key: name },
-                        React.createElement(TableCell, null,
-                            React.createElement(FormControlLabel, { control: React.createElement(Checkbox, { checked: selected, checkedIcon: React.createElement(CheckedIcon, null), icon: error ? React.createElement(UncheckedErrorIcon, null) : React.createElement(UncheckedIcon, null), onChange: () => {
-                                        onClearError(error, ERROR.FILE_SUMMARY_ERROR);
-                                        onFilter(fileSummaryFacet.name, name, selected);
-                                    } }), key: name, label: name })),
-                        React.createElement(TableCell, null, formatCountSize(count)),
-                        hasFileSize && (React.createElement(TableCell, null, formatFileSize(size))))))))))));
+                React.createElement(TableBody, null, fileSummaryFacet.terms.map(({ count, name, selected, size = 0 }) => (React.createElement(TableRow, { key: name },
+                    React.createElement(TableCell, null,
+                        React.createElement(FormControlLabel, { control: React.createElement(Checkbox, { checked: selected, checkedIcon: React.createElement(CheckedIcon, null), icon: error ? React.createElement(UncheckedErrorIcon, null) : React.createElement(UncheckedIcon, null), onChange: () => {
+                                    onClearError(error, ERROR.FILE_SUMMARY_ERROR);
+                                    onFilter(fileSummaryFacet.name, name, selected);
+                                } }), key: name, label: name })),
+                    React.createElement(TableCell, null, formatCountSize(count)),
+                    hasFileSize && React.createElement(TableCell, null, formatFileSize(size))))))))));
 };
 /**
  * Returns true if the file summary facet has file size.

package/lib/components/Filter/common/utils.js

@@ -60,7 +60,7 @@ export function getSortMatchesFn(searchTerm) {
             if (match) {
                 matches.push({ labelRanges: match.ranges, score: match.score, value });
             }
-            else {
+            else if (typeof value.key === "string") {
                 match = matchString(value.key || "");
                 if (match)
                     matches.push({ score: match.score, value });

package/lib/components/Filter/components/VariableSizeList/VariableSizeList.d.ts

@@ -2,7 +2,7 @@ import { VariableSizeListProps as ListProps } from "react-window";
 import { CategoryKey } from "../../../../common/entities";
 import { OnFilterFn } from "../../../../hooks/useCategoryFilter";
 import { FilterMenuSearchMatch } from "../../common/entities";
-export type ItemSizeByItemKey = Map<string, number>;
+export type ItemSizeByItemKey = Map<unknown, number>;
 export interface VariableSizeListProps {
     categoryKey: CategoryKey;
     categorySection?: string;

package/lib/components/Filter/components/VariableSizeListItem/variableSizeListItem.d.ts

@@ -7,7 +7,7 @@ interface Props {
     categorySection?: string;
     matchedItem: FilterMenuSearchMatch;
     onFilter: OnFilterFn;
-    onUpdateItemSizeByItemKey: (itemKey: string, itemSize: number) => void;
+    onUpdateItemSizeByItemKey: (itemKey: unknown, itemSize: number) => void;
     style: CSSProperties;
 }
 export default function VariableSizeListItem({ categoryKey, categorySection, matchedItem, onFilter, onUpdateItemSizeByItemKey, style, }: Props): JSX.Element;

package/lib/components/Links/components/Link/components/ExploreViewLink/exploreViewLink.js

@@ -1,26 +1,27 @@
 import Link from "next/link";
-import React, { useCallback } from "react";
+import React from "react";
 import { useExploreState } from "../../../../../../hooks/useExploreState";
 import { ExploreActionKind, } from "../../../../../../providers/exploreState";
 import { ANCHOR_TARGET, REL_ATTRIBUTE, } from "../../../../common/entities";
 const PARAM_FILTER = "filter";
+const PARAM_GROUPING = "grouping";
 const PARAM_SORTING = "sorting";
 export const ExploreViewLink = ({ className, label, onClick, target = ANCHOR_TARGET.SELF, url, }) => {
     const { exploreDispatch, exploreState } = useExploreState();
     if (!isValidExploreURL(url, exploreState)) {
         throwError(url);
     }
-    const onNavigate = useCallback(() => {
-        const entityListType = getEntityListType(url.href);
-        const filters = getSelectedFilters(url.query);
-        const sorting = getSorting(url.query);
-        exploreDispatch({
-            payload: { entityListType, filters, sorting },
-            type: ExploreActionKind.UpdateEntityFilters,
-        });
-        onClick?.();
-    }, [exploreDispatch, onClick, url]);
-    return (React.createElement(Link, { className: className, href: url.href, onClick: onNavigate, rel: REL_ATTRIBUTE.NO_OPENER, target: target }, label));
+    const entityListType = getEntityListType(url.href);
+    const filters = getSelectedFilters(url.query);
+    const grouping = getGrouping(url.query);
+    const sorting = getSorting(url.query);
+    return (React.createElement(Link, { className: className, href: url.href, onClick: () => {
+            exploreDispatch({
+                payload: { entityListType, filters, grouping, sorting },
+                type: ExploreActionKind.UpdateEntityFilters,
+            });
+            onClick?.();
+        }, rel: REL_ATTRIBUTE.NO_OPENER, target: target }, label));
 };
 /**
  * Returns the entity list type "entityListType" inferred from the given href.
@@ -30,6 +31,16 @@ export const ExploreViewLink = ({ className, label, onClick, target = ANCHOR_TAR
 function getEntityListType(href) {
     return href.substring(href.lastIndexOf("/") + 1);
 }
+/**
+ * Returns the grouping from the given query.
+ * @param query - Query.
+ * @returns grouping.
+ */
+function getGrouping(query) {
+    const decodedQuery = decodeURIComponent(query);
+    const parsedQuery = JSON.parse(decodedQuery);
+    return parsedQuery[PARAM_GROUPING];
+}
 /**
  * Returns the selected filters from the given query.
  * @param query - Query.

package/lib/components/Table/common/columnDef.js

@@ -4,6 +4,7 @@ import { RowPositionCell } from "../components/TableCell/components/RowPositionC
 export const COLUMN_DEF = {
     ROW_POSITION: {
         cell: RowPositionCell,
+        enableGrouping: false,
         enableHiding: false,
         enableSorting: false,
         header: "",

package/lib/components/Table/common/gridTable.styles.js

@@ -1,6 +1,6 @@
 import styled from "@emotion/styled";
 import { Table as MTable } from "@mui/material";
-import { smokeLightest, white } from "../../../styles/common/mixins/colors";
+import { white } from "../../../styles/common/mixins/colors";
 export const GridTable = styled(MTable, {
     shouldForwardProp: (prop) => prop !== "gridTemplateColumns",
 }) `
@@ -12,7 +12,10 @@ export const GridTable = styled(MTable, {
   tbody,
   thead,
   tr {
-    display: contents; /* required; allows grandchildren of grid template to appear as though direct child */
+    display: grid;
+    gap: inherit;
+    grid-column: 1 / -1;
+    grid-template-columns: subgrid;
   }
 
   tr {
@@ -34,13 +37,4 @@ export const GridTable = styled(MTable, {
       min-width: 0; /* required; flexbox child min-width property is "auto" by default making overflow-wrap ineffectual */
     }
   }
-
-  [id^="grouped-row"] {
-    background-color: ${smokeLightest};
-
-    td {
-      background-color: inherit;
-      grid-column: 1 / -1;
-    }
-  }
 `;

package/lib/components/Table/common/utils.d.ts

@@ -1,5 +1,4 @@
-import { TableSortLabelProps } from "@mui/material";
-import { Cell, Column, ColumnFiltersState, ColumnSort, InitialTableState, PaginationState, Row, RowData, SortDirection, Table, VisibilityState } from "@tanstack/react-table";
+import { Cell, Column, ColumnFiltersState, InitialTableState, PaginationState, Row, RowData, Table, VisibilityState } from "@tanstack/react-table";
 import { SelectCategory } from "../../../common/entities";
 import { ColumnConfig } from "../../../config/entities";
 import { ExploreMode } from "../../../hooks/useExploreMode";
@@ -31,12 +30,6 @@ export declare function arrIncludesSome<T extends RowData>(row: Row<T>, columnId
  * @returns Array of category views objects.
  */
 export declare function buildCategoryViews<T extends RowData>(columns: Column<T>[], columnFilters: ColumnFiltersState): SelectCategory[];
-/**
- * Returns the column sort direction.
- * @param sortDirection - Column sort direction.
- * @returns the coumn sort direction.
- */
-export declare function getColumnSortDirection(sortDirection: false | SortDirection): SortDirection | undefined;
 /**
  * Returns filtered entity results as a blob.
  * @param rows - Table rows.
@@ -67,28 +60,15 @@ export declare function getGridTemplateColumns<T extends RowData>(columns: Colum
 /**
  * Returns initial table state.
  * @param columns - Column configuration.
- * @param defaultSort - Column sort configuration.
  * @returns initial table state.
  */
-export declare function getInitialState(columns: ColumnConfig[], defaultSort: ColumnSort | undefined): InitialTableState;
-/**
- * Returns the initial table sorting state for the specified column sort configuration.
- * @param defaultSort - Column sort configuration.
- * @returns initial table sorting state.
- */
-export declare function getInitialTableStateSorting(defaultSort: ColumnSort | undefined): ColumnSort[];
+export declare function getInitialState<T extends RowData>(columns: ColumnConfig<T>[]): InitialTableState;
 /**
  * Returns the pinned cell and its index tuple.
  * @param row - Row.
  * @returns pinned cell and index tuple.
  */
 export declare function getPinnedCellIndex<T extends RowData>(row: Row<T>): PinnedCell<T>;
-/**
- * Returns table sort label props.
- * @param column - Table column.
- * @returns table sort label props.
- */
-export declare function getTableSortLabelProps<T extends RowData>(column: Column<T>): TableSortLabelProps;
 /**
  * Returns table state pagination.
  * @param pageIndex - Explore state page index.
@@ -114,12 +94,6 @@ export declare function isClientFilteringEnabled(exploreMode: ExploreMode): bool
  * @returns true if the collapsable row is disabled.
  */
 export declare function isCollapsableRowDisabled<T extends RowData>(tableInstance: Table<T>): boolean;
-/**
- * Returns true if column has a sort direction.
- * @param sortDirection - Column sort direction.
- * @returns true when column has a sort direction.
- */
-export declare function isColumnSortActive(sortDirection: false | SortDirection): boolean;
 /**
  * Returns sort return value from the compare function. The compare function is dependent on the row value type:
  * - row values of type "array" use a compare function based off React Table "basic" compare function,
@@ -136,5 +110,5 @@ export declare function sortingFn<T>(rowA: Row<T>, rowB: Row<T>, columnId: strin
  * @param columns - Column configuration.
  * @returns initial table visibility state.
  */
-export declare function getInitialTableColumnVisibility(columns: ColumnConfig[]): VisibilityState;
+export declare function getInitialTableColumnVisibility<T extends RowData>(columns: ColumnConfig<T>[]): VisibilityState;
 export {};

package/lib/components/Table/common/utils.js

@@ -1,7 +1,7 @@
-import SouthRoundedIcon from "@mui/icons-material/SouthRounded";
 import { memo, sortingFns, } from "@tanstack/react-table";
 import { EXPLORE_MODE } from "../../../hooks/useExploreMode";
 import { ACCESSOR_KEYS } from "../../TableCreator/common/constants";
+import { handleToggleVisibility } from "../components/TableFeatures/ColumnVisibility/utils";
 /**
  * Returns true if the row should be included in the filtered rows.
  * The row will be included if:
@@ -42,7 +42,7 @@ export function buildCategoryViews(columns, columnFilters) {
             const values = [...getFacetedUniqueValues()].map(([value, count]) => ({
                 count,
                 key: value,
-                label: value,
+                label: String(value ?? ""),
                 selected: false, // Selected state updated in reducer.
             }));
             categoryViews.push({
@@ -74,17 +74,6 @@ function formatDataToTSV(data) {
     })
         .join("\n");
 }
-/**
- * Returns the column sort direction.
- * @param sortDirection - Column sort direction.
- * @returns the coumn sort direction.
- */
-export function getColumnSortDirection(sortDirection) {
-    if (!sortDirection) {
-        return;
-    }
-    return sortDirection;
-}
 /**
  * Returns filtered entity results as a blob.
  * @param rows - Table rows.
@@ -108,13 +97,16 @@ export function getEditColumnOptions(table) {
     const { getAllColumns, initialState } = table;
     const { columnVisibility: initialVisibilityState } = initialState;
     const allColumns = getAllColumns();
-    return allColumns.reduce((acc, { columnDef: { header }, getCanHide, getIsVisible, getToggleVisibilityHandler, id, }) => {
+    return allColumns.reduce((acc, column) => {
+        const { columnDef: { header }, getCanHide, getIsVisible, id, } = column;
         if (getCanHide()) {
             const option = {
                 checked: getIsVisible(),
-                disabled: initialVisibilityState[id],
+                disabled: initialVisibilityState[id], // TODO(cc) column visibility toggle should be disabled when table enableGrouping is false, and column is grouped.
                 label: header, // TODO revisit type assertion here
-                onChange: getToggleVisibilityHandler(),
+                onChange: () => {
+                    handleToggleVisibility(table, column);
+                },
                 value: id,
             };
             acc.push(option);
@@ -163,6 +155,7 @@ export function getFacetedUniqueValuesWithArrayValues() {
  */
 export function getGridTemplateColumns(columns) {
     return columns
+        .filter(filterGroupedColumn)
         .map(({ columnDef: { meta } }) => {
         const width = meta?.width;
         if (isGridTrackMinMax(width)) {
@@ -175,28 +168,14 @@ export function getGridTemplateColumns(columns) {
 /**
  * Returns initial table state.
  * @param columns - Column configuration.
- * @param defaultSort - Column sort configuration.
  * @returns initial table state.
  */
-export function getInitialState(columns, defaultSort) {
+export function getInitialState(columns) {
     const columnVisibility = getInitialTableColumnVisibility(columns);
-    const sorting = getInitialTableStateSorting(defaultSort);
     return {
         columnVisibility,
-        sorting,
     };
 }
-/**
- * Returns the initial table sorting state for the specified column sort configuration.
- * @param defaultSort - Column sort configuration.
- * @returns initial table sorting state.
- */
-export function getInitialTableStateSorting(defaultSort) {
-    if (!defaultSort) {
-        return [];
-    }
-    return [defaultSort];
-}
 /**
  * Returns the pinned cell and its index tuple.
  * @param row - Row.
@@ -206,28 +185,18 @@ export function getPinnedCellIndex(row) {
     const visibleCells = row.getVisibleCells();
     let pinnedIndex = 0;
     for (let i = 0; i < visibleCells.length; i++) {
-        if (visibleCells[i].column.columnDef.meta?.columnPinned) {
+        const cell = visibleCells[i];
+        if (cell.getIsGrouped()) {
+            pinnedIndex = i;
+            break;
+        }
+        if (cell.column.columnDef.meta?.columnPinned) {
             pinnedIndex = i;
             break;
         }
     }
     return [visibleCells[pinnedIndex], pinnedIndex];
 }
-/**
- * Returns table sort label props.
- * @param column - Table column.
- * @returns table sort label props.
- */
-export function getTableSortLabelProps(column) {
-    const { getCanSort, getIsSorted, getToggleSortingHandler } = column;
-    return {
-        IconComponent: SouthRoundedIcon,
-        active: isColumnSortActive(getIsSorted()),
-        direction: getColumnSortDirection(getIsSorted()),
-        disabled: !getCanSort(),
-        onClick: getToggleSortingHandler(),
-    };
-}
 /**
  * Returns table state pagination.
  * @param pageIndex - Explore state page index.
@@ -262,15 +231,22 @@ function getRowsTableData(rows) {
         .filter((cell) => cell.column.id !== ACCESSOR_KEYS.SELECT)
         .map((cell) => cell.getValue()));
 }
+/**
+ * Returns true if the column is not grouped (filters out grouped columns).
+ * @param column - Table column.
+ * @returns true if the column is not grouped.
+ */
+function filterGroupedColumn(column) {
+    return !column.getIsGrouped();
+}
 /**
  * Returns true if any or all table rows are selected.
  * @param table - Table.
  * @returns true if a row is selected.
  */
 export function isAnyRowSelected(table) {
-    const { getIsAllPageRowsSelected, getIsSomePageRowsSelected, options: { enableRowSelection }, } = table;
-    return Boolean(enableRowSelection &&
-        (getIsSomePageRowsSelected() || getIsAllPageRowsSelected()));
+    const { getIsAllPageRowsSelected, getIsSomePageRowsSelected } = table;
+    return getIsSomePageRowsSelected() || getIsAllPageRowsSelected();
 }
 /**
  * Returns true if client-side filtering is enabled.
@@ -289,17 +265,6 @@ export function isClientFilteringEnabled(exploreMode) {
 export function isCollapsableRowDisabled(tableInstance) {
     return tableInstance.getVisibleLeafColumns().length === 1;
 }
-/**
- * Returns true if column has a sort direction.
- * @param sortDirection - Column sort direction.
- * @returns true when column has a sort direction.
- */
-export function isColumnSortActive(sortDirection) {
-    if (!sortDirection) {
-        return sortDirection;
-    }
-    return true;
-}
 /**
  * Returns sort return value from the compare function. The compare function is dependent on the row value type:
  * - row values of type "array" use a compare function based off React Table "basic" compare function,

package/lib/components/Table/components/TableBody/hooks/virtualizer/constants.d.ts

@@ -0,0 +1,3 @@
+export declare const VIRTUALIZER_OPTIONS: {
+    overscan: number;
+};

package/lib/components/Table/components/TableBody/hooks/virtualizer/constants.js

@@ -0,0 +1,3 @@
+export const VIRTUALIZER_OPTIONS = {
+    overscan: 20,
+};

package/lib/components/Table/components/TableBody/hooks/virtualizer/hook.d.ts

@@ -0,0 +1,8 @@
+import { Row, RowData } from "@tanstack/react-table";
+import { UseVirtualizer } from "./types";
+/**
+ * A hook to create and manage TanStack window virtualizer for table rows.
+ * @param rows - Rows.
+ * @returns An object containing the virtualizer instance, which manages the visible rows.
+ */
+export declare function useVirtualizer<T extends RowData>(rows: Row<T>[]): UseVirtualizer;

package/lib/components/Table/components/TableBody/hooks/virtualizer/hook.js

@@ -0,0 +1,18 @@
+import { useWindowVirtualizer } from "@tanstack/react-virtual";
+import { useCallback } from "react";
+import { VIRTUALIZER_OPTIONS } from "./constants";
+/**
+ * A hook to create and manage TanStack window virtualizer for table rows.
+ * @param rows - Rows.
+ * @returns An object containing the virtualizer instance, which manages the visible rows.
+ */
+export function useVirtualizer(rows) {
+    const estimateSize = useCallback(() => 100, []);
+    const count = rows.length;
+    const virtualizer = useWindowVirtualizer({
+        ...VIRTUALIZER_OPTIONS,
+        count,
+        estimateSize,
+    });
+    return { virtualizer };
+}

package/lib/components/Table/components/TableBody/hooks/virtualizer/types.d.ts

@@ -0,0 +1,4 @@
+import { Virtualizer } from "@tanstack/react-virtual";
+export interface UseVirtualizer {
+    virtualizer: Virtualizer<Window, Element>;
+}

package/lib/components/Table/components/TableBody/tableBody.d.ts

@@ -1,7 +1,8 @@
-import { RowData, Table } from "@tanstack/react-table";
+import { Row, RowData, Table } from "@tanstack/react-table";
 import { ROW_DIRECTION } from "../../common/entities";
 export interface TableBodyProps<T extends RowData> {
     rowDirection: ROW_DIRECTION;
+    rows: Row<T>[];
     tableInstance: Table<T>;
 }
-export declare const TableBody: <T extends RowData>({ rowDirection, tableInstance, }: TableBodyProps<T>) => JSX.Element;
+export declare const TableBody: <T extends RowData>({ rowDirection, rows, tableInstance, }: TableBodyProps<T>) => JSX.Element;

package/lib/components/Table/components/TableBody/tableBody.js

@@ -1,37 +1,16 @@
 import { TableBody as MTableBody } from "@mui/material";
-import { useWindowVirtualizer } from "@tanstack/react-virtual";
-import React, { useCallback } from "react";
+import React from "react";
 import { ROW_DIRECTION } from "../../common/entities";
 import { CollapsableRows } from "../TableRows/components/CollapsableRows/collapsableRows";
 import { VirtualizedRow } from "../TableRows/components/VirtualizedRow/virtualizedRow";
 import { TableRows } from "../TableRows/tableRows";
-const OVERSCAN = 20;
-export const TableBody = ({ rowDirection, tableInstance, }) => {
-    const { getRowModel } = tableInstance;
-    const { rows } = getRowModel();
-    const estimateSize = useCallback(() => 100, []);
-    const count = rows.length;
-    const virtualizer = useWindowVirtualizer({
-        count,
-        estimateSize,
-        measureElement,
-        overscan: OVERSCAN,
-    });
+import { useVirtualizer } from "./hooks/virtualizer/hook";
+import { getAllVirtualizedRows } from "./utils";
+export const TableBody = ({ rowDirection, rows, tableInstance, }) => {
+    const virtualizedRows = getAllVirtualizedRows(tableInstance, rows, rowDirection);
+    const { virtualizer } = useVirtualizer(virtualizedRows);
     return (React.createElement(MTableBody, null,
         React.createElement(VirtualizedRow, { isUpperRow: true, virtualizer: virtualizer }),
-        rowDirection === ROW_DIRECTION.DEFAULT ? (React.createElement(TableRows, { tableInstance: tableInstance, virtualizer: virtualizer })) : (React.createElement(CollapsableRows, { tableInstance: tableInstance, virtualizer: virtualizer })),
+        rowDirection === ROW_DIRECTION.DEFAULT ? (React.createElement(TableRows, { rows: virtualizedRows, virtualizer: virtualizer })) : (React.createElement(CollapsableRows, { rows: virtualizedRows, tableInstance: tableInstance, virtualizer: virtualizer })),
         React.createElement(VirtualizedRow, { isUpperRow: false, virtualizer: virtualizer })));
 };
-/**
- * Measures the height of the element.
- * @param element - Element to measure.
- * @returns height of the element.
- */
-function measureElement(element) {
-    // We select the first child element because the row is not a box element due to the "display: contents" style attribute.
-    const box = element.children[0];
-    if (!box) {
-        return 0;
-    }
-    return box.getBoundingClientRect().height;
-}