@databiosphere/findable-ui 27.0.0 → 28.0.0

package/src/components/Index/table/hook.ts

@@ -0,0 +1,234 @@
+import {
+  ColumnDef,
+  ColumnSort,
+  getCoreRowModel,
+  getFacetedRowModel,
+  getFilteredRowModel,
+  getPaginationRowModel,
+  getSortedRowModel,
+  RowData,
+  RowSelectionState,
+  TableState,
+  Updater,
+  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 { RowPreviewState } from "../../Table/features/RowPreview/entities";
+import { buildBaseColumnDef } from "../../TableCreator/common/utils";
+import { useTableOptions } from "../../TableCreator/options/hook";
+import { createCell } from "./coreOptions/columns/cellFactory";
+import { UseTable } from "./types";
+
+// eslint-disable-next-line sonarjs/cognitive-complexity -- TODO fix component length / complexity
+export const useTable = <T extends RowData>(): UseTable<T> => {
+  const { entityConfig } = useConfig();
+  const exploreMode = useExploreMode();
+  const { exploreDispatch, exploreState } = useExploreState();
+  const tableOptions = useTableOptions<T>();
+  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: ColumnDef<T>[] = 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<T>(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,
+        ] as ColumnDef<T>[]
+      ),
+    [columnsConfig]
+  );
+
+  const onSortingChange = (updater: Updater<ColumnSort[]>): void => {
+    // 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: Updater<RowPreviewState>): void => {
+      exploreDispatch({
+        payload: typeof updater === "function" ? updater(rowPreview) : updater,
+        type: ExploreActionKind.UpdateRowPreview,
+      });
+    },
+    [exploreDispatch, rowPreview]
+  );
+
+  const onRowSelectionChange = useCallback(
+    (updater: Updater<RowSelectionState>): void => {
+      // 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: Partial<TableState> = {
+    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<T>({
+    _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/src/components/Index/table/types.ts

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

package/src/components/Index/types.ts

@@ -1,10 +1,14 @@
 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/src/components/Table/table.tsx

@@ -1,28 +1,13 @@
 import { TableContainer } from "@mui/material";
-import {
-  ColumnDef,
-  ColumnSort,
-  CoreOptions,
-  getCoreRowModel,
-  getFacetedRowModel,
-  getFilteredRowModel,
-  getPaginationRowModel,
-  getSortedRowModel,
-  RowData,
-  RowSelectionState,
-  TableState,
-  Updater,
-  useReactTable,
-} from "@tanstack/react-table";
-import React, { Fragment, useCallback, useEffect, useMemo } from "react";
+import { RowData, Table as TanStackTable } from "@tanstack/react-table";
+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 { ListConfig, ListViewConfig } from "../../config/entities";
+import { ListViewConfig } from "../../config/entities";
 import {
   BREAKPOINT_FN_NAME,
   useBreakpointHelper,
@@ -31,173 +16,47 @@ 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 { RowPreviewState } from "./features/RowPreview/entities";
 import { GridTable } from "./table.styles";
 
 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 const TableComponent = <T extends RowData>({
-  columns,
-  getRowId,
-  items,
   listView,
-  tableOptions,
-}: // eslint-disable-next-line sonarjs/cognitive-complexity -- TODO fix component length / complexity
-TableProps<T>): JSX.Element => {
+  loading,
+  table,
+}: TableProps<T>): JSX.Element => {
   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: Updater<ColumnSort[]>): void => {
-    // 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: Updater<RowPreviewState>): void => {
-      exploreDispatch({
-        payload: typeof updater === "function" ? updater(rowPreview) : updater,
-        type: ExploreActionKind.UpdateRowPreview,
-      });
-    },
-    [exploreDispatch, rowPreview]
-  );
-
-  const onRowSelectionChange = useCallback(
-    (updater: Updater<RowSelectionState>): void => {
-      // 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: Partial<TableState> = {
-    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();
+  } = table;
+
   const { rows } = getRowModel();
   const noResults = !loading && (!rows || rows.length === 0);
   const scrollTop = useScroll();
@@ -239,45 +98,6 @@ TableProps<T>): JSX.Element => {
     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(): boolean {
     return currentPage < pages;
   }
@@ -293,7 +113,7 @@ TableProps<T>): JSX.Element => {
       <TableToolbar
         listView={listView}
         rowDirection={rowDirection}
-        tableInstance={tableInstance}
+        tableInstance={table}
       />
       <Loading
         appear={false}
@@ -306,14 +126,11 @@ TableProps<T>): JSX.Element => {
           collapsable={true}
           gridTemplateColumns={getColumnTrackSizing(getVisibleFlatColumns())}
         >
-          <TableHead
-            rowDirection={rowDirection}
-            tableInstance={tableInstance}
-          />
+          <TableHead rowDirection={rowDirection} tableInstance={table} />
           <TableBody
             rows={rows}
             rowDirection={rowDirection}
-            tableInstance={tableInstance}
+            tableInstance={table}
           />
         </GridTable>
       </TableContainer>

package/src/components/TableCreator/tableCreator.tsx

@@ -1,90 +1,18 @@
-import {
-  CellContext,
-  ColumnDef,
-  CoreOptions,
-  RowData,
-} from "@tanstack/react-table";
-import React, { useMemo } from "react";
-import { ColumnConfig, ListViewConfig } from "../../config/entities";
-import { ComponentCreator } from "../ComponentCreator/ComponentCreator";
-import { COLUMN_DEF } from "../Table/common/columnDef";
-import { sortingFn } from "../Table/common/utils";
+import { RowData, Table as TanStackTable } from "@tanstack/react-table";
+import React from "react";
+import { ListViewConfig } from "../../config/entities";
 import { Table } from "../Table/table";
-import { buildBaseColumnDef } from "./common/utils";
-import { useTableOptions } from "./options/hook";
 
 export interface TableCreatorProps<T> {
-  columns: ColumnConfig<T>[];
-  getRowId?: CoreOptions<T>["getRowId"];
-  items: T[];
   listView?: ListViewConfig;
-  loading?: boolean;
+  loading: boolean;
+  table: TanStackTable<T>;
 }
 
-const createCell = <T extends RowData = RowData, TData = unknown>(
-  config: ColumnConfig<T>
-) =>
-  function CellCreator(cellContext: CellContext<T, TData>): JSX.Element {
-    return (
-      <ComponentCreator
-        components={[config.componentConfig]}
-        response={cellContext.row.original}
-        viewContext={{ cellContext }}
-      />
-    );
-  };
-
 export const TableCreator = <T extends RowData>({
-  columns,
-  getRowId,
-  items,
   listView,
   loading,
+  table,
 }: TableCreatorProps<T>): JSX.Element => {
-  const tableOptions = useTableOptions<T>();
-  const columnDefs: ColumnDef<T>[] = 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,
-        ] as ColumnDef<T>[]
-      ),
-    [columns]
-  );
-  return (
-    <Table<T>
-      columns={columnDefs}
-      getRowId={getRowId}
-      items={items}
-      listView={listView}
-      loading={loading}
-      tableOptions={tableOptions}
-    />
-  );
+  return <Table listView={listView} loading={loading} table={table} />;
 };

package/src/views/ExploreView/exploreView.tsx

@@ -17,8 +17,6 @@ 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";
@@ -165,14 +163,10 @@ export const ExploreView = (props: ExploreViewProps): JSX.Element => {
       )}
       <IndexView
         className={props.className}
-        chart={
-          <ChartView
-            categoryFilters={categoryFilters}
-            entityName={label}
-            loading={loading}
-          />
-        }
-        list={<EntityList entityListType={entityListType} />}
+        categoryFilters={categoryFilters}
+        entityListType={entityListType}
+        entityName={label}
+        loading={loading}
         ListHero={renderComponent(listHero)}
         SideBarButton={
           tabletDown ? (