@databiosphere/findable-ui 5.0.0 → 6.0.0

package/lib/components/Table/components/TableToolbar/components/RowPreview/components/Section/components/RowDetail/rowDetail.js

@@ -0,0 +1,32 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.RowDetail = void 0;
+const material_1 = require("@mui/material");
+const react_1 = __importDefault(require("react"));
+const typography_1 = require("../../../../../../../../../../theme/common/typography");
+const buttonTextPrimary_1 = require("../../../../../../../../../common/Button/components/ButtonTextPrimary/buttonTextPrimary");
+const ComponentCreator_1 = require("../../../../../../../../../ComponentCreator/ComponentCreator");
+const rowDetail_styles_1 = require("./rowDetail.styles");
+const MIN_COLUMNS = 6;
+const RowDetail = ({ className, columns, expanded = true, minColumns = MIN_COLUMNS, tableInstance, }) => {
+    const [showMore, setShowMore] = react_1.default.useState(expanded);
+    const { getRowPreviewRow } = tableInstance;
+    const { original: rowData } = getRowPreviewRow() || {};
+    const visibleColumns = showMore ? columns : columns.slice(0, minColumns);
+    const buttonText = showMore ? "Show less" : "Show more";
+    const onToggleShowMore = () => setShowMore(!showMore);
+    if (!rowData)
+        return null;
+    return (react_1.default.createElement(rowDetail_styles_1.Section, { className: className },
+        visibleColumns.map(({ componentConfig, header }, i) => {
+            var _a;
+            return (react_1.default.createElement(material_1.Grid, { key: i },
+                react_1.default.createElement(material_1.Typography, Object.assign({ color: "ink.light", variant: typography_1.TEXT_BODY_400 }, (_a = componentConfig.props) === null || _a === void 0 ? void 0 : _a.TypographyProps), header),
+                react_1.default.createElement(ComponentCreator_1.ComponentCreator, { components: [componentConfig], response: rowData })));
+        }),
+        react_1.default.createElement(buttonTextPrimary_1.ButtonTextPrimary, { onClick: onToggleShowMore }, buttonText)));
+};
+exports.RowDetail = RowDetail;

package/lib/components/Table/components/TableToolbar/components/RowPreview/components/Section/components/RowDetail/rowDetail.styles.d.ts

@@ -0,0 +1,5 @@
+/// <reference types="react" />
+export declare const Section: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any> | undefined;
+}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;

package/lib/components/Table/components/TableToolbar/components/RowPreview/components/Section/components/RowDetail/rowDetail.styles.js

@@ -0,0 +1,50 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Section = void 0;
+const styled_1 = __importDefault(require("@emotion/styled"));
+const breakpoints_1 = require("../../../../../../../../../../styles/common/mixins/breakpoints");
+const fonts_1 = require("../../../../../../../../../../styles/common/mixins/fonts");
+exports.Section = styled_1.default.div `
+  ${fonts_1.textBody400};
+  display: grid;
+  gap: 16px;
+  grid-auto-rows: minmax(40px, auto);
+  grid-template-columns: minmax(0, 1fr);
+  overflow-wrap: break-word;
+  padding: 16px 24px;
+
+  > .MuiGrid-root {
+    display: grid;
+    gap: 4px;
+    grid-column: 1 / -1;
+    grid-template-columns: inherit;
+  }
+
+  > .MuiButton-textPrimary {
+    grid-column: 1 / -1;
+    justify-self: flex-start;
+    text-align: left;
+    text-transform: none;
+  }
+
+  ${breakpoints_1.mediaTabletUp} {
+    gap: 0 8px;
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+    padding: 8px 24px;
+
+    > .MuiGrid-root {
+      display: contents;
+
+      > * {
+        margin: 10px 0;
+      }
+    }
+  }
+
+  ${breakpoints_1.mediaDesktopSmallUp} {
+    grid-template-columns: 194px minmax(0, 1fr);
+  }
+`;

package/lib/components/Table/components/TableToolbar/components/RowPreview/components/Section/section.d.ts

@@ -0,0 +1,7 @@
+import { ReactNode } from "react";
+export interface SectionProps {
+    children?: ReactNode | ReactNode[];
+    className?: string;
+    title?: ReactNode;
+}
+export declare const Section: ({ children, className, title, }: SectionProps) => JSX.Element;

package/lib/components/Table/components/TableToolbar/components/RowPreview/components/Section/section.js

@@ -0,0 +1,16 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Section = void 0;
+const material_1 = require("@mui/material");
+const react_1 = __importDefault(require("react"));
+const typography_1 = require("../../../../../../../../theme/common/typography");
+const section_styles_1 = require("./section.styles");
+const Section = ({ children, className, title, }) => {
+    return (react_1.default.createElement(section_styles_1.Section, { className: className },
+        react_1.default.createElement(material_1.Typography, { component: "div", variant: typography_1.TEXT_HEADING_SMALL }, title),
+        children));
+};
+exports.Section = Section;

package/lib/components/Table/components/TableToolbar/components/RowPreview/components/Section/section.styles.d.ts

@@ -0,0 +1,5 @@
+/// <reference types="react" />
+export declare const Section: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any> | undefined;
+}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;

package/lib/components/Table/components/TableToolbar/components/RowPreview/components/Section/section.styles.js

@@ -0,0 +1,17 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Section = void 0;
+const styled_1 = __importDefault(require("@emotion/styled"));
+exports.Section = styled_1.default.div `
+  display: grid;
+  gap: 16px;
+  padding: 16px 24px 24px;
+
+  .MuiTypography-text-heading-small {
+    font-size: 18px;
+    line-height: 26px;
+  }
+`;

package/lib/components/Table/components/TableToolbar/components/RowPreview/rowPreview.d.ts

@@ -0,0 +1,8 @@
+/// <reference types="react" />
+import { RowData, Table } from "@tanstack/react-table";
+import { ComponentsConfig } from "../../../../../../config/entities";
+export interface RowPreviewProps<T extends RowData> {
+    rowPreviewView?: ComponentsConfig;
+    tableInstance: Table<T>;
+}
+export declare const RowPreview: <T extends unknown>({ rowPreviewView, tableInstance, }: RowPreviewProps<T>) => JSX.Element | null;

package/lib/components/Table/components/TableToolbar/components/RowPreview/rowPreview.js

@@ -0,0 +1,14 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.RowPreview = void 0;
+const react_1 = __importDefault(require("react"));
+const ComponentCreator_1 = require("../../../../../ComponentCreator/ComponentCreator");
+const RowPreview = ({ rowPreviewView, tableInstance, }) => {
+    if (!rowPreviewView)
+        return null;
+    return (react_1.default.createElement(ComponentCreator_1.ComponentCreator, { components: rowPreviewView, response: tableInstance }));
+};
+exports.RowPreview = RowPreview;

package/lib/components/Table/components/TableToolbar/components/RowSelection/rowSelection.d.ts

@@ -1,9 +1,9 @@
 /// <reference types="react" />
-import { Row } from "@tanstack/react-table";
+import { Row, RowData } from "@tanstack/react-table";
 import { ComponentsConfig } from "../../../../../../config/entities";
-export interface RowSelectionProps<T> {
+export interface RowSelectionProps<T extends RowData> {
     className?: string;
     rows: Row<T>[];
     rowSelectionView?: ComponentsConfig;
 }
-export declare const RowSelection: <T extends object>({ className, rows, rowSelectionView, }: RowSelectionProps<T>) => JSX.Element | null;
+export declare const RowSelection: <T extends unknown>({ className, rows, rowSelectionView, }: RowSelectionProps<T>) => JSX.Element | null;

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

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

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

@@ -31,6 +31,7 @@ const utils_1 = require("../../common/utils");
 const checkboxMenu_1 = require("../CheckboxMenu/checkboxMenu");
 const downloadEntityResults_1 = require("../DownloadEntityResults/downloadEntityResults");
 const paginationSummary_1 = require("../PaginationSummary/paginationSummary");
+const rowPreview_1 = require("./components/RowPreview/rowPreview");
 const rowSelection_1 = require("./components/RowSelection/rowSelection");
 const tableToolbar_styles_1 = require("./tableToolbar.styles");
 const TableToolbar = ({ listView, rowDirection, tableInstance, }) => {
@@ -38,7 +39,7 @@ const TableToolbar = ({ listView, rowDirection, tableInstance, }) => {
     const { paginationState } = exploreState;
     const { currentPage, pages, pageSize, rows } = paginationState;
     const { getSelectedRowModel, resetColumnVisibility } = tableInstance;
-    const { enableDownload } = listView || {};
+    const { enableDownload, rowPreviewView } = listView || {};
     const isLastPage = currentPage === pages;
     const editColumnOptions = (0, utils_1.getEditColumnOptions)(tableInstance);
     const showToolbar = rowDirection === entities_1.ROW_DIRECTION.DEFAULT &&
@@ -49,10 +50,12 @@ const TableToolbar = ({ listView, rowDirection, tableInstance, }) => {
     const onResetColumnVisibility = () => {
         resetColumnVisibility(false);
     };
-    return (react_1.default.createElement(react_1.Fragment, null, showToolbar && (react_1.default.createElement(tableToolbar_styles_1.Toolbar, { variant: "table" },
-        (0, utils_1.isAnyRowSelected)(tableInstance) ? (react_1.default.createElement(rowSelection_1.RowSelection, { rows: getSelectedRowModel().rows, rowSelectionView: listView === null || listView === void 0 ? void 0 : listView.rowSelectionView })) : (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 }))))));
+    return (react_1.default.createElement(react_1.Fragment, null,
+        showToolbar && (react_1.default.createElement(tableToolbar_styles_1.Toolbar, { variant: "table" },
+            (0, utils_1.isAnyRowSelected)(tableInstance) ? (react_1.default.createElement(rowSelection_1.RowSelection, { rows: getSelectedRowModel().rows, rowSelectionView: listView === null || listView === void 0 ? void 0 : listView.rowSelectionView })) : (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 })))),
+        react_1.default.createElement(rowPreview_1.RowPreview, { rowPreviewView: rowPreviewView, tableInstance: tableInstance })));
 };
 exports.TableToolbar = TableToolbar;

package/lib/components/Table/features/RowPreview/constants.d.ts

@@ -0,0 +1,2 @@
+import { TableFeature } from "@tanstack/react-table";
+export declare const ROW_PREVIEW: TableFeature;

package/lib/components/Table/features/RowPreview/constants.js

@@ -0,0 +1,45 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ROW_PREVIEW = void 0;
+const react_table_1 = require("@tanstack/react-table");
+const utils_1 = require("./utils");
+exports.ROW_PREVIEW = {
+    createRow: (row, table) => {
+        row.getIsPreview = () => {
+            return (0, utils_1.getIsPreview)(row, table);
+        };
+        row.togglePreview = () => {
+            (0, utils_1.togglePreview)(row, table);
+        };
+    },
+    createTable: (table) => {
+        table.getIsRowPreview = () => {
+            return (0, utils_1.getIsRowPreview)(table);
+        };
+        table.getRowPreviewRow = () => {
+            return (0, utils_1.getRowPreviewRow)(table);
+        };
+        table.resetRowPreview = () => {
+            table.setRowPreview(undefined);
+        };
+        table.setRowPreview = (updater) => {
+            var _a, _b;
+            const safeUpdater = (old) => {
+                return (0, react_table_1.functionalUpdate)(updater, old);
+            };
+            return (_b = (_a = table.options).onRowPreviewChange) === null || _b === void 0 ? void 0 : _b.call(_a, safeUpdater);
+        };
+        table.toggleRowPreview = () => {
+            (0, utils_1.toggleRowPreview)(table);
+        };
+    },
+    getDefaultOptions: (table) => {
+        return {
+            enableRowPreview: true,
+            onRowPreviewChange: (0, react_table_1.makeStateUpdater)("rowPreview", table),
+        };
+    },
+    getInitialState: (initialState) => {
+        return Object.assign(Object.assign({}, initialState), { rowPreview: undefined });
+    },
+};

package/lib/components/Table/features/RowPreview/entities.d.ts

@@ -0,0 +1,22 @@
+import { OnChangeFn, Row, RowData, Updater } from "@tanstack/react-table";
+export interface RowPreviewInstance<T extends RowData> {
+    getIsRowPreview: () => boolean;
+    getRowPreviewRow: () => Row<T> | undefined;
+    resetRowPreview: () => void;
+    setRowPreview: (updater: Updater<RowPreviewState>) => void;
+    toggleRowPreview: () => void;
+}
+export interface RowPreviewOptions {
+    enableRowPreview?: boolean;
+    onRowPreviewChange?: OnChangeFn<RowPreviewState>;
+}
+export interface RowPreviewRow {
+    getIsPreview: () => boolean;
+    togglePreview: () => void;
+}
+export declare type RowPreviewState = {
+    [id: string]: boolean;
+} | undefined;
+export interface RowPreviewTableState {
+    rowPreview: RowPreviewState;
+}

package/lib/components/Table/features/RowPreview/entities.js

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

package/lib/components/Table/features/RowPreview/utils.d.ts

@@ -0,0 +1,33 @@
+import { Row, RowData, Table } from "@tanstack/react-table";
+/**
+ * Returns true if the row is selected for preview.
+ * @param row - Row.
+ * @param table - Table.
+ * @returns true if the row is selected for preview.
+ */
+export declare function getIsPreview<T extends RowData>(row: Row<T>, table: Table<T>): boolean;
+/**
+ * Returns true if any row is selected for preview.
+ * @param table - Table.
+ * @returns true if any row is selected for preview.
+ */
+export declare function getIsRowPreview<T extends RowData>(table: Table<T>): boolean;
+/**
+ * Returns row selected for preview. Row data is returned even if the row is no longer "previewed" i.e. selected for preview.
+ * @param table - Table.
+ * @returns row selected for preview.
+ */
+export declare function getRowPreviewRow<T extends RowData>(table: Table<T>): Row<T> | undefined;
+/**
+ * Toggles the preview state of the row.
+ * If the row is already selected for preview, the preview state is toggled off.
+ * If the row is not selected for preview, the preview state is updated.
+ * @param row - Row.
+ * @param table - Table.
+ */
+export declare function togglePreview<T extends RowData>(row: Row<T>, table: Table<T>): void;
+/**
+ * Toggles the preview state of any row selected for preview.
+ * @param table - Table.
+ */
+export declare function toggleRowPreview<T extends RowData>(table: Table<T>): void;

package/lib/components/Table/features/RowPreview/utils.js

@@ -0,0 +1,89 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.toggleRowPreview = exports.togglePreview = exports.getRowPreviewRow = exports.getIsRowPreview = exports.getIsPreview = void 0;
+/**
+ * Returns true if the row is selected for preview.
+ * @param row - Row.
+ * @param table - Table.
+ * @returns true if the row is selected for preview.
+ */
+function getIsPreview(row, table) {
+    const keyValue = getRowPreviewKeyValue(table);
+    if (!keyValue)
+        return false;
+    const [key, value] = keyValue;
+    if (!value)
+        return false;
+    return key === row.id;
+}
+exports.getIsPreview = getIsPreview;
+/**
+ * Returns true if any row is selected for preview.
+ * @param table - Table.
+ * @returns true if any row is selected for preview.
+ */
+function getIsRowPreview(table) {
+    const keyValue = getRowPreviewKeyValue(table);
+    if (!keyValue)
+        return false;
+    const [, value] = keyValue;
+    return value;
+}
+exports.getIsRowPreview = getIsRowPreview;
+/**
+ * Returns row selected for preview. Row data is returned even if the row is no longer "previewed" i.e. selected for preview.
+ * @param table - Table.
+ * @returns row selected for preview.
+ */
+function getRowPreviewRow(table) {
+    const keyValue = getRowPreviewKeyValue(table);
+    if (!keyValue)
+        return;
+    const [key] = keyValue;
+    // We return the original row data, even if the row is no longer "previewed" i.e. selected for preview.
+    // This is to ensure any drawer or modal that is still open can display the row data, until the modal or drawer is closed.
+    const rowsById = table.getRowModel().rowsById;
+    return rowsById[key];
+}
+exports.getRowPreviewRow = getRowPreviewRow;
+/**
+ * Returns the key, value tuple of the row selected for preview.
+ * @param table - Table.
+ * @returns row preview key, value tuple.
+ */
+function getRowPreviewKeyValue(table) {
+    const { getState } = table;
+    const { rowPreview } = getState();
+    if (!rowPreview)
+        return;
+    const [[key, value]] = Object.entries(rowPreview);
+    return [key, value];
+}
+/**
+ * Toggles the preview state of the row.
+ * If the row is already selected for preview, the preview state is toggled off.
+ * If the row is not selected for preview, the preview state is updated.
+ * @param row - Row.
+ * @param table - Table.
+ */
+function togglePreview(row, table) {
+    if (row.getIsPreview()) {
+        table.toggleRowPreview();
+        return;
+    }
+    table.setRowPreview({ [row.id]: true });
+}
+exports.togglePreview = togglePreview;
+/**
+ * Toggles the preview state of any row selected for preview.
+ * @param table - Table.
+ */
+function toggleRowPreview(table) {
+    const keyValue = getRowPreviewKeyValue(table);
+    if (!keyValue) {
+        return;
+    }
+    const [key, value] = keyValue;
+    table.setRowPreview({ [key]: !value });
+}
+exports.toggleRowPreview = toggleRowPreview;

package/lib/components/Table/features/entities.d.ts

@@ -0,0 +1,7 @@
+import { RowData } from "@tanstack/react-table";
+import { RowPreviewInstance, RowPreviewOptions, RowPreviewRow, RowPreviewTableState } from "./RowPreview/entities";
+export declare type CustomFeatureInitialTableState = Partial<RowPreviewTableState>;
+export declare type CustomFeatureInstance<T extends RowData> = RowPreviewInstance<T>;
+export declare type CustomFeatureOptions = RowPreviewOptions;
+export declare type CustomFeatureRow = RowPreviewRow;
+export declare type CustomFeatureTableState = RowPreviewTableState;

package/lib/components/Table/features/entities.js

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

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

@@ -1,20 +1,13 @@
 /// <reference types="react" />
-import { ColumnDef, InitialTableState } from "@tanstack/react-table";
-import { CoreOptions } from "@tanstack/table-core";
-import { Pagination } from "../../common/entities";
+import { ColumnDef, CoreOptions, InitialTableState, RowData } from "@tanstack/react-table";
 import { ListViewConfig } from "../../config/entities";
-export interface TableProps<T extends object> {
+export interface TableProps<T extends RowData> {
     columns: ColumnDef<T>[];
-    count?: number;
     getRowId?: CoreOptions<T>["getRowId"];
     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.
@@ -26,8 +19,7 @@ export interface TableProps<T extends object> {
  * @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, getRowId, initialState, items, listView, total, }: TableProps<T>) => JSX.Element;
-export declare const Table: <T extends object>({ columns, getRowId, initialState, items, listView, total, }: TableProps<T>) => JSX.Element;
+export declare const TableComponent: <T extends unknown>({ columns, getRowId, initialState, items, listView, }: TableProps<T>) => JSX.Element;
+export declare const Table: <T extends unknown>({ columns, getRowId, initialState, items, listView, }: TableProps<T>) => JSX.Element;

package/lib/components/Table/table.js

@@ -44,6 +44,7 @@ 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 constants_2 = require("./features/RowPreview/constants");
 const table_styles_1 = require("./table.styles");
 /**
  * This table can be Controlled or Uncontrolled based on the set of props passed to it.
@@ -55,21 +56,21 @@ const table_styles_1 = require("./table.styles");
  * @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, getRowId, initialState, items, listView, total, }) => {
+const TableComponent = ({ columns, getRowId, initialState, items, listView, }) => {
     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 { entityPageState, filterState, listItems, loading, paginationState, rowPreview, tabValue, } = exploreState;
     const { columnsVisibility, enableRowSelection, rowSelection, sorting } = entityPageState[tabValue];
-    const { currentPage, pages, pageSize } = paginationState;
-    const { disablePagination = false } = listView || {};
+    const { currentPage, pages, pageSize, rows: pageCount } = paginationState;
+    const { disablePagination = false, enableRowPreview = false } = listView || {};
     const clientFiltering = (0, utils_1.isClientFilteringEnabled)(exploreMode);
     const rowDirection = tabletDown
         ? entities_2.ROW_DIRECTION.VERTICAL
         : entities_2.ROW_DIRECTION.DEFAULT;
+    const pagination = (0, react_1.useMemo)(() => (0, utils_1.getTableStatePagination)(currentPage - 1, pageSize), [currentPage, pageSize]);
     const onSortingChange = (updater) => {
         exploreDispatch({
             payload: typeof updater === "function" ? updater(sorting) : updater,
@@ -90,6 +91,12 @@ const TableComponent = ({ columns, getRowId, initialState, items, listView, tota
             type: exploreState_1.ExploreActionKind.UpdateColumnVisibility,
         });
     };
+    const onRowPreviewChange = (updater) => {
+        exploreDispatch({
+            payload: typeof updater === "function" ? updater(rowPreview) : updater,
+            type: exploreState_1.ExploreActionKind.UpdateRowPreview,
+        });
+    };
     const onRowSelectionChange = (updater) => {
         exploreDispatch({
             payload: typeof updater === "function" ? updater(rowSelection) : updater,
@@ -98,19 +105,19 @@ const TableComponent = ({ columns, getRowId, initialState, items, listView, tota
     };
     const state = {
         columnVisibility: columnsVisibility,
-        pagination: {
-            pageIndex: 0,
-            pageSize: disablePagination ? Number.MAX_SAFE_INTEGER : pageSize,
-        },
+        pagination,
+        rowPreview,
         rowSelection,
         sorting,
     };
     const tableInstance = (0, react_table_1.useReactTable)({
+        _features: [constants_2.ROW_PREVIEW],
         columns,
         data: items,
         enableColumnFilters: true,
         enableFilters: true,
         enableMultiSort: clientFiltering,
+        enableRowPreview,
         enableRowSelection,
         enableSorting: true,
         enableSortingRemoval: false,
@@ -124,12 +131,13 @@ const TableComponent = ({ columns, getRowId, initialState, items, listView, tota
         getRowId,
         getSortedRowModel: clientFiltering ? (0, react_table_1.getSortedRowModel)() : undefined,
         initialState,
-        manualPagination: clientFiltering,
+        manualPagination: true,
         manualSorting: !clientFiltering,
         onColumnVisibilityChange,
+        onRowPreviewChange,
         onRowSelectionChange,
         onSortingChange,
-        pageCount: total,
+        pageCount,
         state,
     });
     const { getAllColumns, getRowModel, getState, getVisibleFlatColumns, nextPage: tableNextPage, previousPage: tablePreviousPage, } = tableInstance;
@@ -155,7 +163,6 @@ const TableComponent = ({ columns, getRowId, initialState, items, listView, tota
                 [entities_1.EVENT_PARAM.PAGINATION_DIRECTION]: entities_1.PAGINATION_DIRECTION.NEXT,
             });
         }
-        // const nextPage = pagination?.nextPage ?? tableNextPage;
         nextPage();
         scrollTop();
     };
@@ -176,26 +183,17 @@ const TableComponent = ({ columns, getRowId, initialState, items, listView, tota
         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.
+    // Sets react table column filters `columnFilters` state - for client-side filtering only - with update of filterState.
     (0, react_1.useEffect)(() => {
         if (clientFiltering) {
-            if (isRelatedView) {
-                tableInstance.resetColumnFilters();
-            }
-            else {
-                tableInstance.setColumnFilters(filterState.map(({ categoryKey, value }) => ({
-                    id: categoryKey,
-                    value,
-                })));
-            }
+            tableInstance.setColumnFilters(filterState.map(({ categoryKey, value }) => ({
+                id: categoryKey,
+                value,
+            })));
         }
-    }, [clientFiltering, filterState, isRelatedView, tableInstance]);
+    }, [clientFiltering, filterState, tableInstance]);
     // Process explore response - client-side filtering only.
     (0, react_1.useEffect)(() => {
-        if (isRelatedView)
-            return;
         if (!listItems || listItems.length === 0)
             return;
         if (clientFiltering) {
@@ -214,26 +212,16 @@ const TableComponent = ({ columns, getRowId, initialState, items, listView, tota
         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,
+    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, { variant: "table" },
         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,

package/lib/components/TableCreator/common/entities.d.ts

@@ -1,4 +1,4 @@
-import { ColumnMeta } from "@tanstack/table-core";
+import { ColumnMeta } from "@tanstack/react-table";
 import { ColumnConfig } from "../../../config/entities";
 export interface BaseColumnConfig<T, TValue> extends ColumnConfig<T> {
     meta?: ColumnMeta<T, TValue>;