@databiosphere/findable-ui 35.1.0 → 36.0.0

package/.release-please-manifest.json

@@ -1,3 +1,3 @@
 {
-  ".": "35.1.0"
+  ".": "36.0.0"
 }

package/CHANGELOG.md

@@ -1,5 +1,32 @@
 # Changelog
 
+## [36.0.0](https://github.com/DataBiosphere/findable-ui/compare/v35.2.0...v36.0.0) (2025-06-18)
+
+
+### ⚠ BREAKING CHANGES
+
+* add global search to data dictionary ([#528](https://github.com/DataBiosphere/findable-ui/issues/528)) (#535)
+* add provider with reducer for data dictionary state ([#505](https://github.com/DataBiosphere/findable-ui/issues/505)) (#526)
+
+### Features
+
+* add filter tags to data dictionary ([#529](https://github.com/DataBiosphere/findable-ui/issues/529)) ([#536](https://github.com/DataBiosphere/findable-ui/issues/536)) ([30c368d](https://github.com/DataBiosphere/findable-ui/commit/30c368d97f9dfee89f82d108e0a4622a058da53e))
+* add global search to data dictionary ([#528](https://github.com/DataBiosphere/findable-ui/issues/528)) ([#535](https://github.com/DataBiosphere/findable-ui/issues/535)) ([d189f5f](https://github.com/DataBiosphere/findable-ui/commit/d189f5fe632f6949d76ac52c631ad0ea93070d56))
+* add provider with reducer for data dictionary state ([#505](https://github.com/DataBiosphere/findable-ui/issues/505)) ([#526](https://github.com/DataBiosphere/findable-ui/issues/526)) ([b17f412](https://github.com/DataBiosphere/findable-ui/commit/b17f412ab0358a43fd0e5faf5d009d253bd3c5a6))
+* highlight global search text in table results ([#533](https://github.com/DataBiosphere/findable-ui/issues/533)) ([#537](https://github.com/DataBiosphere/findable-ui/issues/537)) ([f9b8d24](https://github.com/DataBiosphere/findable-ui/commit/f9b8d2444ab34ad0a9aa5d4806eb0a88c7bc6d17))
+
+## [35.2.0](https://github.com/DataBiosphere/findable-ui/compare/v35.1.0...v35.2.0) (2025-06-16)
+
+
+### Features
+
+* add table <code> element ([#525](https://github.com/DataBiosphere/findable-ui/issues/525)) ([#527](https://github.com/DataBiosphere/findable-ui/issues/527)) ([02cb3b6](https://github.com/DataBiosphere/findable-ui/commit/02cb3b698b25a4295fc5ea2048541869301b918f))
+
+
+### Bug Fixes
+
+* make user request project metadata by clicking the request link button ([#530](https://github.com/DataBiosphere/findable-ui/issues/530)) ([#531](https://github.com/DataBiosphere/findable-ui/issues/531)) ([b645e0f](https://github.com/DataBiosphere/findable-ui/commit/b645e0fe5604dfc7fc195f91747d4a7985b39e4d))
+
 ## [35.1.0](https://github.com/DataBiosphere/findable-ui/compare/v35.0.3...v35.1.0) (2025-06-05)
 
 

package/lib/common/entities.d.ts

@@ -1,4 +1,4 @@
-import { ColumnDef, RowData, TableOptions } from "@tanstack/react-table";
+import { RowData, TableOptions } from "@tanstack/react-table";
 /**
  * Model of a value of a metadata class.
  */
@@ -63,10 +63,9 @@ export interface DataDictionary<T extends RowData = Attribute> {
  * dictionary) as well as column def for displaying the data dictionary.
  */
 export interface DataDictionaryConfig<T extends RowData = Attribute> {
-    columnDefs: ColumnDef<T, T[keyof T]>[];
     dataDictionary: DataDictionary<T>;
     path: string;
-    tableOptions?: Omit<TableOptions<T>, "columns" | "data" | "getCoreRowModel">;
+    tableOptions: Omit<TableOptions<T>, "data" | "getCoreRowModel">;
 }
 /**
  * Label and description values from a data dictionary that are added to a site

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

@@ -1,3 +1,5 @@
 import { GridProps } from "@mui/material";
-export declare const ENTITIES_ROW_GAP = 8;
+import { ComponentProps } from "react";
+import { NoResults } from "../../../NoResults/noResults";
 export declare const GRID_PROPS: GridProps;
+export declare const NO_RESULTS_PROPS: ComponentProps<typeof NoResults>;

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

@@ -1,7 +1,11 @@
-export const ENTITIES_ROW_GAP = 8;
+import { StyledRoundedPaper } from "./entities.styles";
 export const GRID_PROPS = {
     container: true,
     direction: "column",
     flexWrap: "nowrap",
-    rowGap: ENTITIES_ROW_GAP,
+    rowGap: 8,
+};
+export const NO_RESULTS_PROPS = {
+    Paper: StyledRoundedPaper,
+    title: "No results found",
 };

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

@@ -1,8 +1,12 @@
 import { Grid } from "@mui/material";
 import React from "react";
+import { NoResults } from "../../../NoResults/noResults";
 import { Entity } from "../Entity/entity";
-import { GRID_PROPS } from "./constants";
+import { GRID_PROPS, NO_RESULTS_PROPS } from "./constants";
 export const Entities = ({ spacing, table, }) => {
     const { getGroupedRowModel } = table;
-    return (React.createElement(Grid, { ...GRID_PROPS }, getGroupedRowModel().rows.map((row) => (React.createElement(Entity, { key: row.id, row: row, spacing: spacing, table: 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 })))));
 };

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

@@ -0,0 +1,3 @@
+export declare const StyledRoundedPaper: import("@emotion/styled").StyledComponent<import("../../../common/Paper/paper").PaperProps & import("react").RefAttributes<HTMLDivElement> & {
+    theme?: import("@emotion/react").Theme;
+}, {}, {}>;

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

@@ -0,0 +1,5 @@
+import styled from "@emotion/styled";
+import { RoundedPaper } from "../../../common/Paper/paper.styles";
+export const StyledRoundedPaper = styled(RoundedPaper) `
+  overflow: hidden;
+`;

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

@@ -1,14 +1,7 @@
 import styled from "@emotion/styled";
 import { Typography } from "@mui/material";
-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) `
-  scroll-margin-top: ${({ top = 0 }) => top + TOP}px;
+  scroll-margin-top: ${({ top = 0 }) => top}px;
 
   &:hover a {
     opacity: 1;

package/lib/components/DataDictionary/components/Filters/components/ColumnFilterTags/columnFilterTags.d.ts

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

package/lib/components/DataDictionary/components/Filters/components/ColumnFilterTags/columnFilterTags.js

@@ -0,0 +1,15 @@
+import { Button } from "@mui/material";
+import React from "react";
+import { BUTTON_PROPS } from "../../../../../../styles/common/mui/button";
+import { ColumnFilterTag } from "../../../../../Table/components/TableFeatures/ColumnFilter/components/ColumnFilterTag/columnFilterTag";
+import { StyledGrid } from "./columnFilterTags.styles";
+import { GRID_PROPS } from "./constants";
+export const ColumnFilterTags = ({ className, table, }) => {
+    const { getAllColumns, resetColumnFilters } = table;
+    const columns = getAllColumns().filter((column) => column.getIsFiltered());
+    if (columns.length === 0)
+        return null;
+    return (React.createElement(StyledGrid, { className: className, ...GRID_PROPS },
+        columns.map((column) => (React.createElement(ColumnFilterTag, { key: column.id, column: column }))),
+        React.createElement(Button, { onClick: () => resetColumnFilters(true), variant: BUTTON_PROPS.VARIANT.TEXT }, "Clear all")));
+};

package/lib/components/DataDictionary/components/Filters/components/ColumnFilterTags/columnFilterTags.styles.d.ts

@@ -0,0 +1,7 @@
+export declare const StyledGrid: import("@emotion/styled").StyledComponent<import("@mui/material").GridBaseProps & {
+    sx?: import("@mui/material").SxProps<import("@mui/material").Theme>;
+} & import("@mui/system").SystemProps<import("@mui/material").Theme> & 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;
+}, ("p" | "fontSize" | "fontWeight" | "lineHeight" | "letterSpacing" | "textTransform" | "color" | "border" | "borderTop" | "borderRight" | "borderBottom" | "borderLeft" | "borderColor" | "borderRadius" | "display" | "displayPrint" | "overflow" | "textOverflow" | "visibility" | "whiteSpace" | "flexBasis" | "flexDirection" | "flexWrap" | "justifyContent" | "alignItems" | "alignContent" | "order" | "flex" | "flexGrow" | "flexShrink" | "alignSelf" | "justifyItems" | "justifySelf" | "gap" | "columnGap" | "rowGap" | "gridColumn" | "gridRow" | "gridAutoFlow" | "gridAutoColumns" | "gridAutoRows" | "gridTemplateColumns" | "gridTemplateRows" | "gridTemplateAreas" | "gridArea" | "bgcolor" | "zIndex" | "position" | "top" | "right" | "bottom" | "left" | "boxShadow" | "width" | "maxWidth" | "minWidth" | "height" | "maxHeight" | "minHeight" | "boxSizing" | "m" | "mt" | "mr" | "mb" | "ml" | "mx" | "my" | "pt" | "pr" | "pb" | "pl" | "px" | "py" | "margin" | "marginTop" | "marginRight" | "marginBottom" | "marginLeft" | "marginX" | "marginY" | "marginInline" | "marginInlineStart" | "marginInlineEnd" | "marginBlock" | "marginBlockStart" | "marginBlockEnd" | "padding" | "paddingTop" | "paddingRight" | "paddingBottom" | "paddingLeft" | "paddingX" | "paddingY" | "paddingInline" | "paddingInlineStart" | "paddingInlineEnd" | "paddingBlock" | "paddingBlockStart" | "paddingBlockEnd" | "typography" | "fontFamily" | "fontStyle" | "textAlign") | "sx" | keyof import("@mui/material").GridBaseProps> & {
+    theme?: import("@emotion/react").Theme;
+}, {}, {}>;

package/lib/components/DataDictionary/components/Filters/components/ColumnFilterTags/columnFilterTags.styles.js

@@ -0,0 +1,7 @@
+import styled from "@emotion/styled";
+import { Grid } from "@mui/material";
+export const StyledGrid = styled(Grid) `
+  .MuiChip-root:last-of-type {
+    margin-right: 8px;
+  }
+`;

package/lib/components/DataDictionary/components/Filters/components/ColumnFilterTags/constants.d.ts

@@ -0,0 +1,2 @@
+import { GridProps } from "@mui/material";
+export declare const GRID_PROPS: GridProps;

package/lib/components/DataDictionary/components/Filters/components/ColumnFilterTags/constants.js

@@ -0,0 +1,6 @@
+export const GRID_PROPS = {
+    container: true,
+    direction: "row",
+    spacing: 2,
+    wrap: "wrap",
+};

package/lib/components/DataDictionary/components/Filters/components/ColumnFilterTags/types.d.ts

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

package/lib/components/DataDictionary/components/Filters/filters.js

@@ -1,7 +1,9 @@
 import React from "react";
+import { GlobalFilter } from "../../../Table/components/TableFeatures/GlobalFilter/globalFilter";
 import { ColumnFilters } from "./components/ColumnFilters/columnFilters";
 import { StyledGrid } from "./filters.styles";
 export const Filters = ({ table, }) => {
     return (React.createElement(StyledGrid, null,
+        React.createElement(GlobalFilter, { placeholder: "Search all attributes...", table: table }),
         React.createElement(ColumnFilters, { table: table })));
 };

package/lib/components/DataDictionary/components/Filters/filters.styles.js

@@ -1,13 +1,13 @@
 import styled from "@emotion/styled";
 import { Grid } from "@mui/material";
-import { BUTTON_GROUP_PROPS } from "../../../../styles/common/mui/buttonGroup";
+import { mediaTabletDown } from "../../../../styles/common/mixins/breakpoints";
 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;
+  ${mediaTabletDown} {
+    grid-template-columns: 1fr;
   }
 `;

package/lib/components/DataDictionary/components/Filters/stories/constants.d.ts

@@ -1,4 +1,5 @@
 import { PartialColumn } from "./types";
 export declare const BIONETWORK: PartialColumn;
+export declare const DESCRIPTION: PartialColumn;
 export declare const EXAMPLE: PartialColumn;
 export declare const REQUIRED: PartialColumn;

package/lib/components/DataDictionary/components/Filters/stories/constants.js

@@ -1,22 +1,38 @@
+import { fn } from "@storybook/test";
 export const BIONETWORK = {
     columnDef: { header: "BioNetwork" },
     getCanFilter: () => true,
+    getCanGlobalFilter: () => false,
     getFacetedUniqueValues: () => new Map([
         ["Nervous System", 3],
         ["Brain", 2],
         ["Lung", 1],
     ]),
+    getFilterValue: () => ["Nervous System", "Brain"],
     id: "bioNetwork",
+    setFilterValue: fn(),
+};
+export const DESCRIPTION = {
+    columnDef: { header: "Description" },
+    getCanFilter: () => false,
+    getCanGlobalFilter: () => true,
+    getFacetedUniqueValues: () => new Map([
+        ["Platform used for single cell library construction.", 1],
+        ["Platform used for sequencing.", 1],
+    ]),
+    id: "description",
 };
 export const EXAMPLE = {
     columnDef: { header: "Example" },
     getCanFilter: () => false,
+    getCanGlobalFilter: () => false,
     getFacetedUniqueValues: () => new Map([["EFO:0008563", 1]]),
     id: "example",
 };
 export const REQUIRED = {
     columnDef: { header: "Required" },
     getCanFilter: () => true,
+    getCanGlobalFilter: () => false,
     getFacetedUniqueValues: () => new Map([
         ["Required", 16],
         ["Not Required", 30],

package/lib/components/DataDictionary/components/Filters/stories/filters.stories.js

@@ -1,15 +1,21 @@
+import { Box } from "@mui/material";
 import { action } from "@storybook/addon-actions";
 import { functionalUpdate } from "@tanstack/react-table";
 import React from "react";
 import { Filters } from "../filters";
-import { BIONETWORK, EXAMPLE, REQUIRED } from "./constants";
-import { useFilterStore } from "./hook";
+import { BIONETWORK, DESCRIPTION, EXAMPLE, REQUIRED } from "./constants";
+import { useFilterStore, useGlobalFilterStore } from "./hook";
 const meta = {
     component: Filters,
+    decorators: [
+        (Story) => (React.createElement(Box, { sx: { width: 600 } },
+            React.createElement(Story, null))),
+    ],
 };
 export default meta;
 const DefaultStory = () => {
     const { filterStore, setFilterStore } = useFilterStore();
+    const { globalFilter, setGlobalFilter } = useGlobalFilterStore();
     const makeColumn = (column) => ({
         ...column,
         getFilterValue: () => filterStore[column.id],
@@ -22,7 +28,9 @@ const DefaultStory = () => {
         },
     });
     const table = {
-        getAllColumns: () => [REQUIRED, BIONETWORK, EXAMPLE].map(makeColumn),
+        getAllColumns: () => [DESCRIPTION, REQUIRED, BIONETWORK, EXAMPLE].map(makeColumn),
+        getState: () => ({ globalFilter }),
+        setGlobalFilter,
     };
     return React.createElement(Filters, { table: table });
 };

package/lib/components/DataDictionary/components/Filters/stories/hook.d.ts

@@ -3,3 +3,7 @@ export declare function useFilterStore(): {
     filterStore: Record<string, unknown>;
     setFilterStore: Dispatch<SetStateAction<Record<string, unknown>>>;
 };
+export declare function useGlobalFilterStore(): {
+    globalFilter: string | undefined;
+    setGlobalFilter: Dispatch<SetStateAction<string | undefined>>;
+};

package/lib/components/DataDictionary/components/Filters/stories/hook.js

@@ -3,3 +3,7 @@ export function useFilterStore() {
     const [filterStore, setFilterStore] = useState({});
     return { filterStore, setFilterStore };
 }
+export function useGlobalFilterStore() {
+    const [globalFilter, setGlobalFilter] = useState();
+    return { globalFilter, setGlobalFilter };
+}

package/lib/components/DataDictionary/components/Layout/components/EntitiesLayout/entitiesLayout.d.ts

@@ -1,2 +1,3 @@
+import React from "react";
 import { EntitiesLayoutProps } from "./types";
-export declare const EntitiesLayout: ({ children, ...props }: EntitiesLayoutProps) => JSX.Element;
+export declare const EntitiesLayout: React.ForwardRefExoticComponent<EntitiesLayoutProps & React.RefAttributes<HTMLDivElement>>;

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

@@ -1,5 +1,5 @@
-import React from "react";
+import React, { forwardRef } from "react";
 import { Layout } from "./entitiesLayout.styles";
-export const EntitiesLayout = ({ children, ...props }) => {
-    return React.createElement(Layout, { ...props }, children);
-};
+export const EntitiesLayout = forwardRef(function EntitiesLayout({ children, spacing, ...props }, ref) {
+    return (React.createElement(Layout, { ref: ref, ...spacing, ...props }, children));
+});

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

@@ -3,14 +3,11 @@ import { mediaTabletDown } from "../../../../../../styles/common/mixins/breakpoi
 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") `
   grid-column: 2;
   grid-row: 1;
   padding-bottom: ${PB}px;
-  padding-top: ${({ top }) => top + TITLE_HEIGHT + FILTERS_HEIGHT + PT}px;
+  padding-top: ${({ top }) => top}px;
   z-index: 1; /* not required, but helpful in that the entities are always on top */
 
   ${mediaTabletDown} {

package/lib/components/DataDictionary/components/Layout/components/EntitiesLayout/types.d.ts

@@ -1,5 +1,7 @@
-import { ReactNode } from "react";
+import { CSSProperties, ReactNode } from "react";
 import { LayoutSpacing } from "../../../../hooks/UseLayoutSpacing/types";
-export interface EntitiesLayoutProps extends LayoutSpacing {
+export interface EntitiesLayoutProps {
     children: ReactNode;
+    spacing: LayoutSpacing;
+    style?: CSSProperties;
 }

package/lib/components/DataDictionary/components/Layout/components/FiltersLayout/filtersLayout.d.ts

@@ -1,2 +1,3 @@
+import React from "react";
 import { FiltersLayoutProps } from "./types";
-export declare const FiltersLayout: ({ children, ...props }: FiltersLayoutProps) => JSX.Element;
+export declare const FiltersLayout: React.ForwardRefExoticComponent<FiltersLayoutProps & React.RefAttributes<HTMLDivElement>>;

package/lib/components/DataDictionary/components/Layout/components/FiltersLayout/filtersLayout.js

@@ -1,5 +1,5 @@
-import React from "react";
+import React, { forwardRef } from "react";
 import { Layout } from "./filtersLayout.styles";
-export const FiltersLayout = ({ children, ...props }) => {
-    return React.createElement(Layout, { ...props }, children);
-};
+export const FiltersLayout = forwardRef(function FiltersLayout({ children, ...props }, ref) {
+    return (React.createElement(Layout, { ref: ref, ...props }, children));
+});

package/lib/components/DataDictionary/components/Layout/components/FiltersLayout/filtersLayout.styles.js

@@ -8,9 +8,11 @@ const TITLE_HEIGHT = LAYOUT_SPACING.TITLE_HEIGHT; /* title height */
 export const Layout = styled("div") `
   align-self: flex-start;
   background-color: ${PALETTE.BACKGROUND_DEFAULT};
+  display: grid;
+  gap: 12px;
   grid-column: 2;
   grid-row: 1;
-  margin-bottom: ${PB}px;
+  padding-bottom: ${PB}px;
   padding-top: ${({ top }) => top + TITLE_HEIGHT + PT}px;
   position: sticky;
   top: 0;
@@ -20,5 +22,6 @@ export const Layout = styled("div") `
     grid-column: 1;
     grid-row: auto;
     padding-top: ${PT}px;
+    position: relative;
   }
 `;

package/lib/components/DataDictionary/components/Table/hook.d.ts

@@ -1,3 +1,3 @@
-import { ColumnDef, RowData, Table, TableOptions } from "@tanstack/react-table";
+import { RowData, Table, TableOptions } from "@tanstack/react-table";
 import { Attribute, Class } from "../../../../common/entities";
-export declare const useTable: <T extends RowData = Attribute>(classes: Class<T>[], columnDefs: ColumnDef<T, T[keyof T]>[], tableOptions?: Omit<TableOptions<T>, "columns" | "data" | "getCoreRowModel">) => Table<T>;
+export declare const useTable: <T extends RowData = Attribute>(dictionary: string, classes: Class<T>[], tableOptions: Omit<TableOptions<T>, "data" | "getCoreRowModel">) => Table<T>;

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

@@ -1,21 +1,25 @@
 import { useReactTable, } from "@tanstack/react-table";
 import { useMemo } from "react";
+import { useDataDictionaryState } from "../../../../providers/dataDictionaryState/hooks/UseDataDictionaryState/hook";
 import { useTableOptions } from "./options/hook";
 import { buildClassMeta, buildTableData } from "./utils";
-export const useTable = (classes, columnDefs, tableOptions) => {
-    // Build table data.
+export const useTable = (dictionary, classes, tableOptions) => {
+    // Table data.
     const data = useMemo(() => buildTableData(classes), [classes]);
     // Default table options.
     const defaultTableOptions = useTableOptions();
     // Build class meta.
     const classMeta = useMemo(() => buildClassMeta(classes), [classes]);
+    // Table state.
+    const { dataDictionaryState } = useDataDictionaryState();
+    const { dictionaries } = dataDictionaryState;
+    const { state = {} } = dictionaries?.[dictionary] || {};
     // Table instance.
     return useReactTable({
         ...defaultTableOptions,
         ...tableOptions,
-        columns: columnDefs,
         data,
-        manualPagination: true,
         meta: { classMeta },
+        state,
     });
 };

package/lib/components/DataDictionary/components/Table/options/columnFilters/constants.js

@@ -1,8 +1,9 @@
 import { getFilteredRowModel, } from "@tanstack/react-table";
 import { arrIncludesSome } from "../../../../../Table/columnDef/columnFilters/filterFn";
+import { fuzzy } from "../../../../../Table/columnDef/globalFilter/filterFn";
 export const COLUMN_FILTERS_OPTIONS = {
     enableColumnFilters: true,
     enableFilters: true,
-    filterFns: { arrIncludesSome },
+    filterFns: { arrIncludesSome, fuzzy },
     getFilteredRowModel: getFilteredRowModel(),
 };

package/lib/components/DataDictionary/components/Table/options/columnFilters/hook.d.ts

@@ -1,6 +1,3 @@
-import { ColumnFiltersOptions, ColumnFiltersState, RowData } from "@tanstack/react-table";
-import { Dispatch, SetStateAction } from "react";
+import { ColumnFiltersOptions, RowData } from "@tanstack/react-table";
 import { Attribute } from "../../../../../../common/entities";
-export declare const useColumnFiltersOptions: <T extends RowData = Attribute>({ setColumnFilters, }: {
-    setColumnFilters: Dispatch<SetStateAction<ColumnFiltersState>>;
-}) => ColumnFiltersOptions<T>;
+export declare const useColumnFiltersOptions: <T extends RowData = Attribute>() => ColumnFiltersOptions<T>;

package/lib/components/DataDictionary/components/Table/options/columnFilters/hook.js

@@ -1,12 +1,14 @@
 import { useCallback } from "react";
-import { resolveUpdater } from "../../../../../Table/options/updater";
+import { useDataDictionary } from "../../../../../../providers/dataDictionary/hook";
+import { updateColumnFilters } from "../../../../../../providers/dataDictionaryState/actions/updateColumnFilters/dispatch";
+import { useDataDictionaryState } from "../../../../../../providers/dataDictionaryState/hooks/UseDataDictionaryState/hook";
 import { COLUMN_FILTERS_OPTIONS } from "./constants";
-export const useColumnFiltersOptions = ({ setColumnFilters, }) => {
-    // Column filters change handler.
-    // TODO dispatch to provider with reducer.
+export const useColumnFiltersOptions = () => {
+    const { dictionary } = useDataDictionary();
+    const { dataDictionaryDispatch } = useDataDictionaryState();
     const onColumnFiltersChange = useCallback((updaterOrValue) => {
-        setColumnFilters((old) => resolveUpdater(updaterOrValue, old));
-    }, [setColumnFilters]);
+        dataDictionaryDispatch?.(updateColumnFilters({ dictionary, updaterOrValue }));
+    }, [dataDictionaryDispatch, dictionary]);
     return {
         ...COLUMN_FILTERS_OPTIONS,
         onColumnFiltersChange,

package/lib/components/DataDictionary/components/Table/options/globalFilter/constants.d.ts

@@ -0,0 +1,2 @@
+import { GlobalFilterOptions, RowData } from "@tanstack/react-table";
+export declare const GLOBAL_FILTER_OPTIONS: Pick<GlobalFilterOptions<RowData>, "enableGlobalFilter" | "getColumnCanGlobalFilter" | "globalFilterFn">;

package/lib/components/DataDictionary/components/Table/options/globalFilter/constants.js

@@ -0,0 +1,5 @@
+export const GLOBAL_FILTER_OPTIONS = {
+    enableGlobalFilter: true,
+    getColumnCanGlobalFilter: () => true,
+    globalFilterFn: "fuzzy",
+};

package/lib/components/DataDictionary/components/Table/options/globalFilter/hook.d.ts

@@ -0,0 +1,3 @@
+import { GlobalFilterOptions, RowData } from "@tanstack/react-table";
+import { Attribute } from "../../../../../../common/entities";
+export declare const useGlobalFilterOptions: <T extends RowData = Attribute>() => GlobalFilterOptions<T>;

package/lib/components/DataDictionary/components/Table/options/globalFilter/hook.js

@@ -0,0 +1,16 @@
+import { useCallback } from "react";
+import { useDataDictionary } from "../../../../../../providers/dataDictionary/hook";
+import { updateGlobalFilter } from "../../../../../../providers/dataDictionaryState/actions/updateGlobalFilter/dispatch";
+import { useDataDictionaryState } from "../../../../../../providers/dataDictionaryState/hooks/UseDataDictionaryState/hook";
+import { GLOBAL_FILTER_OPTIONS } from "./constants";
+export const useGlobalFilterOptions = () => {
+    const { dictionary } = useDataDictionary();
+    const { dataDictionaryDispatch } = useDataDictionaryState();
+    const onGlobalFilterChange = useCallback((updaterOrValue) => {
+        dataDictionaryDispatch?.(updateGlobalFilter({ dictionary, updaterOrValue }));
+    }, [dataDictionaryDispatch, dictionary]);
+    return {
+        ...GLOBAL_FILTER_OPTIONS,
+        onGlobalFilterChange,
+    };
+};

package/lib/components/DataDictionary/components/Table/options/hook.js

@@ -1,25 +1,27 @@
-import { useState } from "react";
 import { useColumnFiltersOptions } from "./columnFilters/hook";
 import { CORE_OPTIONS } from "./core/constants";
 import { EXPANDED_OPTIONS } from "./expanded/constants";
 import { FACETED_OPTIONS } from "./faceted/constants";
+import { useGlobalFilterOptions } from "./globalFilter/hook";
 import { GROUPING_OPTIONS } from "./grouping/constants";
+import { PAGINATION_OPTIONS } from "./pagination/constants";
 import { SORTING_OPTIONS } from "./sorting/constants";
 import { VISIBILITY_OPTIONS } from "./visibility/constants";
 export const useTableOptions = () => {
-    // Column filters state - to be moved to a provider with a reducer.
-    const [columnFilters, setColumnFilters] = useState([]);
     // Column filters options.
-    const columnFiltersOptions = useColumnFiltersOptions({ setColumnFilters });
+    const columnFiltersOptions = useColumnFiltersOptions();
+    // Global filter options.
+    const globalFilterOptions = useGlobalFilterOptions();
     // Table options.
     return {
         ...columnFiltersOptions,
         ...CORE_OPTIONS,
         ...EXPANDED_OPTIONS,
         ...FACETED_OPTIONS,
+        ...globalFilterOptions,
         ...GROUPING_OPTIONS,
+        ...PAGINATION_OPTIONS,
         ...SORTING_OPTIONS,
         ...VISIBILITY_OPTIONS,
-        state: { columnFilters },
     };
 };

package/lib/components/DataDictionary/components/Table/options/pagination/constants.d.ts

@@ -0,0 +1,2 @@
+import { PaginationOptions } from "@tanstack/react-table";
+export declare const PAGINATION_OPTIONS: Pick<PaginationOptions, "autoResetPageIndex">;

package/lib/components/DataDictionary/components/Table/options/pagination/constants.js

@@ -0,0 +1,3 @@
+export const PAGINATION_OPTIONS = {
+    autoResetPageIndex: false, // Temporary fix for hydration issue, see https://github.com/TanStack/table/issues/5026.
+};

package/lib/components/DataDictionary/dataDictionary.d.ts

@@ -1,4 +1,4 @@
 import { RowData } from "@tanstack/react-table";
 import { Attribute } from "../../common/entities";
 import { DataDictionaryProps } from "./types";
-export declare const DataDictionary: <T extends RowData = Attribute>({ className, EntitiesLayout, FiltersLayout, Outline, OutlineLayout, Title, TitleLayout, }: DataDictionaryProps) => JSX.Element;
+export declare const DataDictionary: <T extends RowData = Attribute>({ className, dictionary, EntitiesLayout, FiltersLayout, Outline, OutlineLayout, Title, TitleLayout, }: DataDictionaryProps) => JSX.Element;