@databiosphere/findable-ui 39.0.0 → 39.1.0

package/.release-please-manifest.json

@@ -1,3 +1,3 @@
 {
-  ".": "39.0.0"
+  ".": "39.1.0"
 }

package/CHANGELOG.md

@@ -1,5 +1,12 @@
 # Changelog
 
+## [39.1.0](https://github.com/DataBiosphere/findable-ui/compare/v39.0.0...v39.1.0) (2025-07-24)
+
+
+### Features
+
+* add row ids to data dictionary table for anchor link scrolling ([#576](https://github.com/DataBiosphere/findable-ui/issues/576)) ([#577](https://github.com/DataBiosphere/findable-ui/issues/577)) ([bd7d05b](https://github.com/DataBiosphere/findable-ui/commit/bd7d05b451a7d9190b92fb682d892600cde17ba2))
+
 ## [39.0.0](https://github.com/DataBiosphere/findable-ui/compare/v38.3.0...v39.0.0) (2025-07-23)
 
 

package/lib/components/DataDictionary/components/Entities/entities.d.ts

@@ -1,4 +1,4 @@
 import { RowData } from "@tanstack/react-table";
 import { Attribute } from "../../../../common/entities";
 import { ClassesProps } from "./types";
-export declare const Entities: <T extends RowData = Attribute>({ spacing, table, }: ClassesProps<T>) => JSX.Element;
+export declare const Entities: <T extends RowData = Attribute>({ table, }: ClassesProps<T>) => JSX.Element;

package/lib/components/DataDictionary/components/Entities/entities.js

@@ -3,10 +3,10 @@ import React from "react";
 import { NoResults } from "../../../NoResults/noResults";
 import { Entity } from "../Entity/entity";
 import { GRID_PROPS, NO_RESULTS_PROPS } from "./constants";
-export const Entities = ({ spacing, table, }) => {
+export const Entities = ({ table, }) => {
     const { getGroupedRowModel } = table;
     const { rows } = getGroupedRowModel();
     if (rows.length === 0)
         return React.createElement(NoResults, { ...NO_RESULTS_PROPS });
-    return (React.createElement(Grid, { ...GRID_PROPS }, rows.map((row) => (React.createElement(Entity, { key: row.id, row: row, spacing: spacing, table: table })))));
+    return (React.createElement(Grid, { ...GRID_PROPS }, rows.map((row) => (React.createElement(Entity, { key: row.id, row: row, table: table })))));
 };

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

@@ -1,7 +1,5 @@
 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> {
-    spacing?: LayoutSpacing;
     table: Table<T>;
 }

package/lib/components/DataDictionary/components/Entity/entity.d.ts

@@ -1,4 +1,4 @@
 import { RowData } from "@tanstack/react-table";
 import { Attribute } from "../../../../common/entities";
 import { EntityProps } from "./types";
-export declare const Entity: <T extends RowData = Attribute>({ row, spacing, table, }: EntityProps<T>) => JSX.Element | null;
+export declare const Entity: <T extends RowData = Attribute>({ row, table, }: EntityProps<T>) => JSX.Element | null;

package/lib/components/DataDictionary/components/Entity/entity.js

@@ -6,7 +6,7 @@ import { Table } from "../Table/table";
 import { GRID_PROPS } from "./constants";
 import { StyledTypography } from "./entity.styles";
 import { getClassMeta } from "./utils";
-export const Entity = ({ row, spacing, table, }) => {
+export const Entity = ({ row, table, }) => {
     // Get class key from row.
     const classKey = row.getValue("classKey");
     // Get class metadata from table options.
@@ -16,10 +16,10 @@ export const Entity = ({ row, spacing, table, }) => {
         return null;
     return (React.createElement(Grid, { ...GRID_PROPS, rowGap: 4 },
         React.createElement(Grid, { ...GRID_PROPS, rowGap: 1 },
-            React.createElement(StyledTypography, { component: "h3", id: classKey, variant: TYPOGRAPHY_PROPS.VARIANT.TEXT_HEADING_SMALL, ...spacing },
+            React.createElement(StyledTypography, { component: "h3", id: classKey, variant: TYPOGRAPHY_PROPS.VARIANT.TEXT_HEADING_SMALL },
                 cls.title,
                 " ",
                 React.createElement(AnchorLink, { anchorLink: classKey })),
-            React.createElement(Typography, { color: TYPOGRAPHY_PROPS.COLOR.INK_LIGHT, component: "div", variant: TYPOGRAPHY_PROPS.VARIANT.TEXT_BODY_400_2_LINES }, cls.description)),
+            cls.description && (React.createElement(Typography, { color: TYPOGRAPHY_PROPS.COLOR.INK_LIGHT, component: "div", variant: TYPOGRAPHY_PROPS.VARIANT.TEXT_BODY_400_2_LINES }, cls.description))),
         React.createElement(Table, { row: row, table: table })));
 };

package/lib/components/DataDictionary/components/Entity/entity.styles.js

@@ -1,8 +1,6 @@
 import styled from "@emotion/styled";
 import { Typography } from "@mui/material";
 export const StyledTypography = styled(Typography) `
-  scroll-margin-top: ${({ top = 0 }) => top}px;
-
   &:hover a {
     opacity: 1;
   }

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

@@ -1,8 +1,6 @@
 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> {
     row: Row<T>;
-    spacing?: LayoutSpacing;
     table: Table<T>;
 }

package/lib/components/DataDictionary/components/Table/table.js

@@ -5,13 +5,11 @@ import { ROW_DIRECTION } from "../../../Table/common/entities";
 import { TableHead } from "../../../Table/components/TableHead/tableHead";
 import { GridTable } from "../../../Table/table.styles";
 import { getColumnTrackSizing } from "../../../TableCreator/options/columnTrackSizing/utils";
-import { RoundedPaper } from "../../../common/Paper/components/RoundedPaper/roundedPaper";
-import { GridPaper } from "../../../common/Paper/paper.styles";
+import { StyledRoundedPaper } from "./table.styles";
 export const Table = ({ row, table, }) => {
-    return (React.createElement(RoundedPaper, { elevation: 0 },
-        React.createElement(GridPaper, null,
-            React.createElement(TableContainer, null,
-                React.createElement(GridTable, { gridTemplateColumns: getColumnTrackSizing(table.getVisibleFlatColumns()) },
-                    React.createElement(TableHead, { tableInstance: table }),
-                    React.createElement(TableBody, { rowDirection: ROW_DIRECTION.DEFAULT, rows: row.getLeafRows(), tableInstance: table }))))));
+    return (React.createElement(StyledRoundedPaper, { elevation: 0 },
+        React.createElement(TableContainer, null,
+            React.createElement(GridTable, { gridTemplateColumns: getColumnTrackSizing(table.getVisibleFlatColumns()) },
+                React.createElement(TableHead, { tableInstance: table }),
+                React.createElement(TableBody, { rowDirection: ROW_DIRECTION.DEFAULT, rows: row.getLeafRows(), tableInstance: table })))));
 };

package/lib/components/DataDictionary/components/Table/table.styles.d.ts

@@ -0,0 +1,7 @@
+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;
+}, {}, {}>;

package/lib/components/DataDictionary/components/Table/table.styles.js

@@ -0,0 +1,8 @@
+import styled from "@emotion/styled";
+import { PALETTE } from "../../../../styles/common/constants/palette";
+import { RoundedPaper } from "../../../common/Paper/components/RoundedPaper/roundedPaper";
+export const StyledRoundedPaper = styled(RoundedPaper) `
+  background-color: ${PALETTE.SMOKE_MAIN};
+  display: grid;
+  gap: 1px;
+`;

package/lib/components/DataDictionary/dataDictionary.js

@@ -1,5 +1,7 @@
 import { Fade } from "@mui/material";
 import React from "react";
+import { PROPERTY } from "../../hooks/useHtmlStyle/constants";
+import { useHtmlStyle } from "../../hooks/useHtmlStyle/hook";
 import { useLayoutSpacing } from "../../hooks/UseLayoutSpacing/hook";
 import { Description } from "./components/Description/description";
 import { Entities } from "./components/Entities/entities";
@@ -30,6 +32,9 @@ export const DataDictionary = ({ className, dictionary, EntitiesLayout = Default
     const table = useTable(dictionary, classes, tableOptions);
     // Dictionary outline.
     const outline = buildClassesOutline(table);
+    // Update scroll-padding-top on the HTML element.
+    // Scroll-snaps table rows to below the sticky filters.
+    useHtmlStyle(PROPERTY.SCROLL_PADDING_TOP, `${dimensions.height}px`);
     return (React.createElement(Fade, { in: spacing.top > 0 },
         React.createElement(View, { className: className },
             React.createElement(TitleLayout, { ...spacing },
@@ -42,5 +47,5 @@ export const DataDictionary = ({ className, dictionary, EntitiesLayout = Default
             React.createElement(Fade, { in: dimensions.height > 0 },
                 React.createElement(EntitiesLayout, { spacing: entitiesSpacing },
                     React.createElement(Description, { description: description }),
-                    React.createElement(Entities, { spacing: entitiesSpacing, table: table }))))));
+                    React.createElement(Entities, { table: table }))))));
 };

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

@@ -10,7 +10,7 @@ export const CollapsableRows = ({ rows: leafOrSubRows, tableInstance, }) => {
     return (React.createElement(Fragment, null, (leafOrSubRows || rows).map((row) => {
         if (row.depth > 0)
             return null; // Hide sub rows.
-        return (React.createElement(StyledTableRow, { key: row.id, isPreview: row.getIsPreview() },
+        return (React.createElement(StyledTableRow, { key: row.id, id: row.id, isPreview: row.getIsPreview() },
             React.createElement(CollapsableCell, { isDisabled: isCollapsableRowDisabled(tableInstance), row: row })));
     })));
 };

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

@@ -10,7 +10,7 @@ export const TableRows = ({ rows: leafOrSubRows, tableInstance, tableView, }) =>
     const { tableCell } = tableView || {};
     const { size: tableCellSize = "medium" } = tableCell || {};
     return (React.createElement(Fragment, null, (leafOrSubRows || rows).map((row) => {
-        return (React.createElement(StyledTableRow, { key: row.id, canExpand: row.getCanExpand(), isExpanded: row.getIsExpanded(), isGrouped: row.getIsGrouped(), isPreview: row.getIsPreview(), onClick: () => handleToggleExpanded(row) }, row.getVisibleCells().map((cell) => {
+        return (React.createElement(StyledTableRow, { key: row.id, id: row.id, canExpand: row.getCanExpand(), isExpanded: row.getIsExpanded(), isGrouped: row.getIsGrouped(), isPreview: row.getIsPreview(), onClick: () => handleToggleExpanded(row) }, row.getVisibleCells().map((cell) => {
             if (cell.getIsAggregated())
                 return null; // Display of aggregated cells is currently not supported.
             if (cell.getIsPlaceholder())

package/lib/components/Index/index.styles.js

@@ -3,7 +3,9 @@ import { Grid } from "@mui/material";
 import { PALETTE } from "../../styles/common/constants/palette";
 import { mediaTabletDown } from "../../styles/common/mixins/breakpoints";
 import { FluidPaper } from "../common/Paper/components/FluidPaper/fluidPaper";
-export const StyledGridEntityView = styled(Grid) `
+export const StyledGridEntityView = styled(Grid, {
+    shouldForwardProp: (prop) => prop !== "bottom" && prop !== "top",
+}) `
   align-content: flex-start;
   display: grid;
   flex: 1;

package/lib/components/Table/components/TableCell/components/MarkdownCell/markdownCell.d.ts

@@ -1,3 +1,3 @@
 import { CellContext, RowData } from "@tanstack/react-table";
-import { BaseComponentProps } from "components/types";
+import { BaseComponentProps } from "../../../../../types";
 export declare const MarkdownCell: <T extends RowData, TValue extends string = string>({ className, column, getValue, row, table, }: BaseComponentProps & CellContext<T, TValue>) => JSX.Element | null;

package/lib/components/Table/components/TableCell/components/RankedCell/rankedCell.d.ts

@@ -1,3 +1,3 @@
 import { CellContext, RowData } from "@tanstack/react-table";
-import { BaseComponentProps } from "../../../../../types";
-export declare const RankedCell: <T extends RowData, TValue = string | undefined | null>({ className, column, getValue, row, table, }: BaseComponentProps & CellContext<T, TValue>) => JSX.Element | null;
+import { BaseComponentProps, ChildrenProps } from "../../../../../types";
+export declare const RankedCell: <T extends RowData, TValue = string | undefined | null>({ children, className, column, getValue, row, table, }: BaseComponentProps & CellContext<T, TValue> & ChildrenProps) => JSX.Element | null;

package/lib/components/Table/components/TableCell/components/RankedCell/rankedCell.js

@@ -1,6 +1,8 @@
 import React, { Fragment } from "react";
 import { getTokens, getTokensRegex, isRankedCell } from "./utils";
-export const RankedCell = ({ className, column, getValue, row, table, }) => {
+export const RankedCell = ({ 
+/* children - e.g. AnchorLink component */
+children, className, column, getValue, row, table, }) => {
     // Get the cell value.
     const value = getValue();
     // If the cell value is undefined or null, return null.
@@ -12,14 +14,20 @@ export const RankedCell = ({ className, column, getValue, row, table, }) => {
     const isRanked = isRankedCell(table, row, column.id);
     // Return the unranked cell, as-is.
     if (!isRanked)
-        return React.createElement(Fragment, null, stringValue);
+        return (React.createElement(Fragment, null,
+            stringValue,
+            children));
     // Tokenise the current global filter.
     const tokens = getTokens(table);
     // If there are no tokens, return the value as-is.
     if (tokens.length === 0)
-        return React.createElement(Fragment, null, stringValue);
+        return (React.createElement(Fragment, null,
+            stringValue,
+            children));
     // Create regex pattern.
     const regex = getTokensRegex(tokens);
     // Return the ranked cell, with highlighting.
-    return (React.createElement("span", { className: className }, stringValue.split(regex).map((part, i) => (React.createElement(Fragment, { key: i }, part.match(regex) ? React.createElement("mark", null, part) : part)))));
+    return (React.createElement("span", { className: className },
+        stringValue.split(regex).map((part, i) => (React.createElement(Fragment, { key: i }, part.match(regex) ? React.createElement("mark", null, part) : part))),
+        children));
 };

package/lib/components/common/AnchorLink/anchorLink.d.ts

@@ -1,3 +1,4 @@
+import { MouseEvent } from "react";
 /**
  * An anchor link component that provides deep linking functionality.
  * @important The parent element must have `position: relative` CSS property
@@ -7,6 +8,7 @@
 interface AnchorLinkProps {
     anchorLink: string;
     className?: string;
+    onClick?: (e: MouseEvent) => void;
 }
-export declare const AnchorLink: ({ anchorLink, className, }: AnchorLinkProps) => JSX.Element;
+export declare const AnchorLink: ({ anchorLink, className, onClick, }: AnchorLinkProps) => JSX.Element;
 export {};

package/lib/components/common/AnchorLink/anchorLink.js

@@ -2,8 +2,8 @@ import { LinkRounded } from "@mui/icons-material";
 import { useRouter } from "next/router";
 import React from "react";
 import { StyledNextLink } from "./anchorLink.styles";
-export const AnchorLink = ({ anchorLink, className, }) => {
+export const AnchorLink = ({ anchorLink, className, onClick, }) => {
     const { query } = useRouter();
-    return (React.createElement(StyledNextLink, { "aria-label": anchorLink, className: className, href: { hash: anchorLink, query } },
+    return (React.createElement(StyledNextLink, { "aria-label": anchorLink, className: className, href: { hash: anchorLink, query }, onClick: onClick },
         React.createElement(LinkRounded, { fontSize: "xsmall" })));
 };

package/lib/components/common/AnchorLink/anchorLink.styles.js

@@ -1,8 +1,8 @@
 import styled from "@emotion/styled";
 import Link from "next/link";
-import { inkLight } from "../../../styles/common/mixins/colors";
+import { PALETTE } from "../../../styles/common/constants/palette";
 export const StyledNextLink = styled(Link) `
-  color: ${inkLight};
+  color: ${PALETTE.INK_LIGHT};
   margin-left: 4px;
   opacity: 0;
   position: absolute;

package/lib/hooks/useHtmlStyle/constants.d.ts

@@ -0,0 +1,2 @@
+import { CSSPropHyphen } from "./types";
+export declare const PROPERTY: Record<string, CSSPropHyphen>;

package/lib/hooks/useHtmlStyle/constants.js

@@ -0,0 +1,3 @@
+export const PROPERTY = {
+    SCROLL_PADDING_TOP: "scroll-padding-top",
+};

package/lib/hooks/useHtmlStyle/hook.d.ts

@@ -0,0 +1,2 @@
+import { CSSPropHyphen } from "./types";
+export declare const useHtmlStyle: (property: CSSPropHyphen, value: string | null) => void;

package/lib/hooks/useHtmlStyle/hook.js

@@ -0,0 +1,18 @@
+import { useLayoutEffect } from "react";
+export const useHtmlStyle = (property, value) => {
+    useLayoutEffect(() => {
+        // Get the HTML element.
+        const el = document.documentElement;
+        // Get the previous value.
+        const previousValue = el.style.getPropertyValue(property);
+        if (value !== null)
+            el.style.setProperty(property, value);
+        return () => {
+            // Restore or remove property value on the HTML element.
+            if (previousValue)
+                el.style.setProperty(property, previousValue);
+            else
+                el.style.removeProperty(property);
+        };
+    }, [property, value]);
+};

package/lib/hooks/useHtmlStyle/types.d.ts

@@ -0,0 +1,2 @@
+import type * as CSS from "csstype";
+export type CSSPropHyphen = keyof CSS.PropertiesHyphen;

package/lib/hooks/useHtmlStyle/types.js

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

package/package.json

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

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

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

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

@@ -1,8 +1,6 @@
 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> {
-  spacing?: LayoutSpacing;
   table: Table<T>;
 }

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

@@ -1,10 +1,7 @@
 import styled from "@emotion/styled";
 import { Typography } from "@mui/material";
-import { LayoutSpacing } from "../../../../hooks/UseLayoutSpacing/types";
-
-export const StyledTypography = styled(Typography)<Partial<LayoutSpacing>>`
-  scroll-margin-top: ${({ top = 0 }) => top}px;
 
+export const StyledTypography = styled(Typography)`
   &:hover a {
     opacity: 1;
   }

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

@@ -12,7 +12,6 @@ import { getClassMeta } from "./utils";
 
 export const Entity = <T extends RowData = Attribute>({
   row,
-  spacing,
   table,
 }: EntityProps<T>): JSX.Element | null => {
   // Get class key from row.
@@ -32,17 +31,18 @@ export const Entity = <T extends RowData = Attribute>({
           component="h3"
           id={classKey}
           variant={TYPOGRAPHY_PROPS.VARIANT.TEXT_HEADING_SMALL}
-          {...spacing}
         >
           {cls.title} <AnchorLink anchorLink={classKey} />
         </StyledTypography>
-        <Typography
-          color={TYPOGRAPHY_PROPS.COLOR.INK_LIGHT}
-          component="div"
-          variant={TYPOGRAPHY_PROPS.VARIANT.TEXT_BODY_400_2_LINES}
-        >
-          {cls.description}
-        </Typography>
+        {cls.description && (
+          <Typography
+            color={TYPOGRAPHY_PROPS.COLOR.INK_LIGHT}
+            component="div"
+            variant={TYPOGRAPHY_PROPS.VARIANT.TEXT_BODY_400_2_LINES}
+          >
+            {cls.description}
+          </Typography>
+        )}
       </Grid>
       {/* Class attributes table */}
       <Table row={row} table={table} />

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

@@ -1,9 +1,7 @@
 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> {
   row: Row<T>;
-  spacing?: LayoutSpacing;
   table: Table<T>;
 }

package/src/components/DataDictionary/components/Table/table.styles.ts

@@ -0,0 +1,9 @@
+import styled from "@emotion/styled";
+import { PALETTE } from "../../../../styles/common/constants/palette";
+import { RoundedPaper } from "../../../common/Paper/components/RoundedPaper/roundedPaper";
+
+export const StyledRoundedPaper = styled(RoundedPaper)`
+  background-color: ${PALETTE.SMOKE_MAIN};
+  display: grid;
+  gap: 1px;
+`;

package/src/components/DataDictionary/components/Table/table.tsx

@@ -6,8 +6,7 @@ import { ROW_DIRECTION } from "../../../Table/common/entities";
 import { TableHead } from "../../../Table/components/TableHead/tableHead";
 import { GridTable } from "../../../Table/table.styles";
 import { getColumnTrackSizing } from "../../../TableCreator/options/columnTrackSizing/utils";
-import { RoundedPaper } from "../../../common/Paper/components/RoundedPaper/roundedPaper";
-import { GridPaper } from "../../../common/Paper/paper.styles";
+import { StyledRoundedPaper } from "./table.styles";
 import { TableProps } from "./types";
 
 export const Table = <T extends RowData>({
@@ -15,23 +14,21 @@ export const Table = <T extends RowData>({
   table,
 }: TableProps<T>): JSX.Element => {
   return (
-    <RoundedPaper elevation={0}>
-      <GridPaper>
-        <TableContainer>
-          <GridTable
-            gridTemplateColumns={getColumnTrackSizing(
-              table.getVisibleFlatColumns()
-            )}
-          >
-            <TableHead tableInstance={table} />
-            <TableBody
-              rowDirection={ROW_DIRECTION.DEFAULT}
-              rows={row.getLeafRows()}
-              tableInstance={table}
-            />
-          </GridTable>
-        </TableContainer>
-      </GridPaper>
-    </RoundedPaper>
+    <StyledRoundedPaper elevation={0}>
+      <TableContainer>
+        <GridTable
+          gridTemplateColumns={getColumnTrackSizing(
+            table.getVisibleFlatColumns()
+          )}
+        >
+          <TableHead tableInstance={table} />
+          <TableBody
+            rowDirection={ROW_DIRECTION.DEFAULT}
+            rows={row.getLeafRows()}
+            tableInstance={table}
+          />
+        </GridTable>
+      </TableContainer>
+    </StyledRoundedPaper>
   );
 };

package/src/components/DataDictionary/dataDictionary.tsx

@@ -2,6 +2,8 @@ import { Fade } from "@mui/material";
 import { RowData } from "@tanstack/react-table";
 import React from "react";
 import { Attribute } from "../../common/entities";
+import { PROPERTY } from "../../hooks/useHtmlStyle/constants";
+import { useHtmlStyle } from "../../hooks/useHtmlStyle/hook";
 import { useLayoutSpacing } from "../../hooks/UseLayoutSpacing/hook";
 import { Description } from "./components/Description/description";
 import { Entities } from "./components/Entities/entities";
@@ -48,6 +50,10 @@ export const DataDictionary = <T extends RowData = Attribute>({
   // Dictionary outline.
   const outline = buildClassesOutline<T>(table);
 
+  // Update scroll-padding-top on the HTML element.
+  // Scroll-snaps table rows to below the sticky filters.
+  useHtmlStyle(PROPERTY.SCROLL_PADDING_TOP, `${dimensions.height}px`);
+
   return (
     <Fade in={spacing.top > 0}>
       {/* Fade in when header is measured. */}
@@ -66,7 +72,7 @@ export const DataDictionary = <T extends RowData = Attribute>({
           {/* Fade in entities when filters are measured. */}
           <EntitiesLayout spacing={entitiesSpacing}>
             <Description description={description} />
-            <Entities spacing={entitiesSpacing} table={table} />
+            <Entities table={table} />
           </EntitiesLayout>
         </Fade>
       </View>

package/src/components/Detail/components/Table/components/TableRows/components/CollapsableRows/collapsableRows.tsx

@@ -27,7 +27,11 @@ export const CollapsableRows = <T extends RowData>({
       {(leafOrSubRows || rows).map((row) => {
         if (row.depth > 0) return null; // Hide sub rows.
         return (
-          <StyledTableRow key={row.id} isPreview={row.getIsPreview()}>
+          <StyledTableRow
+            key={row.id}
+            id={row.id}
+            isPreview={row.getIsPreview()}
+          >
             <CollapsableCell
               isDisabled={isCollapsableRowDisabled(tableInstance)}
               row={row}

package/src/components/Detail/components/Table/components/TableRows/tableRows.tsx

@@ -35,6 +35,7 @@ export const TableRows = <T extends RowData>({
         return (
           <StyledTableRow
             key={row.id}
+            id={row.id}
             canExpand={row.getCanExpand()}
             isExpanded={row.getIsExpanded()}
             isGrouped={row.getIsGrouped()}

package/src/components/Index/index.styles.ts

@@ -5,7 +5,9 @@ import { PALETTE } from "../../styles/common/constants/palette";
 import { mediaTabletDown } from "../../styles/common/mixins/breakpoints";
 import { FluidPaper } from "../common/Paper/components/FluidPaper/fluidPaper";
 
-export const StyledGridEntityView = styled(Grid)<LayoutSpacing>`
+export const StyledGridEntityView = styled(Grid, {
+  shouldForwardProp: (prop) => prop !== "bottom" && prop !== "top",
+})<LayoutSpacing>`
   align-content: flex-start;
   display: grid;
   flex: 1;

package/src/components/Table/components/TableCell/components/MarkdownCell/markdownCell.tsx

@@ -1,7 +1,7 @@
 import { CellContext, RowData } from "@tanstack/react-table";
-import { BaseComponentProps } from "components/types";
 import React from "react";
 import { COMPONENTS } from "../../../../../MarkdownRenderer/constants";
+import { BaseComponentProps } from "../../../../../types";
 import { getTokens, getTokensRegex, isRankedCell } from "../RankedCell/utils";
 import { StyledMarkdownRenderer } from "./markdownCell.styles";
 

package/src/components/Table/components/TableCell/components/RankedCell/rankedCell.tsx

@@ -1,18 +1,22 @@
 import { CellContext, RowData } from "@tanstack/react-table";
 import React, { Fragment } from "react";
-import { BaseComponentProps } from "../../../../../types";
+import { BaseComponentProps, ChildrenProps } from "../../../../../types";
 import { getTokens, getTokensRegex, isRankedCell } from "./utils";
 
 export const RankedCell = <
   T extends RowData,
   TValue = string | undefined | null
 >({
+  /* children - e.g. AnchorLink component */
+  children,
   className,
   column,
   getValue,
   row,
   table,
-}: BaseComponentProps & CellContext<T, TValue>): JSX.Element | null => {
+}: BaseComponentProps &
+  CellContext<T, TValue> &
+  ChildrenProps): JSX.Element | null => {
   // Get the cell value.
   const value = getValue();
 
@@ -26,13 +30,25 @@ export const RankedCell = <
   const isRanked = isRankedCell(table, row, column.id);
 
   // Return the unranked cell, as-is.
-  if (!isRanked) return <Fragment>{stringValue}</Fragment>;
+  if (!isRanked)
+    return (
+      <Fragment>
+        {stringValue}
+        {children}
+      </Fragment>
+    );
 
   // Tokenise the current global filter.
   const tokens = getTokens(table);
 
   // If there are no tokens, return the value as-is.
-  if (tokens.length === 0) return <Fragment>{stringValue}</Fragment>;
+  if (tokens.length === 0)
+    return (
+      <Fragment>
+        {stringValue}
+        {children}
+      </Fragment>
+    );
 
   // Create regex pattern.
   const regex = getTokensRegex(tokens);
@@ -45,6 +61,7 @@ export const RankedCell = <
           {part.match(regex) ? <mark>{part}</mark> : part}
         </Fragment>
       ))}
+      {children}
     </span>
   );
 };

package/src/components/common/AnchorLink/anchorLink.styles.ts

@@ -1,9 +1,9 @@
 import styled from "@emotion/styled";
 import Link from "next/link";
-import { inkLight } from "../../../styles/common/mixins/colors";
+import { PALETTE } from "../../../styles/common/constants/palette";
 
 export const StyledNextLink = styled(Link)`
-  color: ${inkLight};
+  color: ${PALETTE.INK_LIGHT};
   margin-left: 4px;
   opacity: 0;
   position: absolute;

package/src/components/common/AnchorLink/anchorLink.tsx

@@ -1,6 +1,6 @@
 import { LinkRounded } from "@mui/icons-material";
 import { useRouter } from "next/router";
-import React from "react";
+import React, { MouseEvent } from "react";
 import { StyledNextLink } from "./anchorLink.styles";
 
 /**
@@ -13,11 +13,13 @@ import { StyledNextLink } from "./anchorLink.styles";
 interface AnchorLinkProps {
   anchorLink: string;
   className?: string;
+  onClick?: (e: MouseEvent) => void;
 }
 
 export const AnchorLink = ({
   anchorLink,
   className,
+  onClick,
 }: AnchorLinkProps): JSX.Element => {
   const { query } = useRouter();
   return (
@@ -25,6 +27,7 @@ export const AnchorLink = ({
       aria-label={anchorLink}
       className={className}
       href={{ hash: anchorLink, query }}
+      onClick={onClick}
     >
       <LinkRounded fontSize="xsmall" />
     </StyledNextLink>

package/src/hooks/useHtmlStyle/constants.ts

@@ -0,0 +1,5 @@
+import { CSSPropHyphen } from "./types";
+
+export const PROPERTY: Record<string, CSSPropHyphen> = {
+  SCROLL_PADDING_TOP: "scroll-padding-top",
+};

package/src/hooks/useHtmlStyle/hook.ts

@@ -0,0 +1,23 @@
+import { useLayoutEffect } from "react";
+import { CSSPropHyphen } from "./types";
+
+export const useHtmlStyle = (
+  property: CSSPropHyphen,
+  value: string | null
+): void => {
+  useLayoutEffect(() => {
+    // Get the HTML element.
+    const el = document.documentElement;
+
+    // Get the previous value.
+    const previousValue = el.style.getPropertyValue(property);
+
+    if (value !== null) el.style.setProperty(property, value);
+
+    return (): void => {
+      // Restore or remove property value on the HTML element.
+      if (previousValue) el.style.setProperty(property, previousValue);
+      else el.style.removeProperty(property);
+    };
+  }, [property, value]);
+};

package/src/hooks/useHtmlStyle/types.ts

@@ -0,0 +1,3 @@
+import type * as CSS from "csstype";
+
+export type CSSPropHyphen = keyof CSS.PropertiesHyphen;