@databiosphere/findable-ui 33.0.0 → 34.1.0

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/lib/views/ExploreView/exploreView.js

@@ -18,6 +18,7 @@ import { useExploreState } from "../../hooks/useExploreState";
 import { useSummary } from "../../hooks/useSummary";
 import { ExploreActionKind } from "../../providers/exploreState";
 import { SELECT_CATEGORY_KEY } from "../../providers/exploreState/constants";
+import { ExploreStateSyncProvider } from "../../providers/exploreStateSync/provider";
 import { TEST_IDS } from "../../tests/testIds";
 import { DESKTOP_SM } from "../../theme/common/breakpoints";
 export const ExploreView = (props) => {
@@ -98,7 +99,7 @@ export const ExploreView = (props) => {
             });
         }
     }, [entityListType, exploreDispatch]);
-    return (React.createElement(React.Fragment, null,
+    return (React.createElement(ExploreStateSyncProvider, null,
         categoryViews && !!categoryViews.length && (React.createElement(Sidebar, { drawerOpen: isDrawerOpen, onDrawerClose: onCloseDrawer },
             React.createElement(SidebarTools, { "data-testid": TEST_IDS.FILTER_CONTROLS },
                 React.createElement(SidebarLabel, { label: "Filters" }),

package/package.json

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

package/src/common/entities.ts

@@ -1,4 +1,4 @@
-import { ColumnDef, RowData } from "@tanstack/react-table";
+import { ColumnDef, RowData, TableOptions } from "@tanstack/react-table";
 
 /**
  * Model of a value of a metadata class.
@@ -6,6 +6,7 @@ import { ColumnDef, RowData } from "@tanstack/react-table";
 export interface Attribute {
   // 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
@@ -73,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;

package/src/components/DataDictionary/components/Entity/entity.tsx

@@ -4,28 +4,37 @@ import React from "react";
 import { Attribute } from "../../../../common/entities";
 import { TYPOGRAPHY_PROPS } from "../../../../styles/common/mui/typography";
 import { AnchorLink } from "../../../common/AnchorLink/anchorLink";
-import { useTable } from "../Table/hook";
 import { Table } from "../Table/table";
 import { GRID_PROPS } from "./constants";
 import { StyledTypography } from "./entity.styles";
 import { EntityProps } from "./types";
+import { getClassMeta } from "./utils";
 
 export const Entity = <T extends RowData = Attribute>({
-  class: cls,
-  columnDefs,
+  row,
   spacing,
-}: EntityProps<T>): JSX.Element => {
-  const table = useTable<T>(cls.attributes, columnDefs);
+  table,
+}: EntityProps<T>): JSX.Element | null => {
+  // Get class key from row.
+  const classKey = row.getValue<string>("classKey");
+
+  // Get class metadata from table options.
+  const cls = getClassMeta<T>(classKey, table);
+
+  // Class not found in table meta - return null.
+  if (!cls) return null;
+
   return (
     <Grid {...GRID_PROPS} rowGap={4}>
+      {/* Class title and description */}
       <Grid {...GRID_PROPS} rowGap={1}>
         <StyledTypography
           component="h3"
-          id={cls.name}
+          id={classKey}
           variant={TYPOGRAPHY_PROPS.VARIANT.TEXT_HEADING_SMALL}
           {...spacing}
         >
-          {cls.title} <AnchorLink anchorLink={cls.name} />
+          {cls.title} <AnchorLink anchorLink={classKey} />
         </StyledTypography>
         <Typography
           color={TYPOGRAPHY_PROPS.COLOR.INK_LIGHT}
@@ -35,7 +44,8 @@ export const Entity = <T extends RowData = Attribute>({
           {cls.description}
         </Typography>
       </Grid>
-      <Table table={table} />
+      {/* Class attributes table */}
+      <Table row={row} table={table} />
     </Grid>
   );
 };

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

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

package/src/components/DataDictionary/components/Entity/utils.ts

@@ -0,0 +1,25 @@
+import { RowData, Table } from "@tanstack/react-table";
+import { Attribute, Class } from "../../../../common/entities";
+import { ClassMeta } from "../Table/types";
+
+/**
+ * Retrieves class metadata from the table options meta.
+ * @param classKey - Class key.
+ * @param table - Table instance.
+ * @returns Class metadata or undefined.
+ */
+export function getClassMeta<T extends RowData = Attribute>(
+  classKey: string | undefined,
+  table: Table<T>
+): Pick<Class<T>, "description" | "title"> | undefined {
+  if (!classKey) return;
+
+  // Grab the table meta and return if not defined.
+  const meta = table.options.meta;
+  if (!meta) return;
+
+  // Return class metadata if defined.
+  if ("classMeta" in meta) {
+    return (meta.classMeta as ClassMeta)?.[classKey];
+  }
+}

package/src/components/DataDictionary/components/Filters/components/ColumnFilters/columnFilters.tsx

@@ -0,0 +1,21 @@
+import { ButtonGroup } from "@mui/material";
+import { RowData } from "@tanstack/react-table";
+import React from "react";
+import { Attribute } from "../../../../../../common/entities";
+import { BUTTON_GROUP_PROPS } from "../../../../../common/ButtonGroup/constants";
+import { ColumnFilter } from "../../../../../Table/components/TableFeatures/ColumnFilter/columnFilter";
+import { ColumnFiltersProps } from "./types";
+
+export const ColumnFilters = <T extends RowData = Attribute>({
+  table,
+}: ColumnFiltersProps<T>): JSX.Element => {
+  const columns = table.getAllColumns();
+  const columnFilters = columns.filter((column) => column.getCanFilter());
+  return (
+    <ButtonGroup {...BUTTON_GROUP_PROPS.SECONDARY_OUTLINED}>
+      {columnFilters.map((column) => (
+        <ColumnFilter key={column.id} column={column} />
+      ))}
+    </ButtonGroup>
+  );
+};

package/src/components/DataDictionary/components/Filters/components/ColumnFilters/types.ts

@@ -0,0 +1,6 @@
+import { RowData, Table } from "@tanstack/react-table";
+import { Attribute } from "../../../../../../common/entities";
+
+export interface ColumnFiltersProps<T extends RowData = Attribute> {
+  table: Table<T>;
+}

package/src/components/DataDictionary/components/Filters/filters.styles.ts

@@ -0,0 +1,14 @@
+import styled from "@emotion/styled";
+import { Grid } from "@mui/material";
+import { BUTTON_GROUP_PROPS } from "../../../../styles/common/mui/buttonGroup";
+
+export const StyledGrid = styled(Grid)`
+  align-items: center;
+  display: grid;
+  gap: 16px;
+  grid-template-columns: 1fr auto;
+
+  .${BUTTON_GROUP_PROPS.CLASSES.ROOT} {
+    grid-column: 2;
+  }
+`;

package/src/components/DataDictionary/components/Filters/filters.tsx

@@ -0,0 +1,16 @@
+import { RowData } from "@tanstack/react-table";
+import React from "react";
+import { Attribute } from "../../../../common/entities";
+import { ColumnFilters } from "./components/ColumnFilters/columnFilters";
+import { StyledGrid } from "./filters.styles";
+import { FiltersProps } from "./types";
+
+export const Filters = <T extends RowData = Attribute>({
+  table,
+}: FiltersProps<T>): JSX.Element => {
+  return (
+    <StyledGrid>
+      <ColumnFilters table={table} />
+    </StyledGrid>
+  );
+};

package/src/components/DataDictionary/components/Filters/stories/constants.ts

@@ -0,0 +1,31 @@
+import { PartialColumn } from "./types";
+
+export const BIONETWORK: PartialColumn = {
+  columnDef: { header: "BioNetwork" },
+  getCanFilter: () => true,
+  getFacetedUniqueValues: () =>
+    new Map([
+      ["Nervous System", 3],
+      ["Brain", 2],
+      ["Lung", 1],
+    ]),
+  id: "bioNetwork",
+};
+
+export const EXAMPLE: PartialColumn = {
+  columnDef: { header: "Example" },
+  getCanFilter: () => false,
+  getFacetedUniqueValues: () => new Map([["EFO:0008563", 1]]),
+  id: "example",
+};
+
+export const REQUIRED: PartialColumn = {
+  columnDef: { header: "Required" },
+  getCanFilter: () => true,
+  getFacetedUniqueValues: () =>
+    new Map([
+      ["Required", 16],
+      ["Not Required", 30],
+    ]),
+  id: "required",
+};

package/src/components/DataDictionary/components/Filters/stories/filters.stories.tsx

@@ -0,0 +1,42 @@
+import { action } from "@storybook/addon-actions";
+import { Meta, StoryObj } from "@storybook/react";
+import { functionalUpdate, Table } from "@tanstack/react-table";
+import React from "react";
+import { Filters } from "../filters";
+import { BIONETWORK, EXAMPLE, REQUIRED } from "./constants";
+import { useFilterStore } from "./hook";
+import { PartialColumn } from "./types";
+
+const meta: Meta<typeof Filters> = {
+  component: Filters,
+};
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+const DefaultStory = (): JSX.Element => {
+  const { filterStore, setFilterStore } = useFilterStore();
+
+  const makeColumn = (column: PartialColumn): PartialColumn => ({
+    ...column,
+    getFilterValue: () => filterStore[column.id],
+    getIsFiltered: () => !!filterStore[column.id],
+    setFilterValue: (updaterOrValue: unknown): unknown => {
+      const next = functionalUpdate(updaterOrValue, filterStore[column.id]);
+      setFilterStore({ ...filterStore, [column.id]: next });
+      action("setFilterValue")(next);
+      return next;
+    },
+  });
+
+  const table = {
+    getAllColumns: () => [REQUIRED, BIONETWORK, EXAMPLE].map(makeColumn),
+  } as Table<unknown>;
+
+  return <Filters table={table} />;
+};
+
+export const Default: Story = {
+  render: () => <DefaultStory />,
+};

package/src/components/DataDictionary/components/Filters/stories/hook.ts

@@ -0,0 +1,9 @@
+import { Dispatch, SetStateAction, useState } from "react";
+
+export function useFilterStore(): {
+  filterStore: Record<string, unknown>;
+  setFilterStore: Dispatch<SetStateAction<Record<string, unknown>>>;
+} {
+  const [filterStore, setFilterStore] = useState<Record<string, unknown>>({});
+  return { filterStore, setFilterStore };
+}

package/src/components/DataDictionary/components/Filters/stories/types.ts

@@ -0,0 +1,3 @@
+import { Column } from "@tanstack/react-table";
+
+export type PartialColumn = Partial<Column<unknown>> & { id: string };

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

@@ -0,0 +1,6 @@
+import { RowData, Table } from "@tanstack/react-table";
+import { Attribute } from "../../../../common/entities";
+
+export interface FiltersProps<T extends RowData = Attribute> {
+  table: Table<T>;
+}

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

@@ -5,13 +5,16 @@ import { LAYOUT_SPACING } from "../../constants";
 
 const PB = LAYOUT_SPACING.CONTENT_PADDING_BOTTOM; /* bottom padding */
 const PT = LAYOUT_SPACING.CONTENT_PADDING_TOP; /* top padding */
+const FILTERS_HEIGHT =
+  LAYOUT_SPACING.FILTERS_HEIGHT +
+  LAYOUT_SPACING.FILTERS_PADDING_TOP; /* filters height */
 const TITLE_HEIGHT = LAYOUT_SPACING.TITLE_HEIGHT; /* title height */
 
 export const Layout = styled("div")<LayoutSpacing>`
   grid-column: 2;
   grid-row: 1;
   padding-bottom: ${PB}px;
-  padding-top: ${({ top }) => top + TITLE_HEIGHT + PT}px;
+  padding-top: ${({ top }) => top + TITLE_HEIGHT + FILTERS_HEIGHT + PT}px;
   z-index: 1; /* not required, but helpful in that the entities are always on top */
 
   ${mediaTabletDown} {

package/src/components/DataDictionary/components/Layout/components/FiltersLayout/filtersLayout.styles.ts

@@ -0,0 +1,27 @@
+import styled from "@emotion/styled";
+import { PALETTE } from "../../../../../../styles/common/constants/palette";
+import { mediaTabletDown } from "../../../../../../styles/common/mixins/breakpoints";
+import { LayoutSpacing } from "../../../../hooks/UseLayoutSpacing/types";
+import { LAYOUT_SPACING } from "../../constants";
+
+const PB = LAYOUT_SPACING.FILTERS_PADDING_BOTTOM; /* bottom padding */
+const PT = LAYOUT_SPACING.FILTERS_PADDING_TOP; /* top padding */
+const TITLE_HEIGHT = LAYOUT_SPACING.TITLE_HEIGHT; /* title height */
+
+export const Layout = styled("div")<LayoutSpacing>`
+  align-self: flex-start;
+  background-color: ${PALETTE.BACKGROUND_DEFAULT};
+  grid-column: 2;
+  grid-row: 1;
+  margin-bottom: ${PB}px;
+  padding-top: ${({ top }) => top + TITLE_HEIGHT + PT}px;
+  position: sticky;
+  top: 0;
+  z-index: 2; /* required, filters should be on top of entities */
+
+  ${mediaTabletDown} {
+    grid-column: 1;
+    grid-row: auto;
+    padding-top: ${PT}px;
+  }
+`;

package/src/components/DataDictionary/components/Layout/components/FiltersLayout/filtersLayout.tsx

@@ -0,0 +1,10 @@
+import React from "react";
+import { Layout } from "./filtersLayout.styles";
+import { FiltersLayoutProps } from "./types";
+
+export const FiltersLayout = ({
+  children,
+  ...props
+}: FiltersLayoutProps): JSX.Element => {
+  return <Layout {...props}>{children}</Layout>;
+};

package/src/components/DataDictionary/components/Layout/components/FiltersLayout/types.ts

@@ -0,0 +1,6 @@
+import { ReactNode } from "react";
+import { LayoutSpacing } from "../../../../hooks/UseLayoutSpacing/types";
+
+export interface FiltersLayoutProps extends LayoutSpacing {
+  children: ReactNode;
+}

package/src/components/DataDictionary/components/Layout/components/OutlineLayout/outlineLayout.styles.ts

@@ -4,7 +4,7 @@ import { LayoutSpacing } from "../../../../hooks/UseLayoutSpacing/types";
 import { LAYOUT_SPACING } from "../../constants";
 
 const PB = LAYOUT_SPACING.CONTENT_PADDING_BOTTOM; /* bottom padding */
-const PT = LAYOUT_SPACING.CONTENT_PADDING_TOP; /* top padding */
+const PT = LAYOUT_SPACING.OUTLINE_PADDING_TOP; /* top padding */
 const TITLE_HEIGHT = LAYOUT_SPACING.TITLE_HEIGHT; /* title height */
 
 export const Layout = styled("div")<LayoutSpacing>`

package/src/components/DataDictionary/components/Layout/components/TitleLayout/titleLayout.styles.ts

@@ -9,6 +9,7 @@ export const Layout = styled("div")<LayoutSpacing>`
   padding-top: ${({ top }) => top}px; /* header height */
   position: sticky;
   top: 0;
+  z-index: 4;
 
   ${mediaTabletDown} {
     grid-column: 1;

package/src/components/DataDictionary/components/Layout/constants.ts

@@ -1,5 +1,9 @@
 export const LAYOUT_SPACING = {
   CONTENT_PADDING_BOTTOM: 24,
   CONTENT_PADDING_TOP: 16,
+  FILTERS_HEIGHT: 40,
+  FILTERS_PADDING_BOTTOM: 16,
+  FILTERS_PADDING_TOP: 16,
+  OUTLINE_PADDING_TOP: 16,
   TITLE_HEIGHT: 74,
 };

package/src/components/DataDictionary/components/Outline/utils.ts

@@ -1,21 +1,43 @@
-import { RowData } from "@tanstack/react-table";
-import { Attribute, Class } from "../../../../common/entities";
+import { RowData, Table } from "@tanstack/react-table";
+import { Attribute } from "../../../../common/entities";
 import { OutlineItem } from "../../../Layout/components/Outline/types";
+import { ClassMeta } from "../Table/types";
 
 /**
- * Returns outline items from classes.
- * @param classes - Class entities.
+ * Returns outline items from class metadata.
+ * @param table - Table instance.
  * @returns Outline items.
  */
 export function buildClassesOutline<T extends RowData = Attribute>(
-  classes: Class<T>[]
+  table: Table<T>
 ): OutlineItem[] {
-  return classes.map(({ name, title }) => {
-    return {
-      depth: 2,
-      disabled: false,
-      hash: name,
-      value: title,
-    };
-  });
+  const meta = table.options.meta;
+  if (!meta) return [];
+  if (!("classMeta" in meta)) return [];
+  return Object.entries(meta.classMeta as ClassMeta).map(
+    ([classKey, { title }]) => {
+      return {
+        depth: 2,
+        disabled: !hasGroupedRow(table, classKey),
+        hash: classKey,
+        value: title,
+      };
+    }
+  );
+}
+
+/**
+ * Returns true if a grouped row exists for a class key.
+ * @param table - Table instance.
+ * @param classKey - Class key.
+ * @returns True if a grouped row exists, false otherwise.
+ */
+function hasGroupedRow<T extends RowData = Attribute>(
+  table: Table<T>,
+  classKey: string
+): boolean {
+  const groupRow = table
+    .getGroupedRowModel()
+    .rows.find((row) => row.getValue("classKey") === classKey);
+  return !!groupRow;
 }

package/src/components/DataDictionary/components/Table/hook.ts

@@ -2,22 +2,34 @@ import {
   ColumnDef,
   RowData,
   Table,
+  TableOptions,
   useReactTable,
 } from "@tanstack/react-table";
-import { Attribute } from "../../../../common/entities";
+import { useMemo } from "react";
+import { Attribute, Class } from "../../../../common/entities";
 import { useTableOptions } from "./options/hook";
+import { buildClassMeta, buildTableData } from "./utils";
 
 export const useTable = <T extends RowData = Attribute>(
-  data: T[],
-  columnDefs: ColumnDef<T, T[keyof T]>[]
+  classes: Class<T>[],
+  columnDefs: ColumnDef<T, T[keyof T]>[],
+  tableOptions?: Omit<TableOptions<T>, "columns" | "data" | "getCoreRowModel">
 ): Table<T> => {
-  // Table options.
-  const tableOptions = useTableOptions<T>();
+  // Build table data.
+  const data = useMemo(() => buildTableData(classes), [classes]);
+
+  // Default table options.
+  const defaultTableOptions = useTableOptions<T>();
+
+  // Build class meta.
+  const classMeta = useMemo(() => buildClassMeta(classes), [classes]);
 
   // Table instance.
   return useReactTable<T>({
+    ...defaultTableOptions,
     ...tableOptions,
     columns: columnDefs,
     data,
+    meta: { classMeta },
   });
 };