@databiosphere/findable-ui 27.0.0 → 28.0.1

package/.release-please-manifest.json

@@ -1,3 +1,3 @@
 {
-  ".": "27.0.0"
+  ".": "28.0.1"
 }

package/CHANGELOG.md

@@ -1,5 +1,29 @@
 # Changelog
 
+## [28.0.1](https://github.com/DataBiosphere/findable-ui/compare/v28.0.0...v28.0.1) (2025-04-30)
+
+
+### Bug Fixes
+
+* fix observable plot y-scale warning caused by numeric strings ([#449](https://github.com/DataBiosphere/findable-ui/issues/449)) ([#450](https://github.com/DataBiosphere/findable-ui/issues/450)) ([53df97a](https://github.com/DataBiosphere/findable-ui/commit/53df97a8508c822aef48aac4c71646cfddc0b605))
+
+## [28.0.0](https://github.com/DataBiosphere/findable-ui/compare/v27.0.0...v28.0.0) (2025-04-30)
+
+
+### ⚠ BREAKING CHANGES
+
+* chart view - for client side filtering ([#447](https://github.com/DataBiosphere/findable-ui/issues/447)) (#448)
+
+### Features
+
+* chart view - change 'per' to 'by' in chart titles ([#442](https://github.com/DataBiosphere/findable-ui/issues/442)) ([#445](https://github.com/DataBiosphere/findable-ui/issues/445)) ([52d2cc9](https://github.com/DataBiosphere/findable-ui/commit/52d2cc94129d0c3883b2f6c6c3b6b6eeb36d995c))
+* chart view add percentage to counts ([#441](https://github.com/DataBiosphere/findable-ui/issues/441)) ([#443](https://github.com/DataBiosphere/findable-ui/issues/443)) ([ca609bb](https://github.com/DataBiosphere/findable-ui/commit/ca609bba7fb6d55a2b4112ac989bed1726c72872))
+
+
+### Bug Fixes
+
+* chart view - for client side filtering ([#447](https://github.com/DataBiosphere/findable-ui/issues/447)) ([#448](https://github.com/DataBiosphere/findable-ui/issues/448)) ([d35ffb1](https://github.com/DataBiosphere/findable-ui/commit/d35ffb16aaf8fca967430f1abf1293927c6873f2))
+
 ## [27.0.0](https://github.com/DataBiosphere/findable-ui/compare/v26.0.0...v27.0.0) (2025-04-24)
 
 

package/lib/components/Index/components/EntitiesView/components/ChartView/chartView.js

@@ -14,7 +14,7 @@ export const ChartView = ({ categoryFilters, entityName, loading, testId, }) =>
         React.createElement(StyledGrid, { "data-testid": testId, ref: chartViewRef }, selectCategoryViews.map(({ key, label, values }) => (React.createElement(StyledGridPaperSection, { key: key },
             React.createElement(Typography, { variant: TYPOGRAPHY_PROPS.VARIANT.TEXT_HEADING_SMALL },
                 entityName,
-                " per ",
+                " by ",
                 label),
             React.createElement(Chart, { selectCategoryValueViews: values, width: width })))))));
 };

package/lib/components/Index/components/EntitiesView/components/ChartView/components/Chart/barX/plot.js

@@ -2,9 +2,10 @@ import * as Plot from "@observablehq/plot";
 import { PALETTE } from "../../../../../../../../../styles/common/constants/palette";
 import { formatCountSize } from "../../../../../../../../../utils/formatCountSize";
 import { DATA_FIELD, MARGIN_LEFT, TEXT_PADDING } from "./constants";
-import { getCategoryValueText, getCategoryValueTextFill, getColorRangeValue, getCountTextFill, getPlotHeight, getTicks, getXDomain, getYPaddingInner, getYPaddingOuter, isAnyValueSelected, renderText, } from "./utils";
+import { getCategoryTotalCount, getCategoryValueText, getCategoryValueTextFill, getColorRangeValue, getCountText, getCountTextFill, getPlotHeight, getTicks, getXDomain, getYPaddingInner, getYPaddingOuter, isAnyValueSelected, renderText, } from "./utils";
 export function getPlotOptions(selectCategoryValueViews, width) {
     const isCategorySelected = isAnyValueSelected(selectCategoryValueViews);
+    const totalCount = getCategoryTotalCount(selectCategoryValueViews);
     return {
         color: {
             domain: [false, true], // false = unselected, true = selected.
@@ -59,7 +60,7 @@ export function getPlotOptions(selectCategoryValueViews, width) {
                 fontWeight: 500,
                 lineHeight: 0.8125,
                 render: renderText,
-                text: DATA_FIELD.COUNT,
+                text: (d) => getCountText(d, totalCount),
                 textAnchor: "end",
                 x: DATA_FIELD.COUNT,
                 y: DATA_FIELD.LABEL,
@@ -84,6 +85,7 @@ export function getPlotOptions(selectCategoryValueViews, width) {
             paddingOuter: getYPaddingOuter(),
             tickFormat: () => "",
             tickSize: 0,
+            type: "band", // Treats number-like strings as categorical labels to prevent numeric scale warnings.
         },
     };
 }

package/lib/components/Index/components/EntitiesView/components/ChartView/components/Chart/barX/utils.d.ts

@@ -1,5 +1,11 @@
 import { ChannelValues, Context, Dimensions, RenderFunction, ScaleFunctions } from "@observablehq/plot";
 import { SelectCategoryValueView } from "../../../../../../../../../common/entities";
+/**
+ * Calculates the total count of all category values from the provided array of category value views.
+ * @param selectCategoryValueViews - An array of objects representing category values, where each object contains a count property.
+ * @returns The total sum of the count property from all category value objects in the array.
+ */
+export declare function getCategoryTotalCount(selectCategoryValueViews: SelectCategoryValueView[]): number;
 /**
  * Returns the text for the category value point.
  * @param d - Data point.
@@ -19,6 +25,21 @@ export declare function getCategoryValueTextFill(d: SelectCategoryValueView, isC
  * @returns Color range value.
  */
 export declare function getColorRangeValue(isCategorySelected: boolean): string;
+/**
+ * Calculates the percentage representation of a count value relative to a total.
+ * @param d - Data point containing the count value to calculate the percentage for.
+ * @param total - The total value used as the denominator to compute the percentage.
+ * @returns The calculated percentage value, rounded to one decimal place.
+ */
+export declare function getCountPercentage(d: SelectCategoryValueView, total: number): string;
+/**
+ * Returns the text for the count point.
+ * Includes the count and its percentage of the total.
+ * @param d - Data point.
+ * @param total - Total count.
+ * @returns Text string.
+ */
+export declare function getCountText(d: SelectCategoryValueView, total: number): string;
 /**
  * Returns the fill color for the count point.
  * @param d - Data point.

package/lib/components/Index/components/EntitiesView/components/ChartView/components/Chart/barX/utils.js

@@ -1,5 +1,13 @@
 import { PALETTE } from "../../../../../../../../../styles/common/constants/palette";
 import { BAR_GAP, BAR_HEIGHT, MARGIN_LEFT, TEXT_PADDING, TICKS, } from "./constants";
+/**
+ * Calculates the total count of all category values from the provided array of category value views.
+ * @param selectCategoryValueViews - An array of objects representing category values, where each object contains a count property.
+ * @returns The total sum of the count property from all category value objects in the array.
+ */
+export function getCategoryTotalCount(selectCategoryValueViews) {
+    return selectCategoryValueViews.reduce((acc, { count }) => acc + count, 0);
+}
 /**
  * Returns the text for the category value point.
  * @param d - Data point.
@@ -31,6 +39,32 @@ export function getCategoryValueTextFill(d, isCategorySelected) {
 export function getColorRangeValue(isCategorySelected) {
     return isCategorySelected ? PALETTE.SMOKE_LIGHT : "#C5E3FC";
 }
+/**
+ * Calculates the percentage representation of a count value relative to a total.
+ * @param d - Data point containing the count value to calculate the percentage for.
+ * @param total - The total value used as the denominator to compute the percentage.
+ * @returns The calculated percentage value, rounded to one decimal place.
+ */
+export function getCountPercentage(d, total) {
+    if (total === 0)
+        return "0";
+    const percentage = (d.count / total) * 100;
+    const roundedPercentage = Math.round(percentage * 10) / 10;
+    if (roundedPercentage < 0.1)
+        return "< 0.1";
+    // Round to one decimal place.
+    return roundedPercentage.toFixed(1);
+}
+/**
+ * Returns the text for the count point.
+ * Includes the count and its percentage of the total.
+ * @param d - Data point.
+ * @param total - Total count.
+ * @returns Text string.
+ */
+export function getCountText(d, total) {
+    return `${d.count.toLocaleString()} (${getCountPercentage(d, total)}%)`;
+}
 /**
  * Returns the fill color for the count point.
  * @param d - Data point.

package/lib/components/Index/components/EntitiesView/components/EntityList/entityList.d.ts

@@ -1,2 +1,3 @@
+import { RowData } from "@tanstack/react-table";
 import { EntityListProps } from "./types";
-export declare const EntityList: ({ entityListType, }: EntityListProps) => JSX.Element | null;
+export declare const EntityList: <T extends RowData>({ entityListType, loading, table, }: EntityListProps<T>) => JSX.Element | null;

package/lib/components/Index/components/EntitiesView/components/EntityList/entityList.js

@@ -2,15 +2,13 @@ import React from "react";
 import { useConfig } from "../../../../../../hooks/useConfig";
 import { useExploreState } from "../../../../../../hooks/useExploreState";
 import { TableCreator } from "../../../../../TableCreator/tableCreator";
-export const EntityList = ({ entityListType, }) => {
+export const EntityList = ({ entityListType, loading, table, }) => {
     const { entityConfig } = useConfig();
     const { exploreState } = useExploreState();
-    const { listItems, loading } = exploreState;
-    const { getId: getRowId, list, listView } = entityConfig;
-    const { columns: columnsConfig } = list;
+    const { listView } = entityConfig;
     // required currently for client-side fetching as the pre-rendered page
     // loads with the previous tabs data on the first render after switching tabs. (or similar)
     if (entityListType !== exploreState.tabValue)
         return null;
-    return (React.createElement(TableCreator, { columns: columnsConfig, getRowId: getRowId, items: listItems ?? [], listView: listView, loading: loading }));
+    return React.createElement(TableCreator, { listView: listView, loading: loading, table: table });
 };

package/lib/components/Index/components/EntitiesView/components/EntityList/types.d.ts

@@ -1,3 +1,6 @@
-export interface EntityListProps {
+import { RowData, Table } from "@tanstack/react-table";
+export interface EntityListProps<T extends RowData> {
     entityListType: string;
+    loading: boolean;
+    table: Table<T>;
 }

package/lib/components/Index/components/Hero/components/Summaries/stories/summaries.stories.d.ts

@@ -0,0 +1,6 @@
+import { Meta, StoryObj } from "@storybook/react";
+import { Summaries } from "../summaries";
+declare const meta: Meta<typeof Summaries>;
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const Default: Story;

package/lib/components/Index/components/Hero/components/Summaries/{summaries.stories.js → stories/summaries.stories.js}

@@ -1,13 +1,9 @@
-import { Summaries } from "./summaries";
+import { Summaries } from "../summaries";
 const meta = {
-    argTypes: {
-        summaries: { control: "object" },
-    },
     component: Summaries,
-    title: "Components/Summary",
 };
 export default meta;
-export const SummariesStory = {
+export const Default = {
     args: {
         summaries: [
             { count: "1", label: "Species" },

package/lib/components/Index/components/Hero/stories/hero.stories.d.ts

@@ -0,0 +1,6 @@
+import { Meta, StoryObj } from "@storybook/react";
+import { Hero } from "../hero";
+declare const meta: Meta<typeof Hero>;
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const Default: Story;

package/lib/components/Index/components/Hero/stories/hero.stories.js

@@ -0,0 +1,16 @@
+import { composeStories } from "@storybook/react";
+import React from "react";
+import * as summaryStories from "../components/Summaries/stories/summaries.stories";
+import { Hero } from "../hero";
+const { Default: Summaries } = composeStories(summaryStories);
+const meta = {
+    component: Hero,
+    parameters: { layout: "fullscreen" },
+};
+export default meta;
+export const Default = {
+    args: {
+        Summaries: React.createElement(Summaries, null),
+        title: "Data Explorer",
+    },
+};

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

@@ -1,2 +1,2 @@
 import { IndexProps } from "./types";
-export declare const Index: ({ chart, className, list, ListHero, SideBarButton, SubTitleHero, Summaries, Tabs, title, }: IndexProps) => JSX.Element;
+export declare const Index: ({ categoryFilters, className, entityListType, entityName, ListHero, loading, SideBarButton, SubTitleHero, Summaries, Tabs, title, }: IndexProps) => JSX.Element;

package/lib/components/Index/index.js

@@ -1,17 +1,21 @@
 import React from "react";
 import { useLayoutDimensions } from "../../providers/layoutDimensions/hook";
+import { ChartView } from "./components/EntitiesView/components/ChartView/chartView";
+import { EntityList } from "./components/EntitiesView/components/EntityList/entityList";
 import { EntitiesView } from "./components/EntitiesView/entitiesView";
 import { useEntitiesView } from "./components/EntitiesView/hooks/UseEntitiesView/hook";
 import { VIEW_MODE } from "./components/EntitiesView/hooks/UseEntitiesView/types";
 import { Hero } from "./components/Hero/hero";
 import { Index as IndexLayout } from "./index.styles";
-export const Index = ({ chart, className, list, ListHero, SideBarButton, SubTitleHero, Summaries, Tabs, title, }) => {
+import { useTable } from "./table/hook";
+export const Index = ({ categoryFilters, className, entityListType, entityName, ListHero, loading, SideBarButton, SubTitleHero, Summaries, Tabs, title, }) => {
     const { onChange, viewMode, viewStatus } = useEntitiesView();
     const { dimensions } = useLayoutDimensions();
+    const { table } = useTable();
     return (React.createElement(IndexLayout, { className: className, marginTop: dimensions.header.height },
         React.createElement(Hero, { SideBarButton: SideBarButton, Summaries: Summaries, title: title }),
         SubTitleHero,
         Tabs,
         ListHero,
-        React.createElement(EntitiesView, { onChange: onChange, viewMode: viewMode, viewStatus: viewStatus }, viewMode === VIEW_MODE.TABLE ? list : chart)));
+        React.createElement(EntitiesView, { onChange: onChange, viewMode: viewMode, viewStatus: viewStatus }, viewMode === VIEW_MODE.TABLE ? (React.createElement(EntityList, { entityListType: entityListType, loading: loading, table: table })) : (React.createElement(ChartView, { categoryFilters: categoryFilters, entityName: entityName, loading: loading })))));
 };

package/lib/components/Index/stories/index.stories.d.ts

@@ -0,0 +1,6 @@
+import { Meta, StoryObj } from "@storybook/react";
+import { Index } from "../index";
+declare const meta: Meta<typeof Index>;
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const Default: Story;

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

@@ -0,0 +1,17 @@
+import { composeStories } from "@storybook/react";
+import React from "react";
+import * as summaryStories from "../components/Hero/components/Summaries/stories/summaries.stories";
+import { Index } from "../index";
+const { Default: Summaries } = composeStories(summaryStories);
+const meta = {
+    component: Index,
+    parameters: { layout: "fullscreen" },
+};
+export default meta;
+export const Default = {
+    args: {
+        Summaries: React.createElement(Summaries, null),
+        Tabs: undefined,
+        title: "Explore Data",
+    },
+};

package/lib/components/Index/table/coreOptions/columns/cellFactory.d.ts

@@ -0,0 +1,9 @@
+import { CellContext, RowData } from "@tanstack/react-table";
+import { ColumnConfig } from "../../../../../config/entities";
+/**
+ * Creates a cell renderer function for a given column configuration.
+ * This factory pattern allows us to create cell renderers without defining JSX in hook files.
+ * @param config - The column configuration.
+ * @returns A function that renders the cell content.
+ */
+export declare function createCell<T extends RowData>(config: ColumnConfig<T>): (context: CellContext<T, unknown>) => JSX.Element;

package/lib/components/Index/table/coreOptions/columns/cellFactory.js

@@ -0,0 +1,13 @@
+import React from "react";
+import { ComponentCreator } from "../../../../../components/ComponentCreator/ComponentCreator";
+/**
+ * Creates a cell renderer function for a given column configuration.
+ * This factory pattern allows us to create cell renderers without defining JSX in hook files.
+ * @param config - The column configuration.
+ * @returns A function that renders the cell content.
+ */
+export function createCell(config) {
+    return function CellCreator(context) {
+        return (React.createElement(ComponentCreator, { components: [config.componentConfig], response: context.row.original, viewContext: { cellContext: context } }));
+    };
+}

package/lib/components/Index/table/hook.d.ts

@@ -0,0 +1,3 @@
+import { RowData } from "@tanstack/react-table";
+import { UseTable } from "./types";
+export declare const useTable: <T extends RowData>() => UseTable<T>;

package/lib/components/Index/table/hook.js

@@ -0,0 +1,166 @@
+import { getCoreRowModel, getFacetedRowModel, getFilteredRowModel, getPaginationRowModel, getSortedRowModel, useReactTable, } from "@tanstack/react-table";
+import { useCallback, useEffect, useMemo } from "react";
+import { track } from "../../../common/analytics/analytics";
+import { EVENT_NAME, EVENT_PARAM, SORT_DIRECTION, } from "../../../common/analytics/entities";
+import { useConfig } from "../../../hooks/useConfig";
+import { useExploreMode } from "../../../hooks/useExploreMode/useExploreMode";
+import { useExploreState } from "../../../hooks/useExploreState";
+import { ExploreActionKind } from "../../../providers/exploreState";
+import { DEFAULT_PAGINATION_STATE } from "../../../providers/exploreState/initializer/constants";
+import { arrIncludesSome } from "../../Table/columnDef/columnFilters/filterFn";
+import { COLUMN_DEF } from "../../Table/common/columnDef";
+import { buildCategoryViews, getFacetedUniqueValuesWithArrayValues, getTableStatePagination, isClientFilteringEnabled, sortingFn, } from "../../Table/common/utils";
+import { ROW_POSITION } from "../../Table/features/RowPosition/constants";
+import { ROW_PREVIEW } from "../../Table/features/RowPreview/constants";
+import { buildBaseColumnDef } from "../../TableCreator/common/utils";
+import { useTableOptions } from "../../TableCreator/options/hook";
+import { createCell } from "./coreOptions/columns/cellFactory";
+// eslint-disable-next-line sonarjs/cognitive-complexity -- TODO fix component length / complexity
+export const useTable = () => {
+    const { entityConfig } = useConfig();
+    const exploreMode = useExploreMode();
+    const { exploreDispatch, exploreState } = useExploreState();
+    const tableOptions = useTableOptions();
+    const { entityPageState, filterState, listItems, paginationState, rowPreview, tabValue, } = exploreState;
+    const { getId: getRowId, list } = entityConfig;
+    const { columns: columnsConfig } = list;
+    const { columnVisibility, grouping, rowSelection, sorting } = entityPageState[tabValue];
+    const { currentPage, pageSize, rows: pageCount } = paginationState;
+    const clientFiltering = isClientFilteringEnabled(exploreMode);
+    const pagination = useMemo(() => getTableStatePagination(currentPage - 1, pageSize), [currentPage, pageSize]);
+    const columnDefs = useMemo(() => columnsConfig.reduce((acc, { 
+    /**
+     * Applies the custom `arrIncludesSome` filter function as the default for multi-value filtering.
+     * Although `ColumnFilter["value"]` is typed as `unknown`, in practice it's consistently an array (`unknown[]`) in entity lists.
+     * This custom filter function supports multi-select filtering, even when individual cell values are single strings.
+     * This override of TanStack's default `arrIncludesSome` resolves a limitation where the base implementation
+     * does not support matching an array of filter values against a single string cell value.
+     * For range filtering, specify TanStack's `inNumberRange` filter function on the column definition.
+     */
+    filterFn = "arrIncludesSome", ...columnConfig }) => {
+        acc.push({
+            ...buildBaseColumnDef(columnConfig),
+            cell: createCell(columnConfig),
+            filterFn,
+            sortingFn,
+        });
+        return acc;
+    }, [
+        /* Initialize column definitions with the "row position" column */
+        COLUMN_DEF.ROW_POSITION,
+        /* Initialize column definitions with the "row selection" column */
+        COLUMN_DEF.ROW_SELECTION,
+    ]), [columnsConfig]);
+    const onSortingChange = (updater) => {
+        // TODO(cc) memoize `onSortingChange` with `useCallback`.
+        // TODO(cc) copy `onSortingChange` to ../options/sorting/hook.ts see src/components/Table/options/grouping/hook.ts for example.
+        exploreDispatch({
+            payload: typeof updater === "function" ? updater(sorting) : updater,
+            type: ExploreActionKind.UpdateSorting,
+        });
+        // Execute GTM tracking.
+        // TODO(cc) update tracking to handle sorting of multiple columns.
+        // TODO(cc) GTM tracking when `onSortingChange` is triggered only tracks the first column sorted, and takes the value from explore state which is not updated yet.
+        track(EVENT_NAME.ENTITY_TABLE_SORTED, {
+            [EVENT_PARAM.ENTITY_NAME]: exploreState.tabValue,
+            [EVENT_PARAM.COLUMN_NAME]: sorting?.[0]?.id, // TODO(cc) sorting should always be at least `[]` and never `undefined`.
+            [EVENT_PARAM.SORT_DIRECTION]: sorting?.[0]?.desc // TODO(cc) sorting should always be at least `[]` and never `undefined`.
+                ? SORT_DIRECTION.DESC
+                : SORT_DIRECTION.ASC,
+        });
+    };
+    const onRowPreviewChange = useCallback((updater) => {
+        exploreDispatch({
+            payload: typeof updater === "function" ? updater(rowPreview) : updater,
+            type: ExploreActionKind.UpdateRowPreview,
+        });
+    }, [exploreDispatch, rowPreview]);
+    const onRowSelectionChange = useCallback((updater) => {
+        // TODO(cc) refactor `onRowSelectionChange` to /options/rowSelection/hook.ts see onGroupingChange.
+        exploreDispatch({
+            payload: typeof updater === "function" ? updater(rowSelection) : updater,
+            type: ExploreActionKind.UpdateRowSelection,
+        });
+    }, [exploreDispatch, rowSelection]);
+    const state = {
+        columnVisibility,
+        grouping,
+        pagination,
+        rowPreview,
+        rowSelection,
+        sorting,
+    };
+    /**
+     * TODO: Update `ColumnConfig` to follow the `ColumnDef` API of TanStack Table.
+     * - Standardize column definitions to leverage the full power of TanStack Table's feature set and improve compatibility.
+     * TODO: Define `sorting` directly within `ListConfig` via the `tableOptions.initialState` property.
+     * - This will simplify the configuration structure and centralize table state definitions, reducing redundancy and improving clarity.
+     */
+    const table = useReactTable({
+        _features: [ROW_POSITION, ROW_PREVIEW],
+        columns: columnDefs,
+        data: listItems || [],
+        enableColumnFilters: true, // client-side filtering.
+        enableFilters: true, // client-side filtering.
+        enableMultiSort: clientFiltering, // TODO(cc) move to sorting options; default to false and let the table options in config flag this value.
+        filterFns: { arrIncludesSome },
+        getCoreRowModel: getCoreRowModel(),
+        getFacetedRowModel: clientFiltering ? getFacetedRowModel() : undefined,
+        getFacetedUniqueValues: clientFiltering
+            ? getFacetedUniqueValuesWithArrayValues()
+            : undefined,
+        getFilteredRowModel: clientFiltering ? getFilteredRowModel() : undefined,
+        getPaginationRowModel: getPaginationRowModel(),
+        getRowId,
+        getSortedRowModel: clientFiltering ? getSortedRowModel() : undefined,
+        manualPagination: true,
+        manualSorting: !clientFiltering,
+        onRowPreviewChange,
+        onRowSelectionChange,
+        onSortingChange,
+        pageCount,
+        state,
+        ...tableOptions,
+    });
+    const { getAllColumns, getRowModel, getState } = table;
+    const allColumns = getAllColumns();
+    const { columnFilters } = getState();
+    const { rows } = getRowModel();
+    // Sets react table column filters `columnFilters` state - for client-side filtering only - with update of filterState.
+    useEffect(() => {
+        if (clientFiltering) {
+            table.setColumnFilters(filterState.map(({ categoryKey, value }) => ({
+                id: categoryKey,
+                value,
+            })));
+        }
+    }, [clientFiltering, filterState, table]);
+    // Process explore response - client-side filtering only.
+    useEffect(() => {
+        if (!listItems || listItems.length === 0)
+            return;
+        if (clientFiltering) {
+            exploreDispatch({
+                payload: {
+                    listItems,
+                    loading: false,
+                    paginationResponse: {
+                        ...DEFAULT_PAGINATION_STATE,
+                        pageSize: rows.filter(({ getIsGrouped }) => !getIsGrouped()).length,
+                        rows: rows.filter(({ getIsGrouped }) => !getIsGrouped()).length,
+                    },
+                    selectCategories: buildCategoryViews(allColumns, columnFilters),
+                },
+                type: ExploreActionKind.ProcessExploreResponse,
+            });
+        }
+    }, [
+        allColumns,
+        clientFiltering,
+        columnFilters,
+        exploreDispatch,
+        listItems,
+        rows,
+    ]);
+    return { table };
+};

package/lib/components/Index/table/types.d.ts

@@ -0,0 +1,4 @@
+import { RowData, Table } from "@tanstack/react-table";
+export interface UseTable<T extends RowData> {
+    table: Table<T>;
+}

package/lib/components/Index/table/types.js

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

package/lib/components/Index/types.d.ts

@@ -1,9 +1,13 @@
 import { BaseComponentProps } from "components/types";
+import { EntityConfig } from "config/entities";
 import { ReactNode } from "react";
+import { CategoryFilter } from "../../components/Filter/components/Filters/filters";
 export interface IndexProps extends BaseComponentProps {
-    chart?: ReactNode;
-    list?: ReactNode;
+    categoryFilters: CategoryFilter[];
+    entityListType: string;
+    entityName: EntityConfig["label"];
     ListHero?: ReactNode | ReactNode[];
+    loading: boolean;
     SideBarButton?: ReactNode;
     SubTitleHero?: ReactNode | ReactNode[];
     Summaries?: ReactNode;

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

@@ -1,24 +1,9 @@
-import { ColumnDef, CoreOptions, RowData } from "@tanstack/react-table";
-import { ListConfig, ListViewConfig } from "../../config/entities";
+import { RowData, Table as TanStackTable } from "@tanstack/react-table";
+import { ListViewConfig } from "../../config/entities";
 export interface TableProps<T extends RowData> {
-    columns: ColumnDef<T>[];
-    getRowId?: CoreOptions<T>["getRowId"];
-    items: T[];
     listView?: ListViewConfig;
-    loading?: boolean;
-    tableOptions?: ListConfig<T>["tableOptions"];
+    loading: boolean;
+    table: TanStackTable<T>;
 }
-/**
- * This table can be Controlled or Uncontrolled based on the set of props passed to it.
- * Controlled table will receive the navigation functions, and it will be used for dynamic loads.
- * Uncontrolled table will take advantage of React Table's state and will be used for static loads.
- * @param tableProps - Set of props required for displaying the table.
- * @param tableProps.columns - Set of columns to display.
- * @param tableProps.getRowId - Function to customize the row ID.
- * @param tableProps.items - Row data to display.
- * @param tableProps.listView - List view configuration.
- * @param tableProps.tableOptions - TanStack table options.
- * @returns Configured table element for display.
- */
-export declare const TableComponent: <T extends RowData>({ columns, getRowId, items, listView, tableOptions, }: TableProps<T>) => JSX.Element;
+export declare const TableComponent: <T extends RowData>({ listView, loading, table, }: TableProps<T>) => JSX.Element;
 export declare const Table: typeof TableComponent;