@databiosphere/findable-ui 0.0.0

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

@@ -0,0 +1,40 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.CollapsableRows = void 0;
+const material_1 = require("@mui/material");
+const react_1 = __importStar(require("react"));
+const collapsableCell_1 = require("../../../TableCell/components/CollapsableCell/collapsableCell");
+const CollapsableRows = ({ tableInstance, virtualizer, }) => {
+    const { getRowModel } = tableInstance;
+    const { rows } = getRowModel();
+    const virtualItems = virtualizer.getVirtualItems();
+    return (react_1.default.createElement(react_1.Fragment, null, virtualItems.map((virtualRow) => {
+        const row = rows[virtualRow.index];
+        return (react_1.default.createElement(material_1.TableRow, { key: row.id, "data-index": virtualRow.index, ref: virtualizer.measureElement },
+            react_1.default.createElement(collapsableCell_1.CollapsableCell, { row: row })));
+    })));
+};
+exports.CollapsableRows = CollapsableRows;

package/lib/components/Table/components/TableRows/components/VirtualizedRow/virtualizedRow.d.ts

@@ -0,0 +1,7 @@
+/// <reference types="react" />
+import { Virtualizer } from "@tanstack/react-virtual";
+export interface VirtualizedRowProps {
+    isUpperRow: boolean;
+    virtualizer: Virtualizer<Window, Element>;
+}
+export declare const VirtualizedRow: ({ isUpperRow, virtualizer, }: VirtualizedRowProps) => JSX.Element;

package/lib/components/Table/components/TableRows/components/VirtualizedRow/virtualizedRow.js

@@ -0,0 +1,61 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.VirtualizedRow = void 0;
+const react_1 = __importStar(require("react"));
+const VirtualizedRow = ({ isUpperRow, virtualizer, }) => {
+    const virtualItems = virtualizer.getVirtualItems();
+    const virtualSize = virtualizer.getTotalSize();
+    const topPadding = (0, react_1.useMemo)(() => calculateTopPadding(virtualItems), [virtualItems]);
+    const bottomPadding = (0, react_1.useMemo)(() => calculateBottomPadding(virtualItems, virtualSize), [virtualItems, virtualSize]);
+    const padding = isUpperRow ? topPadding : bottomPadding;
+    return (react_1.default.createElement(react_1.default.Fragment, null, padding > 0 && (react_1.default.createElement("tr", null,
+        react_1.default.createElement("td", { style: { gridColumn: "1 / -1", height: padding } })))));
+};
+exports.VirtualizedRow = VirtualizedRow;
+/**
+ * Returns the bottom padding for the virtualized row.
+ * @param virtualItems - Virtual items.
+ * @param virtualSize - Virtual size.
+ * @returns bottom padding.
+ */
+function calculateBottomPadding(virtualItems, virtualSize) {
+    var _a;
+    if (virtualItems.length === 0) {
+        return 0;
+    }
+    return virtualSize - ((_a = virtualItems[virtualItems.length - 1]) === null || _a === void 0 ? void 0 : _a.end);
+}
+/**
+ * Returns the top padding for the virtualized row.
+ * @param virtualItems - Virtual items.
+ * @returns top padding.
+ */
+function calculateTopPadding(virtualItems) {
+    if (virtualItems.length === 0) {
+        return 0;
+    }
+    return virtualItems[0].start;
+}

package/lib/components/Table/components/TableRows/tableRows.d.ts

@@ -0,0 +1,8 @@
+/// <reference types="react" />
+import { Table } from "@tanstack/react-table";
+import { Virtualizer } from "@tanstack/react-virtual";
+export interface TableRowsProps<T> {
+    tableInstance: Table<T>;
+    virtualizer: Virtualizer<Window, Element>;
+}
+export declare const TableRows: <T extends object>({ tableInstance, virtualizer, }: TableRowsProps<T>) => JSX.Element;

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

@@ -0,0 +1,41 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.TableRows = void 0;
+const material_1 = require("@mui/material");
+const react_table_1 = require("@tanstack/react-table");
+const react_1 = __importStar(require("react"));
+const TableRows = ({ tableInstance, virtualizer, }) => {
+    const { getRowModel } = tableInstance;
+    const { rows } = getRowModel();
+    const virtualItems = virtualizer.getVirtualItems();
+    return (react_1.default.createElement(react_1.Fragment, null, virtualItems.map((virtualRow) => {
+        const row = rows[virtualRow.index];
+        return (react_1.default.createElement(material_1.TableRow, { key: row.id, "data-index": virtualRow.index, ref: virtualizer.measureElement }, row.getVisibleCells().map((cell) => {
+            return (react_1.default.createElement(material_1.TableCell, { key: cell.id }, (0, react_table_1.flexRender)(cell.column.columnDef.cell, cell.getContext())));
+        })));
+    })));
+};
+exports.TableRows = TableRows;

package/lib/components/Table/components/TableToolbar/tableToolbar.d.ts

@@ -0,0 +1,10 @@
+/// <reference types="react" />
+import { Table } from "@tanstack/react-table";
+import { ListViewConfig } from "../../../../config/entities";
+import { ROW_DIRECTION } from "../../common/entities";
+export interface TableToolbarProps<T> {
+    listView?: ListViewConfig;
+    rowDirection: ROW_DIRECTION;
+    tableInstance: Table<T>;
+}
+export declare const TableToolbar: <T extends object>({ listView, rowDirection, tableInstance, }: TableToolbarProps<T>) => JSX.Element;

package/lib/components/Table/components/TableToolbar/tableToolbar.js

@@ -0,0 +1,58 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.TableToolbar = void 0;
+const react_1 = __importStar(require("react"));
+const useExploreState_1 = require("../../../../hooks/useExploreState");
+const entities_1 = require("../../common/entities");
+const utils_1 = require("../../common/utils");
+const checkboxMenu_1 = require("../CheckboxMenu/checkboxMenu");
+const downloadEntityResults_1 = require("../DownloadEntityResults/downloadEntityResults");
+const entityViewToggle_1 = require("../EntityViewToggle/entityViewToggle");
+const paginationSummary_1 = require("../PaginationSummary/paginationSummary");
+const tableToolbar_styles_1 = require("./tableToolbar.styles");
+const TableToolbar = ({ listView, rowDirection, tableInstance, }) => {
+    const { exploreState } = (0, useExploreState_1.useExploreState)();
+    const { paginationState, relatedListItems } = exploreState;
+    const { currentPage, pages, pageSize, rows } = paginationState;
+    const { resetColumnVisibility } = tableInstance;
+    const { enableDownload } = listView || {};
+    const isLastPage = currentPage === pages;
+    const editColumnOptions = (0, utils_1.getEditColumnOptions)(tableInstance);
+    const showToolbar = rowDirection === entities_1.ROW_DIRECTION.DEFAULT &&
+        (editColumnOptions || enableDownload);
+    /**
+     * Resets column visibility to default state.
+     */
+    const onResetColumnVisibility = () => {
+        resetColumnVisibility(false);
+    };
+    return (react_1.default.createElement(react_1.Fragment, null, showToolbar && (react_1.default.createElement(tableToolbar_styles_1.TableToolbar, null,
+        relatedListItems ? (react_1.default.createElement(entityViewToggle_1.EntityViewToggle, null)) : (react_1.default.createElement(paginationSummary_1.PaginationSummary, { firstResult: (currentPage - 1) * pageSize + 1, lastResult: isLastPage ? rows : pageSize * currentPage, totalResult: rows })),
+        react_1.default.createElement(tableToolbar_styles_1.ToolbarActions, null,
+            enableDownload && (react_1.default.createElement(downloadEntityResults_1.DownloadEntityResults, { entityName: exploreState.tabValue, rows: tableInstance.getFilteredRowModel().rows })),
+            react_1.default.createElement(checkboxMenu_1.CheckboxMenu, { label: "Edit Columns", onReset: onResetColumnVisibility, options: editColumnOptions }))))));
+};
+exports.TableToolbar = TableToolbar;

package/lib/components/Table/components/TableToolbar/tableToolbar.styles.d.ts

@@ -0,0 +1,8 @@
+/// <reference types="react" />
+export declare const TableToolbar: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any> | undefined;
+}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export declare const ToolbarActions: import("@emotion/styled").StyledComponent<import("../../../common/Grid/grid").GridProps & {
+    theme?: import("@emotion/react").Theme | undefined;
+}, {}, {}>;

package/lib/components/Table/components/TableToolbar/tableToolbar.styles.js

@@ -0,0 +1,20 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ToolbarActions = exports.TableToolbar = void 0;
+const styled_1 = __importDefault(require("@emotion/styled"));
+const colors_1 = require("../../../../styles/common/mixins/colors");
+const grid_1 = require("../../../common/Grid/grid");
+exports.TableToolbar = styled_1.default.div `
+  align-items: center;
+  background-color: ${colors_1.white};
+  display: flex;
+  justify-content: space-between;
+  padding: 20px;
+`;
+exports.ToolbarActions = (0, styled_1.default)(grid_1.Grid) `
+  gap: 8px;
+  grid-auto-flow: column;
+`;

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

@@ -0,0 +1,30 @@
+/// <reference types="react" />
+import { ColumnDef, InitialTableState } from "@tanstack/react-table";
+import { Pagination } from "../../common/entities";
+import { ListViewConfig } from "../../config/entities";
+export interface TableProps<T extends object> {
+    columns: ColumnDef<T>[];
+    count?: number;
+    initialState: InitialTableState;
+    items: T[];
+    listView?: ListViewConfig;
+    loading?: boolean;
+    pages?: number;
+    pageSize: number;
+    pagination?: Pagination;
+    total?: number;
+}
+/**
+ * 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.initialState - Initial table state.
+ * @param tableProps.items - Row data to display.
+ * @param tableProps.listView - List view configuration.
+ * @param tableProps.total - Total number of rows in the result set.
+ * @returns Configured table element for display.
+ */
+export declare const TableComponent: <T extends object>({ columns, initialState, items, listView, total, }: TableProps<T>) => JSX.Element;
+export declare const Table: <T extends object>({ columns, initialState, items, listView, total, }: TableProps<T>) => JSX.Element;

package/lib/components/Table/table.js

@@ -0,0 +1,236 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Table = exports.TableComponent = void 0;
+const material_1 = require("@mui/material");
+const react_table_1 = require("@tanstack/react-table");
+const react_1 = __importStar(require("react"));
+const analytics_1 = require("../../common/analytics/analytics");
+const entities_1 = require("../../common/analytics/entities");
+const useBreakpointHelper_1 = require("../../hooks/useBreakpointHelper");
+const useExploreMode_1 = require("../../hooks/useExploreMode");
+const useExploreState_1 = require("../../hooks/useExploreState");
+const useScroll_1 = require("../../hooks/useScroll");
+const exploreState_1 = require("../../providers/exploreState");
+const constants_1 = require("../../providers/exploreState/constants");
+const breakpoints_1 = require("../../theme/common/breakpoints");
+const paper_styles_1 = require("../common/Paper/paper.styles");
+const noResults_1 = require("../NoResults/noResults");
+const entities_2 = require("./common/entities");
+const utils_1 = require("./common/utils");
+const pagination_1 = require("./components/Pagination/pagination");
+const tableBody_1 = require("./components/TableBody/tableBody");
+const tableHead_1 = require("./components/TableHead/tableHead");
+const tableToolbar_1 = require("./components/TableToolbar/tableToolbar");
+const table_styles_1 = require("./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.initialState - Initial table state.
+ * @param tableProps.items - Row data to display.
+ * @param tableProps.listView - List view configuration.
+ * @param tableProps.total - Total number of rows in the result set.
+ * @returns Configured table element for display.
+ */
+const TableComponent = ({ columns, initialState, items, listView, total, }) => {
+    const tabletDown = (0, useBreakpointHelper_1.useBreakpointHelper)(useBreakpointHelper_1.BREAKPOINT_FN_NAME.DOWN, breakpoints_1.TABLET);
+    const exploreMode = (0, useExploreMode_1.useExploreMode)();
+    const { exploreDispatch, exploreState } = (0, useExploreState_1.useExploreState)();
+    const { entityPageState, filterState, isRelatedView, listItems, loading, paginationState, tabValue, } = exploreState;
+    const { columnsVisibility, sorting } = entityPageState[tabValue];
+    const { currentPage, pages, pageSize } = paginationState;
+    const { disablePagination = false } = listView || {};
+    const clientFiltering = (0, utils_1.isClientFilteringEnabled)(exploreMode);
+    const rowDirection = tabletDown
+        ? entities_2.ROW_DIRECTION.VERTICAL
+        : entities_2.ROW_DIRECTION.DEFAULT;
+    const onSortingChange = (updater) => {
+        exploreDispatch({
+            payload: typeof updater === "function" ? updater(sorting) : updater,
+            type: exploreState_1.ExploreActionKind.UpdateSorting,
+        });
+        // Execute GTM tracking.
+        (0, analytics_1.track)(entities_1.EVENT_NAME.ENTITY_TABLE_SORTED, {
+            [entities_1.EVENT_PARAM.ENTITY_NAME]: exploreState.tabValue,
+            [entities_1.EVENT_PARAM.COLUMN_NAME]: sorting[0].id,
+            [entities_1.EVENT_PARAM.SORT_DIRECTION]: sorting[0].desc
+                ? entities_1.SORT_DIRECTION.DESC
+                : entities_1.SORT_DIRECTION.ASC,
+        });
+    };
+    const onColumnVisibilityChange = (updater) => {
+        exploreDispatch({
+            payload: typeof updater === "function" ? updater(columnsVisibility) : updater,
+            type: exploreState_1.ExploreActionKind.UpdateColumnVisibility,
+        });
+    };
+    const state = {
+        columnVisibility: columnsVisibility,
+        pagination: {
+            pageIndex: 0,
+            pageSize: disablePagination ? Number.MAX_SAFE_INTEGER : pageSize,
+        },
+        sorting,
+    };
+    const tableInstance = (0, react_table_1.useReactTable)({
+        columns,
+        data: items,
+        enableColumnFilters: true,
+        enableFilters: true,
+        enableMultiSort: false,
+        enableSorting: true,
+        enableSortingRemoval: false,
+        getCoreRowModel: (0, react_table_1.getCoreRowModel)(),
+        getFacetedRowModel: clientFiltering ? (0, react_table_1.getFacetedRowModel)() : undefined,
+        getFacetedUniqueValues: clientFiltering
+            ? (0, utils_1.getFacetedUniqueValuesWithArrayValues)()
+            : undefined,
+        getFilteredRowModel: clientFiltering ? (0, react_table_1.getFilteredRowModel)() : undefined,
+        getPaginationRowModel: (0, react_table_1.getPaginationRowModel)(),
+        getSortedRowModel: clientFiltering ? (0, react_table_1.getSortedRowModel)() : undefined,
+        initialState,
+        manualPagination: clientFiltering,
+        manualSorting: !clientFiltering,
+        onColumnVisibilityChange,
+        onSortingChange,
+        pageCount: total,
+        state,
+    });
+    const { getAllColumns, getRowModel, getState, getVisibleFlatColumns, nextPage: tableNextPage, previousPage: tablePreviousPage, } = tableInstance;
+    const allColumns = getAllColumns();
+    const { columnFilters } = getState();
+    const { rows: results } = getRowModel();
+    const noResults = !loading && (!results || results.length === 0);
+    const scrollTop = (0, useScroll_1.useScroll)();
+    const visibleColumns = getVisibleFlatColumns();
+    const gridTemplateColumns = (0, utils_1.getGridTemplateColumns)(visibleColumns);
+    const handleTableNextPage = () => {
+        let nextPage = tableNextPage;
+        if (!clientFiltering) {
+            nextPage = () => {
+                exploreDispatch({
+                    payload: "next",
+                    type: exploreState_1.ExploreActionKind.PaginateTable,
+                });
+            };
+            // Execute GTM tracking.
+            (0, analytics_1.track)(entities_1.EVENT_NAME.ENTITY_TABLE_PAGINATED, {
+                [entities_1.EVENT_PARAM.ENTITY_NAME]: exploreState.tabValue,
+                [entities_1.EVENT_PARAM.PAGINATION_DIRECTION]: entities_1.PAGINATION_DIRECTION.NEXT,
+            });
+        }
+        // const nextPage = pagination?.nextPage ?? tableNextPage;
+        nextPage();
+        scrollTop();
+    };
+    const handleTablePreviousPage = () => {
+        let previousPage = tablePreviousPage;
+        if (!clientFiltering) {
+            previousPage = () => {
+                exploreDispatch({
+                    payload: "prev",
+                    type: exploreState_1.ExploreActionKind.PaginateTable,
+                });
+            };
+            (0, analytics_1.track)(entities_1.EVENT_NAME.ENTITY_TABLE_PAGINATED, {
+                [entities_1.EVENT_PARAM.ENTITY_NAME]: exploreState.tabValue,
+                [entities_1.EVENT_PARAM.PAGINATION_DIRECTION]: entities_1.PAGINATION_DIRECTION.PREV,
+            });
+        }
+        previousPage();
+        scrollTop();
+    };
+    // Sets or resets react table column filters `columnFilters` state - for client-side filtering only - with update of filterState.
+    // - `columnFilters` state is "cleared" for related view, and
+    // - `columnFilters` state is "set" for all other views.
+    (0, react_1.useEffect)(() => {
+        if (clientFiltering) {
+            if (isRelatedView) {
+                tableInstance.resetColumnFilters();
+            }
+            else {
+                tableInstance.setColumnFilters(filterState.map(({ categoryKey, value }) => ({
+                    id: categoryKey,
+                    value,
+                })));
+            }
+        }
+    }, [clientFiltering, filterState, isRelatedView, tableInstance]);
+    // Process explore response - client-side filtering only.
+    (0, react_1.useEffect)(() => {
+        if (isRelatedView)
+            return;
+        if (!listItems || listItems.length === 0)
+            return;
+        if (clientFiltering) {
+            exploreDispatch({
+                payload: {
+                    listItems,
+                    loading: false,
+                    paginationResponse: Object.assign(Object.assign({}, constants_1.DEFAULT_PAGINATION_STATE), { pageSize: results.length, rows: results.length }),
+                    selectCategories: (0, utils_1.buildCategoryViews)(allColumns, columnFilters),
+                },
+                type: exploreState_1.ExploreActionKind.ProcessExploreResponse,
+            });
+        }
+    }, [
+        allColumns,
+        clientFiltering,
+        columnFilters,
+        exploreDispatch,
+        isRelatedView,
+        listItems,
+        results,
+    ]);
+    // Unmount - reset entity view to "exact".
+    (0, react_1.useEffect)(() => {
+        return () => {
+            exploreDispatch({
+                payload: exploreState_1.ENTITY_VIEW.EXACT,
+                type: exploreState_1.ExploreActionKind.ToggleEntityView,
+            });
+        };
+    }, [exploreDispatch]);
+    function canNextPage() {
+        return currentPage < pages;
+    }
+    function canPreviousPage() {
+        return currentPage > 1;
+    }
+    return noResults ? (react_1.default.createElement(noResults_1.NoResults, { Paper: paper_styles_1.FluidPaper, title: "No Results found" })) : (react_1.default.createElement(paper_styles_1.FluidPaper, null,
+        react_1.default.createElement(paper_styles_1.GridPaper, null,
+            react_1.default.createElement(tableToolbar_1.TableToolbar, { listView: listView, rowDirection: rowDirection, tableInstance: tableInstance }),
+            react_1.default.createElement(material_1.TableContainer, null,
+                react_1.default.createElement(table_styles_1.GridTable, { collapsable: true, gridTemplateColumns: gridTemplateColumns },
+                    react_1.default.createElement(tableHead_1.TableHead, { rowDirection: rowDirection, tableInstance: tableInstance }),
+                    react_1.default.createElement(tableBody_1.TableBody, { rowDirection: rowDirection, tableInstance: tableInstance }))),
+            !disablePagination && (react_1.default.createElement(pagination_1.Pagination, { canNextPage: canNextPage(), canPreviousPage: canPreviousPage(), currentPage: currentPage, onNextPage: handleTableNextPage, onPreviousPage: handleTablePreviousPage, totalPage: pages !== null && pages !== void 0 ? pages : 0 })))));
+};
+exports.TableComponent = TableComponent;
+// TODO(Dave) review whether memo is necessary - flash between tabs / loading state.
+exports.Table = react_1.default.memo(exports.TableComponent);

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

@@ -0,0 +1,17 @@
+/// <reference types="react" />
+interface Props {
+    collapsable?: boolean;
+}
+export declare const GridTable: import("@emotion/styled").StyledComponent<{
+    children?: import("react").ReactNode;
+    classes?: Partial<import("@mui/material").TableClasses> | undefined;
+    padding?: "normal" | "none" | "checkbox" | undefined;
+    size?: "medium" | "small" | undefined;
+    stickyHeader?: boolean | undefined;
+    sx?: import("@mui/system").SxProps<import("@mui/material").Theme> | undefined;
+} & import("@mui/material/OverridableComponent").CommonProps & Omit<Omit<import("react").DetailedHTMLProps<import("react").TableHTMLAttributes<HTMLTableElement>, HTMLTableElement>, "ref"> & {
+    ref?: ((instance: HTMLTableElement | null) => void) | import("react").RefObject<HTMLTableElement> | null | undefined;
+}, keyof import("@mui/material/OverridableComponent").CommonProps | "children" | "padding" | "sx" | "size" | "stickyHeader"> & {
+    theme?: import("@emotion/react").Theme | undefined;
+} & import("./common/gridTable.styles").GridTableProps & Props, {}, {}>;
+export {};

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

@@ -0,0 +1,21 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.GridTable = void 0;
+const react_1 = require("@emotion/react");
+const styled_1 = __importDefault(require("@emotion/styled"));
+const breakpoints_1 = require("../../styles/common/mixins/breakpoints");
+const gridTable_styles_1 = require("./common/gridTable.styles");
+exports.GridTable = (0, styled_1.default)(gridTable_styles_1.GridTable, {
+    shouldForwardProp: (prop) => prop !== "collapsable",
+}) `
+  // Collapsable.
+  ${breakpoints_1.mediaTabletDown} {
+    ${({ collapsable }) => collapsable &&
+    (0, react_1.css) `
+        grid-template-columns: 1fr;
+      `};
+  }
+`;

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

@@ -0,0 +1,17 @@
+/// <reference types="react" />
+import { ColumnSort } from "@tanstack/react-table";
+import { Pagination } from "../../common/entities";
+import { ColumnConfig, ListViewConfig } from "../../config/entities";
+export interface TableCreatorProps<T> {
+    columns: ColumnConfig<T>[];
+    defaultSort: ColumnSort | undefined;
+    items: T[];
+    listView?: ListViewConfig;
+    loading?: boolean;
+    pageCount?: number;
+    pages: number;
+    pageSize: number;
+    pagination?: Pagination;
+    total?: number;
+}
+export declare const TableCreator: <T extends object>({ columns, defaultSort, items, listView, loading, pageCount, pages, pageSize, pagination, total, }: TableCreatorProps<T>) => JSX.Element;