@arbor-education/design-system.components 0.11.0 → 0.12.0

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

@@ -2,14 +2,12 @@ import type { Meta, StoryObj } from '@storybook/react-vite';
 import { type Column, type ColDef, type ColGroupDef } from 'ag-grid-enterprise';
 import { Table } from './Table';
 import { Button } from 'Components/button/Button';
-import { Icon } from 'Components/icon/Icon';
-import { BulkActionsDropdown } from './BulkActionsDropdown';
 
 import { useState, type ComponentProps } from 'react';
 import { RowCountInfo } from './pagination/RowCountInfo';
 import { PaginationPanel } from './pagination/PaginationPanel';
-import { HideColumnsDropdown } from './HideColumnsDropdown';
-import { TableSettingsDropdown } from './TableSettingsDropdown';
+import { HideColumnsDropdown } from './tableControls/HideColumnsDropdown';
+import { TableControls } from './tableControls/TableControls';
 import { ModalManager } from 'Components/modal/modalManager/ModalManager';
 import { Modal } from 'Components/modal/Modal';
 import { ModalUtils } from 'Utils/ModalUtils';
@@ -180,22 +178,14 @@ const footerContent = [
   </Button>,
 ];
 
-const headerContent = [
-  <div key={0} style={{ display: 'flex', gap: '0.5rem' }}>
-    <Button key={0} variant="secondary" size="S">
-      Button 1
-    </Button>
-    <Button key={1} variant="secondary" size="S">
-      Button 2
-    </Button>
-  </div>,
-  <div key={1} style={{ display: 'flex', gap: '1rem' }}>
-    <Icon name="download" />
-    <TableSettingsDropdown />
-    <Icon name="circle-help" />
-    <Icon name="expand" />
-  </div>,
-];
+const headerContent = (
+  <TableControls
+    onDownload={() => console.log('download')}
+    showSettings
+    onHelp={() => console.log('help')}
+    onExpandToggle={expanded => console.log('expand', expanded)}
+  />
+);
 
 export const Default: Story = {
   args: {
@@ -280,26 +270,107 @@ export const WithBulkActions: Story = {
     columnDefs: sampleColumnDefs,
     defaultColDef,
     domLayout: 'autoHeight',
-    headerContent: [
-      <BulkActionsDropdown
-        key={0}
-        actions={[
+    headerContent: (
+      <TableControls
+        bulkActions={[
           {
             displayName: 'foo',
-            callback: (gridApi) => {
-              console.log('clicked on the foo action', gridApi);
-            },
+            callback: (gridApi) => { console.log('clicked on the foo action', gridApi); },
           },
           {
             displayName: 'bar',
-            callback: (gridApi) => {
-              console.log('clicked on the bar action', gridApi);
-            },
+            callback: (gridApi) => { console.log('clicked on the bar action', gridApi); },
             disabled: true,
           },
         ]}
-      />,
-    ],
+      />
+    ),
+  },
+};
+
+export const WithTableControls: Story = {
+  parameters: {
+    docs: {
+      description: {
+        story:
+          'TableControls is a pre-composed toolbar that wires up the standard set of table controls. Every slot is opt-in — only pass the props for the controls you need.',
+      },
+    },
+  },
+  args: {
+    rowData: sampleData,
+    columnDefs: sampleColumnDefs,
+    defaultColDef,
+    domLayout: 'autoHeight',
+    headerContent: (
+      <TableControls
+        bulkActions={[
+          { displayName: 'Export selected', callback: api => console.log('export', api) },
+          { displayName: 'Delete selected', callback: api => console.log('delete', api), disabled: true },
+        ]}
+        onUndo={() => console.log('undo')}
+        onRedo={() => console.log('redo')}
+        showHideColumns
+        onDownload={() => console.log('download')}
+        showSettings
+        onHelp={() => console.log('help')}
+        onExpandToggle={expanded => console.log('expand', expanded)}
+      />
+    ),
+  },
+};
+
+export const WithTableControlsStartGroupOnly: Story = {
+  parameters: {
+    docs: {
+      description: {
+        story:
+          'TableControls with only the start group rendered — bulk actions, undo, redo, and hide columns. No end group props are passed so that side is omitted entirely.',
+      },
+    },
+  },
+  args: {
+    rowData: sampleData,
+    columnDefs: sampleColumnDefs,
+    defaultColDef,
+    domLayout: 'autoHeight',
+    headerContent: (
+      <TableControls
+        bulkActions={[
+          { displayName: 'Export selected', callback: api => console.log('export', api) },
+          { displayName: 'Delete selected', callback: api => console.log('delete', api), disabled: true },
+        ]}
+        onUndo={() => console.log('undo')}
+        onRedo={() => console.log('redo')}
+        showHideColumns
+      />
+    ),
+  },
+};
+
+export const WithTableControlsEndGroupOnly: Story = {
+  parameters: {
+    docs: {
+      description: {
+        story:
+          'TableControls with only the end group rendered — search, download, settings, help, and expand. No start group props are passed so that side is omitted entirely.',
+      },
+    },
+  },
+  args: {
+    rowData: sampleData,
+    columnDefs: sampleColumnDefs,
+    defaultColDef,
+    domLayout: 'autoHeight',
+    headerContent: (
+      <TableControls
+        hasSearch
+        onDownload={() => console.log('download')}
+        showSettings
+        onHelp={() => console.log('help')}
+        onExpandToggle={expanded => console.log('expand', expanded)}
+      />
+    ),
   },
 };
 

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

@@ -1,10 +1,10 @@
 import { describe, expect, expectTypeOf, test, vi } from 'vitest';
 import { render, screen, waitFor } from '@testing-library/react';
-import { Table, TABLE_SPACING } from './Table';
+import { Table } from './Table';
 import '@testing-library/jest-dom/vitest';
-import { BulkActionsDropdown } from 'Components/table/BulkActionsDropdown';
-import { HideColumnsDropdown } from 'Components/table/HideColumnsDropdown';
-import { TableSettingsDropdown } from './TableSettingsDropdown';
+import { BulkActionsDropdown } from 'Components/table/tableControls/BulkActionsDropdown';
+import { HideColumnsDropdown } from 'Components/table/tableControls/HideColumnsDropdown';
+import { TableSettingsDropdown } from './tableControls/TableSettingsDropdown';
 import userEvent from '@testing-library/user-event';
 import type { GridApi } from 'ag-grid-enterprise';
 import * as focusFirstFocusableElementModule from 'Utils/focusFirstFocusableElement';
@@ -817,7 +817,7 @@ describe('Table', () => {
         expect((largeRadio as HTMLInputElement).checked).toBe(true);
       });
       expect(onTableSettingsChanged).toHaveBeenCalledExactlyOnceWith(expect.objectContaining({
-        tableSpacing: TABLE_SPACING.L,
+        tableSpacing: Table.Spacing.L,
       }));
 
       const columnBordersCheckbox = screen.getByLabelText('Column borders');
@@ -896,7 +896,7 @@ describe('Table', () => {
       await userEvent.click(largeRadio);
 
       await waitFor(() => {
-        expect(onTableSpacingChanged).toHaveBeenCalledExactlyOnceWith(TABLE_SPACING.L);
+        expect(onTableSpacingChanged).toHaveBeenCalledExactlyOnceWith(Table.Spacing.L);
       });
 
       const xsmallRadio = screen.getByLabelText('X-Small');
@@ -904,7 +904,7 @@ describe('Table', () => {
 
       await waitFor(() => {
         expect(onTableSpacingChanged).toHaveBeenCalledTimes(2);
-        expect(onTableSpacingChanged).toHaveBeenNthCalledWith(2, TABLE_SPACING.XS);
+        expect(onTableSpacingChanged).toHaveBeenNthCalledWith(2, Table.Spacing.XS);
       });
     });
 
@@ -924,14 +924,14 @@ describe('Table', () => {
       await userEvent.click(largeRadio);
 
       await waitFor(() => {
-        expect(onTableSpacingChanged).toHaveBeenCalledWith(TABLE_SPACING.L);
+        expect(onTableSpacingChanged).toHaveBeenCalledWith(Table.Spacing.L);
       });
 
       const resetButton = screen.getByRole('button', { name: /Reset Table Settings/i });
       await userEvent.click(resetButton);
 
       await waitFor(() => {
-        expect(onTableSpacingChanged).toHaveBeenCalledWith(TABLE_SPACING.M);
+        expect(onTableSpacingChanged).toHaveBeenCalledWith(Table.Spacing.M);
       });
     });
 

package/src/components/table/Table.tsx

@@ -2,7 +2,7 @@ import { AllEnterpriseModule, ModuleRegistry, type GridApi } from 'ag-grid-enter
 import { AgGridReact, type AgGridReactProps } from 'ag-grid-react';
 import { defaultTheme } from './theme/defaultTheme';
 import classNames from 'classnames';
-import { createContext, useRef, useState, type ReactNode } from 'react';
+import { useRef, useState, type ReactNode } from 'react';
 import { TableFooter } from './TableFooter';
 import { TableHeader } from './TableHeader';
 import { GridApiContext } from './GridApiContext';
@@ -10,8 +10,8 @@ import { PaginationPanel } from './pagination/PaginationPanel';
 import { PageSizeSelector } from './pagination/PageSizeSelector';
 import { PaginationControls } from './pagination/PaginationControls';
 import { RowCountInfo } from './pagination/RowCountInfo';
-import { BulkActionsDropdown } from './BulkActionsDropdown';
-import { HideColumnsDropdown } from './HideColumnsDropdown';
+import { BulkActionsDropdown } from './tableControls/BulkActionsDropdown';
+import { HideColumnsDropdown } from './tableControls/HideColumnsDropdown';
 import { useTableSettings, type UseTableSettingsParams } from './useTableSettings';
 import { setAgGridLicenseKey } from 'Utils/setAgGridLicenseKey';
 import { toggleRowSelectionInCurrentRange } from './toggleRowSelectionInCurrentRange';
@@ -23,9 +23,13 @@ import { tidyTheme } from './theme/tidyTheme';
 import { focusFirstFocusableElement } from 'Utils/focusFirstFocusableElement';
 import { BooleanFilter } from './columnFilters/BooleanFilter/BooleanFilter';
 import { TimeFilter } from './columnFilters/TimeFilter/TimeFilter';
-import { TableSettingsDropdown } from './TableSettingsDropdown';
-import { CheckboxCellRenderer } from './cellRenderers/CheckboxCellRenderer';
+import { TableSettingsDropdown } from './tableControls/TableSettingsDropdown';
+import { TableControls, type TableControlsProps, type BulkAction as BulkActionType } from './tableControls/TableControls';
+import type { HideColumnsDropdownProps } from './tableControls/HideColumnsDropdown';
+import { TABLE_SPACING } from './tableConsts';
+import { TableSettingsContext } from './TableSettingsContext';
 import { BooleanCellRenderer } from './cellRenderers/BooleanCellRenderer';
+import { CheckboxCellRenderer } from './cellRenderers/CheckboxCellRenderer';
 
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
 type TableProps<TData = any> = {
@@ -45,24 +49,7 @@ setAgGridLicenseKey();
 
 ModuleRegistry.registerModules([AllEnterpriseModule]);
 
-export enum TABLE_SPACING {
-  XS = 'XS',
-  S = 'S',
-  M = 'M',
-  L = 'L',
-}
-
-export const TableSettingsContext = createContext<ReturnType<typeof useTableSettings>>({
-  settings: {
-    hasColumnBorders: false,
-    tableSpacing: TABLE_SPACING.S,
-    areCellColorsEnabled: true,
-  },
-  setTableSpacing: () => {},
-  setHasColumnBorders: () => {},
-  resetSettings: () => {},
-  setAreCellColorsEnabled: () => {},
-});
+export { TableSettingsContext } from './TableSettingsContext';
 
 export const Table = (props: TableProps) => {
   const {
@@ -223,3 +210,15 @@ Table.HideColumnsDropdown = HideColumnsDropdown;
 Table.ButtonCellRenderer = ButtonCellRenderer;
 Table.DefaultValueFormatter = defaultValueFormatter;
 Table.TableSettingsDropdown = TableSettingsDropdown;
+Table.TableControls = TableControls;
+
+Table.Spacing = TABLE_SPACING;
+
+export namespace Table {
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  export type Props<TData = any> = TableProps<TData>;
+  export type ControlsProps = TableControlsProps;
+  export type BulkAction = BulkActionType;
+  export type HideColumnsProps = HideColumnsDropdownProps;
+  export type Spacing = TABLE_SPACING;
+}

package/src/components/table/TableSettingsContext.ts

@@ -0,0 +1,15 @@
+import { createContext } from 'react';
+import { TABLE_SPACING } from './tableConsts';
+import { type useTableSettings } from './useTableSettings';
+
+export const TableSettingsContext = createContext<ReturnType<typeof useTableSettings>>({
+  settings: {
+    hasColumnBorders: false,
+    tableSpacing: TABLE_SPACING.S,
+    areCellColorsEnabled: true,
+  },
+  setTableSpacing: () => {},
+  setHasColumnBorders: () => {},
+  resetSettings: () => {},
+  setAreCellColorsEnabled: () => {},
+});

package/src/components/table/table.scss

@@ -11,6 +11,28 @@
     }
   }
   
+  &__controls {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    justify-content: space-between;
+    padding: var(--tables-controls-spacing-horizontal) 0;
+    gap: var(--tables-controls-spacing-gap);
+    flex: 1;
+  }
+
+  &__controls-start,
+  &__controls-end {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    gap: var(--tables-controls-spacing-gap);
+  }
+
+  &__controls-end {
+    margin-inline-start: auto;
+  }
+
   &__footer,
   &__header {
     display: flex;

package/src/components/table/tableConsts.ts

@@ -0,0 +1,6 @@
+export enum TABLE_SPACING {
+  XS = 'XS',
+  S = 'S',
+  M = 'M',
+  L = 'L',
+}

package/src/components/table/{BulkActionsDropdown.tsx → tableControls/BulkActionsDropdown.tsx}

@@ -1,10 +1,10 @@
 import { useContext } from 'react';
-import { GridApiContext } from './GridApiContext';
+import { GridApiContext } from '../GridApiContext';
 import type { GridApi } from 'ag-grid-community';
 import { Button } from 'Components/button/Button';
 import { Dropdown } from 'Components/dropdown/Dropdown';
 
-type BulkAction = {
+export type BulkAction = {
   displayName: string;
   callback: (api: GridApi | null) => void;
   disabled?: boolean;

package/src/components/table/{HideColumnsDropdown.tsx → tableControls/HideColumnsDropdown.tsx}

@@ -1,9 +1,9 @@
 import { SelectDropdown } from 'Components/formField/inputs/selectDropdown/SelectDropdown';
 import { useContext, useState } from 'react';
-import { GridApiContext } from './GridApiContext';
+import { GridApiContext } from '../GridApiContext';
 import type { Column } from 'ag-grid-community';
 
-type HideColumnsDropdownProps = {
+export type HideColumnsDropdownProps = {
   columns?: Column[];
   onSelectionChanged?: (cols: string[]) => void;
   overrideColumnHiding?: boolean;

package/src/components/table/tableControls/TableControls.test.tsx

@@ -0,0 +1,150 @@
+import { describe, expect, test, vi } from 'vitest';
+import { render, screen, fireEvent } from '@testing-library/react';
+import '@testing-library/jest-dom/vitest';
+import { TableControls } from './TableControls';
+
+describe('TableControls', () => {
+  test('renders nothing when no props are passed', () => {
+    const { container } = render(<TableControls />);
+    expect(container.firstChild).toBeNull();
+  });
+
+  test('applies ds-table__controls class', () => {
+    const { container } = render(<TableControls onUndo={vi.fn()} />);
+    expect(container.querySelector('.ds-table__controls')).toBeInTheDocument();
+  });
+
+  test('applies additional className', () => {
+    const { container } = render(<TableControls onUndo={vi.fn()} className="custom-class" />);
+    expect(container.querySelector('.ds-table__controls')).toHaveClass('custom-class');
+  });
+
+  describe('start group', () => {
+    test('renders undo button when onUndo is provided', () => {
+      render(<TableControls onUndo={vi.fn()} />);
+      expect(screen.getByRole('button', { name: /undo/i })).toBeInTheDocument();
+    });
+
+    test('calls onUndo when undo button is clicked', () => {
+      const onUndo = vi.fn();
+      render(<TableControls onUndo={onUndo} />);
+      fireEvent.click(screen.getByRole('button', { name: /undo/i }));
+      expect(onUndo).toHaveBeenCalledTimes(1);
+    });
+
+    test('renders redo button when onRedo is provided', () => {
+      render(<TableControls onRedo={vi.fn()} />);
+      expect(screen.getByRole('button', { name: /redo/i })).toBeInTheDocument();
+    });
+
+    test('calls onRedo when redo button is clicked', () => {
+      const onRedo = vi.fn();
+      render(<TableControls onRedo={onRedo} />);
+      fireEvent.click(screen.getByRole('button', { name: /redo/i }));
+      expect(onRedo).toHaveBeenCalledTimes(1);
+    });
+
+    test('renders bulk actions dropdown when bulkActions is provided', () => {
+      render(
+        <TableControls
+          bulkActions={[{ displayName: 'Delete', callback: vi.fn() }]}
+        />,
+      );
+      expect(screen.getByRole('button', { name: /actions/i })).toBeInTheDocument();
+    });
+
+    test('does not render undo button when onUndo is not provided', () => {
+      render(<TableControls onRedo={vi.fn()} />);
+      expect(screen.queryByRole('button', { name: /undo/i })).not.toBeInTheDocument();
+    });
+
+    test('renders start group when showHideColumns is true', () => {
+      const { container } = render(<TableControls showHideColumns />);
+      expect(container.querySelector('.ds-table__controls-start')).toBeInTheDocument();
+    });
+
+    test('does not render start group when only hideColumnsProps is provided without showHideColumns', () => {
+      const { container } = render(<TableControls hideColumnsProps={{ overrideColumnHiding: true }} />);
+      expect(container.firstChild).toBeNull();
+    });
+  });
+
+  describe('end group', () => {
+    test('renders download button when onDownload is provided', () => {
+      render(<TableControls onDownload={vi.fn()} />);
+      expect(screen.getByRole('button', { name: /download/i })).toBeInTheDocument();
+    });
+
+    test('calls onDownload when download button is clicked', () => {
+      const onDownload = vi.fn();
+      render(<TableControls onDownload={onDownload} />);
+      fireEvent.click(screen.getByRole('button', { name: /download/i }));
+      expect(onDownload).toHaveBeenCalledTimes(1);
+    });
+
+    test('renders help button when onHelp is provided', () => {
+      render(<TableControls onHelp={vi.fn()} />);
+      expect(screen.getByRole('button', { name: /help/i })).toBeInTheDocument();
+    });
+
+    test('calls onHelp when help button is clicked', () => {
+      const onHelp = vi.fn();
+      render(<TableControls onHelp={onHelp} />);
+      fireEvent.click(screen.getByRole('button', { name: /help/i }));
+      expect(onHelp).toHaveBeenCalledTimes(1);
+    });
+
+    test('renders expand button when onExpandToggle is provided and not expanded', () => {
+      render(<TableControls onExpandToggle={vi.fn()} isExpanded={false} />);
+      expect(screen.getByRole('button', { name: /expand table/i })).toBeInTheDocument();
+    });
+
+    test('renders shrink button when onExpandToggle is provided and expanded', () => {
+      render(<TableControls onExpandToggle={vi.fn()} isExpanded={true} />);
+      expect(screen.getByRole('button', { name: /shrink table/i })).toBeInTheDocument();
+    });
+
+    test('calls onExpandToggle with true when expand button is clicked', () => {
+      const onExpandToggle = vi.fn();
+      render(<TableControls onExpandToggle={onExpandToggle} isExpanded={false} />);
+      fireEvent.click(screen.getByRole('button', { name: /expand table/i }));
+      expect(onExpandToggle).toHaveBeenCalledWith(true);
+    });
+
+    test('calls onExpandToggle with false when shrink button is clicked', () => {
+      const onExpandToggle = vi.fn();
+      render(<TableControls onExpandToggle={onExpandToggle} isExpanded={true} />);
+      fireEvent.click(screen.getByRole('button', { name: /shrink table/i }));
+      expect(onExpandToggle).toHaveBeenCalledWith(false);
+    });
+
+    test('renders tooltips button when onTooltipsToggle is provided', () => {
+      render(<TableControls onTooltipsToggle={vi.fn()} tooltipsEnabled={false} />);
+      expect(screen.getByRole('button', { name: /enable tooltips/i })).toBeInTheDocument();
+    });
+
+    test('renders disable tooltips button when tooltips are enabled', () => {
+      render(<TableControls onTooltipsToggle={vi.fn()} tooltipsEnabled={true} />);
+      expect(screen.getByRole('button', { name: /disable tooltips/i })).toBeInTheDocument();
+    });
+
+    test('calls onTooltipsToggle with true when tooltips are disabled', () => {
+      const onTooltipsToggle = vi.fn();
+      render(<TableControls onTooltipsToggle={onTooltipsToggle} tooltipsEnabled={false} />);
+      fireEvent.click(screen.getByRole('button', { name: /enable tooltips/i }));
+      expect(onTooltipsToggle).toHaveBeenCalledWith(true);
+    });
+
+    test('calls onTooltipsToggle with false when tooltips are enabled', () => {
+      const onTooltipsToggle = vi.fn();
+      render(<TableControls onTooltipsToggle={onTooltipsToggle} tooltipsEnabled={true} />);
+      fireEvent.click(screen.getByRole('button', { name: /disable tooltips/i }));
+      expect(onTooltipsToggle).toHaveBeenCalledWith(false);
+    });
+
+    test('renders search bar when hasSearch is true', () => {
+      render(<TableControls hasSearch searchValue="test" />);
+      expect(screen.getByRole('textbox', { name: /search input/i })).toBeInTheDocument();
+    });
+  });
+});

package/src/components/table/tableControls/TableControls.tsx

@@ -0,0 +1,143 @@
+import classNames from 'classnames';
+import { Button } from 'Components/button/Button';
+import { SearchBar } from 'Components/searchBar/SearchBar';
+import { BulkActionsDropdown, type BulkAction } from './BulkActionsDropdown';
+import {
+  HideColumnsDropdown,
+  type HideColumnsDropdownProps,
+} from './HideColumnsDropdown';
+import { TableSettingsDropdown } from './TableSettingsDropdown';
+
+export type { BulkAction };
+
+export type TableControlsProps = {
+  className?: string;
+  bulkActions?: BulkAction[];
+  onUndo?: () => void;
+  onRedo?: () => void;
+  showHideColumns?: boolean;
+  hideColumnsProps?: HideColumnsDropdownProps;
+  hasSearch?: boolean;
+  searchValue?: string;
+  setSearchValue?: (value: string) => void;
+  onDownload?: () => void;
+  tooltipsEnabled?: boolean;
+  onTooltipsToggle?: (enabled: boolean) => void;
+  showSettings?: boolean;
+  onHelp?: () => void;
+  isExpanded?: boolean;
+  onExpandToggle?: (expanded: boolean) => void;
+};
+
+export const TableControls = (props: TableControlsProps) => {
+  const {
+    className,
+    bulkActions,
+    onUndo,
+    onRedo,
+    showHideColumns,
+    hideColumnsProps,
+    hasSearch,
+    searchValue,
+    setSearchValue,
+    onDownload,
+    tooltipsEnabled,
+    onTooltipsToggle,
+    showSettings,
+    onHelp,
+    isExpanded,
+    onExpandToggle,
+  } = props;
+
+  const hasStartGroup = bulkActions || onUndo || onRedo || showHideColumns;
+  const hasEndGroup
+    = hasSearch
+      || onDownload
+      || onTooltipsToggle !== undefined
+      || showSettings
+      || onHelp
+      || onExpandToggle !== undefined;
+
+  if (!hasStartGroup && !hasEndGroup) return null;
+
+  return (
+    <div className={classNames('ds-table__controls', className)}>
+      {hasStartGroup && (
+        <div className="ds-table__controls-start">
+          {bulkActions && <BulkActionsDropdown actions={bulkActions} />}
+          {onUndo && (
+            <Button
+              variant="secondary"
+              borderless
+              iconRightName="undo"
+              iconRightScreenReaderText="Undo"
+              onClick={onUndo}
+            />
+          )}
+          {onRedo && (
+            <Button
+              variant="secondary"
+              borderless
+              iconRightName="redo"
+              iconRightScreenReaderText="Redo"
+              onClick={onRedo}
+            />
+          )}
+          {showHideColumns && <HideColumnsDropdown {...hideColumnsProps} />}
+        </div>
+      )}
+      {hasEndGroup && (
+        <div className="ds-table__controls-end">
+          {hasSearch && (
+            <SearchBar
+              searchValue={searchValue}
+              setSearchValue={setSearchValue}
+            />
+          )}
+          {onDownload && (
+            <Button
+              variant="secondary"
+              borderless
+              iconRightName="download"
+              iconRightScreenReaderText="Download"
+              onClick={onDownload}
+            />
+          )}
+          {onTooltipsToggle && (
+            <Button
+              variant="secondary"
+              borderless
+              iconRightName="message-square-more"
+              iconRightScreenReaderText={
+                tooltipsEnabled ? 'Disable tooltips' : 'Enable tooltips'
+              }
+              aria-pressed={tooltipsEnabled}
+              onClick={() => onTooltipsToggle(!tooltipsEnabled)}
+            />
+          )}
+          {showSettings && <TableSettingsDropdown />}
+          {onHelp && (
+            <Button
+              variant="secondary"
+              borderless
+              iconRightName="circle-help"
+              iconRightScreenReaderText="Help"
+              onClick={onHelp}
+            />
+          )}
+          {onExpandToggle && (
+            <Button
+              variant="secondary"
+              borderless
+              iconRightName={isExpanded ? 'shrink' : 'expand'}
+              iconRightScreenReaderText={
+                isExpanded ? 'Shrink table' : 'Expand table'
+              }
+              onClick={() => onExpandToggle(!isExpanded)}
+            />
+          )}
+        </div>
+      )}
+    </div>
+  );
+};