@databiosphere/findable-ui 15.0.2 → 16.0.0

package/.release-please-manifest.json

@@ -1,3 +1,3 @@
 {
-  ".": "15.0.2"
+  ".": "16.0.0"
 }

package/CHANGELOG.md

@@ -1,5 +1,18 @@
 # Changelog
 
+## [16.0.0](https://github.com/DataBiosphere/findable-ui/compare/v15.0.2...v16.0.0) (2024-11-25)
+
+
+### ⚠ BREAKING CHANGES
+
+* option to add row count on tables ([#284](https://github.com/DataBiosphere/findable-ui/issues/284)) (#285)
+
+### Features
+
+* breadcrumbs should not inherit the new link style ([#271](https://github.com/DataBiosphere/findable-ui/issues/271)) ([#280](https://github.com/DataBiosphere/findable-ui/issues/280)) ([bae0178](https://github.com/DataBiosphere/findable-ui/commit/bae017818f3c13aea39530e9e7a1a9dd63123f1a))
+* option to add row count on tables ([#284](https://github.com/DataBiosphere/findable-ui/issues/284)) ([#285](https://github.com/DataBiosphere/findable-ui/issues/285)) ([1643efb](https://github.com/DataBiosphere/findable-ui/commit/1643efbf366546509a07b1a59ba00a131f081e13))
+* update contentlayout to centre content when there is no navigation ([#282](https://github.com/DataBiosphere/findable-ui/issues/282)) ([#286](https://github.com/DataBiosphere/findable-ui/issues/286)) ([798312f](https://github.com/DataBiosphere/findable-ui/commit/798312f803038d52463698caf0f415914668d4be))
+
 ## [15.0.2](https://github.com/DataBiosphere/findable-ui/compare/v15.0.1...v15.0.2) (2024-11-20)
 
 

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

@@ -1,7 +1,7 @@
-import { TableCell as MTableCell } from "@mui/material";
+import { TableCell } from "@mui/material";
 import { flexRender } from "@tanstack/react-table";
 import React, { Fragment } from "react";
-import { getTableCellPadding } from "../../../../../Table/components/TableCell/common/utils";
+import { getTableCellAlign, getTableCellPadding, } from "../../../../../Table/components/TableCell/common/utils";
 import { TableRow } from "../../../../../Table/components/TableRow/tableRow.styles";
 export const TableRows = ({ tableInstance, tableView, }) => {
     const { getRowModel } = tableInstance;
@@ -14,7 +14,7 @@ export const TableRows = ({ tableInstance, tableView, }) => {
                 return null; // Display of aggregated cells is currently not supported.
             if (cell.getIsPlaceholder())
                 return null; // Display of placeholder cells is currently not supported.
-            return (React.createElement(MTableCell, { key: cell.id, padding: getTableCellPadding(cell.column.id), size: tableCellSize }, flexRender(cell.column.columnDef.cell, cell.getContext())));
+            return (React.createElement(TableCell, { key: cell.id, align: getTableCellAlign(cell.column), padding: getTableCellPadding(cell.column.id), size: tableCellSize }, flexRender(cell.column.columnDef.cell, cell.getContext())));
         })));
     })));
 };

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

@@ -3,8 +3,10 @@ import { getCoreRowModel, useReactTable, } from "@tanstack/react-table";
 import React from "react";
 import { BREAKPOINT_FN_NAME, useBreakpointHelper, } from "../../../../hooks/useBreakpointHelper";
 import { TABLET } from "../../../../theme/common/breakpoints";
+import { COLUMN_DEF } from "../../../Table/common/columnDef";
 import { ROW_DIRECTION } from "../../../Table/common/entities";
 import { TableHead } from "../../../Table/components/TableHead/tableHead";
+import { ROW_POSITION } from "../../../Table/features/RowPosition/constants";
 import { ROW_PREVIEW } from "../../../Table/features/RowPreview/constants";
 import { GridTable } from "../../../Table/table.styles";
 import { generateColumnDefinitions } from "./common/utils";
@@ -16,8 +18,11 @@ export const Table = ({ className, collapsable = true, columns, gridTemplateColu
     const { stickyHeader = false } = table || {};
     const { sx: tableContainerSx } = tableContainer || {};
     const tableInstance = useReactTable({
-        _features: [ROW_PREVIEW],
-        columns: generateColumnDefinitions(columns),
+        _features: [ROW_POSITION, ROW_PREVIEW],
+        columns: generateColumnDefinitions([
+            COLUMN_DEF.ROW_POSITION,
+            ...columns,
+        ]),
         data: items,
         enableSorting: false,
         getCoreRowModel: getCoreRowModel(),

package/lib/components/Export/components/ExportForm/exportForm.styles.js

@@ -2,7 +2,7 @@ import { css } from "@emotion/react";
 import styled from "@emotion/styled";
 import { FormControl as MFormControl } from "@mui/material";
 import { mediaTabletUp } from "../../../../styles/common/mixins/breakpoints";
-import { inkMain, smokeLightest, smokeMain, } from "../../../../styles/common/mixins/colors";
+import { inkMain, smokeMain } from "../../../../styles/common/mixins/colors";
 import { textBodyLarge500 } from "../../../../styles/common/mixins/fonts";
 import { sectionMargin, sectionMarginSm, } from "../../../common/Section/section.styles";
 export const margin = ({ theme }) => css `
@@ -64,8 +64,6 @@ export const TableFormControl = styled(FormControl) `
 
     .MuiTable-root {
       th {
-        background-color: ${smokeLightest};
-
         .MuiFormControlLabel-label {
           font: inherit;
         }

package/lib/components/Layout/components/ContentLayout/contentLayout.d.ts

@@ -1,10 +1,10 @@
 import { ReactNode } from "react";
+import { BaseComponentProps } from "../../../types";
 import { LayoutStyle } from "./common/entities";
 export interface ContentLayoutProps {
-    className?: string;
     content: ReactNode;
     layoutStyle?: LayoutStyle;
     navigation?: ReactNode;
     outline?: ReactNode;
 }
-export declare const ContentLayout: ({ className, content, layoutStyle, navigation, outline, }: ContentLayoutProps) => JSX.Element;
+export declare const ContentLayout: ({ className, content, layoutStyle, navigation, outline, }: BaseComponentProps & ContentLayoutProps) => JSX.Element;

package/lib/components/Layout/components/ContentLayout/contentLayout.js

@@ -5,7 +5,7 @@ import { Content, ContentGrid, ContentLayout as Layout, Navigation, NavigationGr
 export const ContentLayout = ({ className, content, layoutStyle, navigation, outline, }) => {
     const { asPath } = useRouter();
     const { layoutState: { headerHeight }, } = useLayoutState();
-    return (React.createElement(Layout, { className: className, panelColor: layoutStyle?.content },
+    return (React.createElement(Layout, { className: className, hasNavigation: Boolean(navigation), panelColor: layoutStyle?.content },
         navigation && (React.createElement(NavigationGrid, { headerHeight: headerHeight, panelColor: layoutStyle?.navigation },
             React.createElement(Positioner, { headerHeight: headerHeight },
                 React.createElement(Navigation, null, navigation)))),

package/lib/components/Layout/components/ContentLayout/contentLayout.styles.d.ts

@@ -1,5 +1,6 @@
 import { PanelBackgroundColor } from "./common/entities";
 interface LayoutProps {
+    hasNavigation?: boolean;
     panelColor?: PanelBackgroundColor;
 }
 interface GridProps {

package/lib/components/Layout/components/ContentLayout/contentLayout.styles.js

@@ -22,10 +22,17 @@ export const ContentLayout = styled.div `
   margin: 0 auto;
 
   ${mediaDesktopSmallUp} {
-    grid-template-areas: "navigation content";
-    grid-template-columns:
-      ${NAV_GRID_WIDTH}px
-      1fr;
+    ${({ hasNavigation }) => hasNavigation
+    ? css `
+            grid-template-areas: "navigation content";
+            grid-template-columns:
+              ${NAV_GRID_WIDTH}px
+              1fr;
+          `
+    : css `
+            grid-template-areas: "content";
+            grid-template-columns: 1fr;
+          `};
   }
 
   ${media1366Up} {

package/lib/components/Table/common/columnDef.d.ts

@@ -0,0 +1,2 @@
+import { ColumnDef, RowData } from "@tanstack/react-table";
+export declare const COLUMN_DEF: Record<string, ColumnDef<RowData>>;

package/lib/components/Table/common/columnDef.js

@@ -0,0 +1,17 @@
+import { TABLE_CELL_PROPS } from "../../../styles/common/mui/tableCell";
+import { ACCESSOR_KEYS } from "../../TableCreator/common/constants";
+import { RowPositionCell } from "../components/TableCell/components/RowPositionCell/rowPositionCell";
+export const COLUMN_DEF = {
+    ROW_POSITION: {
+        cell: RowPositionCell,
+        enableHiding: false,
+        enableSorting: false,
+        header: "",
+        id: ACCESSOR_KEYS.ROW_POSITION,
+        meta: {
+            align: TABLE_CELL_PROPS.ALIGN.RIGHT,
+            header: "",
+            width: "max-content",
+        },
+    },
+};

package/lib/components/Table/common/gridTable.styles.js

@@ -19,8 +19,7 @@ export const GridTable = styled(MTable, {
     background-color: ${white};
   }
 
-  td,
-  th {
+  td {
     background-color: inherit;
   }
 

package/lib/components/Table/components/TableCell/common/utils.d.ts

@@ -1,8 +1,14 @@
-import { TableCellProps as MTableCellProps } from "@mui/material";
-import { CoreCell, CoreHeader, RowData } from "@tanstack/react-table";
+import { TableCellProps } from "@mui/material";
+import { Column, CoreCell, CoreHeader, RowData } from "@tanstack/react-table";
+/**
+ * Returns table cell alignment based on the cell.
+ * @param column - Column.
+ * @returns table cell alignment.
+ */
+export declare function getTableCellAlign<T extends RowData, TValue>(column: Column<T, TValue>): TableCellProps["align"];
 /**
  * Returns table cell padding based on the cell ID.
  * @param id - Cell ID.
  * @returns table cell padding.
  */
-export declare function getTableCellPadding<T extends RowData, TValue>(id: CoreHeader<T, TValue>["id"] | CoreCell<T, TValue>["id"]): MTableCellProps["padding"];
+export declare function getTableCellPadding<T extends RowData, TValue>(id: CoreHeader<T, TValue>["id"] | CoreCell<T, TValue>["id"]): TableCellProps["padding"];

package/lib/components/Table/components/TableCell/common/utils.js

@@ -1,11 +1,25 @@
+import { TABLE_CELL_PROPS } from "../../../../../styles/common/mui/tableCell";
 import { ACCESSOR_KEYS } from "../../../../TableCreator/common/constants";
+/**
+ * Returns table cell alignment based on the cell.
+ * @param column - Column.
+ * @returns table cell alignment.
+ */
+export function getTableCellAlign(column) {
+    return column.columnDef.meta?.align;
+}
 /**
  * Returns table cell padding based on the cell ID.
  * @param id - Cell ID.
  * @returns table cell padding.
  */
 export function getTableCellPadding(id) {
-    if (id === ACCESSOR_KEYS.SELECT) {
-        return "checkbox";
+    switch (id) {
+        case ACCESSOR_KEYS.ROW_POSITION:
+            return TABLE_CELL_PROPS.PADDING.NORMAL;
+        case ACCESSOR_KEYS.SELECT:
+            return TABLE_CELL_PROPS.PADDING.CHECKBOX;
+        default:
+            return TABLE_CELL_PROPS.PADDING.NORMAL;
     }
 }

package/lib/components/Table/components/TableCell/components/RowPositionCell/constants.d.ts

@@ -0,0 +1,2 @@
+import { TypographyOwnProps } from "@mui/material";
+export declare const TYPOGRAPHY_PROPS: Partial<TypographyOwnProps>;

package/lib/components/Table/components/TableCell/components/RowPositionCell/constants.js

@@ -0,0 +1,5 @@
+import { VARIANT } from "../../../../../../styles/common/mui/typography";
+export const TYPOGRAPHY_PROPS = {
+    sx: { marginRight: -2, paddingLeft: 2 },
+    variant: VARIANT.INHERIT,
+};

package/lib/components/Table/components/TableCell/components/RowPositionCell/rowPositionCell.d.ts

@@ -0,0 +1,3 @@
+import { CellContext, RowData } from "@tanstack/react-table";
+import { BaseComponentProps } from "../../../../../types";
+export declare const RowPositionCell: <TData extends RowData, TValue>({ className, ...cellContext }: BaseComponentProps & CellContext<TData, TValue>) => JSX.Element;

package/lib/components/Table/components/TableCell/components/RowPositionCell/rowPositionCell.js

@@ -0,0 +1,6 @@
+import { Typography } from "@mui/material";
+import React from "react";
+import { TYPOGRAPHY_PROPS } from "./constants";
+export const RowPositionCell = ({ className, ...cellContext }) => {
+    return (React.createElement(Typography, { ...TYPOGRAPHY_PROPS, className: className, component: "div" }, cellContext.row.getRowPosition()));
+};

package/lib/components/Table/components/TableHead/tableHead.js

@@ -1,14 +1,14 @@
-import { TableCell as MTableCell, TableHead as MTableHead, TableRow as MTableRow, TableSortLabel, } from "@mui/material";
+import { TableHead as MTableHead, TableRow as MTableRow, TableCell, TableSortLabel, } from "@mui/material";
 import { flexRender } from "@tanstack/react-table";
 import React, { Fragment } from "react";
 import { ROW_DIRECTION } from "../../common/entities";
 import { getTableSortLabelProps } from "../../common/utils";
-import { getTableCellPadding } from "../TableCell/common/utils";
+import { getTableCellAlign, getTableCellPadding, } from "../TableCell/common/utils";
 export const TableHead = ({ rowDirection, tableInstance, }) => {
     return (React.createElement(Fragment, null, rowDirection === ROW_DIRECTION.DEFAULT &&
         tableInstance.getHeaderGroups().map((headerGroup) => (React.createElement(MTableHead, { key: headerGroup.id },
             React.createElement(MTableRow, null, headerGroup.headers.map((header) => {
                 const { column: { columnDef: { meta: { enableSortingInteraction = true } = {}, }, }, } = header;
-                return header.column.getIsGrouped() ? null : (React.createElement(MTableCell, { key: header.id, padding: getTableCellPadding(header.id) }, header.column.getCanSort() && enableSortingInteraction ? (React.createElement(TableSortLabel, { ...getTableSortLabelProps(header.column) }, flexRender(header.column.columnDef.header, header.getContext()))) : (flexRender(header.column.columnDef.header, header.getContext()))));
+                return header.column.getIsGrouped() ? null : (React.createElement(TableCell, { key: header.id, align: getTableCellAlign(header.column), padding: getTableCellPadding(header.id) }, header.column.getCanSort() && enableSortingInteraction ? (React.createElement(TableSortLabel, { ...getTableSortLabelProps(header.column) }, flexRender(header.column.columnDef.header, header.getContext()))) : (flexRender(header.column.columnDef.header, header.getContext()))));
             })))))));
 };

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

@@ -1,7 +1,7 @@
-import { TableCell as MTableCell } from "@mui/material";
+import { TableCell } from "@mui/material";
 import { flexRender } from "@tanstack/react-table";
 import React, { Fragment } from "react";
-import { getTableCellPadding } from "../TableCell/common/utils";
+import { getTableCellAlign, getTableCellPadding, } from "../TableCell/common/utils";
 import { TableRow } from "../TableRow/tableRow.styles";
 export const TableRows = ({ tableInstance, virtualizer, }) => {
     const { getRowModel } = tableInstance;
@@ -10,6 +10,6 @@ export const TableRows = ({ tableInstance, virtualizer, }) => {
     return (React.createElement(Fragment, null, virtualItems.map((virtualRow) => {
         const row = rows[virtualRow.index];
         const { getIsPreview } = row;
-        return (React.createElement(TableRow, { key: row.id, "data-index": virtualRow.index, isPreview: getIsPreview(), ref: virtualizer.measureElement }, row.getVisibleCells().map((cell) => (React.createElement(MTableCell, { key: cell.id, padding: getTableCellPadding(cell.column.id) }, flexRender(cell.column.columnDef.cell, cell.getContext()))))));
+        return (React.createElement(TableRow, { key: row.id, "data-index": virtualRow.index, isPreview: getIsPreview(), ref: virtualizer.measureElement }, row.getVisibleCells().map((cell) => (React.createElement(TableCell, { key: cell.id, align: getTableCellAlign(cell.column), padding: getTableCellPadding(cell.column.id) }, flexRender(cell.column.columnDef.cell, cell.getContext()))))));
     })));
 };

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

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

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

@@ -0,0 +1,17 @@
+import { getRowModel, getRowPosition, initInitialState } from "./utils";
+export const ROW_POSITION = {
+    createCell: (cell, column, row, table) => {
+        row.getRowPosition = () => {
+            return getRowPosition(row.id, table);
+        };
+    },
+    createTable: (table) => {
+        const originalGetRowModel = table.getRowModel.bind(table);
+        table.getRowModel = () => {
+            return getRowModel(table, originalGetRowModel);
+        };
+    },
+    getInitialState: (initialState) => {
+        return initInitialState(initialState);
+    },
+};

package/lib/components/Table/features/RowPosition/types.d.ts

@@ -0,0 +1,3 @@
+export interface RowPositionRow {
+    getRowPosition: () => number;
+}

package/lib/components/Table/features/RowPosition/types.js

@@ -0,0 +1 @@
+export {};

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

@@ -0,0 +1,21 @@
+import { InitialTableState, RowData, RowModel, Table, TableState } from "@tanstack/react-table";
+/**
+ * Returns row model, with getter for row position.
+ * @param table - Table.
+ * @param getRowModel - Table getRowModel function.
+ * @returns row model.
+ */
+export declare function getRowModel<T extends RowData>(table: Table<T>, getRowModel: Table<T>[`getRowModel`]): RowModel<T>;
+/**
+ * Returns the position of the row in the table.
+ * @param rowId - Row ID.
+ * @param table - Table.
+ * @returns row position.
+ */
+export declare function getRowPosition<T extends RowData>(rowId: string, table: Table<T>): number;
+/**
+ * Returns the initial table state.
+ * @param initialState - Initial state.
+ * @returns initial state.
+ */
+export declare function initInitialState(initialState?: InitialTableState): Partial<TableState>;

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

@@ -0,0 +1,55 @@
+import { ACCESSOR_KEYS } from "../../../TableCreator/common/constants";
+import { DEFAULT_PAGINATION } from "../constants";
+/**
+ * Returns row model, with getter for row position.
+ * @param table - Table.
+ * @param getRowModel - Table getRowModel function.
+ * @returns row model.
+ */
+export function getRowModel(table, getRowModel) {
+    const rowModel = getRowModel();
+    rowModel.rows.forEach(({ id }, i) => {
+        rowModel.rowsById[id].getRowPosition = () => calculateRowPosition(table, i);
+    });
+    return rowModel;
+}
+/**
+ * Returns the position of the row in the table.
+ * @param rowId - Row ID.
+ * @param table - Table.
+ * @returns row position.
+ */
+export function getRowPosition(rowId, table) {
+    const { getRowModel } = table;
+    const { rowsById } = getRowModel();
+    return rowsById[rowId].getRowPosition();
+}
+/**
+ * Calculates the position of the row in the table.
+ * @param table - Table.
+ * @param index - Row index.
+ * @returns row position.
+ */
+function calculateRowPosition(table, index) {
+    const { getState } = table;
+    const { pagination: { pageIndex, pageSize }, } = getState();
+    return pageIndex * pageSize + (index + 1);
+}
+/**
+ * Returns the initial table state.
+ * @param initialState - Initial state.
+ * @returns initial state.
+ */
+export function initInitialState(initialState) {
+    return {
+        ...initialState,
+        columnVisibility: {
+            [ACCESSOR_KEYS.ROW_POSITION]: false,
+            ...initialState?.columnVisibility,
+        },
+        pagination: {
+            ...DEFAULT_PAGINATION,
+            ...initialState?.pagination,
+        },
+    };
+}

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

@@ -0,0 +1,6 @@
+import { PaginationState } from "@tanstack/react-table";
+/**
+ * Default TanStack pagination state.
+ * See https://tanstack.com/table/latest/docs/guide/custom-features#getinitialstate.
+ */
+export declare const DEFAULT_PAGINATION: PaginationState;

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

@@ -0,0 +1,8 @@
+/**
+ * Default TanStack pagination state.
+ * See https://tanstack.com/table/latest/docs/guide/custom-features#getinitialstate.
+ */
+export const DEFAULT_PAGINATION = {
+    pageIndex: 0,
+    pageSize: 10,
+};

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

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

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

@@ -1,5 +1,5 @@
 import { ColumnDef, CoreOptions, InitialTableState, RowData } from "@tanstack/react-table";
-import { ListViewConfig } from "../../config/entities";
+import { ListConfig, ListViewConfig } from "../../config/entities";
 export interface TableProps<T extends RowData> {
     columns: ColumnDef<T>[];
     getRowId?: CoreOptions<T>["getRowId"];
@@ -7,6 +7,7 @@ export interface TableProps<T extends RowData> {
     items: T[];
     listView?: ListViewConfig;
     loading?: boolean;
+    tableOptions?: ListConfig<T>["tableOptions"];
 }
 /**
  * This table can be Controlled or Uncontrolled based on the set of props passed to it.
@@ -18,7 +19,8 @@ export interface TableProps<T extends RowData> {
  * @param tableProps.initialState - Initial table state.
  * @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 declare const TableComponent: <T extends RowData>({ columns, getRowId, initialState, items, listView, }: TableProps<T>) => JSX.Element;
+export declare const TableComponent: <T extends RowData>({ columns, getRowId, initialState, items, listView, tableOptions, }: TableProps<T>) => JSX.Element;
 export declare const Table: typeof TableComponent;

package/lib/components/Table/table.js

@@ -18,6 +18,7 @@ import { Pagination as DXPagination } from "./components/Pagination/pagination";
 import { TableBody } from "./components/TableBody/tableBody";
 import { TableHead } from "./components/TableHead/tableHead";
 import { TableToolbar } from "./components/TableToolbar/tableToolbar";
+import { ROW_POSITION } from "./features/RowPosition/constants";
 import { ROW_PREVIEW } from "./features/RowPreview/constants";
 import { GridTable } from "./table.styles";
 /**
@@ -30,9 +31,10 @@ import { GridTable } from "./table.styles";
  * @param tableProps.initialState - Initial table state.
  * @param tableProps.items - Row data to display.
  * @param tableProps.listView - List view configuration.
+ * @param tableProps.tableOptions - TanStack table options.
  * @returns Configured table element for display.
  */
-export const TableComponent = ({ columns, getRowId, initialState, items, listView, }) => {
+export const TableComponent = ({ columns, getRowId, initialState, items, listView, tableOptions, }) => {
     const tabletDown = useBreakpointHelper(BREAKPOINT_FN_NAME.DOWN, TABLET);
     const exploreMode = useExploreMode();
     const { exploreDispatch, exploreState } = useExploreState();
@@ -84,8 +86,23 @@ export const TableComponent = ({ columns, getRowId, initialState, items, listVie
         rowSelection,
         sorting,
     };
+    /**
+     * TODO: Refactor `ListConfig` to follow the API patterns of the TanStack Table library.
+     * 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: Deprecate the following properties:
+     * - `defaultSort` in `ListConfig`: Replace this with TanStack Table's `tableOptions.initialState.sorting` feature.
+     * - `columnVisible` in `ColumnConfig`: Replace this with TanStack Table's `tableOptions.initialState.columnVisibility` feature.
+     * TODO: Define `columnVisibility` and `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.
+     * - It will also allow for direct configuration of other TanStack Table options such as `columnOrder` via `tableOptions.initialState.columnOrder`.
+     *
+     * Current Workaround:
+     * - The `initialState` property from `tableOptions` is destructured to separate it from other options. This allows the remaining properties in `tableOptions` to be passed directly to the TanStack Table configuration without breaking the current ListConfig `defaultSort` and `columnVisible` properties.
+     */
+    const { initialState: _initialState, ...restTableOptions } = tableOptions ?? {};
     const tableInstance = useReactTable({
-        _features: [ROW_PREVIEW],
+        _features: [ROW_POSITION, ROW_PREVIEW],
         columns,
         data: items,
         enableColumnFilters: true, // client-side filtering.
@@ -104,7 +121,7 @@ export const TableComponent = ({ columns, getRowId, initialState, items, listVie
         getPaginationRowModel: getPaginationRowModel(),
         getRowId,
         getSortedRowModel: clientFiltering ? getSortedRowModel() : undefined,
-        initialState,
+        initialState: { ...initialState, ..._initialState }, // `sorting` and `columnVisibility` are managed by the ExploreState.
         manualPagination: true,
         manualSorting: !clientFiltering,
         onColumnVisibilityChange,
@@ -113,6 +130,7 @@ export const TableComponent = ({ columns, getRowId, initialState, items, listVie
         onSortingChange,
         pageCount,
         state,
+        ...restTableOptions,
     });
     const { getAllColumns, getRowModel, getState, getVisibleFlatColumns, nextPage: tableNextPage, previousPage: tablePreviousPage, } = tableInstance;
     const allColumns = getAllColumns();

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

@@ -1,6 +1,7 @@
 import { RowData } from "@tanstack/react-table";
 import { BaseColumnConfig } from "./entities";
 export declare const ACCESSOR_KEYS: {
+    ROW_POSITION: string;
     SELECT: string;
 };
 export declare const COLUMN_CONFIGS: Record<string, BaseColumnConfig<RowData, unknown>>;

package/lib/components/TableCreator/common/constants.js

@@ -1,5 +1,6 @@
 import { RowSelectionCell } from "../../Table/components/TableCell/components/RowSelectionCell/rowSelectionCell";
 export const ACCESSOR_KEYS = {
+    ROW_POSITION: "rowPosition",
     SELECT: "select",
 };
 export const COLUMN_CONFIGS = {

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

@@ -1,5 +1,5 @@
 import { ColumnSort, CoreOptions, RowData } from "@tanstack/react-table";
-import { ColumnConfig, ListViewConfig } from "../../config/entities";
+import { ColumnConfig, ListConfig, ListViewConfig } from "../../config/entities";
 export interface TableCreatorProps<T> {
     columns: ColumnConfig<T>[];
     defaultSort: ColumnSort | undefined;
@@ -7,5 +7,6 @@ export interface TableCreatorProps<T> {
     items: T[];
     listView?: ListViewConfig;
     loading?: boolean;
+    tableOptions?: ListConfig<T>["tableOptions"];
 }
-export declare const TableCreator: <T extends RowData>({ columns, defaultSort, getRowId, items, listView, loading, }: TableCreatorProps<T>) => JSX.Element;
+export declare const TableCreator: <T extends RowData>({ columns, defaultSort, getRowId, items, listView, loading, tableOptions, }: TableCreatorProps<T>) => JSX.Element;

package/lib/components/TableCreator/tableCreator.js

@@ -2,6 +2,7 @@ import React, { useMemo } from "react";
 import { PAPER_PANEL_STYLE } from "../common/Paper/paper";
 import { ComponentCreator } from "../ComponentCreator/ComponentCreator";
 import { Loading } from "../Loading/loading";
+import { COLUMN_DEF } from "../Table/common/columnDef";
 import { arrIncludesSome, getInitialState, sortingFn, } from "../Table/common/utils";
 import { RowSelectionCell } from "../Table/components/TableCell/components/RowSelectionCell/rowSelectionCell";
 import { HeadSelectionCell } from "../Table/components/TableHead/components/HeadSelectionCell/headSelectionCell";
@@ -18,7 +19,7 @@ const createHeaderSelectionCell = () => function CellCreator({ table }) {
 const createRowSelectionCell = () => function CellCreator({ row }) {
     return React.createElement(RowSelectionCell, { row: row });
 };
-export const TableCreator = ({ columns, defaultSort, getRowId, items, listView, loading, }) => {
+export const TableCreator = ({ columns, defaultSort, getRowId, items, listView, loading, tableOptions, }) => {
     const columnDefs = useMemo(() => columns.reduce((acc, columnConfig) => {
         acc.push({
             ...buildBaseColumnDef(columnConfig),
@@ -28,6 +29,8 @@ export const TableCreator = ({ columns, defaultSort, getRowId, items, listView,
         });
         return acc;
     }, [
+        /* Initialize column definitions with the "row position" column */
+        COLUMN_DEF.ROW_POSITION,
         /* Initialize column definitions with the "select" column */
         {
             ...buildBaseColumnDef(COLUMN_CONFIGS.SELECT),
@@ -38,5 +41,5 @@ export const TableCreator = ({ columns, defaultSort, getRowId, items, listView,
     const initialState = getInitialState(columns, defaultSort);
     return (React.createElement(TableCreatorContainer, null,
         React.createElement(Loading, { appear: false, loading: loading || false, panelStyle: PAPER_PANEL_STYLE.FLUID }),
-        React.createElement(Table, { columns: columnDefs, getRowId: getRowId, initialState: initialState, items: items, listView: listView, loading: loading })));
+        React.createElement(Table, { columns: columnDefs, getRowId: getRowId, initialState: initialState, items: items, listView: listView, loading: loading, tableOptions: tableOptions })));
 };

package/lib/components/common/Breadcrumbs/breadcrumbs.js

@@ -2,6 +2,7 @@ import ChevronRightRoundedIcon from "@mui/icons-material/ChevronRightRounded";
 import { Link, Breadcrumbs as MBreadcrumbs, Typography } from "@mui/material";
 import NLink from "next/link";
 import React from "react";
+import { LINK_PROPS } from "./constants";
 export const Breadcrumbs = ({ breadcrumbs, className, Separator = React.createElement(ChevronRightRoundedIcon, { fontSize: "xxsmall" }), }) => {
-    return (React.createElement(React.Fragment, null, breadcrumbs.length > 0 ? (React.createElement(MBreadcrumbs, { className: className, separator: Separator }, breadcrumbs.map(({ path, text }, b) => path ? (React.createElement(Link, { component: NLink, key: b, href: path }, text)) : (React.createElement(Typography, { key: `${path}${b}`, maxWidth: 180, noWrap: true }, text))))) : null));
+    return (React.createElement(React.Fragment, null, breadcrumbs.length > 0 ? (React.createElement(MBreadcrumbs, { className: className, separator: Separator }, breadcrumbs.map(({ path, text }, b) => path ? (React.createElement(Link, { ...LINK_PROPS, component: NLink, key: b, href: path }, text)) : (React.createElement(Typography, { key: `${path}${b}`, maxWidth: 180, noWrap: true }, text))))) : null));
 };

package/lib/components/common/Breadcrumbs/constants.d.ts

@@ -0,0 +1,2 @@
+import { LinkProps } from "@mui/material";
+export declare const LINK_PROPS: Partial<LinkProps>;

package/lib/components/common/Breadcrumbs/constants.js

@@ -0,0 +1,4 @@
+import { LINK_PROPS as MUI_LINK_PROPS } from "../../../styles/common/mui/link";
+export const LINK_PROPS = {
+    underline: MUI_LINK_PROPS.UNDERLINE.HOVER,
+};