@databiosphere/findable-ui 18.0.0 → 20.0.0

package/lib/components/Table/components/TableFeatures/ColumnGrouping/utils.js

@@ -0,0 +1,52 @@
+import { buildColumnSort } from "../RowSorting/utils";
+/**
+ * Clears the grouping state of the table and optionally resets the sorting state.
+ * ### Grouping State:
+ * - Grouping state is reset to `[]`.
+ * ### Sorting State:
+ * - Sorting state is reset to initial state (if sorting is enabled).
+ * @param table - Table.
+ */
+export function handleClearGroupingState(table) {
+    const { options: { enableSorting }, resetGrouping, resetSorting, } = table;
+    resetGrouping(true); // Clears grouping state to `[]`.
+    if (enableSorting)
+        resetSorting(); // Resets sorting state to initial state.
+}
+/**
+ * Toggles the grouping state for the given column.
+ * ### Grouping State
+ * - **Column grouping is not enabled**:
+ *   - No grouping action (exit).
+ * - **Column grouping is enabled**:
+ *   - Toggles the grouping state of the specified column.
+ * ### Sorting State
+ * - **Table sorting is not enabled**:
+ *   - No sorting action (exit).
+ * - **Column sorting is not enabled**:
+ *   - Resets sorting state to initial state.
+ * - **Column sorting is enabled**:
+ *   - Sets new sorting state with the grouped column as the first sort key.
+ * @param table - Table.
+ * @param column - Column.
+ */
+export function handleToggleGrouping(table, column) {
+    const { options: { enableSorting }, resetSorting, setSorting, } = table;
+    const { getCanGroup, getCanSort } = column;
+    // Column cannot be grouped.
+    if (!getCanGroup())
+        return;
+    // Toggle column grouping.
+    column.toggleGrouping(); // Grouping state currently only supports single-column grouping.
+    // Table sorting is not enabled.
+    if (!enableSorting)
+        return;
+    // Column sorting is enabled.
+    if (getCanSort()) {
+        // Set new sorting state; grouped column is first sort.
+        setSorting([buildColumnSort(column)]);
+        return;
+    }
+    // Column sorting is not enabled; reset sorting state to initial state.
+    resetSorting();
+}

package/lib/components/Table/components/TableFeatures/ColumnVisibility/utils.d.ts

@@ -0,0 +1,21 @@
+import { Column, RowData, Table } from "@tanstack/react-table";
+/**
+ * Toggles the visibility state for the given column.
+ * ### Column Visibility State
+ * - **Column visibility is not enabled**:
+ *   - No column visibility action (exit).
+ * - **Column visibility is enabled**:
+ *   - Toggles the visibility state of the specified column.
+ * ### Grouping and Sorting State
+ * - **Column is not visible**:
+ *   - No grouping or sorting action (exit).
+ * - **Column is visible**:
+ *   - **Column is grouped**:
+ *     - Resets grouping state to `[]`.
+ *     - Clears column from sorting state.
+ *   - **Column is not grouped**:
+ *     - No grouping or sorting action.
+ * @param table - Table.
+ * @param column - Column.
+ */
+export declare function handleToggleVisibility<T extends RowData>(table: Table<T>, column: Column<T>): void;

package/lib/components/Table/components/TableFeatures/ColumnVisibility/utils.js

@@ -0,0 +1,37 @@
+/**
+ * Toggles the visibility state for the given column.
+ * ### Column Visibility State
+ * - **Column visibility is not enabled**:
+ *   - No column visibility action (exit).
+ * - **Column visibility is enabled**:
+ *   - Toggles the visibility state of the specified column.
+ * ### Grouping and Sorting State
+ * - **Column is not visible**:
+ *   - No grouping or sorting action (exit).
+ * - **Column is visible**:
+ *   - **Column is grouped**:
+ *     - Resets grouping state to `[]`.
+ *     - Clears column from sorting state.
+ *   - **Column is not grouped**:
+ *     - No grouping or sorting action.
+ * @param table - Table.
+ * @param column - Column.
+ */
+export function handleToggleVisibility(table, column) {
+    const { options: { enableGrouping }, resetGrouping, } = table;
+    const { clearSorting, getCanHide, getIsGrouped, getIsVisible, toggleVisibility, } = column;
+    if (!getCanHide())
+        return;
+    // Toggle column visibility.
+    toggleVisibility();
+    // Column is not visible i.e. requesting column visibility and therefore no further action is needed.
+    if (!getIsVisible())
+        return;
+    // Column is visible.
+    // Table grouping is enabled, and column is grouped.
+    if (enableGrouping && getIsGrouped()) {
+        resetGrouping(true); // Clears grouping state to `[]`.
+        // Currently, only a grouped column's sorting state is cleared.
+        clearSorting(); // Clears column sorting.
+    }
+}

package/lib/components/Table/components/TableFeatures/RowSorting/utils.d.ts

@@ -0,0 +1,29 @@
+import { Column, ColumnSort, RowData, Table } from "@tanstack/react-table";
+import { MouseEvent } from "react";
+/**
+ * Constructs a `ColumnSort` object from a column.
+ * @param column - Column.
+ * @returns `ColumnSort` object with sorting direction and column ID.
+ */
+export declare function buildColumnSort<T extends RowData>(column: Column<T>): ColumnSort;
+/**
+ * Toggles the sorting state for the specified column.
+ * The sorting state of a table is modified based on user interaction, table grouping state, and
+ * its sorting configuration (single-sort or multi-sort modes).
+ * ### Sorting State:
+ * - **Ungrouped Table**:
+ *  - Sorting is toggled normally, respecting single-sort or multi-sort modes.
+ * - **Grouped Table**:
+ *   - **Multi-Sort Request**:
+ *     - Sorting is toggled normally.
+ *   - **Single-Sort Request**:
+ *     - **Multi-Sort Mode**:
+ *       - Grouped column is preserved as the first sort key, and the requested column is sorted as the second sort key.
+ *     - **Single-Sort Mode**:
+ *       - If the grouped column is already sorted, no action taken (the grouped column remains the primary sort key).
+ *       - Otherwise, sorting is toggled normally.
+ * @param mouseEvent - Mouse event.
+ * @param table - Table.
+ * @param column - Column.
+ */
+export declare function handleToggleSorting<T extends RowData>(mouseEvent: MouseEvent, table: Table<T>, column: Column<T>): void;

package/lib/components/Table/components/TableFeatures/RowSorting/utils.js

@@ -0,0 +1,68 @@
+/**
+ * Constructs a `ColumnSort` object from a column.
+ * @param column - Column.
+ * @returns `ColumnSort` object with sorting direction and column ID.
+ */
+export function buildColumnSort(column) {
+    return { desc: column.getFirstSortDir() === "desc", id: column.id };
+}
+/**
+ * Toggles the sorting state for the specified column.
+ * The sorting state of a table is modified based on user interaction, table grouping state, and
+ * its sorting configuration (single-sort or multi-sort modes).
+ * ### Sorting State:
+ * - **Ungrouped Table**:
+ *  - Sorting is toggled normally, respecting single-sort or multi-sort modes.
+ * - **Grouped Table**:
+ *   - **Multi-Sort Request**:
+ *     - Sorting is toggled normally.
+ *   - **Single-Sort Request**:
+ *     - **Multi-Sort Mode**:
+ *       - Grouped column is preserved as the first sort key, and the requested column is sorted as the second sort key.
+ *     - **Single-Sort Mode**:
+ *       - If the grouped column is already sorted, no action taken (the grouped column remains the primary sort key).
+ *       - Otherwise, sorting is toggled normally.
+ * @param mouseEvent - Mouse event.
+ * @param table - Table.
+ * @param column - Column.
+ */
+export function handleToggleSorting(mouseEvent, table, column) {
+    const { getColumn, getState, options: { enableMultiSort, isMultiSortEvent }, setSorting, } = table;
+    const { getCanSort, getSortIndex, toggleSorting } = column;
+    const { grouping, sorting } = getState();
+    // Table and column sorting is not enabled.
+    if (!getCanSort())
+        return;
+    // Sorting is enabled.
+    // Table is not grouped; toggle sorting as usual.
+    if (grouping.length === 0) {
+        toggleSorting(undefined, isMultiSortEvent?.(mouseEvent));
+        return;
+    }
+    // Table is grouped.
+    // Multi-sort mode and multi-sort requested; toggle sorting as usual.
+    if (enableMultiSort && isMultiSortEvent?.(mouseEvent)) {
+        toggleSorting(undefined, true);
+        return;
+    }
+    // Retrieve the grouped column.
+    const groupedColumn = getColumn(grouping[0]); // Grouping state currently only supports single-column grouping.
+    // Single-sort requested (either single-sort or multi-sort mode).
+    // Grouped column is sorted.
+    if (groupedColumn?.getIsSorted()) {
+        if (enableMultiSort) {
+            // Multi-sort mode.
+            // Column to be sorted is not the last most recent sorted column.
+            if (getSortIndex() !== sorting.length - 1) {
+                // Reset sorting state, preserving grouped column as the first sort, and requested column to be sorted as the second sort.
+                setSorting([buildColumnSort(groupedColumn), buildColumnSort(column)]);
+                return;
+            }
+        }
+        else {
+            // Special case; in single-sort mode we do not override a grouped sort.
+            return;
+        }
+    }
+    toggleSorting();
+}

package/lib/components/Table/components/TableHead/tableHead.d.ts

@@ -1,7 +1,3 @@
-import { RowData, Table } from "@tanstack/react-table";
-import { ROW_DIRECTION } from "../../common/entities";
-export interface TableHeadProps<T extends RowData> {
-    rowDirection: ROW_DIRECTION;
-    tableInstance: Table<T>;
-}
+import { RowData } from "@tanstack/react-table";
+import { TableHeadProps } from "./types";
 export declare const TableHead: <T extends RowData>({ rowDirection, tableInstance, }: TableHeadProps<T>) => JSX.Element;

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

@@ -1,14 +1,16 @@
+import SouthRoundedIcon from "@mui/icons-material/SouthRounded";
 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 { getTableCellAlign, getTableCellPadding, } from "../TableCell/common/utils";
+import { handleToggleSorting } from "../TableFeatures/RowSorting/utils";
+import { isSortDisabled, shouldSortColumn } from "./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(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()))));
+            React.createElement(MTableRow, null, headerGroup.headers.map(({ column, getContext, id }) => {
+                const { columnDef, getIsGrouped, getIsSorted } = column;
+                return getIsGrouped() ? null : (React.createElement(TableCell, { key: id, align: getTableCellAlign(column), padding: getTableCellPadding(id) }, shouldSortColumn(tableInstance, column) ? (React.createElement(TableSortLabel, { IconComponent: SouthRoundedIcon, active: Boolean(getIsSorted()), direction: getIsSorted() || undefined, disabled: isSortDisabled(tableInstance), onClick: (mouseEvent) => handleToggleSorting(mouseEvent, tableInstance, column) }, flexRender(columnDef.header, getContext()))) : (flexRender(columnDef.header, getContext()))));
             })))))));
 };

package/lib/components/Table/components/TableHead/types.d.ts

@@ -0,0 +1,6 @@
+import { RowData, Table } from "@tanstack/react-table";
+import { ROW_DIRECTION } from "../../common/entities";
+export interface TableHeadProps<T extends RowData> {
+    rowDirection: ROW_DIRECTION;
+    tableInstance: Table<T>;
+}

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

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

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

@@ -0,0 +1,19 @@
+import { Column, RowData, Table } from "@tanstack/react-table";
+/**
+ * Determines if the column sorting interaction should be disabled.
+ * The sort label is disabled under the following conditions:
+ * - The table is in single-sort mode, and is grouped, and the grouped column is already sorted.
+ * When multi-sort mode is enabled or the table is not grouped, the sort label remains enabled.
+ * @param table - Table.
+ * @returns `true` if the sort label should be disabled; otherwise, `false`.
+ */
+export declare function isSortDisabled<T extends RowData>(table: Table<T>): boolean;
+/**
+ * Checks whether a column in a table can be sorted.
+ * A column is sortable if both table sorting interactions are enabled
+ * and the column itself is marked as sortable.
+ * @param table - Table.
+ * @param column - Column.
+ * @returns {boolean} `true` if the column can be sorted; otherwise, `false`.
+ */
+export declare function shouldSortColumn<T extends RowData>(table: Table<T>, column: Column<T>): boolean;

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

@@ -0,0 +1,34 @@
+/**
+ * Determines if the column sorting interaction should be disabled.
+ * The sort label is disabled under the following conditions:
+ * - The table is in single-sort mode, and is grouped, and the grouped column is already sorted.
+ * When multi-sort mode is enabled or the table is not grouped, the sort label remains enabled.
+ * @param table - Table.
+ * @returns `true` if the sort label should be disabled; otherwise, `false`.
+ */
+export function isSortDisabled(table) {
+    const { getColumn, getState, options: { enableMultiSort }, } = table;
+    const { grouping } = getState();
+    // Multi-sort is enabled - sorting is always enabled.
+    if (enableMultiSort)
+        return false;
+    // Table is not grouped - sorting is always enabled.
+    if (grouping.length === 0)
+        return false;
+    // In single-sort mode, check if the grouped column is already sorted.
+    const groupedColumn = getColumn(grouping[0]); // Grouping state currently only supports single-column grouping.
+    return Boolean(groupedColumn?.getIsSorted());
+}
+/**
+ * Checks whether a column in a table can be sorted.
+ * A column is sortable if both table sorting interactions are enabled
+ * and the column itself is marked as sortable.
+ * @param table - Table.
+ * @param column - Column.
+ * @returns {boolean} `true` if the column can be sorted; otherwise, `false`.
+ */
+export function shouldSortColumn(table, column) {
+    const { enableSortingInteraction } = table.options;
+    const canSort = column.getCanSort();
+    return Boolean(enableSortingInteraction && canSort);
+}

package/lib/components/Table/components/TableRow/tableRow.styles.d.ts

@@ -1,4 +1,5 @@
 interface Props {
+    isGrouped?: boolean;
     isPreview?: boolean;
 }
 export declare const TableRow: import("@emotion/styled").StyledComponent<import("@mui/material").TableRowOwnProps & import("@mui/material/OverridableComponent").CommonProps & Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLTableRowElement>, HTMLTableRowElement>, "ref"> & {

package/lib/components/Table/components/TableRow/tableRow.styles.js

@@ -1,13 +1,25 @@
 import { css } from "@emotion/react";
 import styled from "@emotion/styled";
 import { TableRow as MTableRow } from "@mui/material";
-import { primaryLightest } from "../../../../styles/common/mixins/colors";
+import { primaryLightest, smokeLightest, } from "../../../../styles/common/mixins/colors";
+import { textBodySmall500 } from "../../../../styles/common/mixins/fonts";
 export const TableRow = styled(MTableRow, {
-    shouldForwardProp: (prop) => prop !== "isPreview",
+    shouldForwardProp: (prop) => prop !== "isPreview" && prop !== "isGrouped",
 }) `
   && {
     transition: background-color 300ms ease-in;
 
+    ${(props) => props.isGrouped &&
+    css `
+        background-color: ${smokeLightest(props)};
+
+        td {
+          ${textBodySmall500(props)};
+          background-color: inherit;
+          grid-column: 1 / -1;
+        }
+      `}
+
     ${(props) => props.isPreview &&
     css `
         background-color: ${primaryLightest(props)};

package/lib/components/Table/components/TableRows/components/CollapsableRows/collapsableRows.d.ts

@@ -1,7 +1,8 @@
-import { RowData, Table } from "@tanstack/react-table";
+import { Row, RowData, Table } from "@tanstack/react-table";
 import { Virtualizer } from "@tanstack/react-virtual";
 export interface CollapsableRowsProps<T extends RowData> {
+    rows: Row<T>[];
     tableInstance: Table<T>;
     virtualizer: Virtualizer<Window, Element>;
 }
-export declare const CollapsableRows: <T extends RowData>({ tableInstance, virtualizer, }: CollapsableRowsProps<T>) => JSX.Element;
+export declare const CollapsableRows: <T extends RowData>({ rows, tableInstance, virtualizer, }: CollapsableRowsProps<T>) => JSX.Element;

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

@@ -2,14 +2,18 @@ import React, { Fragment } from "react";
 import { isCollapsableRowDisabled } from "../../../../common/utils";
 import { CollapsableCell } from "../../../TableCell/components/CollapsableCell/collapsableCell";
 import { TableRow } from "../../../TableRow/tableRow.styles";
-export const CollapsableRows = ({ tableInstance, virtualizer, }) => {
-    const { getRowModel } = tableInstance;
-    const { rows } = getRowModel();
+import { useCollapsableRows } from "./hook";
+export const CollapsableRows = ({ rows, tableInstance, virtualizer, }) => {
+    const { getState } = tableInstance;
+    const { grouping } = getState();
     const virtualItems = virtualizer.getVirtualItems();
+    useCollapsableRows(tableInstance);
     return (React.createElement(Fragment, null, virtualItems.map((virtualRow) => {
         const row = rows[virtualRow.index];
         const { getIsPreview } = row;
+        if (grouping.length > 0 && row.depth > 0)
+            return null; // TODO(cc) hide sub rows -- sub-rows are within collapsed content -- UI TBD.
         return (React.createElement(TableRow, { key: row.id, "data-index": virtualRow.index, isPreview: getIsPreview(), ref: virtualizer.measureElement },
-            React.createElement(CollapsableCell, { isDisabled: isCollapsableRowDisabled(tableInstance), row: row })));
+            React.createElement(CollapsableCell, { isDisabled: isCollapsableRowDisabled(tableInstance), row: row, virtualizer: virtualizer })));
     })));
 };

package/lib/components/Table/components/TableRows/components/CollapsableRows/hook.d.ts

@@ -0,0 +1,9 @@
+import { RowData, Table } from "@tanstack/react-table";
+/**
+ * Hook to manage the expanded row state during viewport transitions (e.g., desktop to mobile and vice versa).
+ * Designed for use with the `CollapsableRows` component, where row expansion is a work in progress for desktop viewports.
+ * This hook ensures that all rows are collapsed when transitioning from desktop to mobile (when `CollapsableRows` component is mounted).
+ * It also resets the expanded row state when transitioning back to desktop (when the `CollapsableRows` component is unmounted).
+ * @param table - Table.
+ */
+export declare function useCollapsableRows<T extends RowData>(table: Table<T>): void;

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

@@ -0,0 +1,17 @@
+import { useEffect } from "react";
+/**
+ * Hook to manage the expanded row state during viewport transitions (e.g., desktop to mobile and vice versa).
+ * Designed for use with the `CollapsableRows` component, where row expansion is a work in progress for desktop viewports.
+ * This hook ensures that all rows are collapsed when transitioning from desktop to mobile (when `CollapsableRows` component is mounted).
+ * It also resets the expanded row state when transitioning back to desktop (when the `CollapsableRows` component is unmounted).
+ * @param table - Table.
+ */
+export function useCollapsableRows(table) {
+    const { resetExpanded, toggleAllRowsExpanded } = table;
+    useEffect(() => {
+        toggleAllRowsExpanded(false);
+        return () => {
+            resetExpanded();
+        };
+    }, [resetExpanded, toggleAllRowsExpanded]);
+}

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

@@ -1,7 +1,7 @@
-import { RowData, Table } from "@tanstack/react-table";
+import { Row, RowData } from "@tanstack/react-table";
 import { Virtualizer } from "@tanstack/react-virtual";
 export interface TableRowsProps<T extends RowData> {
-    tableInstance: Table<T>;
+    rows: Row<T>[];
     virtualizer: Virtualizer<Window, Element>;
 }
-export declare const TableRows: <T extends RowData>({ tableInstance, virtualizer, }: TableRowsProps<T>) => JSX.Element;
+export declare const TableRows: <T extends RowData>({ rows, virtualizer, }: TableRowsProps<T>) => JSX.Element;

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

@@ -3,13 +3,17 @@ import { flexRender } from "@tanstack/react-table";
 import React, { Fragment } from "react";
 import { getTableCellAlign, getTableCellPadding, } from "../TableCell/common/utils";
 import { TableRow } from "../TableRow/tableRow.styles";
-export const TableRows = ({ tableInstance, virtualizer, }) => {
-    const { getRowModel } = tableInstance;
-    const { rows } = getRowModel();
+export const TableRows = ({ rows, virtualizer, }) => {
     const virtualItems = virtualizer.getVirtualItems();
     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(TableCell, { key: cell.id, align: getTableCellAlign(cell.column), padding: getTableCellPadding(cell.column.id) }, flexRender(cell.column.columnDef.cell, cell.getContext()))))));
+        const { getIsGrouped, getIsPreview } = row;
+        return (React.createElement(TableRow, { key: row.id, "data-index": virtualRow.index, isGrouped: getIsGrouped(), isPreview: getIsPreview(), ref: virtualizer.measureElement }, 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.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/components/TableToolbar/components/ColumnGrouping/columnGrouping.d.ts

@@ -0,0 +1,3 @@
+import { RowData } from "@tanstack/react-table";
+import { ColumnGroupingProps } from "./types";
+export declare const ColumnGrouping: <T extends RowData>({ tableInstance, }: ColumnGroupingProps<T>) => JSX.Element | null;

package/lib/components/Table/components/TableToolbar/components/ColumnGrouping/columnGrouping.js

@@ -0,0 +1,26 @@
+import { ListItemText } from "@mui/material";
+import React from "react";
+import { DropdownButton } from "../../../../../common/Button/components/DropdownButton/dropdownButton";
+import { DropdownMenu } from "../../../../../common/DropdownMenu/dropdownMenu";
+import { handleClearGroupingState } from "../../../TableFeatures/ColumnGrouping/utils";
+import { StyledMenuItem } from "./columnGrouping.styles";
+import { MenuItems } from "./components/MenuItems/menuItems";
+import { LIST_ITEM_TEXT_PROPS, MENU_ITEM_PROPS, MENU_PROPS } from "./constants";
+import { getButtonLabel, getColumnGrouping } from "./utils";
+export const ColumnGrouping = ({ tableInstance, }) => {
+    const { getState, options: { enableGrouping }, } = tableInstance;
+    const { grouping } = getState();
+    const groupingByColumnId = getColumnGrouping(tableInstance);
+    if (!enableGrouping)
+        return null;
+    if (groupingByColumnId.size === 0)
+        return null;
+    return (React.createElement(DropdownMenu, { ...MENU_PROPS, button: (props) => (React.createElement(DropdownButton, { ...props }, getButtonLabel(groupingByColumnId, grouping))) }, ({ closeMenu }) => [
+        React.createElement(MenuItems, { key: "column-grouping", closeMenu: closeMenu, groupingByColumnId: groupingByColumnId, tableInstance: tableInstance }),
+        React.createElement(StyledMenuItem, { ...MENU_ITEM_PROPS, key: "reset-grouping-state", disabled: grouping.length === 0, onClick: () => {
+                handleClearGroupingState(tableInstance);
+                closeMenu();
+            } },
+            React.createElement(ListItemText, { ...LIST_ITEM_TEXT_PROPS }, "Clear Grouping")),
+    ]));
+};

package/lib/components/Table/components/TableToolbar/components/ColumnGrouping/columnGrouping.styles.d.ts

@@ -0,0 +1,2 @@
+import { MenuItem } from "@mui/material";
+export declare const StyledMenuItem: typeof MenuItem;

package/lib/components/Table/components/TableToolbar/components/ColumnGrouping/columnGrouping.styles.js

@@ -0,0 +1,16 @@
+import styled from "@emotion/styled";
+import { MenuItem } from "@mui/material";
+export const StyledMenuItem = styled(MenuItem) `
+  &:hover {
+    background-color: transparent;
+
+    .MuiListItemText-root {
+      .MuiListItemText-primary {
+        text-decoration: underline;
+        text-decoration-skip-ink: none;
+        text-underline-color: currentColor;
+        text-underline-position: from-font;
+      }
+    }
+  }
+`;

package/lib/components/Table/components/TableToolbar/components/ColumnGrouping/components/MenuItems/menuItems.d.ts

@@ -0,0 +1,3 @@
+import { RowData } from "@tanstack/react-table";
+import { MenuItemsProps } from "./types";
+export declare const MenuItems: <T extends RowData>({ closeMenu, groupingByColumnId, tableInstance, }: MenuItemsProps<T>) => JSX.Element[];

package/lib/components/Table/components/TableToolbar/components/ColumnGrouping/components/MenuItems/menuItems.js

@@ -0,0 +1,12 @@
+import { ListItemText, MenuItem } from "@mui/material";
+import React from "react";
+import { handleToggleGrouping } from "../../../../../TableFeatures/ColumnGrouping/utils";
+import { MENU_ITEM_PROPS } from "../../constants";
+export const MenuItems = ({ closeMenu, groupingByColumnId, tableInstance, }) => {
+    const columnByMenuItem = [...groupingByColumnId.values()];
+    return columnByMenuItem.map(([menuItem, column]) => (React.createElement(MenuItem, { ...MENU_ITEM_PROPS, key: column.id, disabled: !column.getCanGroup(), onClick: () => {
+            handleToggleGrouping(tableInstance, column);
+            closeMenu();
+        }, selected: column.getIsGrouped() },
+        React.createElement(ListItemText, { disableTypography: true }, menuItem))));
+};

package/lib/components/Table/components/TableToolbar/components/ColumnGrouping/components/MenuItems/types.d.ts

@@ -0,0 +1,7 @@
+import { Column, RowData, Table } from "@tanstack/react-table";
+import { UseMenu } from "../../../../../../../common/Menu/hooks/useMenu";
+export interface MenuItemsProps<T extends RowData> {
+    closeMenu: UseMenu<HTMLButtonElement>["onClose"];
+    groupingByColumnId: Map<string, [string, Column<T>]>;
+    tableInstance: Table<T>;
+}

package/lib/components/Table/components/TableToolbar/components/ColumnGrouping/components/MenuItems/types.js

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

package/lib/components/Table/components/TableToolbar/components/ColumnGrouping/constants.d.ts

@@ -0,0 +1,4 @@
+import { ListItemTextProps, MenuItemProps, MenuProps } from "@mui/material";
+export declare const LIST_ITEM_TEXT_PROPS: Partial<ListItemTextProps>;
+export declare const MENU_PROPS: Partial<MenuProps>;
+export declare const MENU_ITEM_PROPS: Partial<MenuItemProps>;

package/lib/components/Table/components/TableToolbar/components/ColumnGrouping/constants.js

@@ -0,0 +1,13 @@
+export const LIST_ITEM_TEXT_PROPS = {
+    primaryTypographyProps: {
+        color: "primary",
+        component: "span",
+        variant: "inherit",
+    },
+};
+export const MENU_PROPS = {
+    variant: "menu",
+};
+export const MENU_ITEM_PROPS = {
+    component: "li",
+};

package/lib/components/Table/components/TableToolbar/components/ColumnGrouping/types.d.ts

@@ -0,0 +1,4 @@
+import { RowData, Table } from "@tanstack/react-table";
+export interface ColumnGroupingProps<T extends RowData> {
+    tableInstance: Table<T>;
+}

package/lib/components/Table/components/TableToolbar/components/ColumnGrouping/types.js

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

package/lib/components/Table/components/TableToolbar/components/ColumnGrouping/utils.d.ts

@@ -0,0 +1,17 @@
+import { Column, GroupingState, RowData, Table } from "@tanstack/react-table";
+/**
+ * Retrieves the button label for the column grouping dropdown.
+ * Currently, the grouping state supports grouping by a single column only.
+ * @param groupingByColumnId - Map of column groupings by column ID.
+ * @param groupingState - Grouping state.
+ * @returns button label.
+ */
+export declare function getButtonLabel<T extends RowData>(groupingByColumnId: Map<string, [string, Column<T>]>, groupingState: GroupingState): string;
+/**
+ * Retrieves a map of column groupings by column ID from the given table instance.
+ * Columns that are visible, group-able with a `string` header are included and are keyed by
+ * their column ID. The value is a tuple containing the column header and the column instance.
+ * @param table - Table.
+ * @returns map of column grouping by column id.
+ */
+export declare function getColumnGrouping<T extends RowData>(table: Table<T>): Map<string, [string, Column<T>]>;

package/lib/components/Table/components/TableToolbar/components/ColumnGrouping/utils.js

@@ -0,0 +1,36 @@
+/**
+ * Retrieves the button label for the column grouping dropdown.
+ * Currently, the grouping state supports grouping by a single column only.
+ * @param groupingByColumnId - Map of column groupings by column ID.
+ * @param groupingState - Grouping state.
+ * @returns button label.
+ */
+export function getButtonLabel(groupingByColumnId, groupingState) {
+    const grouping = groupingByColumnId.get(groupingState[0]);
+    if (!grouping)
+        return "Group by";
+    return `Group by: ${grouping[0]}`;
+}
+/**
+ * Retrieves a map of column groupings by column ID from the given table instance.
+ * Columns that are visible, group-able with a `string` header are included and are keyed by
+ * their column ID. The value is a tuple containing the column header and the column instance.
+ * @param table - Table.
+ * @returns map of column grouping by column id.
+ */
+export function getColumnGrouping(table) {
+    const groupingByColumnId = new Map();
+    for (const column of table.getAllColumns()) {
+        const { columnDef: { header }, getCanGroup, getIsVisible, id, } = column;
+        if (!getCanGroup())
+            continue;
+        if (!getIsVisible())
+            continue;
+        // Currently, headers are configured as strings.
+        // Only include columns that have a string header (for now).
+        if (typeof header !== "string")
+            continue;
+        groupingByColumnId.set(id, [header, column]);
+    }
+    return groupingByColumnId;
+}

package/lib/components/Table/components/TableToolbar/components/RowSelection/components/DropdownMenu/dropdownMenu.d.ts

@@ -1,9 +1,8 @@
 import { DropdownMenuItemProps } from "../../../../../../../common/DropdownMenu/common/entities";
 import { DropdownMenuProps as DXDropdownMenuProps } from "../../../../../../../common/DropdownMenu/dropdownMenu";
 export interface DropdownMenuProps {
-    Button?: DXDropdownMenuProps["Button"];
-    buttonLabel?: string;
+    button?: DXDropdownMenuProps["button"];
     children: ({ closeMenu }: DropdownMenuItemProps) => JSX.Element[];
     className?: string;
 }
-export declare const DropdownMenu: ({ Button, buttonLabel, children, className, ...props }: DropdownMenuProps) => JSX.Element;
+export declare const DropdownMenu: ({ button, children, className, ...props }: DropdownMenuProps) => JSX.Element;