@databiosphere/findable-ui 27.0.0 → 28.0.0

package/lib/components/Table/table.js

@@ -1,127 +1,35 @@
 import { TableContainer } from "@mui/material";
-import { getCoreRowModel, getFacetedRowModel, getFilteredRowModel, getPaginationRowModel, getSortedRowModel, useReactTable, } from "@tanstack/react-table";
-import React, { Fragment, useCallback, useEffect, useMemo } from "react";
+import React, { Fragment } from "react";
 import { track } from "../../common/analytics/analytics";
-import { EVENT_NAME, EVENT_PARAM, PAGINATION_DIRECTION, SORT_DIRECTION, } from "../../common/analytics/entities";
+import { EVENT_NAME, EVENT_PARAM, PAGINATION_DIRECTION, } from "../../common/analytics/entities";
 import { BREAKPOINT_FN_NAME, useBreakpointHelper, } from "../../hooks/useBreakpointHelper";
 import { useExploreMode } from "../../hooks/useExploreMode/useExploreMode";
 import { useExploreState } from "../../hooks/useExploreState";
 import { useScroll } from "../../hooks/useScroll";
 import { ExploreActionKind } from "../../providers/exploreState";
-import { DEFAULT_PAGINATION_STATE } from "../../providers/exploreState/initializer/constants";
 import { TABLET } from "../../theme/common/breakpoints";
 import { Loading, LOADING_PANEL_STYLE } from "../Loading/loading";
 import { NoResults } from "../NoResults/noResults";
 import { getColumnTrackSizing } from "../TableCreator/options/columnTrackSizing/utils";
-import { arrIncludesSome } from "./columnDef/columnFilters/filterFn";
 import { ROW_DIRECTION } from "./common/entities";
-import { buildCategoryViews, getFacetedUniqueValuesWithArrayValues, getTableStatePagination, isClientFilteringEnabled, } from "./common/utils";
+import { isClientFilteringEnabled } from "./common/utils";
 import { Pagination as DXPagination } from "./components/Pagination/pagination";
 import { TableBody } from "./components/TableBody/tableBody";
 import { TableHead } from "./components/TableHead/tableHead";
 import { TableToolbar } from "./components/TableToolbar/tableToolbar";
-import { ROW_POSITION } from "./features/RowPosition/constants";
-import { ROW_PREVIEW } from "./features/RowPreview/constants";
 import { GridTable } from "./table.styles";
-/**
- * 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 const TableComponent = ({ columns, getRowId, items, listView, tableOptions, }) => {
+export const TableComponent = ({ listView, loading, table, }) => {
     const tabletDown = useBreakpointHelper(BREAKPOINT_FN_NAME.DOWN, TABLET);
     const exploreMode = useExploreMode();
     const { exploreDispatch, exploreState } = useExploreState();
-    const { entityPageState, filterState, listItems, loading = false, paginationState, rowPreview, tabValue, } = exploreState;
-    const { columnVisibility, grouping, rowSelection, sorting } = entityPageState[tabValue];
-    const { currentPage, pages, pageSize, rows: pageCount } = paginationState;
+    const { paginationState } = exploreState;
+    const { currentPage, pages } = paginationState;
     const { disablePagination = false } = listView || {};
     const clientFiltering = isClientFilteringEnabled(exploreMode);
     const rowDirection = tabletDown
         ? ROW_DIRECTION.VERTICAL
         : ROW_DIRECTION.DEFAULT;
-    const pagination = useMemo(() => getTableStatePagination(currentPage - 1, pageSize), [currentPage, pageSize]);
-    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 tableInstance = useReactTable({
-        _features: [ROW_POSITION, ROW_PREVIEW],
-        columns,
-        data: items,
-        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, getVisibleFlatColumns, nextPage: tableNextPage, previousPage: tablePreviousPage, } = tableInstance;
-    const allColumns = getAllColumns();
-    const { columnFilters } = getState();
+    const { getRowModel, getVisibleFlatColumns, nextPage: tableNextPage, previousPage: tablePreviousPage, } = table;
     const { rows } = getRowModel();
     const noResults = !loading && (!rows || rows.length === 0);
     const scrollTop = useScroll();
@@ -160,42 +68,6 @@ export const TableComponent = ({ columns, getRowId, items, listView, tableOption
         previousPage();
         scrollTop();
     };
-    // Sets react table column filters `columnFilters` state - for client-side filtering only - with update of filterState.
-    useEffect(() => {
-        if (clientFiltering) {
-            tableInstance.setColumnFilters(filterState.map(({ categoryKey, value }) => ({
-                id: categoryKey,
-                value,
-            })));
-        }
-    }, [clientFiltering, filterState, tableInstance]);
-    // 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,
-    ]);
     function canNextPage() {
         return currentPage < pages;
     }
@@ -203,12 +75,12 @@ export const TableComponent = ({ columns, getRowId, items, listView, tableOption
         return currentPage > 1;
     }
     return noResults ? (React.createElement(NoResults, { Paper: null, title: "No Results found" })) : (React.createElement(Fragment, null,
-        React.createElement(TableToolbar, { listView: listView, rowDirection: rowDirection, tableInstance: tableInstance }),
+        React.createElement(TableToolbar, { listView: listView, rowDirection: rowDirection, tableInstance: table }),
         React.createElement(Loading, { appear: false, autoPosition: false, loading: loading, panelStyle: LOADING_PANEL_STYLE.INHERIT }),
         React.createElement(TableContainer, null,
             React.createElement(GridTable, { collapsable: true, gridTemplateColumns: getColumnTrackSizing(getVisibleFlatColumns()) },
-                React.createElement(TableHead, { rowDirection: rowDirection, tableInstance: tableInstance }),
-                React.createElement(TableBody, { rows: rows, rowDirection: rowDirection, tableInstance: tableInstance }))),
+                React.createElement(TableHead, { rowDirection: rowDirection, tableInstance: table }),
+                React.createElement(TableBody, { rows: rows, rowDirection: rowDirection, tableInstance: table }))),
         !disablePagination && (React.createElement(DXPagination, { canNextPage: canNextPage(), canPreviousPage: canPreviousPage(), currentPage: currentPage, onNextPage: handleTableNextPage, onPreviousPage: handleTablePreviousPage, totalPage: pages ?? 0 }))));
 };
 // TODO(Dave) review whether memo is necessary - flash between tabs / loading state.

package/lib/components/TableCreator/tableCreator.d.ts

@@ -1,10 +1,8 @@
-import { CoreOptions, RowData } from "@tanstack/react-table";
-import { ColumnConfig, ListViewConfig } from "../../config/entities";
+import { RowData, Table as TanStackTable } from "@tanstack/react-table";
+import { ListViewConfig } from "../../config/entities";
 export interface TableCreatorProps<T> {
-    columns: ColumnConfig<T>[];
-    getRowId?: CoreOptions<T>["getRowId"];
-    items: T[];
     listView?: ListViewConfig;
-    loading?: boolean;
+    loading: boolean;
+    table: TanStackTable<T>;
 }
-export declare const TableCreator: <T extends RowData>({ columns, getRowId, items, listView, loading, }: TableCreatorProps<T>) => JSX.Element;
+export declare const TableCreator: <T extends RowData>({ listView, loading, table, }: TableCreatorProps<T>) => JSX.Element;

package/lib/components/TableCreator/tableCreator.js

@@ -1,37 +1,5 @@
-import React, { useMemo } from "react";
-import { ComponentCreator } from "../ComponentCreator/ComponentCreator";
-import { COLUMN_DEF } from "../Table/common/columnDef";
-import { sortingFn } from "../Table/common/utils";
+import React from "react";
 import { Table } from "../Table/table";
-import { buildBaseColumnDef } from "./common/utils";
-import { useTableOptions } from "./options/hook";
-const createCell = (config) => function CellCreator(cellContext) {
-    return (React.createElement(ComponentCreator, { components: [config.componentConfig], response: cellContext.row.original, viewContext: { cellContext } }));
-};
-export const TableCreator = ({ columns, getRowId, items, listView, loading, }) => {
-    const tableOptions = useTableOptions();
-    const columnDefs = useMemo(() => columns.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: 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,
-    ]), [columns]);
-    return (React.createElement(Table, { columns: columnDefs, getRowId: getRowId, items: items, listView: listView, loading: loading, tableOptions: tableOptions }));
+export const TableCreator = ({ listView, loading, table, }) => {
+    return React.createElement(Table, { listView: listView, loading: loading, table: table });
 };

package/lib/views/ExploreView/exploreView.js

@@ -5,8 +5,6 @@ import { ComponentCreator } from "../../components/ComponentCreator/ComponentCre
 import { ClearAllFilters } from "../../components/Filter/components/ClearAllFilters/clearAllFilters";
 import { Filters, } from "../../components/Filter/components/Filters/filters";
 import { SearchAllFilters } from "../../components/Filter/components/SearchAllFilters/searchAllFilters";
-import { ChartView } from "../../components/Index/components/EntitiesView/components/ChartView/chartView";
-import { EntityList } from "../../components/Index/components/EntitiesView/components/EntityList/entityList";
 import { Tabs } from "../../components/Index/components/Tabs/tabs";
 import { Index as IndexView } from "../../components/Index/index";
 import { SidebarButton } from "../../components/Layout/components/Sidebar/components/SidebarButton/sidebarButton";
@@ -105,7 +103,7 @@ export const ExploreView = (props) => {
                 React.createElement(ClearAllFilters, null),
                 React.createElement(SearchAllFilters, { categoryViews: categoryViews, drawerOpen: isDrawerOpen, onFilter: onFilterChange.bind(null, true) })),
             React.createElement(Filters, { categoryFilters: categoryFilters, closeAncestor: onCloseDrawer, onFilter: onFilterChange.bind(null, false), trackFilterOpened: trackingConfig?.trackFilterOpened }))),
-        React.createElement(IndexView, { className: props.className, chart: React.createElement(ChartView, { categoryFilters: categoryFilters, entityName: label, loading: loading }), list: React.createElement(EntityList, { entityListType: entityListType }), ListHero: renderComponent(listHero), SideBarButton: tabletDown ? (React.createElement(SidebarButton, { count: filterCount, label: "Filter", onClick: onOpenDrawer })) : undefined, SubTitleHero: renderComponent(subTitleHero), Summaries: renderSummary(summaryConfig, summaryResponse), Tabs: React.createElement(Tabs, null), title: entityConfig.explorerTitle || explorerTitle })));
+        React.createElement(IndexView, { className: props.className, categoryFilters: categoryFilters, entityListType: entityListType, entityName: label, loading: loading, ListHero: renderComponent(listHero), SideBarButton: tabletDown ? (React.createElement(SidebarButton, { count: filterCount, label: "Filter", onClick: onOpenDrawer })) : undefined, SubTitleHero: renderComponent(subTitleHero), Summaries: renderSummary(summaryConfig, summaryResponse), Tabs: React.createElement(Tabs, null), title: entityConfig.explorerTitle || explorerTitle })));
 };
 /**
  * Builds the category views into category views grouped by the given category group configuration.

package/package.json

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

package/src/components/Index/components/EntitiesView/components/ChartView/chartView.tsx

@@ -28,7 +28,7 @@ export const ChartView = ({
         {selectCategoryViews.map(({ key, label, values }) => (
           <StyledGridPaperSection key={key}>
             <Typography variant={TYPOGRAPHY_PROPS.VARIANT.TEXT_HEADING_SMALL}>
-              {entityName} per {label}
+              {entityName} by {label}
             </Typography>
             <Chart selectCategoryValueViews={values} width={width} />
           </StyledGridPaperSection>

package/src/components/Index/components/EntitiesView/components/ChartView/components/Chart/barX/plot.ts

@@ -5,9 +5,11 @@ import { PALETTE } from "../../../../../../../../../styles/common/constants/pale
 import { formatCountSize } from "../../../../../../../../../utils/formatCountSize";
 import { DATA_FIELD, MARGIN_LEFT, TEXT_PADDING } from "./constants";
 import {
+  getCategoryTotalCount,
   getCategoryValueText,
   getCategoryValueTextFill,
   getColorRangeValue,
+  getCountText,
   getCountTextFill,
   getPlotHeight,
   getTicks,
@@ -23,6 +25,7 @@ export function getPlotOptions(
   width: number
 ): PlotOptions {
   const isCategorySelected = isAnyValueSelected(selectCategoryValueViews);
+  const totalCount = getCategoryTotalCount(selectCategoryValueViews);
   return {
     color: {
       domain: [false, true], // false = unselected, true = selected.
@@ -77,7 +80,7 @@ export function getPlotOptions(
         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,

package/src/components/Index/components/EntitiesView/components/ChartView/components/Chart/barX/utils.ts

@@ -15,6 +15,17 @@ import {
   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: SelectCategoryValueView[]
+): number {
+  return selectCategoryValueViews.reduce((acc, { count }) => acc + count, 0);
+}
+
 /**
  * Returns the text for the category value point.
  * @param d - Data point.
@@ -49,6 +60,38 @@ export function getColorRangeValue(isCategorySelected: boolean): string {
   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: SelectCategoryValueView,
+  total: number
+): string {
+  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: SelectCategoryValueView,
+  total: number
+): string {
+  return `${d.count.toLocaleString()} (${getCountPercentage(d, total)}%)`;
+}
+
 /**
  * Returns the fill color for the count point.
  * @param d - Data point.

package/src/components/Index/components/EntitiesView/components/EntityList/entityList.tsx

@@ -1,29 +1,22 @@
+import { RowData } from "@tanstack/react-table";
 import React from "react";
 import { useConfig } from "../../../../../../hooks/useConfig";
 import { useExploreState } from "../../../../../../hooks/useExploreState";
 import { TableCreator } from "../../../../../TableCreator/tableCreator";
 import { EntityListProps } from "./types";
 
-export const EntityList = ({
+export const EntityList = <T extends RowData>({
   entityListType,
-}: EntityListProps): JSX.Element | null => {
+  loading,
+  table,
+}: EntityListProps<T>): JSX.Element | null => {
   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 (
-    <TableCreator
-      columns={columnsConfig}
-      getRowId={getRowId}
-      items={listItems ?? []}
-      listView={listView}
-      loading={loading}
-    />
-  );
+  return <TableCreator listView={listView} loading={loading} table={table} />;
 };

package/src/components/Index/components/EntitiesView/components/EntityList/types.ts

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

package/src/components/Index/components/Hero/components/Summaries/{summaries.stories.tsx → stories/summaries.stories.tsx}

@@ -1,19 +1,15 @@
 import { Meta, StoryObj } from "@storybook/react";
-import { Summaries } from "./summaries";
+import { Summaries } from "../summaries";
 
-const meta = {
-  argTypes: {
-    summaries: { control: "object" },
-  },
+const meta: Meta<typeof Summaries> = {
   component: Summaries,
-  title: "Components/Summary",
-} satisfies Meta<typeof Summaries>;
+};
 
 export default meta;
 
 type Story = StoryObj<typeof meta>;
 
-export const SummariesStory: Story = {
+export const Default: Story = {
   args: {
     summaries: [
       { count: "1", label: "Species" },

package/src/components/Index/components/Hero/stories/hero.stories.tsx

@@ -0,0 +1,22 @@
+import { composeStories, Meta, StoryObj } 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: Meta<typeof Hero> = {
+  component: Hero,
+  parameters: { layout: "fullscreen" },
+};
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  args: {
+    Summaries: <Summaries />,
+    title: "Data Explorer",
+  },
+};

package/src/components/Index/index.tsx

@@ -1,17 +1,22 @@
 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";
+import { useTable } from "./table/hook";
 import { IndexProps } from "./types";
 
 export const Index = ({
-  chart,
+  categoryFilters,
   className,
-  list,
+  entityListType,
+  entityName,
   ListHero,
+  loading,
   SideBarButton,
   SubTitleHero,
   Summaries,
@@ -20,6 +25,7 @@ export const Index = ({
 }: IndexProps): JSX.Element => {
   const { onChange, viewMode, viewStatus } = useEntitiesView();
   const { dimensions } = useLayoutDimensions();
+  const { table } = useTable();
   return (
     <IndexLayout className={className} marginTop={dimensions.header.height}>
       <Hero SideBarButton={SideBarButton} Summaries={Summaries} title={title} />
@@ -31,7 +37,19 @@ export const Index = ({
         viewMode={viewMode}
         viewStatus={viewStatus}
       >
-        {viewMode === VIEW_MODE.TABLE ? list : chart}
+        {viewMode === VIEW_MODE.TABLE ? (
+          <EntityList
+            entityListType={entityListType}
+            loading={loading}
+            table={table}
+          />
+        ) : (
+          <ChartView
+            categoryFilters={categoryFilters}
+            entityName={entityName}
+            loading={loading}
+          />
+        )}
       </EntitiesView>
     </IndexLayout>
   );

package/src/components/Index/stories/index.stories.tsx

@@ -0,0 +1,23 @@
+import { composeStories, Meta, StoryObj } 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: Meta<typeof Index> = {
+  component: Index,
+  parameters: { layout: "fullscreen" },
+};
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  args: {
+    Summaries: <Summaries />,
+    Tabs: undefined,
+    title: "Explore Data",
+  },
+};

package/src/components/Index/table/coreOptions/columns/cellFactory.tsx

@@ -0,0 +1,22 @@
+import { CellContext, RowData } from "@tanstack/react-table";
+import React from "react";
+import { ComponentCreator } from "../../../../../components/ComponentCreator/ComponentCreator";
+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 function createCell<T extends RowData>(config: ColumnConfig<T>) {
+  return function CellCreator(context: CellContext<T, unknown>): JSX.Element {
+    return (
+      <ComponentCreator
+        components={[config.componentConfig]}
+        response={context.row.original}
+        viewContext={{ cellContext: context }}
+      />
+    );
+  };
+}