@databiosphere/findable-ui 32.1.1 → 34.0.0

package/lib/components/Table/components/TableFeatures/ColumnFilter/columnFilter.js

@@ -0,0 +1,33 @@
+import { Checkbox, ListItemButton, ListItemText, Button as MButton, Typography, } from "@mui/material";
+import React, { Fragment } from "react";
+import { SVG_ICON_PROPS } from "../../../../../styles/common/mui/svgIcon";
+import { TYPOGRAPHY_PROPS } from "../../../../../styles/common/mui/typography";
+import { CheckedIcon } from "../../../../common/CustomIcon/components/CheckedIcon/checkedIcon";
+import { UncheckedIcon } from "../../../../common/CustomIcon/components/UncheckedIcon/uncheckedIcon";
+import { DropDownIcon } from "../../../../common/Form/components/Select/components/DropDownIcon/dropDownIcon";
+import { useMenu } from "../../../../common/Menu/hooks/useMenu";
+import { getColumnHeader } from "../../../common/utils";
+import { getSortedFacetedValues } from "../../../featureOptions/facetedColumn/utils";
+import { StyledMenu } from "./columnFilter.styles";
+import { MENU_PROPS } from "./constants";
+import { updater } from "./utils";
+/**
+ *  Column filter component with supported filter functions:
+ *  - `arrIncludesSome`
+ */
+export const ColumnFilter = ({ Button = MButton, className, column, ...props /* MuiMenuProps */ }) => {
+    const { anchorEl, onClose, onOpen, open } = useMenu();
+    const facetedUniqueValues = column.getFacetedUniqueValues();
+    const sortedValues = getSortedFacetedValues(facetedUniqueValues);
+    const filterValue = (column.getFilterValue() || []);
+    return (React.createElement(Fragment, null,
+        React.createElement(Button, { key: column.id, endIcon: React.createElement(DropDownIcon, { color: SVG_ICON_PROPS.COLOR.INK_LIGHT }), onClick: onOpen }, getColumnHeader(column)),
+        React.createElement(StyledMenu, { ...MENU_PROPS, ...props, className: className, anchorEl: anchorEl, onClose: onClose, open: open },
+            sortedValues.map(([value, occurrence]) => (React.createElement(ListItemButton, { key: String(value), selected: filterValue.includes(value), onClick: () => column.setFilterValue(updater(value)) },
+                React.createElement(Checkbox, { checked: filterValue.includes(value), checkedIcon: React.createElement(CheckedIcon, null), icon: React.createElement(UncheckedIcon, null) }),
+                React.createElement(ListItemText, { disableTypography: true, primary: React.createElement("span", null, String(value)), secondary: React.createElement(Typography, { color: TYPOGRAPHY_PROPS.COLOR.INK_LIGHT, variant: TYPOGRAPHY_PROPS.VARIANT.TEXT_BODY_SMALL_400 }, occurrence) })))),
+            React.createElement(ListItemButton, { disabled: !column.getIsFiltered(), onClick: () => column.setFilterValue(undefined) },
+                React.createElement(Typography, { color: column.getIsFiltered()
+                        ? TYPOGRAPHY_PROPS.COLOR.PRIMARY
+                        : TYPOGRAPHY_PROPS.COLOR.INHERIT, variant: TYPOGRAPHY_PROPS.VARIANT.TEXT_BODY_500 }, "Clear All")))));
+};

package/lib/components/Table/components/TableFeatures/ColumnFilter/columnFilter.styles.d.ts

@@ -0,0 +1,3 @@
+export declare const StyledMenu: import("@emotion/styled").StyledComponent<import("@mui/material").MenuProps & {
+    theme?: import("@emotion/react").Theme;
+}, {}, {}>;

package/lib/components/Table/components/TableFeatures/ColumnFilter/columnFilter.styles.js

@@ -0,0 +1,19 @@
+import styled from "@emotion/styled";
+import { Menu, menuClasses, paperClasses } from "@mui/material";
+import { MAX_LIST_HEIGHT_PX } from "../../../../Filter/common/constants";
+import { MuiListItemButtonRoot, MuiListItemTextRoot, } from "../../../../Filter/components/FilterList/filterList.styles";
+export const StyledMenu = styled(Menu) `
+  .${paperClasses.root} {
+    margin: 4px 0;
+    width: 288px;
+
+    .${menuClasses.list} {
+      max-height: ${MAX_LIST_HEIGHT_PX}px;
+      overflow-wrap: break-word;
+
+      ${MuiListItemButtonRoot}
+
+      ${MuiListItemTextRoot}
+    }
+  }
+`;

package/lib/components/Table/components/TableFeatures/ColumnFilter/constants.d.ts

@@ -0,0 +1,2 @@
+import { MenuProps } from "@mui/material";
+export declare const MENU_PROPS: Omit<MenuProps, "anchorEl" | "onClose" | "open">;

package/lib/components/Table/components/TableFeatures/ColumnFilter/constants.js

@@ -0,0 +1,14 @@
+export const MENU_PROPS = {
+    anchorOrigin: {
+        horizontal: "right",
+        vertical: "bottom",
+    },
+    marginThreshold: 8,
+    slotProps: {
+        paper: { variant: "menu" },
+    },
+    transformOrigin: {
+        horizontal: "right",
+        vertical: "top",
+    },
+};

package/lib/components/Table/components/TableFeatures/ColumnFilter/types.d.ts

@@ -0,0 +1,7 @@
+import { Button, MenuProps } from "@mui/material";
+import { Column, RowData } from "@tanstack/react-table";
+import { BaseComponentProps } from "../../../../types";
+export interface ColumnFilterProps<T extends RowData> extends BaseComponentProps, Omit<MenuProps, "anchorEl" | "onClose" | "open"> {
+    Button?: typeof Button;
+    column: Column<T>;
+}

package/lib/components/Table/components/TableFeatures/ColumnFilter/types.js

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

package/lib/components/Table/components/TableFeatures/ColumnFilter/utils.d.ts

@@ -0,0 +1,6 @@
+/**
+ * Returns an updater function for column filter.
+ * @param value - Value.
+ * @returns An updater function that returns the new filter value.
+ */
+export declare function updater(value: unknown): (old: unknown[] | undefined) => unknown[] | undefined;

package/lib/components/Table/components/TableFeatures/ColumnFilter/utils.js

@@ -0,0 +1,23 @@
+/**
+ * Returns an updater function for column filter.
+ * @param value - Value.
+ * @returns An updater function that returns the new filter value.
+ */
+export function updater(value) {
+    return (old) => {
+        // If no old value, return new value.
+        if (!old)
+            return [value];
+        // If value already exists, remove it.
+        if (old.includes(value)) {
+            // Filter out the value.
+            const next = old.filter((v) => v !== value);
+            // If no values remain, return undefined.
+            if (next.length === 0)
+                return undefined;
+            return next;
+        }
+        // Otherwise, add the value.
+        return [...old, value];
+    };
+}

package/lib/components/Table/featureOptions/facetedColumn/utils.d.ts

@@ -0,0 +1,6 @@
+/**
+ * Sorts Map entries by key.
+ * @param facetedValues - Map of faceted values.
+ * @returns Sorted array of [key, value] entries.
+ */
+export declare function getSortedFacetedValues(facetedValues: Map<unknown, number>): [unknown, number][];

package/lib/components/Table/featureOptions/facetedColumn/utils.js

@@ -0,0 +1,9 @@
+import { COLLATOR_CASE_INSENSITIVE } from "../../../../common/constants";
+/**
+ * Sorts Map entries by key.
+ * @param facetedValues - Map of faceted values.
+ * @returns Sorted array of [key, value] entries.
+ */
+export function getSortedFacetedValues(facetedValues) {
+    return [...facetedValues].sort((a, b) => COLLATOR_CASE_INSENSITIVE.compare(String(a), String(b)));
+}

package/lib/components/common/ButtonGroup/constants.d.ts

@@ -0,0 +1,2 @@
+import { ButtonGroupProps } from "@mui/material";
+export declare const BUTTON_GROUP_PROPS: Record<string, Partial<ButtonGroupProps>>;

package/lib/components/common/ButtonGroup/constants.js

@@ -0,0 +1,11 @@
+import { BUTTON_GROUP_PROPS as MUI_BUTTON_GROUP_PROPS } from "../../../styles/common/mui/buttonGroup";
+export const BUTTON_GROUP_PROPS = {
+    PRIMARY_CONTAINED: {
+        color: MUI_BUTTON_GROUP_PROPS.COLOR.PRIMARY,
+        variant: MUI_BUTTON_GROUP_PROPS.VARIANT.CONTAINED,
+    },
+    SECONDARY_OUTLINED: {
+        color: MUI_BUTTON_GROUP_PROPS.COLOR.SECONDARY,
+        variant: MUI_BUTTON_GROUP_PROPS.VARIANT.OUTLINED,
+    },
+};

package/lib/components/common/Tabs/tabs.styles.d.ts

@@ -9,7 +9,7 @@ export declare const TabScrollFuzz: import("@emotion/styled").StyledComponent<{
 } & Props, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, {}>;
 export declare const Tab: import("@emotion/styled").StyledComponent<import("@mui/material").TabOwnProps & Omit<import("@mui/material").ButtonBaseOwnProps, "classes"> & 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;
-}, "label" | "style" | "className" | "classes" | "tabIndex" | "children" | "sx" | "disabled" | "value" | "action" | "icon" | "centerRipple" | "disableRipple" | "disableTouchRipple" | "focusRipple" | "focusVisibleClassName" | "LinkComponent" | "onFocusVisible" | "TouchRippleProps" | "touchRippleRef" | "disableFocusRipple" | "wrapped" | "iconPosition"> & {
+}, "label" | "style" | "className" | "classes" | "tabIndex" | "children" | "sx" | "disabled" | "value" | "action" | "centerRipple" | "disableRipple" | "disableTouchRipple" | "focusRipple" | "focusVisibleClassName" | "LinkComponent" | "onFocusVisible" | "TouchRippleProps" | "touchRippleRef" | "disableFocusRipple" | "icon" | "wrapped" | "iconPosition"> & {
     theme?: import("@emotion/react").Theme;
 }, {}, {}>;
 export {};

package/lib/mocks/@storybook/addon-actions.d.ts

@@ -0,0 +1,9 @@
+import { jest } from "@jest/globals";
+/**
+ * Mock for Storybook's @storybook/addon-actions function.
+ * The mock keeps the same function signature as the real Storybook action,
+ * does not trigger any Storybook logic, and simply returns a Jest mock function
+ * for use in tests.
+ * @returns A Jest mock function.
+ */
+export declare const action: () => jest.Mock;

package/lib/mocks/@storybook/addon-actions.js

@@ -0,0 +1,9 @@
+import { jest } from "@jest/globals";
+/**
+ * Mock for Storybook's @storybook/addon-actions function.
+ * The mock keeps the same function signature as the real Storybook action,
+ * does not trigger any Storybook logic, and simply returns a Jest mock function
+ * for use in tests.
+ * @returns A Jest mock function.
+ */
+export const action = () => jest.fn();

package/lib/styles/common/mui/buttonGroup.d.ts

@@ -0,0 +1,13 @@
+import { ButtonGroupProps } from "@mui/material";
+type ButtonGroupPropsOptions = {
+    CLASSES: typeof CLASSES;
+    COLOR: typeof COLOR;
+    SIZE: typeof SIZE;
+    VARIANT: typeof VARIANT;
+};
+declare const CLASSES: Record<string, ButtonGroupProps["classes"]>;
+declare const COLOR: Record<string, ButtonGroupProps["color"]>;
+declare const SIZE: Record<string, ButtonGroupProps["size"]>;
+declare const VARIANT: Record<string, ButtonGroupProps["variant"]>;
+export declare const BUTTON_GROUP_PROPS: ButtonGroupPropsOptions;
+export {};

package/lib/styles/common/mui/buttonGroup.js

@@ -0,0 +1,34 @@
+import { buttonGroupClasses } from "@mui/material";
+const CLASSES = {
+    COLOR_PRIMARY: buttonGroupClasses.colorPrimary,
+    COLOR_SECONDARY: buttonGroupClasses.colorSecondary,
+    CONTAINED: buttonGroupClasses.contained,
+    GROUPED: buttonGroupClasses.grouped,
+    OUTLINED: buttonGroupClasses.outlined,
+    ROOT: buttonGroupClasses.root,
+};
+const COLOR = {
+    ERROR: "error",
+    INFO: "info",
+    INHERIT: "inherit",
+    PRIMARY: "primary",
+    SECONDARY: "secondary",
+    SUCCESS: "success",
+    WARNING: "warning",
+};
+const SIZE = {
+    LARGE: "large",
+    MEDIUM: "medium",
+    SMALL: "small",
+};
+const VARIANT = {
+    CONTAINED: "contained",
+    OUTLINED: "outlined",
+    TEXT: "text",
+};
+export const BUTTON_GROUP_PROPS = {
+    CLASSES,
+    COLOR,
+    SIZE,
+    VARIANT,
+};

package/lib/styles/common/mui/typography.js

@@ -3,11 +3,13 @@ const COLOR = {
     INHERIT: "inherit",
     INK_LIGHT: "ink.light",
     INK_MAIN: "ink.main",
+    PRIMARY: "primary",
 };
 const VARIANT = {
     INHERIT: "inherit",
     TEXT_BODY_400: "text-body-400",
     TEXT_BODY_400_2_LINES: "text-body-400-2lines",
+    TEXT_BODY_500: "text-body-500",
     TEXT_BODY_SMALL_400: "text-body-small-400",
     TEXT_HEADING_LARGE: "text-heading-large",
     TEXT_HEADING_SMALL: "text-heading-small",

package/lib/tests/mui/constants.d.ts

@@ -1,5 +1,6 @@
 export declare const MUI_CLASSES: {
     ACTIVE: string;
     COMPLETED: string;
+    DISABLED: string;
     SELECTED: string;
 };

package/lib/tests/mui/constants.js

@@ -1,5 +1,6 @@
 export const MUI_CLASSES = {
     ACTIVE: "Mui-active",
     COMPLETED: "Mui-completed",
+    DISABLED: "Mui-disabled",
     SELECTED: "Mui-selected",
 };

package/lib/tests/utils.d.ts

@@ -16,6 +16,12 @@ export declare function getLabelText<T extends HTMLElement = HTMLElement>(text:
  * @returns RegExp.
  */
 export declare function getStartsWithRegex(text: string): RegExp;
+/**
+ * Retrieves an element by its role.
+ * @param role - The role of the element.
+ * @returns The element.
+ */
+export declare function getRole<T extends HTMLElement = HTMLElement>(role: string): T;
 /**
  * Retrieves an element by its text content.
  * @param text - The text content of the element.

package/lib/tests/utils.js

@@ -24,6 +24,14 @@ export function getLabelText(text) {
 export function getStartsWithRegex(text) {
     return new RegExp(`^${escapeRegExp(text)}`);
 }
+/**
+ * Retrieves an element by its role.
+ * @param role - The role of the element.
+ * @returns The element.
+ */
+export function getRole(role) {
+    return screen.getByRole(role);
+}
 /**
  * Retrieves an element by its text content.
  * @param text - The text content of the element.

package/lib/theme/common/components.d.ts

@@ -40,12 +40,6 @@ export declare const MuiButton: (theme: Theme) => Components["MuiButton"];
  * @returns MuiButtonBase component theme styles.
  */
 export declare const MuiButtonBase: (theme: Theme) => Components["MuiButtonBase"];
-/**
- * MuiButtonGroup Component
- * @param theme - Theme.
- * @returns MuiButtonGroup component theme styles.
- */
-export declare const MuiButtonGroup: (theme: Theme) => Components["MuiButtonGroup"];
 /**
  * MuiCard Component
  */

package/lib/theme/common/components.js

@@ -2,6 +2,7 @@ import { DropDownIcon } from "../../components/common/Form/components/Select/com
 import { COLOR_MIXES } from "../../styles/common/constants/colorMixes";
 import { PALETTE } from "../../styles/common/constants/palette";
 import { SHADOWS } from "../../styles/common/constants/shadows";
+import { BUTTON_PROPS } from "../../styles/common/mui/button";
 import { CHIP_PROPS } from "../../styles/common/mui/chip";
 import { desktopUp, mobileUp, tabletUp } from "./breakpoints";
 import { TEXT_BODY_400, TEXT_BODY_400_2_LINES, TEXT_BODY_500, TEXT_BODY_SMALL_400, TEXT_BODY_SMALL_500, TEXT_HEADING, TEXT_HEADING_SMALL, } from "./typography";
@@ -183,6 +184,22 @@ export const MuiButton = (theme) => {
             },
             endIcon: {
                 margin: 0,
+                variants: [
+                    {
+                        props: { size: BUTTON_PROPS.SIZE.MEDIUM },
+                        style: {
+                            marginLeft: -6,
+                            marginRight: -6,
+                        },
+                    },
+                    {
+                        props: { size: BUTTON_PROPS.SIZE.SMALL },
+                        style: {
+                            marginLeft: -6,
+                            marginRight: -6,
+                        },
+                    },
+                ],
             },
             outlinedSecondary: {
                 backgroundColor: "transparent",
@@ -298,37 +315,6 @@ export const MuiButtonBase = (theme) => {
         },
     };
 };
-/**
- * MuiButtonGroup Component
- * @param theme - Theme.
- * @returns MuiButtonGroup component theme styles.
- */
-export const MuiButtonGroup = (theme) => {
-    return {
-        defaultProps: {
-            disableElevation: true,
-            disableRipple: true,
-        },
-        styleOverrides: {
-            grouped: {
-                minWidth: 0,
-                padding: "6px 8px",
-            },
-            groupedContainedPrimary: {
-                borderColor: theme.palette.primary.dark,
-                boxShadow: `0 1px 0 0 ${theme.palette.primary.dark}`,
-                // eslint-disable-next-line sort-keys -- disabling key order for readability
-                "&:hover": {
-                    boxShadow: `0 1px 0 0 ${theme.palette.primary.dark}`,
-                },
-                // eslint-disable-next-line sort-keys -- disabling key order for readability
-                "&:active": {
-                    boxShadow: "none",
-                },
-            },
-        },
-    };
-};
 /**
  * MuiCard Component
  */

package/lib/theme/components/index.d.ts

@@ -1,3 +1,4 @@
 export { MuiAlert } from "./muiAlert";
 export { MuiAlertTitle } from "./muiAlertTitle";
+export { MuiButtonGroup } from "./muiButtonGroup";
 export { MuiTableCell } from "./muiTableCell";

package/lib/theme/components/index.js

@@ -1,3 +1,4 @@
 export { MuiAlert } from "./muiAlert";
 export { MuiAlertTitle } from "./muiAlertTitle";
+export { MuiButtonGroup } from "./muiButtonGroup";
 export { MuiTableCell } from "./muiTableCell";

package/lib/theme/components/muiButtonGroup.d.ts

@@ -0,0 +1,2 @@
+import { Components } from "@mui/material";
+export declare const MuiButtonGroup: Components["MuiButtonGroup"];

package/lib/theme/components/muiButtonGroup.js

@@ -0,0 +1,76 @@
+import { COLOR_MIXES } from "../../styles/common/constants/colorMixes";
+import { PALETTE } from "../../styles/common/constants/palette";
+import { BUTTON_GROUP_PROPS } from "../../styles/common/mui/buttonGroup";
+const SELECTORS = {
+    GROUPED: `.${BUTTON_GROUP_PROPS.CLASSES.GROUPED}`,
+};
+export const MuiButtonGroup = {
+    defaultProps: {
+        disableElevation: true,
+        disableRipple: true,
+    },
+    styleOverrides: {
+        root: {
+            variants: [
+                /* PRIMARY CONTAINED */
+                {
+                    props: {
+                        color: BUTTON_GROUP_PROPS.COLOR.PRIMARY,
+                        variant: BUTTON_GROUP_PROPS.VARIANT.CONTAINED,
+                    },
+                    style: {
+                        [SELECTORS.GROUPED]: {
+                            borderColor: PALETTE.PRIMARY_DARK,
+                            boxShadow: `0 1px 0 0 ${PALETTE.PRIMARY_DARK}`,
+                            minWidth: 0,
+                            // eslint-disable-next-line sort-keys -- disabling key order for readability
+                            "&:hover": {
+                                boxShadow: `0 1px 0 0 ${PALETTE.PRIMARY_DARK}`,
+                            },
+                            // eslint-disable-next-line sort-keys -- disabling key order for readability
+                            "&:active": {
+                                boxShadow: "none",
+                            },
+                        },
+                    },
+                },
+                /* SECONDARY OUTLINED */
+                {
+                    props: {
+                        color: BUTTON_GROUP_PROPS.COLOR.SECONDARY,
+                        variant: BUTTON_GROUP_PROPS.VARIANT.OUTLINED,
+                    },
+                    style: {
+                        [SELECTORS.GROUPED]: {
+                            backgroundColor: PALETTE.COMMON_WHITE,
+                            boxShadow: `inset 0 0 0 1px ${PALETTE.SMOKE_DARK}, 0 1px 0 0 ${COLOR_MIXES.COMMON_BLACK_08}`,
+                            color: PALETTE.INK_MAIN,
+                            minWidth: 0,
+                            // eslint-disable-next-line sort-keys -- disabling key order for readability
+                            "&:hover": {
+                                backgroundColor: PALETTE.SMOKE_LIGHTEST,
+                                boxShadow: `inset 0 0 0 1px ${PALETTE.SMOKE_DARK}, 0 1px 0 0 ${COLOR_MIXES.COMMON_BLACK_08}`,
+                            },
+                            // eslint-disable-next-line sort-keys -- disabling key order for readability
+                            "&:active": {
+                                backgroundColor: PALETTE.SMOKE_LIGHTEST,
+                                boxShadow: `inset 0 0 0 1px ${PALETTE.SMOKE_DARK}`,
+                            },
+                        },
+                    },
+                },
+                /* SMALL */
+                {
+                    props: {
+                        size: BUTTON_GROUP_PROPS.SIZE.SMALL,
+                    },
+                    style: {
+                        [SELECTORS.GROUPED]: {
+                            padding: "6px 8px",
+                        },
+                    },
+                },
+            ],
+        },
+    },
+};

package/lib/theme/theme.js

@@ -69,7 +69,7 @@ export function createAppTheme(customOptions = {}) {
         MuiBreadcrumbs: C.MuiBreadcrumbs(theme),
         MuiButton: C.MuiButton(theme),
         MuiButtonBase: C.MuiButtonBase(theme),
-        MuiButtonGroup: C.MuiButtonGroup(theme),
+        MuiButtonGroup: M.MuiButtonGroup,
         MuiCard: C.MuiCard,
         MuiCheckbox: C.MuiCheckbox(theme),
         MuiChip: C.MuiChip(theme),

package/package.json

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

package/src/common/categories/config/utils.ts

@@ -13,10 +13,13 @@ export function findCategoryConfig<V extends VIEW_KIND>(
   viewKind: V,
   key: Category["key"],
   configs: CategoryConfig[]
-): Extract<CategoryConfig, { viewKind: V }> | undefined {
+): Extract<CategoryConfig, { viewKind?: V }> | undefined {
   return configs.find(
-    (c): c is Extract<CategoryConfig, { viewKind: V }> =>
-      c.viewKind === viewKind && c.key === key
+    (c): c is Extract<CategoryConfig, { viewKind?: V }> =>
+      // When `viewKind` is undefined, it corresponds to a `SelectCategoryConfig`.
+      // This predicate ensures that `viewKind` is either explicitly matched or treated as undefined
+      // for compatibility with `SelectCategoryConfig` and other explicitly defined view kinds.
+      (c.viewKind === undefined || c.viewKind === viewKind) && c.key === key
   );
 }
 

package/src/common/entities.ts

@@ -1,12 +1,12 @@
-import { ColumnDef, RowData } from "@tanstack/react-table";
+import { ColumnDef, RowData, TableOptions } from "@tanstack/react-table";
 
 /**
  * Model of a value of a metadata class.
  */
 export interface Attribute {
-  annotations?: {
-    [key in keyof DataDictionaryPrefix]: string; // Prefix to fragment mapping, e.g. cxg: "batch_condition".
-  };
+  // Prefix to fragment mapping, e.g. cxg: "batch_condition", or, general tags e.g. tier: "Tier 1" and bionetwork: ["gut"]
+  annotations?: Record<string, string | string[] | undefined>; // 'undefined' allows for mix of keys across attributes e.g. tier, or tier and cxg, or cxg
+  classKey?: string; // Programmatic class name or key (e.g. cell, sample) the attribute belongs to.
   description: string;
   example?: string; // Free text example of attribute
   multivalued: boolean; // True if attribute can have multiple values
@@ -74,6 +74,7 @@ export interface DataDictionary<T extends RowData = Attribute> {
 export interface DataDictionaryConfig<T extends RowData = Attribute> {
   columnDefs: ColumnDef<T, T[keyof T]>[];
   dataDictionary: DataDictionary<T>;
+  tableOptions?: Omit<TableOptions<T>, "columns" | "data" | "getCoreRowModel">;
 }
 
 /**

package/src/components/DataDictionary/components/Entities/entities.tsx

@@ -7,19 +7,15 @@ import { GRID_PROPS } from "./constants";
 import { ClassesProps } from "./types";
 
 export const Entities = <T extends RowData = Attribute>({
-  classes,
-  columnDefs,
   spacing,
+  table,
 }: ClassesProps<T>): JSX.Element => {
+  const { getGroupedRowModel } = table;
   return (
     <Grid {...GRID_PROPS}>
-      {classes.map((cls) => (
-        <Entity
-          key={cls.name}
-          class={cls}
-          columnDefs={columnDefs}
-          spacing={spacing}
-        />
+      {/* Render grouped rows where each "group" is a class e.g. "donor" */}
+      {getGroupedRowModel().rows.map((row) => (
+        <Entity key={row.id} row={row} spacing={spacing} table={table} />
       ))}
     </Grid>
   );

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

@@ -1,9 +1,8 @@
-import { ColumnDef, RowData } from "@tanstack/react-table";
-import { Attribute, Class } from "../../../../common/entities";
+import { RowData, Table } from "@tanstack/react-table";
+import { Attribute } from "../../../../common/entities";
 import { LayoutSpacing } from "../../hooks/UseLayoutSpacing/types";
 
 export interface ClassesProps<T extends RowData = Attribute> {
-  classes: Class<T>[];
-  columnDefs: ColumnDef<T, T[keyof T]>[];
   spacing?: LayoutSpacing;
+  table: Table<T>;
 }

package/src/components/DataDictionary/components/Entity/entity.styles.ts

@@ -2,9 +2,17 @@ import styled from "@emotion/styled";
 import { Typography } from "@mui/material";
 import { LayoutSpacing } from "../../hooks/UseLayoutSpacing/types";
 import { ENTITIES_ROW_GAP } from "../Entities/constants";
+import { LAYOUT_SPACING } from "../Layout/constants";
+
+const TOP =
+  ENTITIES_ROW_GAP +
+  LAYOUT_SPACING.TITLE_HEIGHT +
+  LAYOUT_SPACING.FILTERS_HEIGHT +
+  LAYOUT_SPACING.FILTERS_PADDING_TOP +
+  LAYOUT_SPACING.CONTENT_PADDING_TOP;
 
 export const StyledTypography = styled(Typography)<Partial<LayoutSpacing>>`
-  scroll-margin-top: ${({ top = 0 }) => top + ENTITIES_ROW_GAP}px;
+  scroll-margin-top: ${({ top = 0 }) => top + TOP}px;
 
   &:hover a {
     opacity: 1;