@databiosphere/findable-ui 38.1.0 → 38.2.0

package/.release-please-manifest.json

@@ -1,3 +1,3 @@
 {
-  ".": "38.1.0"
+  ".": "38.2.0"
 }

package/CHANGELOG.md

@@ -1,5 +1,24 @@
 # Changelog
 
+## [38.2.0](https://github.com/DataBiosphere/findable-ui/compare/v38.1.1...v38.2.0) (2025-07-11)
+
+
+### Features
+
+* add 'introduction' section to data dictionary ([#566](https://github.com/DataBiosphere/findable-ui/issues/566)) ([#567](https://github.com/DataBiosphere/findable-ui/issues/567)) ([5aeb758](https://github.com/DataBiosphere/findable-ui/commit/5aeb758792532a78fa4ec71dc0f7b3ad8c80c376))
+
+
+### Bug Fixes
+
+* align range filter toggle button styles with design ([#563](https://github.com/DataBiosphere/findable-ui/issues/563)) ([#564](https://github.com/DataBiosphere/findable-ui/issues/564)) ([1cc1ffd](https://github.com/DataBiosphere/findable-ui/commit/1cc1ffd88ae3b2f436717b494e425614412cface))
+
+## [38.1.1](https://github.com/DataBiosphere/findable-ui/compare/v38.1.0...v38.1.1) (2025-07-09)
+
+
+### Bug Fixes
+
+* table view fails to render after switching from graph view ([#560](https://github.com/DataBiosphere/findable-ui/issues/560)) ([#561](https://github.com/DataBiosphere/findable-ui/issues/561)) ([35a2f0c](https://github.com/DataBiosphere/findable-ui/commit/35a2f0c84119f66c372750442c8b29ca93af9057))
+
 ## [38.1.0](https://github.com/DataBiosphere/findable-ui/compare/v38.0.0...v38.1.0) (2025-07-09)
 
 

package/lib/components/DataDictionary/components/Description/description.d.ts

@@ -0,0 +1,2 @@
+import { DescriptionProps } from "./types";
+export declare const Description: ({ description, }: DescriptionProps) => JSX.Element | null;

package/lib/components/DataDictionary/components/Description/description.js

@@ -0,0 +1,8 @@
+import React from "react";
+import { StyledMarkdownRenderer, StyledRoundedPaper, } from "./description.styles";
+export const Description = ({ description, }) => {
+    if (!description)
+        return null;
+    return (React.createElement(StyledRoundedPaper, { elevation: 0 },
+        React.createElement(StyledMarkdownRenderer, { value: description })));
+};

package/lib/components/DataDictionary/components/Description/description.styles.d.ts

@@ -0,0 +1,10 @@
+export declare const StyledRoundedPaper: import("@emotion/styled").StyledComponent<import("../../../types").BaseComponentProps & import("@mui/material").PaperOwnProps & import("@mui/material/OverridableComponent").CommonProps & Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
+    ref?: ((instance: HTMLDivElement | null) => void | import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | import("react").RefObject<HTMLDivElement> | null | undefined;
+}, "style" | "className" | "classes" | "children" | "sx" | "elevation" | "square" | "variant"> & {
+    component?: React.ElementType;
+} & {
+    theme?: import("@emotion/react").Theme;
+}, {}, {}>;
+export declare const StyledMarkdownRenderer: import("@emotion/styled").StyledComponent<import("../../../MarkdownRenderer/types").MarkdownRendererProps & {
+    theme?: import("@emotion/react").Theme;
+}, {}, {}>;

package/lib/components/DataDictionary/components/Description/description.styles.js

@@ -0,0 +1,51 @@
+import styled from "@emotion/styled";
+import { PALETTE } from "../../../../styles/common/constants/palette";
+import { mediaTabletDown, mediaTabletUp, } from "../../../../styles/common/mixins/breakpoints";
+import { textHeadingSmall } from "../../../../styles/common/mixins/fonts";
+import { RoundedPaper } from "../../../common/Paper/components/RoundedPaper/roundedPaper";
+import { MarkdownRenderer } from "../../../MarkdownRenderer/markdownRenderer";
+export const StyledRoundedPaper = styled(RoundedPaper) `
+  padding: 20px;
+
+  ${mediaTabletDown} {
+    padding: 20px 16px;
+  }
+`;
+export const StyledMarkdownRenderer = styled(MarkdownRenderer) `
+  align-self: flex-start;
+
+  code {
+    all: unset;
+    font: inherit;
+    font-family: Roboto Mono, monospace;
+  }
+
+  h2,
+  h3,
+  h4,
+  h5,
+  h6 {
+    margin: 8px 0;
+  }
+
+  h2 {
+    ${textHeadingSmall};
+    font-size: 18px;
+    line-height: 26px;
+
+    ${mediaTabletUp} {
+      font-size: 18px;
+      line-height: 26px;
+    }
+  }
+
+  hr {
+    border: none;
+    border-bottom: 1px solid ${PALETTE.SMOKE_MAIN};
+    margin: 16px 0;
+  }
+
+  p {
+    font: inherit;
+  }
+`;

package/lib/components/DataDictionary/components/Description/types.d.ts

@@ -0,0 +1,3 @@
+export interface DescriptionProps {
+    description?: string;
+}

package/lib/components/DataDictionary/components/Description/types.js

@@ -0,0 +1 @@
+export {};

package/lib/components/DataDictionary/components/Layout/components/EntitiesLayout/entitiesLayout.styles.js

@@ -4,6 +4,8 @@ import { LAYOUT_SPACING } from "../../constants";
 const PB = LAYOUT_SPACING.CONTENT_PADDING_BOTTOM; /* bottom padding */
 const PT = LAYOUT_SPACING.CONTENT_PADDING_TOP; /* top padding */
 export const Layout = styled("div") `
+  display: grid;
+  gap: 16px;
   grid-column: 2;
   grid-row: 1;
   padding-bottom: ${PB}px;

package/lib/components/DataDictionary/dataDictionary.js

@@ -1,6 +1,7 @@
 import { Fade } from "@mui/material";
 import React from "react";
 import { useLayoutSpacing } from "../../hooks/UseLayoutSpacing/hook";
+import { Description } from "./components/Description/description";
 import { Entities } from "./components/Entities/entities";
 import { ColumnFilterTags } from "./components/Filters/components/ColumnFilterTags/columnFilterTags";
 import { Filters } from "./components/Filters/filters";
@@ -17,7 +18,7 @@ import { useDataDictionaryConfig } from "./hooks/UseDataDictionaryConfig/hook";
 import { useMeasureFilters } from "./hooks/UseMeasureFilters/hook";
 export const DataDictionary = ({ className, dictionary, EntitiesLayout = DefaultEntitiesLayout, FiltersLayout = DefaultFiltersLayout, Outline = DefaultOutline, OutlineLayout = DefaultOutlineLayout, Title = DefaultTitle, TitleLayout = DefaultTitleLayout, }) => {
     // Get dictionary configuration.
-    const { classes, tableOptions, title } = useDataDictionaryConfig(dictionary);
+    const { classes, description, tableOptions, title } = useDataDictionaryConfig(dictionary);
     // Layout measurements.
     // Get header and footer dimensions.
     const { spacing } = useLayoutSpacing();
@@ -40,5 +41,6 @@ export const DataDictionary = ({ className, dictionary, EntitiesLayout = Default
                 React.createElement(ColumnFilterTags, { table: table })),
             React.createElement(Fade, { in: dimensions.height > 0 },
                 React.createElement(EntitiesLayout, { spacing: entitiesSpacing },
+                    React.createElement(Description, { description: description }),
                     React.createElement(Entities, { spacing: entitiesSpacing, table: table }))))));
 };

package/lib/components/DataDictionary/hooks/UseDataDictionaryConfig/hook.js

@@ -20,6 +20,7 @@ export const useDataDictionaryConfig = (dictionary) => {
         // exists above and would have thrown an error if undefined.
         return {
             classes: dataDictionaryConfig.dataDictionary.classes,
+            description: dataDictionaryConfig.dataDictionary.description,
             tableOptions: dataDictionaryConfig.tableOptions,
             title: dataDictionaryConfig.dataDictionary.title,
         };

package/lib/components/DataDictionary/hooks/UseDataDictionaryConfig/types.d.ts

@@ -2,6 +2,7 @@ import { RowData, TableOptions } from "@tanstack/react-table";
 import { Attribute, Class } from "../../../../common/entities";
 export interface UseDataDictionaryConfig<T extends RowData = Attribute> {
     classes: Class<T>[];
+    description?: string;
     tableOptions: Omit<TableOptions<T>, "data" | "getCoreRowModel">;
     title: string;
 }

package/lib/components/Filter/components/FilterRange/filterRange.styles.js

@@ -12,6 +12,7 @@ export const StyledForm = styled("form") `
 
     .MuiToggleButton-root {
       color: ${PALETTE.INK_LIGHT};
+      padding: 8px 12px;
       text-transform: capitalize;
 
       &.Mui-selected {

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

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

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

@@ -1,22 +1,12 @@
 import { TableBody as MTableBody } from "@mui/material";
-import { useVirtualizer } from "@tanstack/react-virtual";
 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";
-import { getAllVirtualizedRows } from "./utils";
-export const TableBody = ({ rowDirection, rows, tableContainerRef, tableInstance, }) => {
-    const virtualizedRows = getAllVirtualizedRows(tableInstance, rows, rowDirection);
-    const virtualizer = useVirtualizer({
-        count: virtualizedRows.length,
-        estimateSize: () => 56,
-        gap: 1,
-        getScrollElement: () => tableContainerRef.current,
-        overscan: 20,
-    });
+export const TableBody = ({ rowDirection, rows, tableInstance, virtualizer, }) => {
     return (React.createElement(MTableBody, null,
         React.createElement(VirtualizedRow, { isUpperRow: true, virtualizer: virtualizer }),
-        rowDirection === ROW_DIRECTION.DEFAULT ? (React.createElement(TableRows, { rows: virtualizedRows, virtualizer: virtualizer })) : (React.createElement(CollapsableRows, { rows: virtualizedRows, tableInstance: tableInstance, virtualizer: virtualizer })),
+        rowDirection === ROW_DIRECTION.DEFAULT ? (React.createElement(TableRows, { rows: rows, virtualizer: virtualizer })) : (React.createElement(CollapsableRows, { rows: rows, tableInstance: tableInstance, virtualizer: virtualizer })),
         React.createElement(VirtualizedRow, { isUpperRow: false, virtualizer: virtualizer })));
 };

package/lib/components/Table/hooks/UseVirtualization/hook.d.ts

@@ -0,0 +1,7 @@
+import { RowData, Table } from "@tanstack/react-table";
+import { ROW_DIRECTION } from "../../common/entities";
+import { UseVirtualizationProps } from "./types";
+export declare const useVirtualization: <T extends RowData>({ rowDirection, table, }: {
+    rowDirection: ROW_DIRECTION;
+    table: Table<T>;
+}) => UseVirtualizationProps<T>;

package/lib/components/Table/hooks/UseVirtualization/hook.js

@@ -0,0 +1,18 @@
+import { useVirtualizer } from "@tanstack/react-virtual";
+import { useRef } from "react";
+import { getRowsForVirtualization } from "./utils";
+export const useVirtualization = ({ rowDirection, table, }) => {
+    // Ref for the scrollable container.
+    const scrollElementRef = useRef(null);
+    // Derive the list of rows eligible for virtualization based on grouping and row direction.
+    const rows = getRowsForVirtualization(table, rowDirection);
+    // Build virtualizer instance.
+    const virtualizer = useVirtualizer({
+        count: rows.length,
+        estimateSize: () => 56,
+        gap: 1,
+        getScrollElement: () => scrollElementRef.current,
+        overscan: 20,
+    });
+    return { rows, scrollElementRef, virtualizer };
+};

package/lib/components/Table/hooks/UseVirtualization/types.d.ts

@@ -0,0 +1,8 @@
+import { Row, RowData } from "@tanstack/react-table";
+import { Virtualizer } from "@tanstack/react-virtual";
+import { RefObject } from "react";
+export interface UseVirtualizationProps<T extends RowData> {
+    rows: Row<T>[];
+    scrollElementRef: RefObject<HTMLDivElement>;
+    virtualizer: Virtualizer<HTMLDivElement, Element>;
+}

package/lib/components/Table/hooks/UseVirtualization/types.js

@@ -0,0 +1 @@
+export {};

package/lib/components/Table/{components/TableBody → hooks/UseVirtualization}/utils.d.ts

@@ -3,10 +3,8 @@ import { ROW_DIRECTION } from "../../common/entities";
 /**
  * Filters and returns the appropriate rows for a virtualized table based on row direction
  * and grouping state.
- * Rows are filtered if `ROW_DIRECTION` is `VERTICAL` and the table is grouped.
  * @param table - Table.
- * @param rows - Rows.
  * @param rowDirection - Row direction.
  * @returns Rows based on the provided row direction and table grouping state.
  */
-export declare function getAllVirtualizedRows<T extends RowData>(table: Table<T>, rows: Row<T>[], rowDirection: ROW_DIRECTION): Row<T>[];
+export declare function getRowsForVirtualization<T extends RowData>(table: Table<T>, rowDirection: ROW_DIRECTION): Row<T>[];

package/lib/components/Table/{components/TableBody → hooks/UseVirtualization}/utils.js

@@ -2,16 +2,20 @@ import { ROW_DIRECTION } from "../../common/entities";
 /**
  * Filters and returns the appropriate rows for a virtualized table based on row direction
  * and grouping state.
- * Rows are filtered if `ROW_DIRECTION` is `VERTICAL` and the table is grouped.
  * @param table - Table.
- * @param rows - Rows.
  * @param rowDirection - Row direction.
  * @returns Rows based on the provided row direction and table grouping state.
  */
-export function getAllVirtualizedRows(table, rows, rowDirection) {
+export function getRowsForVirtualization(table, rowDirection) {
+    const { getRowModel, getState } = table;
+    const { rows } = getRowModel();
+    const { grouping } = getState();
+    // If the row direction is DEFAULT, return all rows.
     if (rowDirection === ROW_DIRECTION.DEFAULT)
         return rows;
-    if (table.getState().grouping.length === 0)
+    // If the table is not grouped, return all rows.
+    if (grouping.length === 0)
         return rows;
+    // If the row direction is VERTICAL, return only grouped rows.
     return rows.filter(({ getIsGrouped }) => getIsGrouped());
 }

package/lib/components/Table/table.js

@@ -1,11 +1,10 @@
 import { TableContainer } from "@mui/material";
-import React, { Fragment, useRef } from "react";
+import React, { Fragment, useCallback } from "react";
 import { track } from "../../common/analytics/analytics";
 import { EVENT_NAME, EVENT_PARAM, PAGINATION_DIRECTION, } from "../../common/analytics/entities";
 import { BREAKPOINT_FN_NAME, useBreakpointHelper, } from "../../hooks/useBreakpointHelper";
 import { useExploreMode } from "../../hooks/useExploreMode/useExploreMode";
 import { useExploreState } from "../../hooks/useExploreState";
-import { useScroll } from "../../hooks/useScroll";
 import { ExploreActionKind } from "../../providers/exploreState";
 import { TABLET } from "../../theme/common/breakpoints";
 import { Loading, LOADING_PANEL_STYLE } from "../Loading/loading";
@@ -17,9 +16,9 @@ import { TableBody } from "./components/TableBody/tableBody";
 import { TableHead } from "./components/TableHead/tableHead";
 import { TablePagination } from "./components/TablePagination/tablePagination";
 import { TableToolbar } from "./components/TableToolbar/tableToolbar";
+import { useVirtualization } from "./hooks/UseVirtualization/hook";
 import { GridTable } from "./table.styles";
 export const Table = ({ listView, loading, table, }) => {
-    const tableContainerRef = useRef(null);
     const tabletDown = useBreakpointHelper(BREAKPOINT_FN_NAME.DOWN, TABLET);
     const exploreMode = useExploreMode();
     const { exploreDispatch, exploreState } = useExploreState();
@@ -30,11 +29,13 @@ export const Table = ({ listView, loading, table, }) => {
     const rowDirection = tabletDown
         ? ROW_DIRECTION.VERTICAL
         : ROW_DIRECTION.DEFAULT;
-    const { getRowModel, getVisibleFlatColumns, nextPage: tableNextPage, previousPage: tablePreviousPage, } = table;
-    const { rows } = getRowModel();
+    const { rows, scrollElementRef, virtualizer } = useVirtualization({
+        rowDirection,
+        table,
+    });
+    const { getVisibleFlatColumns, nextPage: tableNextPage, previousPage: tablePreviousPage, } = table;
     const noResults = !loading && (!rows || rows.length === 0);
-    const scrollTop = useScroll();
-    const handleTableNextPage = () => {
+    const handleTableNextPage = useCallback(() => {
         let nextPage = tableNextPage;
         if (!clientFiltering) {
             nextPage = () => {
@@ -50,9 +51,8 @@ export const Table = ({ listView, loading, table, }) => {
             });
         }
         nextPage();
-        scrollTop();
-    };
-    const handleTablePreviousPage = () => {
+    }, [clientFiltering, exploreDispatch, exploreState, tableNextPage]);
+    const handleTablePreviousPage = useCallback(() => {
         let previousPage = tablePreviousPage;
         if (!clientFiltering) {
             previousPage = () => {
@@ -67,8 +67,7 @@ export const Table = ({ listView, loading, table, }) => {
             });
         }
         previousPage();
-        scrollTop();
-    };
+    }, [clientFiltering, exploreDispatch, exploreState, tablePreviousPage]);
     function canNextPage() {
         return currentPage < pages;
     }
@@ -78,9 +77,9 @@ export const Table = ({ listView, loading, table, }) => {
     return noResults ? (React.createElement(NoResults, { Paper: null, title: "No Results found" })) : (React.createElement(Fragment, null,
         React.createElement(TableToolbar, { listView: listView, tableInstance: table }),
         React.createElement(Loading, { appear: false, autoPosition: false, loading: loading, panelStyle: LOADING_PANEL_STYLE.INHERIT }),
-        React.createElement(TableContainer, { ref: tableContainerRef },
+        React.createElement(TableContainer, { ref: scrollElementRef },
             React.createElement(GridTable, { collapsable: true, gridTemplateColumns: getColumnTrackSizing(getVisibleFlatColumns()), stickyHeader: true },
                 React.createElement(TableHead, { tableInstance: table }),
-                React.createElement(TableBody, { rows: rows, rowDirection: rowDirection, tableContainerRef: tableContainerRef, tableInstance: table }))),
+                React.createElement(TableBody, { rows: rows, rowDirection: rowDirection, tableInstance: table, virtualizer: virtualizer }))),
         !disablePagination && (React.createElement(TablePagination, { canNextPage: canNextPage(), canPreviousPage: canPreviousPage(), currentPage: currentPage, onNextPage: handleTableNextPage, onPreviousPage: handleTablePreviousPage, totalPage: pages ?? 0 }))));
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@databiosphere/findable-ui",
-  "version": "38.1.0",
+  "version": "38.2.0",
   "description": "",
   "scripts": {
     "test": "node --experimental-vm-modules node_modules/jest/bin/jest.js",

package/src/components/DataDictionary/components/Description/description.styles.ts

@@ -0,0 +1,56 @@
+import styled from "@emotion/styled";
+import { PALETTE } from "../../../../styles/common/constants/palette";
+import {
+  mediaTabletDown,
+  mediaTabletUp,
+} from "../../../../styles/common/mixins/breakpoints";
+import { textHeadingSmall } from "../../../../styles/common/mixins/fonts";
+import { RoundedPaper } from "../../../common/Paper/components/RoundedPaper/roundedPaper";
+import { MarkdownRenderer } from "../../../MarkdownRenderer/markdownRenderer";
+
+export const StyledRoundedPaper = styled(RoundedPaper)`
+  padding: 20px;
+
+  ${mediaTabletDown} {
+    padding: 20px 16px;
+  }
+`;
+
+export const StyledMarkdownRenderer = styled(MarkdownRenderer)`
+  align-self: flex-start;
+
+  code {
+    all: unset;
+    font: inherit;
+    font-family: Roboto Mono, monospace;
+  }
+
+  h2,
+  h3,
+  h4,
+  h5,
+  h6 {
+    margin: 8px 0;
+  }
+
+  h2 {
+    ${textHeadingSmall};
+    font-size: 18px;
+    line-height: 26px;
+
+    ${mediaTabletUp} {
+      font-size: 18px;
+      line-height: 26px;
+    }
+  }
+
+  hr {
+    border: none;
+    border-bottom: 1px solid ${PALETTE.SMOKE_MAIN};
+    margin: 16px 0;
+  }
+
+  p {
+    font: inherit;
+  }
+`;

package/src/components/DataDictionary/components/Description/description.tsx

@@ -0,0 +1,17 @@
+import React from "react";
+import {
+  StyledMarkdownRenderer,
+  StyledRoundedPaper,
+} from "./description.styles";
+import { DescriptionProps } from "./types";
+
+export const Description = ({
+  description,
+}: DescriptionProps): JSX.Element | null => {
+  if (!description) return null;
+  return (
+    <StyledRoundedPaper elevation={0}>
+      <StyledMarkdownRenderer value={description} />
+    </StyledRoundedPaper>
+  );
+};

package/src/components/DataDictionary/components/Description/types.ts

@@ -0,0 +1,3 @@
+export interface DescriptionProps {
+  description?: string;
+}

package/src/components/DataDictionary/components/Layout/components/EntitiesLayout/entitiesLayout.styles.ts

@@ -7,6 +7,8 @@ const PB = LAYOUT_SPACING.CONTENT_PADDING_BOTTOM; /* bottom padding */
 const PT = LAYOUT_SPACING.CONTENT_PADDING_TOP; /* top padding */
 
 export const Layout = styled("div")<LayoutSpacing>`
+  display: grid;
+  gap: 16px;
   grid-column: 2;
   grid-row: 1;
   padding-bottom: ${PB}px;

package/src/components/DataDictionary/dataDictionary.tsx

@@ -3,6 +3,7 @@ import { RowData } from "@tanstack/react-table";
 import React from "react";
 import { Attribute } from "../../common/entities";
 import { useLayoutSpacing } from "../../hooks/UseLayoutSpacing/hook";
+import { Description } from "./components/Description/description";
 import { Entities } from "./components/Entities/entities";
 import { ColumnFilterTags } from "./components/Filters/components/ColumnFilterTags/columnFilterTags";
 import { Filters } from "./components/Filters/filters";
@@ -30,7 +31,7 @@ export const DataDictionary = <T extends RowData = Attribute>({
   TitleLayout = DefaultTitleLayout,
 }: DataDictionaryProps): JSX.Element => {
   // Get dictionary configuration.
-  const { classes, tableOptions, title } =
+  const { classes, description, tableOptions, title } =
     useDataDictionaryConfig<T>(dictionary);
 
   // Layout measurements.
@@ -64,6 +65,7 @@ export const DataDictionary = <T extends RowData = Attribute>({
         <Fade in={dimensions.height > 0}>
           {/* Fade in entities when filters are measured. */}
           <EntitiesLayout spacing={entitiesSpacing}>
+            <Description description={description} />
             <Entities spacing={entitiesSpacing} table={table} />
           </EntitiesLayout>
         </Fade>

package/src/components/DataDictionary/hooks/UseDataDictionaryConfig/hook.ts

@@ -31,6 +31,7 @@ export const useDataDictionaryConfig = <T extends RowData = Attribute>(
     // exists above and would have thrown an error if undefined.
     return {
       classes: dataDictionaryConfig!.dataDictionary.classes,
+      description: dataDictionaryConfig!.dataDictionary.description,
       tableOptions: dataDictionaryConfig!.tableOptions,
       title: dataDictionaryConfig!.dataDictionary.title,
     };

package/src/components/DataDictionary/hooks/UseDataDictionaryConfig/types.ts

@@ -3,6 +3,7 @@ import { Attribute, Class } from "../../../../common/entities";
 
 export interface UseDataDictionaryConfig<T extends RowData = Attribute> {
   classes: Class<T>[];
+  description?: string;
   tableOptions: Omit<TableOptions<T>, "data" | "getCoreRowModel">;
   title: string;
 }

package/src/components/Filter/components/FilterRange/filterRange.styles.ts

@@ -13,6 +13,7 @@ export const StyledForm = styled("form")`
 
     .MuiToggleButton-root {
       color: ${PALETTE.INK_LIGHT};
+      padding: 8px 12px;
       text-transform: capitalize;
 
       &.Mui-selected {

package/src/components/Table/components/TableBody/tableBody.tsx

@@ -1,46 +1,33 @@
 import { TableBody as MTableBody } from "@mui/material";
 import { Row, RowData, Table } from "@tanstack/react-table";
-import { useVirtualizer } from "@tanstack/react-virtual";
-import React, { RefObject } from "react";
+import { Virtualizer } from "@tanstack/react-virtual";
+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";
-import { getAllVirtualizedRows } from "./utils";
 
 export interface TableBodyProps<T extends RowData> {
   rowDirection: ROW_DIRECTION;
   rows: Row<T>[];
-  tableContainerRef: RefObject<HTMLDivElement>;
   tableInstance: Table<T>;
+  virtualizer: Virtualizer<HTMLDivElement, Element>;
 }
 
 export const TableBody = <T extends RowData>({
   rowDirection,
   rows,
-  tableContainerRef,
   tableInstance,
+  virtualizer,
 }: TableBodyProps<T>): JSX.Element => {
-  const virtualizedRows = getAllVirtualizedRows(
-    tableInstance,
-    rows,
-    rowDirection
-  );
-  const virtualizer = useVirtualizer({
-    count: virtualizedRows.length,
-    estimateSize: () => 56,
-    gap: 1,
-    getScrollElement: () => tableContainerRef.current,
-    overscan: 20,
-  });
   return (
     <MTableBody>
       <VirtualizedRow isUpperRow={true} virtualizer={virtualizer} />
       {rowDirection === ROW_DIRECTION.DEFAULT ? (
-        <TableRows rows={virtualizedRows} virtualizer={virtualizer} />
+        <TableRows rows={rows} virtualizer={virtualizer} />
       ) : (
         <CollapsableRows
-          rows={virtualizedRows}
+          rows={rows}
           tableInstance={tableInstance}
           virtualizer={virtualizer}
         />

package/src/components/Table/hooks/UseVirtualization/hook.ts

@@ -0,0 +1,31 @@
+import { RowData, Table } from "@tanstack/react-table";
+import { useVirtualizer } from "@tanstack/react-virtual";
+import { useRef } from "react";
+import { ROW_DIRECTION } from "../../common/entities";
+import { UseVirtualizationProps } from "./types";
+import { getRowsForVirtualization } from "./utils";
+
+export const useVirtualization = <T extends RowData>({
+  rowDirection,
+  table,
+}: {
+  rowDirection: ROW_DIRECTION;
+  table: Table<T>;
+}): UseVirtualizationProps<T> => {
+  // Ref for the scrollable container.
+  const scrollElementRef = useRef<HTMLDivElement>(null);
+
+  // Derive the list of rows eligible for virtualization based on grouping and row direction.
+  const rows = getRowsForVirtualization(table, rowDirection);
+
+  // Build virtualizer instance.
+  const virtualizer = useVirtualizer({
+    count: rows.length,
+    estimateSize: () => 56,
+    gap: 1,
+    getScrollElement: () => scrollElementRef.current,
+    overscan: 20,
+  });
+
+  return { rows, scrollElementRef, virtualizer };
+};

package/src/components/Table/hooks/UseVirtualization/types.ts

@@ -0,0 +1,9 @@
+import { Row, RowData } from "@tanstack/react-table";
+import { Virtualizer } from "@tanstack/react-virtual";
+import { RefObject } from "react";
+
+export interface UseVirtualizationProps<T extends RowData> {
+  rows: Row<T>[];
+  scrollElementRef: RefObject<HTMLDivElement>;
+  virtualizer: Virtualizer<HTMLDivElement, Element>;
+}

package/src/components/Table/{components/TableBody → hooks/UseVirtualization}/utils.ts

@@ -4,18 +4,24 @@ import { ROW_DIRECTION } from "../../common/entities";
 /**
  * Filters and returns the appropriate rows for a virtualized table based on row direction
  * and grouping state.
- * Rows are filtered if `ROW_DIRECTION` is `VERTICAL` and the table is grouped.
  * @param table - Table.
- * @param rows - Rows.
  * @param rowDirection - Row direction.
  * @returns Rows based on the provided row direction and table grouping state.
  */
-export function getAllVirtualizedRows<T extends RowData>(
+export function getRowsForVirtualization<T extends RowData>(
   table: Table<T>,
-  rows: Row<T>[],
   rowDirection: ROW_DIRECTION
 ): Row<T>[] {
+  const { getRowModel, getState } = table;
+  const { rows } = getRowModel();
+  const { grouping } = getState();
+
+  // If the row direction is DEFAULT, return all rows.
   if (rowDirection === ROW_DIRECTION.DEFAULT) return rows;
-  if (table.getState().grouping.length === 0) return rows;
+
+  // If the table is not grouped, return all rows.
+  if (grouping.length === 0) return rows;
+
+  // If the row direction is VERTICAL, return only grouped rows.
   return rows.filter(({ getIsGrouped }) => getIsGrouped());
 }

package/src/components/Table/table.tsx

@@ -1,6 +1,6 @@
 import { TableContainer } from "@mui/material";
 import { RowData, Table as TanStackTable } from "@tanstack/react-table";
-import React, { Fragment, useRef } from "react";
+import React, { Fragment, useCallback } from "react";
 import { track } from "../../common/analytics/analytics";
 import {
   EVENT_NAME,
@@ -14,7 +14,6 @@ import {
 } from "../../hooks/useBreakpointHelper";
 import { useExploreMode } from "../../hooks/useExploreMode/useExploreMode";
 import { useExploreState } from "../../hooks/useExploreState";
-import { useScroll } from "../../hooks/useScroll";
 import { ExploreActionKind } from "../../providers/exploreState";
 import { TABLET } from "../../theme/common/breakpoints";
 import { Loading, LOADING_PANEL_STYLE } from "../Loading/loading";
@@ -26,6 +25,7 @@ import { TableBody } from "./components/TableBody/tableBody";
 import { TableHead } from "./components/TableHead/tableHead";
 import { TablePagination } from "./components/TablePagination/tablePagination";
 import { TableToolbar } from "./components/TableToolbar/tableToolbar";
+import { useVirtualization } from "./hooks/UseVirtualization/hook";
 import { GridTable } from "./table.styles";
 
 export interface TableProps<T extends RowData> {
@@ -39,7 +39,6 @@ export const Table = <T extends RowData>({
   loading,
   table,
 }: TableProps<T>): JSX.Element => {
-  const tableContainerRef = useRef<HTMLDivElement>(null);
   const tabletDown = useBreakpointHelper(BREAKPOINT_FN_NAME.DOWN, TABLET);
   const exploreMode = useExploreMode();
   const { exploreDispatch, exploreState } = useExploreState();
@@ -50,19 +49,20 @@ export const Table = <T extends RowData>({
   const rowDirection = tabletDown
     ? ROW_DIRECTION.VERTICAL
     : ROW_DIRECTION.DEFAULT;
+  const { rows, scrollElementRef, virtualizer } = useVirtualization({
+    rowDirection,
+    table,
+  });
 
   const {
-    getRowModel,
     getVisibleFlatColumns,
     nextPage: tableNextPage,
     previousPage: tablePreviousPage,
   } = table;
 
-  const { rows } = getRowModel();
   const noResults = !loading && (!rows || rows.length === 0);
-  const scrollTop = useScroll();
 
-  const handleTableNextPage = (): void => {
+  const handleTableNextPage = useCallback((): void => {
     let nextPage = tableNextPage;
     if (!clientFiltering) {
       nextPage = (): void => {
@@ -78,10 +78,9 @@ export const Table = <T extends RowData>({
       });
     }
     nextPage();
-    scrollTop();
-  };
+  }, [clientFiltering, exploreDispatch, exploreState, tableNextPage]);
 
-  const handleTablePreviousPage = (): void => {
+  const handleTablePreviousPage = useCallback((): void => {
     let previousPage = tablePreviousPage;
     if (!clientFiltering) {
       previousPage = (): void => {
@@ -96,8 +95,7 @@ export const Table = <T extends RowData>({
       });
     }
     previousPage();
-    scrollTop();
-  };
+  }, [clientFiltering, exploreDispatch, exploreState, tablePreviousPage]);
 
   function canNextPage(): boolean {
     return currentPage < pages;
@@ -118,7 +116,7 @@ export const Table = <T extends RowData>({
         loading={loading}
         panelStyle={LOADING_PANEL_STYLE.INHERIT}
       />
-      <TableContainer ref={tableContainerRef}>
+      <TableContainer ref={scrollElementRef}>
         <GridTable
           collapsable={true}
           gridTemplateColumns={getColumnTrackSizing(getVisibleFlatColumns())}
@@ -128,8 +126,8 @@ export const Table = <T extends RowData>({
           <TableBody
             rows={rows}
             rowDirection={rowDirection}
-            tableContainerRef={tableContainerRef}
             tableInstance={table}
+            virtualizer={virtualizer}
           />
         </GridTable>
       </TableContainer>

package/lib/hooks/useScroll.d.ts

@@ -1,10 +0,0 @@
-type ScrollType = "top" | "bottom";
-type UseScrollReturn = () => void;
-/**
- * Hook used to scroll the to top or bottom of the page.
- * This hook can only be used on the client-side.
- * @param scrollType - top or bottom of the page. Default = top
- * @returns scroll function
- */
-export declare const useScroll: (scrollType?: ScrollType) => UseScrollReturn;
-export {};

package/lib/hooks/useScroll.js

@@ -1,12 +0,0 @@
-import { useCallback } from "react";
-/**
- * Hook used to scroll the to top or bottom of the page.
- * This hook can only be used on the client-side.
- * @param scrollType - top or bottom of the page. Default = top
- * @returns scroll function
- */
-export const useScroll = (scrollType = "top") => {
-    return useCallback(() => window.scrollTo({
-        top: scrollType === "top" ? 0 : document.body.scrollHeight,
-    }), [scrollType]);
-};

package/src/hooks/useScroll.ts

@@ -1,21 +0,0 @@
-import { useCallback } from "react";
-
-type ScrollType = "top" | "bottom";
-
-type UseScrollReturn = () => void;
-
-/**
- * Hook used to scroll the to top or bottom of the page.
- * This hook can only be used on the client-side.
- * @param scrollType - top or bottom of the page. Default = top
- * @returns scroll function
- */
-export const useScroll = (scrollType: ScrollType = "top"): UseScrollReturn => {
-  return useCallback(
-    () =>
-      window.scrollTo({
-        top: scrollType === "top" ? 0 : document.body.scrollHeight,
-      }),
-    [scrollType]
-  );
-};