@databiosphere/findable-ui 18.0.0 → 19.0.0

package/src/components/Table/components/TableFeatures/RowSorting/utils.ts

@@ -0,0 +1,87 @@
+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 function buildColumnSort<T extends RowData>(
+  column: Column<T>
+): ColumnSort {
+  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<T extends RowData>(
+  mouseEvent: MouseEvent,
+  table: Table<T>,
+  column: Column<T>
+): void {
+  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/src/components/Table/components/TableHead/tableHead.tsx

@@ -1,22 +1,20 @@
+import SouthRoundedIcon from "@mui/icons-material/SouthRounded";
 import {
   TableHead as MTableHead,
   TableRow as MTableRow,
   TableCell,
   TableSortLabel,
 } from "@mui/material";
-import { flexRender, RowData, Table } from "@tanstack/react-table";
+import { flexRender, RowData } 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";
-
-export interface TableHeadProps<T extends RowData> {
-  rowDirection: ROW_DIRECTION;
-  tableInstance: Table<T>;
-}
+import { handleToggleSorting } from "../TableFeatures/RowSorting/utils";
+import { TableHeadProps } from "./types";
+import { isSortDisabled, shouldSortColumn } from "./utils";
 
 export const TableHead = <T extends RowData>({
   rowDirection,
@@ -28,34 +26,28 @@ export const TableHead = <T extends RowData>({
         tableInstance.getHeaderGroups().map((headerGroup) => (
           <MTableHead key={headerGroup.id}>
             <MTableRow>
-              {headerGroup.headers.map((header) => {
-                const {
-                  column: {
-                    columnDef: {
-                      meta: { enableSortingInteraction = true } = {},
-                    },
-                  },
-                } = header;
-                return header.column.getIsGrouped() ? null : (
+              {headerGroup.headers.map(({ column, getContext, id }) => {
+                const { columnDef, getIsGrouped, getIsSorted } = column;
+                return getIsGrouped() ? null : (
                   <TableCell
-                    key={header.id}
-                    align={getTableCellAlign(header.column)}
-                    padding={getTableCellPadding(header.id)}
+                    key={id}
+                    align={getTableCellAlign(column)}
+                    padding={getTableCellPadding(id)}
                   >
-                    {header.column.getCanSort() && enableSortingInteraction ? (
+                    {shouldSortColumn(tableInstance, column) ? (
                       <TableSortLabel
-                        {...getTableSortLabelProps(header.column)}
+                        IconComponent={SouthRoundedIcon}
+                        active={Boolean(getIsSorted())}
+                        direction={getIsSorted() || undefined}
+                        disabled={isSortDisabled(tableInstance)}
+                        onClick={(mouseEvent) =>
+                          handleToggleSorting(mouseEvent, tableInstance, column)
+                        }
                       >
-                        {flexRender(
-                          header.column.columnDef.header,
-                          header.getContext()
-                        )}
+                        {flexRender(columnDef.header, getContext())}
                       </TableSortLabel>
                     ) : (
-                      flexRender(
-                        header.column.columnDef.header,
-                        header.getContext()
-                      )
+                      flexRender(columnDef.header, getContext())
                     )}
                   </TableCell>
                 );

package/src/components/Table/components/TableHead/types.ts

@@ -0,0 +1,7 @@
+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/src/components/Table/components/TableHead/utils.ts

@@ -0,0 +1,42 @@
+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 function isSortDisabled<T extends RowData>(table: Table<T>): boolean {
+  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<T extends RowData>(
+  table: Table<T>,
+  column: Column<T>
+): boolean {
+  const { enableSortingInteraction } = table.options;
+  const canSort = column.getCanSort();
+  return Boolean(enableSortingInteraction && canSort);
+}

package/src/components/Table/components/TableRow/tableRow.styles.ts

@@ -1,18 +1,35 @@
 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";
 
 interface Props {
+  isGrouped?: boolean;
   isPreview?: boolean;
 }
 
 export const TableRow = styled(MTableRow, {
-  shouldForwardProp: (prop) => prop !== "isPreview",
+  shouldForwardProp: (prop) => prop !== "isPreview" && prop !== "isGrouped",
 })<Props>`
   && {
     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`

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

@@ -4,24 +4,29 @@ import React, { Fragment } from "react";
 import { isCollapsableRowDisabled } from "../../../../common/utils";
 import { CollapsableCell } from "../../../TableCell/components/CollapsableCell/collapsableCell";
 import { TableRow } from "../../../TableRow/tableRow.styles";
+import { useCollapsableRows } from "./hook";
 
 export interface CollapsableRowsProps<T extends RowData> {
+  rows: Row<T>[];
   tableInstance: Table<T>;
   virtualizer: Virtualizer<Window, Element>;
 }
 
 export const CollapsableRows = <T extends RowData>({
+  rows,
   tableInstance,
   virtualizer,
 }: CollapsableRowsProps<T>): JSX.Element => {
-  const { getRowModel } = tableInstance;
-  const { rows } = getRowModel();
+  const { getState } = tableInstance;
+  const { grouping } = getState();
   const virtualItems = virtualizer.getVirtualItems();
+  useCollapsableRows(tableInstance);
   return (
     <Fragment>
       {virtualItems.map((virtualRow) => {
         const row = rows[virtualRow.index] as Row<T>;
         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 (
           <TableRow
             key={row.id}
@@ -32,6 +37,7 @@ export const CollapsableRows = <T extends RowData>({
             <CollapsableCell
               isDisabled={isCollapsableRowDisabled(tableInstance)}
               row={row}
+              virtualizer={virtualizer}
             />
           </TableRow>
         );

package/src/components/Table/components/TableRows/components/CollapsableRows/hook.ts

@@ -0,0 +1,20 @@
+import { RowData, Table } from "@tanstack/react-table";
+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<T extends RowData>(table: Table<T>): void {
+  const { resetExpanded, toggleAllRowsExpanded } = table;
+
+  useEffect(() => {
+    toggleAllRowsExpanded(false);
+    return (): void => {
+      resetExpanded();
+    };
+  }, [resetExpanded, toggleAllRowsExpanded]);
+}

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

@@ -1,5 +1,5 @@
 import { TableCell } from "@mui/material";
-import { flexRender, Row, RowData, Table } from "@tanstack/react-table";
+import { flexRender, Row, RowData } from "@tanstack/react-table";
 import { Virtualizer } from "@tanstack/react-virtual";
 import React, { Fragment } from "react";
 import {
@@ -9,38 +9,41 @@ import {
 import { TableRow } from "../TableRow/tableRow.styles";
 
 export interface TableRowsProps<T extends RowData> {
-  tableInstance: Table<T>;
+  rows: Row<T>[];
   virtualizer: Virtualizer<Window, Element>;
 }
 
 export const TableRows = <T extends RowData>({
-  tableInstance,
+  rows,
   virtualizer,
 }: TableRowsProps<T>): JSX.Element => {
-  const { getRowModel } = tableInstance;
-  const { rows } = getRowModel();
   const virtualItems = virtualizer.getVirtualItems();
   return (
     <Fragment>
       {virtualItems.map((virtualRow) => {
         const row = rows[virtualRow.index] as Row<T>;
-        const { getIsPreview } = row;
+        const { getIsGrouped, getIsPreview } = row;
         return (
           <TableRow
             key={row.id}
             data-index={virtualRow.index}
+            isGrouped={getIsGrouped()}
             isPreview={getIsPreview()}
             ref={virtualizer.measureElement}
           >
-            {row.getVisibleCells().map((cell) => (
-              <TableCell
-                key={cell.id}
-                align={getTableCellAlign(cell.column)}
-                padding={getTableCellPadding(cell.column.id)}
-              >
-                {flexRender(cell.column.columnDef.cell, cell.getContext())}
-              </TableCell>
-            ))}
+            {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}
+                  align={getTableCellAlign(cell.column)}
+                  padding={getTableCellPadding(cell.column.id)}
+                >
+                  {flexRender(cell.column.columnDef.cell, cell.getContext())}
+                </TableCell>
+              );
+            })}
           </TableRow>
         );
       })}

package/src/components/Table/components/TableToolbar/components/ColumnGrouping/columnGrouping.styles.ts

@@ -0,0 +1,17 @@
+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;
+      }
+    }
+  }
+` as typeof MenuItem;

package/src/components/Table/components/TableToolbar/components/ColumnGrouping/columnGrouping.tsx

@@ -0,0 +1,54 @@
+import { ListItemText } from "@mui/material";
+import { RowData } from "@tanstack/react-table";
+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 { ColumnGroupingProps } from "./types";
+import { getButtonLabel, getColumnGrouping } from "./utils";
+
+export const ColumnGrouping = <T extends RowData>({
+  tableInstance,
+}: ColumnGroupingProps<T>): JSX.Element | null => {
+  const {
+    getState,
+    options: { enableGrouping },
+  } = tableInstance;
+  const { grouping } = getState();
+  const groupingByColumnId = getColumnGrouping(tableInstance);
+  if (!enableGrouping) return null;
+  if (groupingByColumnId.size === 0) return null;
+  return (
+    <DropdownMenu
+      {...MENU_PROPS}
+      button={(props) => (
+        <DropdownButton {...props}>
+          {getButtonLabel(groupingByColumnId, grouping)}
+        </DropdownButton>
+      )}
+    >
+      {({ closeMenu }): JSX.Element[] => [
+        <MenuItems
+          key="column-grouping"
+          closeMenu={closeMenu}
+          groupingByColumnId={groupingByColumnId}
+          tableInstance={tableInstance}
+        />,
+        <StyledMenuItem
+          {...MENU_ITEM_PROPS}
+          key="reset-grouping-state"
+          disabled={grouping.length === 0}
+          onClick={() => {
+            handleClearGroupingState(tableInstance);
+            closeMenu();
+          }}
+        >
+          <ListItemText {...LIST_ITEM_TEXT_PROPS}>Clear Grouping</ListItemText>
+        </StyledMenuItem>,
+      ]}
+    </DropdownMenu>
+  );
+};

package/src/components/Table/components/TableToolbar/components/ColumnGrouping/components/MenuItems/menuItems.tsx

@@ -0,0 +1,28 @@
+import { ListItemText, MenuItem } from "@mui/material";
+import { RowData } from "@tanstack/react-table";
+import React from "react";
+import { handleToggleGrouping } from "../../../../../TableFeatures/ColumnGrouping/utils";
+import { MENU_ITEM_PROPS } from "../../constants";
+import { MenuItemsProps } from "./types";
+
+export const MenuItems = <T extends RowData>({
+  closeMenu,
+  groupingByColumnId,
+  tableInstance,
+}: MenuItemsProps<T>): JSX.Element[] => {
+  const columnByMenuItem = [...groupingByColumnId.values()];
+  return columnByMenuItem.map(([menuItem, column]) => (
+    <MenuItem
+      {...MENU_ITEM_PROPS}
+      key={column.id}
+      disabled={!column.getCanGroup()}
+      onClick={() => {
+        handleToggleGrouping(tableInstance, column);
+        closeMenu();
+      }}
+      selected={column.getIsGrouped()}
+    >
+      <ListItemText disableTypography>{menuItem}</ListItemText>
+    </MenuItem>
+  ));
+};

package/src/components/Table/components/TableToolbar/components/ColumnGrouping/components/MenuItems/types.ts

@@ -0,0 +1,8 @@
+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/src/components/Table/components/TableToolbar/components/ColumnGrouping/constants.ts

@@ -0,0 +1,17 @@
+import { ListItemTextProps, MenuItemProps, MenuProps } from "@mui/material";
+
+export const LIST_ITEM_TEXT_PROPS: Partial<ListItemTextProps> = {
+  primaryTypographyProps: {
+    color: "primary",
+    component: "span",
+    variant: "inherit",
+  },
+};
+
+export const MENU_PROPS: Partial<MenuProps> = {
+  variant: "menu",
+};
+
+export const MENU_ITEM_PROPS: Partial<MenuItemProps> = {
+  component: "li",
+};

package/src/components/Table/components/TableToolbar/components/ColumnGrouping/types.ts

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

package/src/components/Table/components/TableToolbar/components/ColumnGrouping/utils.ts

@@ -0,0 +1,45 @@
+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 function getButtonLabel<T extends RowData>(
+  groupingByColumnId: Map<string, [string, Column<T>]>,
+  groupingState: GroupingState
+): string {
+  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<T extends RowData>(
+  table: Table<T>
+): Map<string, [string, Column<T>]> {
+  const groupingByColumnId = new Map<string, [string, Column<T>]>();
+  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/src/components/Table/components/TableToolbar/components/RowSelection/components/DropdownMenu/dropdownMenu.tsx

@@ -1,10 +1,7 @@
 import { MenuProps as MMenuProps } from "@mui/material";
 import React from "react";
-import { DropdownButton as DXDropdownButton } from "../../../../../../../common/Button/components/DropdownButton/dropdownButton";
-import {
-  DropdownMenuButtonProps,
-  DropdownMenuItemProps,
-} from "../../../../../../../common/DropdownMenu/common/entities";
+import { DropdownButton } from "../../../../../../../common/Button/components/DropdownButton/dropdownButton";
+import { DropdownMenuItemProps } from "../../../../../../../common/DropdownMenu/common/entities";
 import { DropdownMenuProps as DXDropdownMenuProps } from "../../../../../../../common/DropdownMenu/dropdownMenu";
 import { DropdownMenu as RowSelectionDropdownMenu } from "./dropdownMenu.styles";
 
@@ -14,16 +11,15 @@ const DEFAULT_MENU_PROPS: Partial<MMenuProps> = {
 };
 
 export interface DropdownMenuProps {
-  Button?: DXDropdownMenuProps["Button"];
-  buttonLabel?: string;
+  button?: DXDropdownMenuProps["button"];
   children: ({ closeMenu }: DropdownMenuItemProps) => JSX.Element[];
   className?: string;
 }
 
 export const DropdownMenu = ({
-  Button = (props: DropdownMenuButtonProps): JSX.Element =>
-    renderButton({ children: buttonLabel, ...props }),
-  buttonLabel = "Edit",
+  button = (props): JSX.Element => (
+    <DropdownButton {...props}>Edit</DropdownButton>
+  ),
   children,
   className,
   ...props /* Spread props to allow for Mui Menu specific prop overrides e.g. "anchorOrigin". */
@@ -32,19 +28,10 @@ export const DropdownMenu = ({
     <RowSelectionDropdownMenu
       {...DEFAULT_MENU_PROPS}
       className={className}
-      Button={Button}
+      button={button}
       {...props}
     >
       {({ closeMenu }): JSX.Element[] => children({ closeMenu })}
     </RowSelectionDropdownMenu>
   );
 };
-
-/**
- * Return the dropdown button.
- * @param props - Button props e.g. "onClick".
- * @returns button element.
- */
-function renderButton(props: DropdownMenuButtonProps): JSX.Element {
-  return <DXDropdownButton {...props} />;
-}

package/src/components/Table/components/TableToolbar/tableToolbar.tsx

@@ -7,6 +7,7 @@ import { getEditColumnOptions, isAnyRowSelected } from "../../common/utils";
 import { CheckboxMenu } from "../CheckboxMenu/checkboxMenu";
 import { DownloadEntityResults } from "../DownloadEntityResults/downloadEntityResults";
 import { PaginationSummary } from "../PaginationSummary/paginationSummary";
+import { ColumnGrouping } from "./components/ColumnGrouping/columnGrouping";
 import { RowPreview } from "./components/RowPreview/rowPreview";
 import { RowSelection } from "./components/RowSelection/rowSelection";
 import { Toolbar, ToolbarActions } from "./tableToolbar.styles";
@@ -25,13 +26,17 @@ export const TableToolbar = <T extends RowData>({
   const { exploreState } = useExploreState();
   const { paginationState } = exploreState;
   const { currentPage, pages, pageSize, rows } = paginationState;
-  const { getSelectedRowModel, resetColumnVisibility } = tableInstance;
+  const {
+    getSelectedRowModel,
+    options: { enableGrouping },
+    resetColumnVisibility,
+  } = tableInstance;
   const { enableDownload, rowPreviewView } = listView || {};
   const isLastPage = currentPage === pages;
   const editColumnOptions = getEditColumnOptions(tableInstance);
   const showToolbar =
     rowDirection === ROW_DIRECTION.DEFAULT &&
-    (editColumnOptions || enableDownload);
+    (editColumnOptions || enableDownload || enableGrouping);
 
   /**
    * Resets column visibility to default state.
@@ -63,6 +68,7 @@ export const TableToolbar = <T extends RowData>({
                 rows={tableInstance.getFilteredRowModel().rows}
               />
             )}
+            <ColumnGrouping tableInstance={tableInstance} />
             <CheckboxMenu
               label="Edit Columns"
               onReset={onResetColumnVisibility}