@databiosphere/findable-ui 20.0.0 → 21.0.0

package/.release-please-manifest.json

@@ -1,3 +1,3 @@
 {
-  ".": "20.0.0"
+  ".": "21.0.0"
 }

package/CHANGELOG.md

@@ -1,5 +1,16 @@
 # Changelog
 
+## [21.0.0](https://github.com/DataBiosphere/findable-ui/compare/v20.0.0...v21.0.0) (2025-01-06)
+
+
+### ⚠ BREAKING CHANGES
+
+* update column visibility to use only tanstack api ([#307](https://github.com/DataBiosphere/findable-ui/issues/307)) (#308)
+
+### Features
+
+* update column visibility to use only tanstack api ([#307](https://github.com/DataBiosphere/findable-ui/issues/307)) ([#308](https://github.com/DataBiosphere/findable-ui/issues/308)) ([4baf212](https://github.com/DataBiosphere/findable-ui/commit/4baf212bf564d539b757dd82144511fc97ca7717))
+
 ## [20.0.0](https://github.com/DataBiosphere/findable-ui/compare/v19.0.0...v20.0.0) (2025-01-06)
 
 

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

@@ -1,6 +1,8 @@
 import { TABLE_CELL_PROPS } from "../../../styles/common/mui/tableCell";
-import { ACCESSOR_KEYS } from "../../TableCreator/common/constants";
 import { RowPositionCell } from "../components/TableCell/components/RowPositionCell/rowPositionCell";
+import { RowSelectionCell } from "../components/TableCell/components/RowSelectionCell/rowSelectionCell";
+import { HeadSelectionCell } from "../components/TableHead/components/HeadSelectionCell/headSelectionCell";
+import { COLUMN_IDENTIFIER } from "./columnIdentifier";
 export const COLUMN_DEF = {
     ROW_POSITION: {
         cell: RowPositionCell,
@@ -8,9 +10,23 @@ export const COLUMN_DEF = {
         enableHiding: false,
         enableSorting: false,
         header: "",
-        id: ACCESSOR_KEYS.ROW_POSITION,
+        id: COLUMN_IDENTIFIER.ROW_POSITION,
         meta: {
             align: TABLE_CELL_PROPS.ALIGN.RIGHT,
+            columnPinned: false,
+            header: "",
+            width: "max-content",
+        },
+    },
+    ROW_SELECTION: {
+        cell: RowSelectionCell,
+        enableGrouping: false,
+        enableHiding: false,
+        enableSorting: false,
+        header: HeadSelectionCell,
+        id: COLUMN_IDENTIFIER.ROW_SELECTION,
+        meta: {
+            columnPinned: false,
             header: "",
             width: "max-content",
         },

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

@@ -0,0 +1,4 @@
+export declare const COLUMN_IDENTIFIER: {
+    ROW_POSITION: string;
+    ROW_SELECTION: string;
+};

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

@@ -0,0 +1,4 @@
+export const COLUMN_IDENTIFIER = {
+    ROW_POSITION: "rowPosition",
+    ROW_SELECTION: "rowSelection",
+};

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

@@ -0,0 +1,11 @@
+import { Column, RowData } from "@tanstack/react-table";
+/**
+ * Type guard to check if a column's header is a string.
+ * @param column - Column.
+ * @returns true if the column has a string header.
+ */
+export declare function isStringHeaderColumn<T extends RowData>(column: Column<T>): column is Column<T> & {
+    columnDef: {
+        header: string;
+    };
+};

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

@@ -0,0 +1,8 @@
+/**
+ * Type guard to check if a column's header is a string.
+ * @param column - Column.
+ * @returns true if the column has a string header.
+ */
+export function isStringHeaderColumn(column) {
+    return typeof column.columnDef.header === "string";
+}

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

@@ -1,8 +1,6 @@
-import { Cell, Column, ColumnFiltersState, InitialTableState, PaginationState, Row, RowData, Table, VisibilityState } from "@tanstack/react-table";
+import { Cell, Column, ColumnFiltersState, PaginationState, Row, RowData, Table } from "@tanstack/react-table";
 import { SelectCategory } from "../../../common/entities";
-import { ColumnConfig } from "../../../config/entities";
 import { ExploreMode } from "../../../hooks/useExploreMode";
-import { CheckboxMenuListItem } from "../components/CheckboxMenu/checkboxMenu";
 /**
  * Internal model of a category term count keyed by category term.
  */
@@ -36,12 +34,6 @@ export declare function buildCategoryViews<T extends RowData>(columns: Column<T>
  * @returns filtered entity results as a blob.
  */
 export declare function generateDownloadBlob<T extends RowData>(rows: Row<T>[]): Blob | undefined;
-/**
- * Returns edit column checkbox menu options.
- * @param table - Table.
- * @returns a list of edit column options.
- */
-export declare function getEditColumnOptions<T extends RowData>(table: Table<T>): CheckboxMenuListItem[];
 /**
  * Returns unique category term counts keyed by category terms.
  * Custom function based off react table function getFacetedUniqueValues, see
@@ -50,19 +42,6 @@ export declare function getEditColumnOptions<T extends RowData>(table: Table<T>)
  * @returns Unique category term counts keyed by category terms.
  */
 export declare function getFacetedUniqueValuesWithArrayValues<T extends RowData>(): (table: Table<T>, columnId: string) => () => CountByTerms;
-/**
- * Generates a string value for the CSS property grid-template-columns.
- * Defines grid table track sizing (for each visible column).
- * @param columns - Table columns.
- * @returns string value for the css property grid-template-columns.
- */
-export declare function getGridTemplateColumns<T extends RowData>(columns: Column<T>[]): string;
-/**
- * Returns initial table state.
- * @param columns - Column configuration.
- * @returns initial table state.
- */
-export declare function getInitialState<T extends RowData>(columns: ColumnConfig<T>[]): InitialTableState;
 /**
  * Returns the pinned cell and its index tuple.
  * @param row - Row.
@@ -105,10 +84,4 @@ export declare function isCollapsableRowDisabled<T extends RowData>(tableInstanc
  * @returns sort return value from the compare function (0 | 1 | -1).
  */
 export declare function sortingFn<T>(rowA: Row<T>, rowB: Row<T>, columnId: string): number;
-/**
- * Returns the initial table visibility state for the specified column configuration.
- * @param columns - Column configuration.
- * @returns initial table visibility state.
- */
-export declare function getInitialTableColumnVisibility<T extends RowData>(columns: ColumnConfig<T>[]): VisibilityState;
 export {};

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

@@ -1,7 +1,6 @@
 import { memo, sortingFns, } from "@tanstack/react-table";
 import { EXPLORE_MODE } from "../../../hooks/useExploreMode";
-import { ACCESSOR_KEYS } from "../../TableCreator/common/constants";
-import { handleToggleVisibility } from "../components/TableFeatures/ColumnVisibility/utils";
+import { COLUMN_IDENTIFIER } from "./columnIdentifier";
 /**
  * Returns true if the row should be included in the filtered rows.
  * The row will be included if:
@@ -88,32 +87,6 @@ export function generateDownloadBlob(rows) {
     const tsv = formatDataToTSV([tableHeaders, ...tableData]);
     return new Blob([tsv], { type: "text/tab-separated-values" });
 }
-/**
- * Returns edit column checkbox menu options.
- * @param table - Table.
- * @returns a list of edit column options.
- */
-export function getEditColumnOptions(table) {
-    const { getAllColumns, initialState } = table;
-    const { columnVisibility: initialVisibilityState } = initialState;
-    const allColumns = getAllColumns();
-    return allColumns.reduce((acc, column) => {
-        const { columnDef: { header }, getCanHide, getIsVisible, id, } = column;
-        if (getCanHide()) {
-            const option = {
-                checked: getIsVisible(),
-                disabled: initialVisibilityState[id], // TODO(cc) column visibility toggle should be disabled when table enableGrouping is false, and column is grouped.
-                label: header, // TODO revisit type assertion here
-                onChange: () => {
-                    handleToggleVisibility(table, column);
-                },
-                value: id,
-            };
-            acc.push(option);
-        }
-        return acc;
-    }, []);
-}
 /**
  * Returns unique category term counts keyed by category terms.
  * Custom function based off react table function getFacetedUniqueValues, see
@@ -147,35 +120,6 @@ export function getFacetedUniqueValuesWithArrayValues() {
         onChange: () => { },
     });
 }
-/**
- * Generates a string value for the CSS property grid-template-columns.
- * Defines grid table track sizing (for each visible column).
- * @param columns - Table columns.
- * @returns string value for the css property grid-template-columns.
- */
-export function getGridTemplateColumns(columns) {
-    return columns
-        .filter(filterGroupedColumn)
-        .map(({ columnDef: { meta } }) => {
-        const width = meta?.width;
-        if (isGridTrackMinMax(width)) {
-            return `minmax(${width.min}, ${width.max})`;
-        }
-        return width;
-    })
-        .join(" ");
-}
-/**
- * Returns initial table state.
- * @param columns - Column configuration.
- * @returns initial table state.
- */
-export function getInitialState(columns) {
-    const columnVisibility = getInitialTableColumnVisibility(columns);
-    return {
-        columnVisibility,
-    };
-}
 /**
  * Returns the pinned cell and its index tuple.
  * @param row - Row.
@@ -210,35 +154,27 @@ export function getTableStatePagination(pageIndex = 0, pageSize) {
     };
 }
 /**
- * Returns the list of table headers, excluding "select" column.
+ * Returns the list of table headers, excluding "rowSelection" column.
  * @param rows - Table rows.
  * @returns list of headers.
  */
 function getHeadersTableData(rows) {
     return rows[0]
         .getAllCells()
-        .filter((cell) => cell.column.id !== ACCESSOR_KEYS.SELECT)
+        .filter((cell) => cell.column.id !== COLUMN_IDENTIFIER.ROW_SELECTION)
         .map((cell) => cell.column.columnDef.header);
 }
 /**
- * Returns the list of table data, excluding "select" column.
+ * Returns the list of table data, excluding "rowSelection" column.
  * @param rows - Table rows.
  * @returns list of data.
  */
 function getRowsTableData(rows) {
     return rows.map((row) => row
         .getAllCells()
-        .filter((cell) => cell.column.id !== ACCESSOR_KEYS.SELECT)
+        .filter((cell) => cell.column.id !== COLUMN_IDENTIFIER.ROW_SELECTION)
         .map((cell) => cell.getValue()));
 }
-/**
- * Returns true if the column is not grouped (filters out grouped columns).
- * @param column - Table column.
- * @returns true if the column is not grouped.
- */
-function filterGroupedColumn(column) {
-    return !column.getIsGrouped();
-}
 /**
  * Returns true if any or all table rows are selected.
  * @param table - Table.
@@ -298,25 +234,6 @@ export function sortingFn(rowA, rowB, columnId) {
 function basicSort(val0, val1) {
     return val0 === val1 ? 0 : val0 > val1 ? 1 : -1;
 }
-/**
- * Returns the initial table visibility state for the specified column configuration.
- * @param columns - Column configuration.
- * @returns initial table visibility state.
- */
-export function getInitialTableColumnVisibility(columns) {
-    return columns.reduce((acc, { columnVisible = true, id }) => {
-        Object.assign(acc, { [id]: columnVisible });
-        return acc;
-    }, {});
-}
-/**
- * Determine if the given track size width is a size range.
- * @param width - Grid table track size.
- * @returns true if the given track size width is a size range.
- */
-function isGridTrackMinMax(width) {
-    return width.min !== undefined;
-}
 /**
  * Returns the given value as a string.
  * See React Table "toString" function

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

@@ -1,5 +1,5 @@
 import { TABLE_CELL_PROPS } from "../../../../../styles/common/mui/tableCell";
-import { ACCESSOR_KEYS } from "../../../../TableCreator/common/constants";
+import { COLUMN_IDENTIFIER } from "../../../common/columnIdentifier";
 /**
  * Returns table cell alignment based on the cell.
  * @param column - Column.
@@ -15,9 +15,9 @@ export function getTableCellAlign(column) {
  */
 export function getTableCellPadding(id) {
     switch (id) {
-        case ACCESSOR_KEYS.ROW_POSITION:
+        case COLUMN_IDENTIFIER.ROW_POSITION:
             return TABLE_CELL_PROPS.PADDING.NORMAL;
-        case ACCESSOR_KEYS.SELECT:
+        case COLUMN_IDENTIFIER.ROW_SELECTION:
             return TABLE_CELL_PROPS.PADDING.CHECKBOX;
         default:
             return TABLE_CELL_PROPS.PADDING.NORMAL;

package/lib/components/Table/components/TableCell/components/RowSelectionCell/rowSelectionCell.d.ts

@@ -1,5 +1,2 @@
-import { Row, RowData } from "@tanstack/react-table";
-export interface RowSelectionCellProps<T extends RowData> {
-    row: Row<T>;
-}
-export declare const RowSelectionCell: <T extends RowData>({ row, }: RowSelectionCellProps<T>) => JSX.Element;
+import { CellContext, RowData } from "@tanstack/react-table";
+export declare const RowSelectionCell: <T extends RowData, TValue = unknown>({ row, }: CellContext<T, TValue>) => JSX.Element;

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

@@ -1,21 +1,10 @@
-import { Column, RowData, Table } from "@tanstack/react-table";
+import { 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.
+ * Resets column visibility state of the table.
+ * ### Default Behavior:
+ * - Column visibility state is reset to initial state.
+ * ### Grouping State:
+ * - Column visibility state is reset to initial state, with any grouped columns remaining visible.
  * @param table - Table.
- * @param column - Column.
  */
-export declare function handleToggleVisibility<T extends RowData>(table: Table<T>, column: Column<T>): void;
+export declare function handleResetVisibilityState<T extends RowData>(table: Table<T>): void;

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

@@ -1,37 +1,26 @@
 /**
- * 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.
+ * Resets column visibility state of the table.
+ * ### Default Behavior:
+ * - Column visibility state is reset to initial state.
+ * ### Grouping State:
+ * - Column visibility state is reset to initial state, with any grouped columns remaining visible.
  * @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())
+export function handleResetVisibilityState(table) {
+    const { getState, initialState, resetColumnVisibility, setColumnVisibility } = table;
+    const { grouping } = getState();
+    if (grouping.length === 0) {
+        resetColumnVisibility(); // Resets column visibility state.
         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.
     }
+    // Table is grouped.
+    // Ensure grouped columns remain visible (as their initial visibility state may have been `false`).
+    const groupedColumnVisibility = {};
+    for (const id of grouping) {
+        groupedColumnVisibility[id] = true;
+    }
+    setColumnVisibility({
+        ...initialState.columnVisibility,
+        ...groupedColumnVisibility,
+    });
 }

package/lib/components/Table/components/TableHead/components/HeadSelectionCell/headSelectionCell.d.ts

@@ -1,5 +1,2 @@
-import { RowData, Table } from "@tanstack/react-table";
-export interface HeadSelectionCellProps<T extends RowData> {
-    tableInstance: Table<T>;
-}
-export declare const HeadSelectionCell: <T extends RowData>({ tableInstance, }: HeadSelectionCellProps<T>) => JSX.Element;
+import { HeaderContext, RowData } from "@tanstack/react-table";
+export declare const HeadSelectionCell: <T extends RowData, TValue = unknown>({ table, }: HeaderContext<T, TValue>) => JSX.Element;

package/lib/components/Table/components/TableHead/components/HeadSelectionCell/headSelectionCell.js

@@ -3,7 +3,7 @@ import React from "react";
 import { CheckedIcon } from "../../../../../common/CustomIcon/components/CheckedIcon/checkedIcon";
 import { IndeterminateIcon } from "../../../../../common/CustomIcon/components/IndeterminateIcon/indeterminateIcon";
 import { UncheckedIcon } from "../../../../../common/CustomIcon/components/UncheckedIcon/uncheckedIcon";
-export const HeadSelectionCell = ({ tableInstance, }) => {
-    const { getIsAllPageRowsSelected, getIsSomePageRowsSelected, getToggleAllRowsSelectedHandler, } = tableInstance;
+export const HeadSelectionCell = ({ table, }) => {
+    const { getIsAllPageRowsSelected, getIsSomePageRowsSelected, getToggleAllRowsSelectedHandler, } = table;
     return (React.createElement(Checkbox, { checked: getIsAllPageRowsSelected(), checkedIcon: React.createElement(CheckedIcon, null), icon: React.createElement(UncheckedIcon, null), indeterminate: getIsSomePageRowsSelected(), indeterminateIcon: React.createElement(IndeterminateIcon, null), onChange: getToggleAllRowsSelectedHandler() }));
 };

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

@@ -1,26 +1,14 @@
-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";
+import { MENU_PROPS } from "./constants";
+import { getButtonLabel } from "./utils";
 export const ColumnGrouping = ({ tableInstance, }) => {
-    const { getState, options: { enableGrouping }, } = tableInstance;
-    const { grouping } = getState();
-    const groupingByColumnId = getColumnGrouping(tableInstance);
+    const { getAllColumns, options: { enableGrouping }, } = 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")),
+    return (React.createElement(DropdownMenu, { ...MENU_PROPS, button: (props) => (React.createElement(DropdownButton, { ...props }, getButtonLabel(getAllColumns()))) }, ({ closeMenu }) => [
+        React.createElement(MenuItems, { key: "column-grouping", closeMenu: closeMenu, tableInstance: tableInstance }),
     ]));
 };

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

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

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

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

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

@@ -1,3 +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[];
+export declare const MenuItems: <T extends RowData>({ closeMenu, tableInstance, }: MenuItemsProps<T>) => JSX.Element;

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

@@ -1,12 +1,24 @@
 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))));
+import React, { Fragment } from "react";
+import { handleClearGroupingState, handleToggleGrouping, } from "../../../../../TableFeatures/ColumnGrouping/utils";
+import { LIST_ITEM_TEXT_PROPS, MENU_ITEM_PROPS } from "./constants";
+import { StyledMenuItem } from "./menuItems.styles";
+import { getCanGroupColumns, getVisibleColumnCount, isToggleGroupingDisabled, } from "./utils";
+export const MenuItems = ({ closeMenu, tableInstance, }) => {
+    const { getAllColumns } = tableInstance;
+    const columns = getCanGroupColumns(getAllColumns());
+    const visibleCount = getVisibleColumnCount(getAllColumns());
+    return (React.createElement(Fragment, null,
+        columns.map((column) => {
+            return (React.createElement(MenuItem, { ...MENU_ITEM_PROPS, key: column.id, disabled: isToggleGroupingDisabled(column, visibleCount), onClick: () => {
+                    handleToggleGrouping(tableInstance, column);
+                    closeMenu();
+                }, selected: column.getIsGrouped() },
+                React.createElement(ListItemText, { disableTypography: true }, column.columnDef.header)));
+        }),
+        React.createElement(StyledMenuItem, { ...MENU_ITEM_PROPS, onClick: () => {
+                handleClearGroupingState(tableInstance);
+                closeMenu();
+            } },
+            React.createElement(ListItemText, { ...LIST_ITEM_TEXT_PROPS }, "Clear Grouping"))));
 };

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

@@ -1,7 +1,6 @@
-import { Column, RowData, Table } from "@tanstack/react-table";
+import { 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/utils.d.ts

@@ -0,0 +1,27 @@
+import { Column, RowData } from "@tanstack/react-table";
+/**
+ * Returns columns that are enabled to be grouped.
+ * @param columns - Columns.
+ * @returns columns that are enabled to be grouped.
+ */
+export declare function getCanGroupColumns<T extends RowData>(columns: Column<T>[]): (Column<T> & {
+    columnDef: {
+        header: string;
+    };
+})[];
+/**
+ * Returns the number of visible columns, excluding system columns "rowPosition" and "rowSelection".
+ * @param columns - Columns.
+ * @returns number of visible columns.
+ */
+export declare function getVisibleColumnCount<T extends RowData>(columns: Column<T>[]): number;
+/**
+ * Returns whether the column grouping toggle is disabled.
+ * - If the column is not enabled to be grouped, the toggle is disabled.
+ * - If the column is not visible, the toggle is disabled.
+ * - If the count of visible columns is 1, the toggle is disabled.
+ * @param column - Column.
+ * @param visibleCount - Count of visible, un-grouped columns.
+ * @returns true if the column visibility toggle is disabled.
+ */
+export declare function isToggleGroupingDisabled<T extends RowData>(column: Column<T>, visibleCount: number): boolean;

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

@@ -0,0 +1,45 @@
+import { COLUMN_IDENTIFIER } from "../../../../../../common/columnIdentifier";
+import { isStringHeaderColumn } from "../../../../../../common/typeGuards";
+/**
+ * Returns columns that are enabled to be grouped.
+ * @param columns - Columns.
+ * @returns columns that are enabled to be grouped.
+ */
+export function getCanGroupColumns(columns) {
+    return columns
+        .filter(isStringHeaderColumn)
+        .filter(({ getCanGroup }) => getCanGroup());
+}
+/**
+ * Returns the number of visible columns, excluding system columns "rowPosition" and "rowSelection".
+ * @param columns - Columns.
+ * @returns number of visible columns.
+ */
+export function getVisibleColumnCount(columns) {
+    return columns
+        .filter((column) => !isSystemColumn(column))
+        .filter(({ getIsVisible }) => getIsVisible()).length;
+}
+/**
+ * Returns true if the column is a system column "rowPosition" or "rowSelection".
+ * @param column - Column.
+ * @returns true if the column is a system column.
+ */
+function isSystemColumn(column) {
+    return (column.id === COLUMN_IDENTIFIER.ROW_POSITION ||
+        column.id === COLUMN_IDENTIFIER.ROW_SELECTION);
+}
+/**
+ * Returns whether the column grouping toggle is disabled.
+ * - If the column is not enabled to be grouped, the toggle is disabled.
+ * - If the column is not visible, the toggle is disabled.
+ * - If the count of visible columns is 1, the toggle is disabled.
+ * @param column - Column.
+ * @param visibleCount - Count of visible, un-grouped columns.
+ * @returns true if the column visibility toggle is disabled.
+ */
+export function isToggleGroupingDisabled(column, visibleCount) {
+    if (!column.getCanGroup() || !column.getIsVisible())
+        return true;
+    return visibleCount === 1; // We should not be able to group the last visible column; at least one un-grouped column should be visible.
+}

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

@@ -1,4 +1,2 @@
-import { ListItemTextProps, MenuItemProps, MenuProps } from "@mui/material";
-export declare const LIST_ITEM_TEXT_PROPS: Partial<ListItemTextProps>;
+import { MenuProps } from "@mui/material";
 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

@@ -1,13 +1,3 @@
-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",
-};