@databiosphere/findable-ui 3.2.0 → 5.0.0

package/lib/components/Detail/components/DetailViewTable/detailViewTable.d.ts

@@ -1,7 +1,8 @@
 import { ColumnDef } from "@tanstack/react-table";
 import { ReactNode } from "react";
 import { FlatPaper, FluidPaper, RoundedPaper } from "../../../common/Paper/paper.styles";
-interface DetailViewTableProps<T extends object> {
+import { TableProps } from "../Table/table";
+interface DetailViewTableProps<T extends object> extends TableProps<T> {
     className?: string;
     columns: ColumnDef<T>[];
     gridTemplateColumns: string;
@@ -10,5 +11,5 @@ interface DetailViewTableProps<T extends object> {
     Paper?: typeof FlatPaper | typeof FluidPaper | typeof RoundedPaper;
     tools?: ReactNode;
 }
-export declare const DetailViewTable: <T extends object>({ className, columns, gridTemplateColumns, items, noResultsTitle, Paper, tools, }: DetailViewTableProps<T>) => JSX.Element;
+export declare const DetailViewTable: <T extends object>({ className, columns, gridTemplateColumns, items, noResultsTitle, Paper, tools, ...tableProps }: DetailViewTableProps<T>) => JSX.Element;
 export {};

package/lib/components/Detail/components/DetailViewTable/detailViewTable.js

@@ -1,4 +1,15 @@
 "use strict";
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
 var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
@@ -9,10 +20,11 @@ const paper_styles_1 = require("../../../common/Paper/paper.styles");
 const noResults_1 = require("../../../NoResults/noResults");
 const tableToolbar_styles_1 = require("../../../Table/components/TableToolbar/tableToolbar.styles");
 const table_1 = require("../Table/table");
-const DetailViewTable = ({ className, columns, gridTemplateColumns, items, noResultsTitle, Paper = paper_styles_1.RoundedPaper, tools, }) => {
+const DetailViewTable = (_a) => {
+    var { className, columns, gridTemplateColumns, items, noResultsTitle, Paper = paper_styles_1.RoundedPaper, tools } = _a, tableProps = __rest(_a, ["className", "columns", "gridTemplateColumns", "items", "noResultsTitle", "Paper", "tools"]);
     return items.length > 0 ? (react_1.default.createElement(Paper, { className: className },
         react_1.default.createElement(paper_styles_1.GridPaper, null,
             tools && react_1.default.createElement(tableToolbar_styles_1.Toolbar, { variant: "table" }, tools),
-            react_1.default.createElement(table_1.Table, { columns: columns, gridTemplateColumns: gridTemplateColumns, items: items })))) : (react_1.default.createElement(noResults_1.NoResults, { Paper: Paper, title: noResultsTitle }));
+            react_1.default.createElement(table_1.Table, Object.assign({ columns: columns, gridTemplateColumns: gridTemplateColumns, items: items }, tableProps))))) : (react_1.default.createElement(noResults_1.NoResults, { Paper: Paper, title: noResultsTitle }));
 };
 exports.DetailViewTable = DetailViewTable;

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

@@ -27,14 +27,17 @@ exports.CollapsableRows = void 0;
 const material_1 = require("@mui/material");
 const react_1 = __importStar(require("react"));
 const uuid_1 = require("uuid");
+const utils_1 = require("../../../../../../../Table/common/utils");
 const collapsableCell_1 = require("../../../../../../../Table/components/TableCell/components/CollapsableCell/collapsableCell");
 const CollapsableRows = ({ tableInstance, }) => {
     const { getRowModel } = tableInstance;
     const { rows } = getRowModel();
     const uuid = (0, uuid_1.v4)(); // Generate a unique ID for the collapsable rows.
     return (react_1.default.createElement(react_1.Fragment, null, rows.map((row) => {
+        if (row.depth > 0)
+            return null; // Hide sub rows.
         return (react_1.default.createElement(material_1.TableRow, { key: `${uuid}${row.id}` },
-            react_1.default.createElement(collapsableCell_1.CollapsableCell, { row: row })));
+            react_1.default.createElement(collapsableCell_1.CollapsableCell, { isDisabled: (0, utils_1.isCollapsableRowDisabled)(tableInstance), row: row })));
     })));
 };
 exports.CollapsableRows = CollapsableRows;

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

@@ -5,4 +5,4 @@ export interface TableRowsProps<T> {
     tableInstance: Table<T>;
     tableView?: TableView;
 }
-export declare const TableRows: <T extends object>({ tableInstance, tableView, }: TableRowsProps<T>) => JSX.Element;
+export declare const TableRows: <T extends unknown>({ tableInstance, tableView, }: TableRowsProps<T>) => JSX.Element;

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

@@ -27,15 +27,34 @@ 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 utils_1 = require("../../../../../Table/components/TableCell/common/utils");
 const TableRows = ({ tableInstance, tableView, }) => {
     const { getRowModel } = tableInstance;
     const { rows } = getRowModel();
     const { tableCell } = tableView || {};
     const { size: tableCellSize = "medium" } = tableCell || {};
     return (react_1.default.createElement(react_1.Fragment, null, rows.map((row) => {
-        return (react_1.default.createElement(material_1.TableRow, { key: row.id }, row.getVisibleCells().map((cell) => {
-            return (react_1.default.createElement(material_1.TableCell, { key: cell.id, size: tableCellSize }, (0, react_table_1.flexRender)(cell.column.columnDef.cell, cell.getContext())));
+        return (react_1.default.createElement(material_1.TableRow, { id: getRowId(row), key: row.id }, row.getVisibleCells().map((cell) => {
+            if (cell.getIsAggregated())
+                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_1.default.createElement(material_1.TableCell, { key: cell.id, padding: (0, utils_1.getTableCellPadding)(cell.column.id), size: tableCellSize }, (0, react_table_1.flexRender)(cell.column.columnDef.cell, cell.getContext())));
         })));
     })));
 };
 exports.TableRows = TableRows;
+/**
+ * Returns identifier for a row.
+ * @param row - Row.
+ * @returns row identifier.
+ */
+function getRowId(row) {
+    const { depth, getIsGrouped, id } = row;
+    if (getIsGrouped()) {
+        return `grouped-row-${id}`;
+    }
+    if (depth > 0) {
+        return `sub-row-${id}`;
+    }
+}

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

@@ -1,6 +1,7 @@
 /// <reference types="react" />
 import { TableCellProps as MTableCellProps, TableContainerProps as MTableContainerProps, TableProps as MTableProps } from "@mui/material";
 import { ColumnDef } from "@tanstack/react-table";
+import { TableOptions } from "@tanstack/table-core";
 export interface TableView {
     table?: Partial<MTableProps>;
     tableCell?: Partial<MTableCellProps>;
@@ -12,6 +13,7 @@ export interface TableProps<T extends object> {
     columns: ColumnDef<T>[];
     gridTemplateColumns: string;
     items: T[];
+    tableOptions?: Partial<TableOptions<T>>;
     tableView?: TableView;
 }
-export declare const Table: <T extends object>({ className, collapsable, columns, gridTemplateColumns, items, tableView, }: TableProps<T>) => JSX.Element;
+export declare const Table: <T extends object>({ className, collapsable, columns, gridTemplateColumns, items, tableOptions, tableView, }: TableProps<T>) => JSX.Element;

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

@@ -10,21 +10,17 @@ const react_1 = __importDefault(require("react"));
 const useBreakpointHelper_1 = require("../../../../hooks/useBreakpointHelper");
 const breakpoints_1 = require("../../../../theme/common/breakpoints");
 const entities_1 = require("../../../Table/common/entities");
+const tableHead_1 = require("../../../Table/components/TableHead/tableHead");
 const table_styles_1 = require("../../../Table/table.styles");
 const utils_1 = require("./common/utils");
 const tableBody_1 = require("./components/TableBody/tableBody");
-const tableHead_1 = require("./components/TableHead/tableHead");
-const Table = ({ className, collapsable = true, columns, gridTemplateColumns, items, tableView, }) => {
+const Table = ({ className, collapsable = true, columns, gridTemplateColumns, items, tableOptions, tableView, }) => {
     const tabletDown = (0, useBreakpointHelper_1.useBreakpointHelper)(useBreakpointHelper_1.BREAKPOINT_FN_NAME.DOWN, breakpoints_1.TABLET);
     const rowDirection = collapsable && tabletDown ? entities_1.ROW_DIRECTION.VERTICAL : entities_1.ROW_DIRECTION.DEFAULT;
     const { table, tableContainer } = tableView || {};
     const { stickyHeader = false } = table || {};
     const { sx: tableContainerSx } = tableContainer || {};
-    const tableInstance = (0, react_table_1.useReactTable)({
-        columns: (0, utils_1.generateColumnDefinitions)(columns),
-        data: items,
-        getCoreRowModel: (0, react_table_1.getCoreRowModel)(),
-    });
+    const tableInstance = (0, react_table_1.useReactTable)(Object.assign({ columns: (0, utils_1.generateColumnDefinitions)(columns), data: items, enableSorting: false, getCoreRowModel: (0, react_table_1.getCoreRowModel)() }, tableOptions));
     return (react_1.default.createElement(material_1.TableContainer, { className: className, sx: tableContainerSx },
         react_1.default.createElement(table_styles_1.GridTable, { collapsable: collapsable, gridTemplateColumns: gridTemplateColumns, stickyHeader: rowDirection === entities_1.ROW_DIRECTION.DEFAULT && stickyHeader },
             react_1.default.createElement(tableHead_1.TableHead, { rowDirection: rowDirection, tableInstance: tableInstance }),

package/lib/components/Links/components/Link/components/ExploreViewLink/exploreViewLink.js

@@ -33,6 +33,7 @@ const useExploreState_1 = require("../../../../../../hooks/useExploreState");
 const exploreState_1 = require("../../../../../../providers/exploreState");
 const entities_1 = require("../../../../common/entities");
 const PARAM_FILTER = "filter";
+const PARAM_SORTING = "sorting";
 const ExploreViewLink = ({ className, label, onClick, target = entities_1.ANCHOR_TARGET.SELF, url, }) => {
     const { exploreDispatch, exploreState } = (0, useExploreState_1.useExploreState)();
     if (!isValidExploreURL(url, exploreState)) {
@@ -41,8 +42,9 @@ const ExploreViewLink = ({ className, label, onClick, target = entities_1.ANCHOR
     const onNavigate = (0, react_1.useCallback)(() => {
         const entityListType = getEntityListType(url.href);
         const filters = getSelectedFilters(url.query);
+        const sorting = getSorting(url.query);
         exploreDispatch({
-            payload: { entityListType, filters },
+            payload: { entityListType, filters, sorting },
             type: exploreState_1.ExploreActionKind.UpdateEntityFilters,
         });
         onClick === null || onClick === void 0 ? void 0 : onClick();
@@ -68,6 +70,16 @@ function getSelectedFilters(query) {
     const parsedQuery = JSON.parse(decodedQuery);
     return parsedQuery[PARAM_FILTER];
 }
+/**
+ * Returns the sorting from the given query.
+ * @param query - Query.
+ * @returns sorting.
+ */
+function getSorting(query) {
+    const decodedQuery = decodeURIComponent(query);
+    const parsedQuery = JSON.parse(decodedQuery);
+    return parsedQuery[PARAM_SORTING];
+}
 /**
  * Returns true if the given value is a SelectedFilter.
  * @param value - Value.

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

@@ -6,6 +6,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.GridTable = void 0;
 const styled_1 = __importDefault(require("@emotion/styled"));
 const material_1 = require("@mui/material");
+const colors_1 = require("../../../styles/common/mixins/colors");
 exports.GridTable = (0, styled_1.default)(material_1.Table, {
     shouldForwardProp: (prop) => prop !== "gridTemplateColumns",
 }) `
@@ -22,7 +23,7 @@ exports.GridTable = (0, styled_1.default)(material_1.Table, {
 
   td,
   th {
-    background-color: ${({ theme }) => theme.palette.common.white};
+    background-color: ${colors_1.white};
   }
 
   td,
@@ -36,4 +37,11 @@ exports.GridTable = (0, styled_1.default)(material_1.Table, {
       min-width: 0; /* required; flexbox child min-width property is "auto" by default making overflow-wrap ineffectual */
     }
   }
+
+  [id^="grouped-row"] {
+    td {
+      background-color: ${colors_1.smokeLightest};
+      grid-column: 1 / -1;
+    }
+  }
 `;

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

@@ -103,6 +103,12 @@ export declare function isAnyRowSelected<T>(table: Table<T>): boolean;
  * @returns true if client-side filtering is enabled.
  */
 export declare function isClientFilteringEnabled(exploreMode: ExploreMode): boolean;
+/**
+ * Returns true if the collapsable row is disabled; i.e. only one column is visible.
+ * @param tableInstance - Table instance.
+ * @returns true if the collapsable row is disabled.
+ */
+export declare function isCollapsableRowDisabled<T>(tableInstance: Table<T>): boolean;
 /**
  * Returns true if column has a sort direction.
  * @param sortDirection - Column sort direction.

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

@@ -3,7 +3,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.getInitialTableColumnVisibility = exports.sortingFn = exports.isColumnSortActive = exports.isClientFilteringEnabled = exports.isAnyRowSelected = exports.getTableSortLabelProps = exports.getPinnedCellIndex = exports.getInitialTableStateSorting = exports.getInitialState = exports.getGridTemplateColumns = exports.getFacetedUniqueValuesWithArrayValues = exports.getEditColumnOptions = exports.generateDownloadBlob = exports.getColumnSortDirection = exports.buildCategoryViews = exports.arrIncludesSome = void 0;
+exports.getInitialTableColumnVisibility = exports.sortingFn = exports.isColumnSortActive = exports.isCollapsableRowDisabled = exports.isClientFilteringEnabled = exports.isAnyRowSelected = exports.getTableSortLabelProps = exports.getPinnedCellIndex = exports.getInitialTableStateSorting = exports.getInitialState = exports.getGridTemplateColumns = exports.getFacetedUniqueValuesWithArrayValues = exports.getEditColumnOptions = exports.generateDownloadBlob = exports.getColumnSortDirection = exports.buildCategoryViews = exports.arrIncludesSome = void 0;
 const SouthRounded_1 = __importDefault(require("@mui/icons-material/SouthRounded"));
 const react_table_1 = require("@tanstack/react-table");
 const useExploreMode_1 = require("../../../hooks/useExploreMode");
@@ -283,6 +283,15 @@ function isClientFilteringEnabled(exploreMode) {
         exploreMode === useExploreMode_1.EXPLORE_MODE.SS_FETCH_CS_FILTERING);
 }
 exports.isClientFilteringEnabled = isClientFilteringEnabled;
+/**
+ * Returns true if the collapsable row is disabled; i.e. only one column is visible.
+ * @param tableInstance - Table instance.
+ * @returns true if the collapsable row is disabled.
+ */
+function isCollapsableRowDisabled(tableInstance) {
+    return tableInstance.getVisibleLeafColumns().length === 1;
+}
+exports.isCollapsableRowDisabled = isCollapsableRowDisabled;
 /**
  * Returns true if column has a sort direction.
  * @param sortDirection - Column sort direction.

package/lib/components/Table/components/TableCell/components/CollapsableCell/collapsableCell.d.ts

@@ -1,6 +1,7 @@
 /// <reference types="react" />
-import { Row } from "@tanstack/react-table";
-export interface CollapsableCellProps<T> {
+import { Row, RowData } from "@tanstack/react-table";
+export interface CollapsableCellProps<T extends RowData> {
+    isDisabled?: boolean;
     row: Row<T>;
 }
-export declare const CollapsableCell: <T extends object>({ row, }: CollapsableCellProps<T>) => JSX.Element;
+export declare const CollapsableCell: <T extends unknown>({ isDisabled, row, }: CollapsableCellProps<T>) => JSX.Element;

package/lib/components/Table/components/TableCell/components/CollapsableCell/collapsableCell.js

@@ -31,7 +31,7 @@ const typography_1 = require("../../../../../../theme/common/typography");
 const unfoldMoreIcon_1 = require("../../../../../common/CustomIcon/components/UnfoldMoreIcon/unfoldMoreIcon");
 const utils_1 = require("../../../../common/utils");
 const collapsableCell_styles_1 = require("./collapsableCell.styles");
-const CollapsableCell = ({ row, }) => {
+const CollapsableCell = ({ isDisabled = false, row, }) => {
     const [isExpanded, setIsExpanded] = (0, react_1.useState)(false);
     const [pinnedCell, pinnedIndex] = (0, utils_1.getPinnedCellIndex)(row);
     // Toggles open/close table cell.
@@ -41,11 +41,15 @@ const CollapsableCell = ({ row, }) => {
     return (react_1.default.createElement(collapsableCell_styles_1.TableCell, { isExpanded: isExpanded },
         react_1.default.createElement(collapsableCell_styles_1.PinnedCell, null,
             (0, react_table_1.flexRender)(pinnedCell.column.columnDef.cell, pinnedCell.getContext()),
-            react_1.default.createElement(material_1.IconButton, { color: "ink", edge: "end", onClick: onToggleExpanded, size: "large" },
+            react_1.default.createElement(material_1.IconButton, { color: "ink", disabled: isDisabled, edge: "end", onClick: onToggleExpanded, size: "large" },
                 react_1.default.createElement(unfoldMoreIcon_1.UnfoldMoreIcon, { fontSize: "small" }))),
         react_1.default.createElement(material_1.Collapse, { in: isExpanded },
-            react_1.default.createElement(collapsableCell_styles_1.CollapsedContents, null, row.getVisibleCells().map((cell, i) => {
+            react_1.default.createElement(collapsableCell_styles_1.CollapsedContents, null, getRowVisibleCells(row).map((cell, i) => {
                 var _a;
+                if (cell.getIsAggregated())
+                    return null; // Display of aggregated cells is currently not supported.
+                if (cell.getIsPlaceholder())
+                    return null; // Display of placeholder cells is currently not supported.
                 const header = (_a = cell.column.columnDef.meta) === null || _a === void 0 ? void 0 : _a.header;
                 return (i !== pinnedIndex && (react_1.default.createElement(collapsableCell_styles_1.Content, { key: cell.id },
                     header && (react_1.default.createElement(material_1.Typography, { component: "div", color: "ink.light", variant: typography_1.TEXT_BODY_400_2_LINES }, header)),
@@ -53,3 +57,17 @@ const CollapsableCell = ({ row, }) => {
             })))));
 };
 exports.CollapsableCell = CollapsableCell;
+/**
+ * Returns row or sub row visible cells.
+ * @param row - Row.
+ * @returns row or sub row visible cells.
+ */
+function getRowVisibleCells(row) {
+    if (row.getIsGrouped()) {
+        return row
+            .getLeafRows()
+            .map((leafRow) => leafRow.getVisibleCells())
+            .flat();
+    }
+    return row.getVisibleCells();
+}

package/lib/components/Table/components/TableCell/components/CollapsableCell/collapsableCell.styles.js

@@ -48,6 +48,10 @@ exports.PinnedCell = styled_1.default.div `
   justify-content: space-between;
   padding: 12px 16px;
   word-break: break-word;
+
+  .MuiIconButton-root.Mui-disabled {
+    opacity: 0.5;
+  }
 `;
 exports.CollapsedContents = styled_1.default.div `
   ${fonts_1.textBody4002Lines};

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

@@ -33,6 +33,9 @@ const utils_2 = require("../TableCell/common/utils");
 const TableHead = ({ rowDirection, tableInstance, }) => {
     return (react_1.default.createElement(react_1.Fragment, null, rowDirection === entities_1.ROW_DIRECTION.DEFAULT &&
         tableInstance.getHeaderGroups().map((headerGroup) => (react_1.default.createElement(material_1.TableHead, { key: headerGroup.id },
-            react_1.default.createElement(material_1.TableRow, null, headerGroup.headers.map((header) => (react_1.default.createElement(material_1.TableCell, { key: header.id, padding: (0, utils_2.getTableCellPadding)(header.id) }, header.column.getCanSort() ? (react_1.default.createElement(material_1.TableSortLabel, Object.assign({}, (0, utils_1.getTableSortLabelProps)(header.column)), (0, react_table_1.flexRender)(header.column.columnDef.header, header.getContext()))) : ((0, react_table_1.flexRender)(header.column.columnDef.header, header.getContext())))))))))));
+            react_1.default.createElement(material_1.TableRow, null, headerGroup.headers.map((header) => {
+                const { column: { columnDef: { meta: { enableSortingInteraction = true } = {}, }, }, } = header;
+                return header.column.getIsGrouped() ? null : (react_1.default.createElement(material_1.TableCell, { key: header.id, padding: (0, utils_2.getTableCellPadding)(header.id) }, header.column.getCanSort() && enableSortingInteraction ? (react_1.default.createElement(material_1.TableSortLabel, Object.assign({}, (0, utils_1.getTableSortLabelProps)(header.column)), (0, react_table_1.flexRender)(header.column.columnDef.header, header.getContext()))) : ((0, react_table_1.flexRender)(header.column.columnDef.header, header.getContext()))));
+            })))))));
 };
 exports.TableHead = TableHead;

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

@@ -26,6 +26,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.CollapsableRows = void 0;
 const material_1 = require("@mui/material");
 const react_1 = __importStar(require("react"));
+const utils_1 = require("../../../../common/utils");
 const collapsableCell_1 = require("../../../TableCell/components/CollapsableCell/collapsableCell");
 const CollapsableRows = ({ tableInstance, virtualizer, }) => {
     const { getRowModel } = tableInstance;
@@ -34,7 +35,7 @@ const CollapsableRows = ({ tableInstance, virtualizer, }) => {
     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 })));
+            react_1.default.createElement(collapsableCell_1.CollapsableCell, { isDisabled: (0, utils_1.isCollapsableRowDisabled)(tableInstance), row: row })));
     })));
 };
 exports.CollapsableRows = CollapsableRows;

package/lib/components/Table/table.js

@@ -110,7 +110,7 @@ const TableComponent = ({ columns, getRowId, initialState, items, listView, tota
         data: items,
         enableColumnFilters: true,
         enableFilters: true,
-        enableMultiSort: false,
+        enableMultiSort: clientFiltering,
         enableRowSelection,
         enableSorting: true,
         enableSortingRemoval: false,

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

@@ -14,11 +14,7 @@ function buildBaseColumnDef(baseColumnConfig) {
         enableSorting: !disableSorting,
         header,
         id,
-        meta: {
-            columnPinned,
-            header: meta ? meta.header : header,
-            width,
-        },
+        meta: Object.assign(Object.assign({}, meta), { columnPinned, header: meta ? meta.header : header, width }),
     };
 }
 exports.buildBaseColumnDef = buildBaseColumnDef;

package/lib/components/common/CustomIcon/components/AddLinkIcon/addLinkIcon.d.ts

@@ -0,0 +1,3 @@
+/// <reference types="react" />
+import { CustomSVGIconProps } from "../../common/entities";
+export declare const AddLinkIcon: ({ fontSize, viewBox, ...props }: CustomSVGIconProps) => JSX.Element;

package/lib/components/common/CustomIcon/components/AddLinkIcon/addLinkIcon.js

@@ -0,0 +1,25 @@
+"use strict";
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.AddLinkIcon = void 0;
+const material_1 = require("@mui/material");
+const react_1 = __importDefault(require("react"));
+const AddLinkIcon = (_a) => {
+    var { fontSize = "xsmall", viewBox = "0 0 18 18" } = _a, props = __rest(_a, ["fontSize", "viewBox"]) /* Spread props to allow for Mui SvgIconProps specific prop overrides e.g. "htmlColor". */;
+    return (react_1.default.createElement(material_1.SvgIcon, Object.assign({ fontSize: fontSize, viewBox: viewBox }, props),
+        react_1.default.createElement("path", { d: "M12.8248 12.6004H11.4561C11.2811 12.6004 11.1279 12.5357 10.9967 12.4063C10.8654 12.277 10.7998 12.1166 10.7998 11.9254C10.7998 11.7504 10.8645 11.5941 10.9939 11.4566C11.1232 11.3191 11.2836 11.2504 11.4748 11.2504H12.8248V9.90039C12.8248 9.70914 12.8891 9.54883 13.0177 9.41945C13.1464 9.29008 13.3057 9.22539 13.4959 9.22539C13.686 9.22539 13.8459 9.29008 13.9755 9.41945C14.1052 9.54883 14.1701 9.70914 14.1701 9.90039V11.2504H15.5233C15.7149 11.2504 15.8756 11.3151 16.0054 11.4445C16.135 11.5738 16.1998 11.7341 16.1998 11.9254C16.1998 12.1166 16.135 12.277 16.0054 12.4063C15.8756 12.5357 15.7149 12.6004 15.5233 12.6004H14.1701V13.9504C14.1701 14.1416 14.1052 14.302 13.9755 14.4313C13.8459 14.5607 13.686 14.6254 13.4959 14.6254C13.3057 14.6254 13.1464 14.5607 13.0177 14.4313C12.8891 14.302 12.8248 14.1416 12.8248 13.9504V12.6004ZM7.4248 12.6004H5.3998C4.4038 12.6004 3.5548 12.249 2.8528 11.5461C2.1508 10.8433 1.7998 9.99333 1.7998 8.99608C1.7998 7.99895 2.1508 7.15039 2.8528 6.45039C3.5548 5.75039 4.4038 5.40039 5.3998 5.40039H7.4248C7.5998 5.40039 7.75605 5.46914 7.89355 5.60664C8.03105 5.74414 8.0998 5.90352 8.0998 6.08477C8.0998 6.26602 8.03105 6.42227 7.89355 6.55352C7.75605 6.68477 7.5998 6.75039 7.4248 6.75039H5.3998C4.7748 6.75039 4.24355 6.96914 3.80605 7.40664C3.36855 7.84414 3.1498 8.37539 3.1498 9.00039C3.1498 9.62539 3.36855 10.1566 3.80605 10.5941C4.24355 11.0316 4.7748 11.2504 5.3998 11.2504H7.4248C7.5998 11.2504 7.75605 11.3191 7.89355 11.4566C8.03105 11.5941 8.0998 11.7535 8.0998 11.9348C8.0998 12.116 8.03105 12.2723 7.89355 12.4035C7.75605 12.5348 7.5998 12.6004 7.4248 12.6004ZM6.98005 9.67539C6.78905 9.67539 6.62793 9.61108 6.49668 9.48245C6.36543 9.35383 6.2998 9.19445 6.2998 9.00433C6.2998 8.8142 6.36443 8.65352 6.49368 8.52227C6.62293 8.39102 6.78305 8.32539 6.97405 8.32539H11.0196C11.2106 8.32539 11.3717 8.3897 11.5029 8.51833C11.6342 8.64695 11.6998 8.80633 11.6998 8.99645C11.6998 9.18658 11.6352 9.34727 11.5059 9.47852C11.3767 9.60977 11.2166 9.67539 11.0256 9.67539H6.98005ZM16.1998 9.00039H14.8498C14.8498 8.37539 14.6311 7.84414 14.1936 7.40664C13.7561 6.96914 13.2248 6.75039 12.5998 6.75039H10.5561C10.3811 6.75039 10.2279 6.6857 10.0967 6.55633C9.96543 6.42695 9.8998 6.26664 9.8998 6.07539C9.8998 5.90039 9.96449 5.74414 10.0939 5.60664C10.2232 5.46914 10.3836 5.40039 10.5748 5.40039H12.5998C13.5958 5.40039 14.4448 5.75139 15.1468 6.45339C15.8488 7.15539 16.1998 8.00439 16.1998 9.00039Z", fill: "currentColor" })));
+};
+exports.AddLinkIcon = AddLinkIcon;

package/lib/components/common/CustomIcon/components/UnLinkIcon/unLinkIcon.d.ts

@@ -0,0 +1,3 @@
+/// <reference types="react" />
+import { CustomSVGIconProps } from "../../common/entities";
+export declare const UnLinkIcon: ({ fontSize, viewBox, ...props }: CustomSVGIconProps) => JSX.Element;

package/lib/components/common/CustomIcon/components/UnLinkIcon/unLinkIcon.js

@@ -0,0 +1,25 @@
+"use strict";
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.UnLinkIcon = void 0;
+const material_1 = require("@mui/material");
+const react_1 = __importDefault(require("react"));
+const UnLinkIcon = (_a) => {
+    var { fontSize = "xsmall", viewBox = "0 0 18 18" } = _a, props = __rest(_a, ["fontSize", "viewBox"]) /* Spread props to allow for Mui SvgIconProps specific prop overrides e.g. "htmlColor". */;
+    return (react_1.default.createElement(material_1.SvgIcon, Object.assign({ fontSize: fontSize, viewBox: viewBox }, props),
+        react_1.default.createElement("path", { d: "M11.4561 9.52501L10.2373 8.325H11.0196C11.2123 8.325 11.3738 8.38968 11.5042 8.51905C11.6346 8.64843 11.6998 8.80875 11.6998 9C11.6998 9.11245 11.6748 9.21253 11.6248 9.30001C11.5748 9.38749 11.5123 9.46246 11.4373 9.52501H11.4561ZM14.8873 15.825C14.7498 15.9625 14.5904 16.0312 14.4092 16.0312C14.2279 16.0312 14.0685 15.9625 13.9311 15.825L2.15605 4.06874C2.01856 3.93124 1.94981 3.77187 1.94981 3.59062C1.94981 3.40937 2.01856 3.25 2.15605 3.11249C2.29355 2.97499 2.45293 2.90625 2.63418 2.90625C2.81543 2.90625 2.97481 2.97499 3.1123 3.11249L14.8873 14.8875C15.0248 15.025 15.0935 15.1812 15.0935 15.3562C15.0935 15.5313 15.0248 15.6875 14.8873 15.825ZM5.3998 12.6C4.4038 12.6 3.5548 12.249 2.8528 11.547C2.1508 10.845 1.7998 9.99598 1.7998 9C1.7998 8.20087 2.03731 7.48855 2.51231 6.86305C2.9873 6.23768 3.6623 5.74374 4.53731 5.38125L5.8498 6.75H5.41855C4.78105 6.75 4.24356 6.96874 3.80606 7.40625C3.36856 7.84375 3.1498 8.37499 3.1498 9C3.1498 9.625 3.36856 10.1563 3.80606 10.5938C4.24356 11.0313 4.77481 11.25 5.3998 11.25H7.4248C7.61605 11.25 7.77636 11.3143 7.90575 11.4429C8.03512 11.5715 8.0998 11.7309 8.0998 11.9211C8.0998 12.1112 8.03512 12.2719 7.90575 12.4031C7.77636 12.5343 7.61605 12.6 7.4248 12.6H5.3998ZM6.97274 9.67495C6.78661 9.67495 6.62793 9.61069 6.49668 9.48208C6.36543 9.35347 6.2998 9.19408 6.2998 9.00391C6.2998 8.81381 6.3645 8.65312 6.49387 8.52187C6.62325 8.39062 6.78355 8.325 6.9748 8.325H7.34981L8.68105 9.67495H6.97274ZM13.6686 11.775C13.5686 11.625 13.5342 11.4594 13.5654 11.2781C13.5966 11.0969 13.6873 10.9563 13.8373 10.8562C14.1498 10.6437 14.3967 10.375 14.5779 10.05C14.7592 9.72499 14.8498 9.37498 14.8498 9C14.8498 8.37499 14.631 7.84375 14.1935 7.40625C13.756 6.96874 13.2248 6.75 12.5998 6.75H10.5748C10.3836 6.75 10.2233 6.68568 10.0938 6.55705C9.96451 6.42844 9.8998 6.26905 9.8998 6.07893C9.8998 5.8888 9.96451 5.72812 10.0938 5.59687C10.2233 5.46563 10.3836 5.4 10.5748 5.4H12.5998C13.5958 5.4 14.4448 5.751 15.1468 6.453C15.8488 7.155 16.1998 8.00399 16.1998 9C16.1998 9.6034 16.0561 10.1667 15.7685 10.69C15.4811 11.2133 15.0873 11.6375 14.5873 11.9625C14.4373 12.0625 14.2716 12.0937 14.0904 12.0563C13.9092 12.0187 13.7685 11.925 13.6686 11.775Z", fill: "currentColor" })));
+};
+exports.UnLinkIcon = UnLinkIcon;

package/lib/config/entities.d.ts

@@ -250,7 +250,7 @@ export interface Override {
 declare type RelatedSearchFunction = (searchKey: CategoryKey | undefined, resultKey: CategoryKey | undefined, selectedCategoryValues: SelectedFilterValue | undefined) => Promise<RelatedSearchResult | undefined>;
 export interface SavedFilter {
     filters: SelectedFilter[];
-    sort?: ColumnSort;
+    sorting?: ColumnSort[];
     title: string;
 }
 /**

package/lib/providers/exploreState/initializer/utils.js

@@ -48,8 +48,7 @@ function buildSavedFilterByCategoryValueKey(savedFilters) {
     if (!savedFilters)
         return;
     const savedFilterByCategoryValueKey = new Map();
-    for (const { filters, sort, title } of savedFilters) {
-        const sorting = sort ? [sort] : undefined;
+    for (const { filters, sorting, title } of savedFilters) {
         savedFilterByCategoryValueKey.set(title, { filters, sorting, title });
     }
     return savedFilterByCategoryValueKey;

package/lib/providers/exploreState/payloads/entities.d.ts

@@ -54,6 +54,7 @@ export declare type UpdateColumnVisibilityPayload = VisibilityState;
 export interface UpdateEntityFiltersPayload {
     entityListType: string;
     filters: SelectedFilter[];
+    sorting?: ColumnSort[];
 }
 /**
  * Update entity view access payload.

package/lib/providers/exploreState.js

@@ -229,13 +229,14 @@ function exploreReducer(state, action, exploreContext) {
          * Update entity filters.
          */
         case ExploreActionKind.UpdateEntityFilters: {
-            const { entityListType, filters: filterState } = payload;
+            const { entityListType, filters: filterState, sorting } = payload;
             const categoryGroupConfigKey = (0, utils_2.getEntityCategoryGroupConfigKey)(entityListType, state.entityPageState);
             (0, utils_2.updateEntityStateByCategoryGroupConfigKey)(state, {
                 filterState,
                 savedFilterState: [], // Clear saved filter state.
             }, categoryGroupConfigKey);
-            return Object.assign(Object.assign({}, state), { entityPageState: (0, utils_2.resetRowSelection)(state, categoryGroupConfigKey) });
+            return Object.assign(Object.assign({}, state), { entityPageState: (0, utils_2.updateEntityPageState)(entityListType, Object.assign({}, (0, utils_2.resetRowSelection)(state, categoryGroupConfigKey)), { sorting } // Update sorting for the entity.
+                ) });
         }
         /**
          * Update entity view access

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@databiosphere/findable-ui",
-  "version": "3.2.0",
+  "version": "5.0.0",
   "description": "",
   "scripts": {
     "test": "jest",

package/src/components/Detail/components/DetailViewTable/detailViewTable.tsx

@@ -8,9 +8,9 @@ import {
 } from "../../../common/Paper/paper.styles";
 import { NoResults } from "../../../NoResults/noResults";
 import { Toolbar } from "../../../Table/components/TableToolbar/tableToolbar.styles";
-import { Table } from "../Table/table";
+import { Table, TableProps } from "../Table/table";
 
-interface DetailViewTableProps<T extends object> {
+interface DetailViewTableProps<T extends object> extends TableProps<T> {
   className?: string;
   columns: ColumnDef<T>[];
   gridTemplateColumns: string;
@@ -28,6 +28,7 @@ export const DetailViewTable = <T extends object>({
   noResultsTitle,
   Paper = RoundedPaper,
   tools,
+  ...tableProps
 }: DetailViewTableProps<T>): JSX.Element => {
   return items.length > 0 ? (
     <Paper className={className}>
@@ -37,6 +38,7 @@ export const DetailViewTable = <T extends object>({
           columns={columns}
           gridTemplateColumns={gridTemplateColumns}
           items={items}
+          {...tableProps}
         />
       </GridPaper>
     </Paper>

package/src/components/Detail/components/Table/components/TableRows/components/CollapsableRows/collapsableRows.tsx

@@ -2,6 +2,7 @@ import { TableRow } from "@mui/material";
 import { Table } from "@tanstack/react-table";
 import React, { Fragment } from "react";
 import { v4 as uuid4 } from "uuid";
+import { isCollapsableRowDisabled } from "../../../../../../../Table/common/utils";
 import { CollapsableCell } from "../../../../../../../Table/components/TableCell/components/CollapsableCell/collapsableCell";
 
 export interface CollapsableRowsProps<T> {
@@ -17,9 +18,13 @@ export const CollapsableRows = <T extends object>({
   return (
     <Fragment>
       {rows.map((row) => {
+        if (row.depth > 0) return null; // Hide sub rows.
         return (
           <TableRow key={`${uuid}${row.id}`}>
-            <CollapsableCell row={row} />
+            <CollapsableCell
+              isDisabled={isCollapsableRowDisabled(tableInstance)}
+              row={row}
+            />
           </TableRow>
         );
       })}

package/src/components/Detail/components/Table/components/TableRows/tableRows.tsx

@@ -1,6 +1,8 @@
-import { TableCell, TableRow as MTableRow } from "@mui/material";
-import { flexRender, Table } from "@tanstack/react-table";
+import { TableCell as MTableCell, TableRow as MTableRow } from "@mui/material";
+import { flexRender, Row, Table } from "@tanstack/react-table";
+import { RowData } from "@tanstack/table-core";
 import React, { Fragment } from "react";
+import { getTableCellPadding } from "../../../../../Table/components/TableCell/common/utils";
 import { TableView } from "../../table";
 
 export interface TableRowsProps<T> {
@@ -8,7 +10,7 @@ export interface TableRowsProps<T> {
   tableView?: TableView;
 }
 
-export const TableRows = <T extends object>({
+export const TableRows = <T extends RowData>({
   tableInstance,
   tableView,
 }: TableRowsProps<T>): JSX.Element => {
@@ -20,12 +22,18 @@ export const TableRows = <T extends object>({
     <Fragment>
       {rows.map((row) => {
         return (
-          <MTableRow key={row.id}>
+          <MTableRow id={getRowId(row)} key={row.id}>
             {row.getVisibleCells().map((cell) => {
+              if (cell.getIsAggregated()) return null; // Display of aggregated cells is currently not supported.
+              if (cell.getIsPlaceholder()) return null; // Display of placeholder cells is currently not supported.
               return (
-                <TableCell key={cell.id} size={tableCellSize}>
+                <MTableCell
+                  key={cell.id}
+                  padding={getTableCellPadding(cell.column.id)}
+                  size={tableCellSize}
+                >
                   {flexRender(cell.column.columnDef.cell, cell.getContext())}
-                </TableCell>
+                </MTableCell>
               );
             })}
           </MTableRow>
@@ -34,3 +42,18 @@ export const TableRows = <T extends object>({
     </Fragment>
   );
 };
+
+/**
+ * Returns identifier for a row.
+ * @param row - Row.
+ * @returns row identifier.
+ */
+function getRowId<T extends RowData>(row: Row<T>): string | undefined {
+  const { depth, getIsGrouped, id } = row;
+  if (getIsGrouped()) {
+    return `grouped-row-${id}`;
+  }
+  if (depth > 0) {
+    return `sub-row-${id}`;
+  }
+}

package/src/components/Detail/components/Table/table.tsx

@@ -9,6 +9,7 @@ import {
   getCoreRowModel,
   useReactTable,
 } from "@tanstack/react-table";
+import { TableOptions } from "@tanstack/table-core";
 import React from "react";
 import {
   BREAKPOINT_FN_NAME,
@@ -16,10 +17,10 @@ import {
 } from "../../../../hooks/useBreakpointHelper";
 import { TABLET } from "../../../../theme/common/breakpoints";
 import { ROW_DIRECTION } from "../../../Table/common/entities";
+import { TableHead } from "../../../Table/components/TableHead/tableHead";
 import { GridTable } from "../../../Table/table.styles";
 import { generateColumnDefinitions } from "./common/utils";
 import { TableBody } from "./components/TableBody/tableBody";
-import { TableHead } from "./components/TableHead/tableHead";
 
 export interface TableView {
   table?: Partial<MTableProps>;
@@ -33,6 +34,7 @@ export interface TableProps<T extends object> {
   columns: ColumnDef<T>[];
   gridTemplateColumns: string;
   items: T[];
+  tableOptions?: Partial<TableOptions<T>>;
   tableView?: TableView;
 }
 
@@ -42,6 +44,7 @@ export const Table = <T extends object>({
   columns,
   gridTemplateColumns,
   items,
+  tableOptions,
   tableView,
 }: TableProps<T>): JSX.Element => {
   const tabletDown = useBreakpointHelper(BREAKPOINT_FN_NAME.DOWN, TABLET);
@@ -53,7 +56,9 @@ export const Table = <T extends object>({
   const tableInstance = useReactTable({
     columns: generateColumnDefinitions(columns),
     data: items,
+    enableSorting: false,
     getCoreRowModel: getCoreRowModel(),
+    ...tableOptions,
   });
   return (
     <TableContainer className={className} sx={tableContainerSx}>

package/src/components/Links/components/Link/components/ExploreViewLink/exploreViewLink.tsx

@@ -1,3 +1,4 @@
+import { ColumnSort } from "@tanstack/react-table";
 import Link from "next/link";
 import React, { useCallback } from "react";
 import { UrlObject } from "url";
@@ -14,6 +15,7 @@ import {
 import { LinkProps } from "../../link";
 
 const PARAM_FILTER = "filter";
+const PARAM_SORTING = "sorting";
 
 export interface ExploreViewLinkProps
   extends Omit<LinkProps, "copyable" | "noWrap" | "url"> {
@@ -36,8 +38,9 @@ export const ExploreViewLink = ({
   const onNavigate = useCallback(() => {
     const entityListType = getEntityListType(url.href);
     const filters = getSelectedFilters(url.query);
+    const sorting = getSorting(url.query);
     exploreDispatch({
-      payload: { entityListType, filters },
+      payload: { entityListType, filters, sorting },
       type: ExploreActionKind.UpdateEntityFilters,
     });
     onClick?.();
@@ -78,6 +81,19 @@ function getSelectedFilters(
   return parsedQuery[PARAM_FILTER];
 }
 
+/**
+ * Returns the sorting from the given query.
+ * @param query - Query.
+ * @returns sorting.
+ */
+function getSorting(
+  query: UrlObjectWithHrefAndQuery["query"]
+): ColumnSort[] | undefined {
+  const decodedQuery = decodeURIComponent(query);
+  const parsedQuery = JSON.parse(decodedQuery);
+  return parsedQuery[PARAM_SORTING];
+}
+
 /**
  * Returns true if the given value is a SelectedFilter.
  * @param value - Value.

package/src/components/Table/common/gridTable.styles.ts

@@ -1,5 +1,6 @@
 import styled from "@emotion/styled";
 import { Table as MTable } from "@mui/material";
+import { smokeLightest, white } from "../../../styles/common/mixins/colors";
 
 export interface GridTableProps {
   gridTemplateColumns: string;
@@ -21,7 +22,7 @@ export const GridTable = styled(MTable, {
 
   td,
   th {
-    background-color: ${({ theme }) => theme.palette.common.white};
+    background-color: ${white};
   }
 
   td,
@@ -35,4 +36,11 @@ export const GridTable = styled(MTable, {
       min-width: 0; /* required; flexbox child min-width property is "auto" by default making overflow-wrap ineffectual */
     }
   }
+
+  [id^="grouped-row"] {
+    td {
+      background-color: ${smokeLightest};
+      grid-column: 1 / -1;
+    }
+  }
 `;

package/src/components/Table/common/utils.ts

@@ -363,6 +363,15 @@ export function isClientFilteringEnabled(exploreMode: ExploreMode): boolean {
   );
 }
 
+/**
+ * Returns true if the collapsable row is disabled; i.e. only one column is visible.
+ * @param tableInstance - Table instance.
+ * @returns true if the collapsable row is disabled.
+ */
+export function isCollapsableRowDisabled<T>(tableInstance: Table<T>): boolean {
+  return tableInstance.getVisibleLeafColumns().length === 1;
+}
+
 /**
  * Returns true if column has a sort direction.
  * @param sortDirection - Column sort direction.

package/src/components/Table/components/TableCell/components/CollapsableCell/collapsableCell.styles.ts

@@ -35,6 +35,10 @@ export const PinnedCell = styled.div`
   justify-content: space-between;
   padding: 12px 16px;
   word-break: break-word;
+
+  .MuiIconButton-root.Mui-disabled {
+    opacity: 0.5;
+  }
 `;
 
 export const CollapsedContents = styled.div`

package/src/components/Table/components/TableCell/components/CollapsableCell/collapsableCell.tsx

@@ -1,5 +1,5 @@
 import { Collapse, IconButton, Typography } from "@mui/material";
-import { flexRender, Row } from "@tanstack/react-table";
+import { Cell, flexRender, Row, RowData } from "@tanstack/react-table";
 import React, { useState } from "react";
 import { TEXT_BODY_400_2_LINES } from "../../../../../../theme/common/typography";
 import { UnfoldMoreIcon } from "../../../../../common/CustomIcon/components/UnfoldMoreIcon/unfoldMoreIcon";
@@ -11,11 +11,13 @@ import {
   TableCell,
 } from "./collapsableCell.styles";
 
-export interface CollapsableCellProps<T> {
+export interface CollapsableCellProps<T extends RowData> {
+  isDisabled?: boolean;
   row: Row<T>;
 }
 
-export const CollapsableCell = <T extends object>({
+export const CollapsableCell = <T extends RowData>({
+  isDisabled = false,
   row,
 }: CollapsableCellProps<T>): JSX.Element => {
   const [isExpanded, setIsExpanded] = useState<boolean>(false);
@@ -32,6 +34,7 @@ export const CollapsableCell = <T extends object>({
         {flexRender(pinnedCell.column.columnDef.cell, pinnedCell.getContext())}
         <IconButton
           color="ink"
+          disabled={isDisabled}
           edge="end"
           onClick={onToggleExpanded}
           size="large"
@@ -41,7 +44,9 @@ export const CollapsableCell = <T extends object>({
       </PinnedCell>
       <Collapse in={isExpanded}>
         <CollapsedContents>
-          {row.getVisibleCells().map((cell, i) => {
+          {getRowVisibleCells(row).map((cell, i) => {
+            if (cell.getIsAggregated()) return null; // Display of aggregated cells is currently not supported.
+            if (cell.getIsPlaceholder()) return null; // Display of placeholder cells is currently not supported.
             const header = cell.column.columnDef.meta?.header;
             return (
               i !== pinnedIndex && (
@@ -65,3 +70,20 @@ export const CollapsableCell = <T extends object>({
     </TableCell>
   );
 };
+
+/**
+ * Returns row or sub row visible cells.
+ * @param row - Row.
+ * @returns row or sub row visible cells.
+ */
+function getRowVisibleCells<T extends RowData>(
+  row: Row<T>
+): Cell<T, unknown>[] {
+  if (row.getIsGrouped()) {
+    return row
+      .getLeafRows()
+      .map((leafRow) => leafRow.getVisibleCells())
+      .flat();
+  }
+  return row.getVisibleCells();
+}

package/src/components/Table/components/TableHead/tableHead.tsx

@@ -1,7 +1,7 @@
 import {
   TableCell as MTableCell,
   TableHead as MTableHead,
-  TableRow,
+  TableRow as MTableRow,
   TableSortLabel,
 } from "@mui/material";
 import { flexRender, Table } from "@tanstack/react-table";
@@ -24,28 +24,39 @@ export const TableHead = <T extends object>({
       {rowDirection === ROW_DIRECTION.DEFAULT &&
         tableInstance.getHeaderGroups().map((headerGroup) => (
           <MTableHead key={headerGroup.id}>
-            <TableRow>
-              {headerGroup.headers.map((header) => (
-                <MTableCell
-                  key={header.id}
-                  padding={getTableCellPadding(header.id)}
-                >
-                  {header.column.getCanSort() ? (
-                    <TableSortLabel {...getTableSortLabelProps(header.column)}>
-                      {flexRender(
+            <MTableRow>
+              {headerGroup.headers.map((header) => {
+                const {
+                  column: {
+                    columnDef: {
+                      meta: { enableSortingInteraction = true } = {},
+                    },
+                  },
+                } = header;
+                return header.column.getIsGrouped() ? null : (
+                  <MTableCell
+                    key={header.id}
+                    padding={getTableCellPadding(header.id)}
+                  >
+                    {header.column.getCanSort() && enableSortingInteraction ? (
+                      <TableSortLabel
+                        {...getTableSortLabelProps(header.column)}
+                      >
+                        {flexRender(
+                          header.column.columnDef.header,
+                          header.getContext()
+                        )}
+                      </TableSortLabel>
+                    ) : (
+                      flexRender(
                         header.column.columnDef.header,
                         header.getContext()
-                      )}
-                    </TableSortLabel>
-                  ) : (
-                    flexRender(
-                      header.column.columnDef.header,
-                      header.getContext()
-                    )
-                  )}
-                </MTableCell>
-              ))}
-            </TableRow>
+                      )
+                    )}
+                  </MTableCell>
+                );
+              })}
+            </MTableRow>
           </MTableHead>
         ))}
     </Fragment>

package/src/components/Table/components/TableRows/components/CollapsableRows/collapsableRows.tsx

@@ -2,6 +2,7 @@ import { TableRow as MTableRow } from "@mui/material";
 import { Row, Table } from "@tanstack/react-table";
 import { Virtualizer } from "@tanstack/react-virtual";
 import React, { Fragment } from "react";
+import { isCollapsableRowDisabled } from "../../../../common/utils";
 import { CollapsableCell } from "../../../TableCell/components/CollapsableCell/collapsableCell";
 
 export interface CollapsableRowsProps<T> {
@@ -26,7 +27,10 @@ export const CollapsableRows = <T extends object>({
             data-index={virtualRow.index}
             ref={virtualizer.measureElement}
           >
-            <CollapsableCell row={row} />
+            <CollapsableCell
+              isDisabled={isCollapsableRowDisabled(tableInstance)}
+              row={row}
+            />
           </MTableRow>
         );
       })}

package/src/components/Table/table.tsx

@@ -153,7 +153,7 @@ TableProps<T>): JSX.Element => {
     data: items,
     enableColumnFilters: true, // client-side filtering.
     enableFilters: true, // client-side filtering.
-    enableMultiSort: false,
+    enableMultiSort: clientFiltering,
     enableRowSelection,
     enableSorting: true, // client-side filtering.
     enableSortingRemoval: false, // client-side filtering.

package/src/components/TableCreator/common/utils.ts

@@ -25,6 +25,7 @@ export function buildBaseColumnDef<T, TValue>(
     header,
     id,
     meta: {
+      ...meta,
       columnPinned,
       header: meta ? meta.header : header,
       width,

package/src/components/common/CustomIcon/components/AddLinkIcon/addLinkIcon.tsx

@@ -0,0 +1,18 @@
+import { SvgIcon } from "@mui/material";
+import React from "react";
+import { CustomSVGIconProps } from "../../common/entities";
+
+export const AddLinkIcon = ({
+  fontSize = "xsmall",
+  viewBox = "0 0 18 18",
+  ...props /* Spread props to allow for Mui SvgIconProps specific prop overrides e.g. "htmlColor". */
+}: CustomSVGIconProps): JSX.Element => {
+  return (
+    <SvgIcon fontSize={fontSize} viewBox={viewBox} {...props}>
+      <path
+        d="M12.8248 12.6004H11.4561C11.2811 12.6004 11.1279 12.5357 10.9967 12.4063C10.8654 12.277 10.7998 12.1166 10.7998 11.9254C10.7998 11.7504 10.8645 11.5941 10.9939 11.4566C11.1232 11.3191 11.2836 11.2504 11.4748 11.2504H12.8248V9.90039C12.8248 9.70914 12.8891 9.54883 13.0177 9.41945C13.1464 9.29008 13.3057 9.22539 13.4959 9.22539C13.686 9.22539 13.8459 9.29008 13.9755 9.41945C14.1052 9.54883 14.1701 9.70914 14.1701 9.90039V11.2504H15.5233C15.7149 11.2504 15.8756 11.3151 16.0054 11.4445C16.135 11.5738 16.1998 11.7341 16.1998 11.9254C16.1998 12.1166 16.135 12.277 16.0054 12.4063C15.8756 12.5357 15.7149 12.6004 15.5233 12.6004H14.1701V13.9504C14.1701 14.1416 14.1052 14.302 13.9755 14.4313C13.8459 14.5607 13.686 14.6254 13.4959 14.6254C13.3057 14.6254 13.1464 14.5607 13.0177 14.4313C12.8891 14.302 12.8248 14.1416 12.8248 13.9504V12.6004ZM7.4248 12.6004H5.3998C4.4038 12.6004 3.5548 12.249 2.8528 11.5461C2.1508 10.8433 1.7998 9.99333 1.7998 8.99608C1.7998 7.99895 2.1508 7.15039 2.8528 6.45039C3.5548 5.75039 4.4038 5.40039 5.3998 5.40039H7.4248C7.5998 5.40039 7.75605 5.46914 7.89355 5.60664C8.03105 5.74414 8.0998 5.90352 8.0998 6.08477C8.0998 6.26602 8.03105 6.42227 7.89355 6.55352C7.75605 6.68477 7.5998 6.75039 7.4248 6.75039H5.3998C4.7748 6.75039 4.24355 6.96914 3.80605 7.40664C3.36855 7.84414 3.1498 8.37539 3.1498 9.00039C3.1498 9.62539 3.36855 10.1566 3.80605 10.5941C4.24355 11.0316 4.7748 11.2504 5.3998 11.2504H7.4248C7.5998 11.2504 7.75605 11.3191 7.89355 11.4566C8.03105 11.5941 8.0998 11.7535 8.0998 11.9348C8.0998 12.116 8.03105 12.2723 7.89355 12.4035C7.75605 12.5348 7.5998 12.6004 7.4248 12.6004ZM6.98005 9.67539C6.78905 9.67539 6.62793 9.61108 6.49668 9.48245C6.36543 9.35383 6.2998 9.19445 6.2998 9.00433C6.2998 8.8142 6.36443 8.65352 6.49368 8.52227C6.62293 8.39102 6.78305 8.32539 6.97405 8.32539H11.0196C11.2106 8.32539 11.3717 8.3897 11.5029 8.51833C11.6342 8.64695 11.6998 8.80633 11.6998 8.99645C11.6998 9.18658 11.6352 9.34727 11.5059 9.47852C11.3767 9.60977 11.2166 9.67539 11.0256 9.67539H6.98005ZM16.1998 9.00039H14.8498C14.8498 8.37539 14.6311 7.84414 14.1936 7.40664C13.7561 6.96914 13.2248 6.75039 12.5998 6.75039H10.5561C10.3811 6.75039 10.2279 6.6857 10.0967 6.55633C9.96543 6.42695 9.8998 6.26664 9.8998 6.07539C9.8998 5.90039 9.96449 5.74414 10.0939 5.60664C10.2232 5.46914 10.3836 5.40039 10.5748 5.40039H12.5998C13.5958 5.40039 14.4448 5.75139 15.1468 6.45339C15.8488 7.15539 16.1998 8.00439 16.1998 9.00039Z"
+        fill="currentColor"
+      />
+    </SvgIcon>
+  );
+};

package/src/components/common/CustomIcon/components/UnLinkIcon/unLinkIcon.tsx

@@ -0,0 +1,18 @@
+import { SvgIcon } from "@mui/material";
+import React from "react";
+import { CustomSVGIconProps } from "../../common/entities";
+
+export const UnLinkIcon = ({
+  fontSize = "xsmall",
+  viewBox = "0 0 18 18",
+  ...props /* Spread props to allow for Mui SvgIconProps specific prop overrides e.g. "htmlColor". */
+}: CustomSVGIconProps): JSX.Element => {
+  return (
+    <SvgIcon fontSize={fontSize} viewBox={viewBox} {...props}>
+      <path
+        d="M11.4561 9.52501L10.2373 8.325H11.0196C11.2123 8.325 11.3738 8.38968 11.5042 8.51905C11.6346 8.64843 11.6998 8.80875 11.6998 9C11.6998 9.11245 11.6748 9.21253 11.6248 9.30001C11.5748 9.38749 11.5123 9.46246 11.4373 9.52501H11.4561ZM14.8873 15.825C14.7498 15.9625 14.5904 16.0312 14.4092 16.0312C14.2279 16.0312 14.0685 15.9625 13.9311 15.825L2.15605 4.06874C2.01856 3.93124 1.94981 3.77187 1.94981 3.59062C1.94981 3.40937 2.01856 3.25 2.15605 3.11249C2.29355 2.97499 2.45293 2.90625 2.63418 2.90625C2.81543 2.90625 2.97481 2.97499 3.1123 3.11249L14.8873 14.8875C15.0248 15.025 15.0935 15.1812 15.0935 15.3562C15.0935 15.5313 15.0248 15.6875 14.8873 15.825ZM5.3998 12.6C4.4038 12.6 3.5548 12.249 2.8528 11.547C2.1508 10.845 1.7998 9.99598 1.7998 9C1.7998 8.20087 2.03731 7.48855 2.51231 6.86305C2.9873 6.23768 3.6623 5.74374 4.53731 5.38125L5.8498 6.75H5.41855C4.78105 6.75 4.24356 6.96874 3.80606 7.40625C3.36856 7.84375 3.1498 8.37499 3.1498 9C3.1498 9.625 3.36856 10.1563 3.80606 10.5938C4.24356 11.0313 4.77481 11.25 5.3998 11.25H7.4248C7.61605 11.25 7.77636 11.3143 7.90575 11.4429C8.03512 11.5715 8.0998 11.7309 8.0998 11.9211C8.0998 12.1112 8.03512 12.2719 7.90575 12.4031C7.77636 12.5343 7.61605 12.6 7.4248 12.6H5.3998ZM6.97274 9.67495C6.78661 9.67495 6.62793 9.61069 6.49668 9.48208C6.36543 9.35347 6.2998 9.19408 6.2998 9.00391C6.2998 8.81381 6.3645 8.65312 6.49387 8.52187C6.62325 8.39062 6.78355 8.325 6.9748 8.325H7.34981L8.68105 9.67495H6.97274ZM13.6686 11.775C13.5686 11.625 13.5342 11.4594 13.5654 11.2781C13.5966 11.0969 13.6873 10.9563 13.8373 10.8562C14.1498 10.6437 14.3967 10.375 14.5779 10.05C14.7592 9.72499 14.8498 9.37498 14.8498 9C14.8498 8.37499 14.631 7.84375 14.1935 7.40625C13.756 6.96874 13.2248 6.75 12.5998 6.75H10.5748C10.3836 6.75 10.2233 6.68568 10.0938 6.55705C9.96451 6.42844 9.8998 6.26905 9.8998 6.07893C9.8998 5.8888 9.96451 5.72812 10.0938 5.59687C10.2233 5.46563 10.3836 5.4 10.5748 5.4H12.5998C13.5958 5.4 14.4448 5.751 15.1468 6.453C15.8488 7.155 16.1998 8.00399 16.1998 9C16.1998 9.6034 16.0561 10.1667 15.7685 10.69C15.4811 11.2133 15.0873 11.6375 14.5873 11.9625C14.4373 12.0625 14.2716 12.0937 14.0904 12.0563C13.9092 12.0187 13.7685 11.925 13.6686 11.775Z"
+        fill="currentColor"
+      />
+    </SvgIcon>
+  );
+};

package/src/config/entities.ts

@@ -315,7 +315,7 @@ type RelatedSearchFunction = (
 
 export interface SavedFilter {
   filters: SelectedFilter[];
-  sort?: ColumnSort;
+  sorting?: ColumnSort[];
   title: string;
 }
 /**

package/src/providers/exploreState/initializer/utils.ts

@@ -73,8 +73,7 @@ function buildSavedFilterByCategoryValueKey(
   if (!savedFilters) return;
   const savedFilterByCategoryValueKey: SavedFilterByCategoryValueKey =
     new Map();
-  for (const { filters, sort, title } of savedFilters) {
-    const sorting = sort ? [sort] : undefined;
+  for (const { filters, sorting, title } of savedFilters) {
     savedFilterByCategoryValueKey.set(title, { filters, sorting, title });
   }
   return savedFilterByCategoryValueKey;

package/src/providers/exploreState/payloads/entities.ts

@@ -78,6 +78,7 @@ export type UpdateColumnVisibilityPayload = VisibilityState;
 export interface UpdateEntityFiltersPayload {
   entityListType: string;
   filters: SelectedFilter[];
+  sorting?: ColumnSort[];
 }
 /**
  * Update entity view access payload.

package/src/providers/exploreState.tsx

@@ -601,7 +601,7 @@ function exploreReducer(
      * Update entity filters.
      */
     case ExploreActionKind.UpdateEntityFilters: {
-      const { entityListType, filters: filterState } = payload;
+      const { entityListType, filters: filterState, sorting } = payload;
       const categoryGroupConfigKey = getEntityCategoryGroupConfigKey(
         entityListType,
         state.entityPageState
@@ -616,7 +616,13 @@ function exploreReducer(
       );
       return {
         ...state,
-        entityPageState: resetRowSelection(state, categoryGroupConfigKey),
+        entityPageState: updateEntityPageState(
+          entityListType,
+          {
+            ...resetRowSelection(state, categoryGroupConfigKey), // Reset row selection for all entities with the same category group config key.
+          },
+          { sorting } // Update sorting for the entity.
+        ),
       };
     }
     /**

package/types/data-explorer-ui.d.ts

@@ -15,6 +15,7 @@ import type {} from "@mui/material/Tabs";
 import type {} from "@mui/material/Toolbar";
 import type {} from "@mui/material/Typography";
 import { RowData } from "@tanstack/react-table";
+import type {} from "@tanstack/table-core";
 import { DataLayer } from "../src/common/analytics/entities";
 import { GridTrackSize } from "../src/config/entities";
 
@@ -255,6 +256,7 @@ declare module "@tanstack/table-core" {
   // eslint-disable-next-line @typescript-eslint/no-unused-vars -- TData and TValue are unused variables.
   interface ColumnMeta<TData extends RowData, TValue> {
     columnPinned?: boolean;
+    enableSortingInteraction?: boolean; // Flag to enable sorting interaction UI (e.g. sort icon) button; defaults to true.
     header?: string;
     width?: GridTrackSize;
   }

package/src/components/Detail/components/Table/components/TableHead/tableHead.tsx

@@ -1,34 +0,0 @@
-import { TableCell, TableHead as MTableHead, TableRow } from "@mui/material";
-import { flexRender, Table } from "@tanstack/react-table";
-import React, { Fragment } from "react";
-import { ROW_DIRECTION } from "../../../../../Table/common/entities";
-
-export interface TableBodyProps<T> {
-  rowDirection: ROW_DIRECTION;
-  tableInstance: Table<T>;
-}
-
-export const TableHead = <T extends object>({
-  rowDirection,
-  tableInstance,
-}: TableBodyProps<T>): JSX.Element => {
-  return (
-    <Fragment>
-      {rowDirection === ROW_DIRECTION.DEFAULT &&
-        tableInstance.getHeaderGroups().map((headerGroup) => (
-          <MTableHead key={headerGroup.id}>
-            <TableRow>
-              {headerGroup.headers.map((header) => (
-                <TableCell key={header.id}>
-                  {flexRender(
-                    header.column.columnDef.header,
-                    header.getContext()
-                  )}
-                </TableCell>
-              ))}
-            </TableRow>
-          </MTableHead>
-        ))}
-    </Fragment>
-  );
-};