@databiosphere/findable-ui 4.0.0 → 6.0.0

package/lib/components/Table/components/TableToolbar/components/RowPreview/components/RowDrawer/rowDrawer.styles.js

@@ -0,0 +1,35 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.DrawerTitle = exports.Drawer = void 0;
+const styled_1 = __importDefault(require("@emotion/styled"));
+const breakpoints_1 = require("../../../../../../../../styles/common/mixins/breakpoints");
+const colors_1 = require("../../../../../../../../styles/common/mixins/colors");
+const drawerTitle_1 = require("../../../../../../../common/Drawer/components/DrawerTitle/drawerTitle");
+const drawer_1 = require("../../../../../../../common/Drawer/drawer");
+exports.Drawer = (0, styled_1.default)(drawer_1.Drawer) `
+  &.MuiDrawer-modal {
+    pointer-events: none;
+
+    .MuiDrawer-paper {
+      border-left: 1px solid ${colors_1.smokeMain};
+      box-shadow: -8px 0 8px -4px #10182808, 0 20px 24px -4px #10182814;
+      pointer-events: all;
+      max-width: min(506px, 84vw);
+      width: 100%;
+    }
+
+    ${breakpoints_1.mediaTabletUp} {
+      .MuiDrawer-paper {
+        max-width: min(506px, 50vw);
+      }
+    }
+  }
+`;
+exports.DrawerTitle = (0, styled_1.default)(drawerTitle_1.DrawerTitle) `
+  .MuiTypography-text-heading-small {
+    font-size: 20px;
+  }
+`;

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

@@ -0,0 +1,12 @@
+/// <reference types="react" />
+import { RowData, Table } from "@tanstack/react-table";
+import { ListConfig } from "../../../../../../../../../../config/entities";
+interface RowDetailProps<T extends RowData> {
+    className?: string;
+    columns: ListConfig<T>["columns"];
+    expanded?: boolean;
+    minColumns?: number;
+    tableInstance: Table<T>;
+}
+export declare const RowDetail: <T extends unknown>({ className, columns, expanded, minColumns, tableInstance, }: RowDetailProps<T>) => JSX.Element | null;
+export {};

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;