InteractiveTable: Add expand all to column (#84966)

* feat: add expand all to InteractiveTable * chore: pr feedback; type tightening and better testing practice * chore: pr feedback; type cleanup
grafana · Mar 22, 2024 · 16737c5 · 16737c5
1 parent 369cb5b
commit 16737c5
Show file tree

Hide file tree

Showing 9 changed files with 307 additions and 213 deletions.
diff --git a/packages/grafana-data/src/types/icon.ts b/packages/grafana-data/src/types/icon.ts
@@ -217,6 +217,8 @@ export const availableIconsIndex = {
   sync: true,
   'sync-slash': true,
   table: true,
+  'table-collapse-all': true,
+  'table-expand-all': true,
   'tag-alt': true,
   'telegram-alt': true,
   'text-fields': true,

diff --git a/...ponents/InteractiveTable/ExpanderCell.tsx → ...nents/InteractiveTable/Expander/index.tsx b/...ponents/InteractiveTable/ExpanderCell.tsx → ...nents/InteractiveTable/Expander/index.tsx
@@ -1,8 +1,8 @@
 import { css } from '@emotion/css';
 import React from 'react';
-import { CellProps } from 'react-table';
+import { CellProps, HeaderProps } from 'react-table';
 
-import { IconButton } from '../IconButton/IconButton';
+import { IconButton } from '../../IconButton/IconButton';
 
 const expanderContainerStyles = css({
   display: 'flex',
@@ -27,3 +27,18 @@ export function ExpanderCell<K extends object>({ row, __rowID }: CellProps<K, vo
     </div>
   );
 }
+
+export function ExpanderHeader<K extends object>({ isAllRowsExpanded, toggleAllRowsExpanded }: HeaderProps<K>) {
+  return (
+    <div className={expanderContainerStyles}>
+      <IconButton
+        aria-label={!isAllRowsExpanded ? 'Expand all rows' : 'Collapse all rows'}
+        name={!isAllRowsExpanded ? 'table-expand-all' : 'table-collapse-all'}
+        onClick={() => toggleAllRowsExpanded()}
+        size={'lg'}
+        tooltip={!isAllRowsExpanded ? 'Expand all rows' : 'Collapse all rows'}
+        variant={'secondary'}
+      />
+    </div>
+  );
+}
diff --git a/packages/grafana-ui/src/components/InteractiveTable/InteractiveTable.mdx b/packages/grafana-ui/src/components/InteractiveTable/InteractiveTable.mdx
@@ -111,6 +111,7 @@ export const MyComponent = () => {
       data={tableData}
       getRowId={(r) => r.datasource}
       renderExpandedRow={ExpandedCell}
+      showExpandAll
     />
   );
 };