feat: QUV-2455 New table rowGroupingRenderer preset

packages/table/src/columnPresets/index.ts

@@ -6,4 +6,5 @@ export * from './link';
 export * from './longText';
 export * from './number';
 export * from './options';
+export * from './rowGrouping';
 export * from './text';

packages/table/src/columnPresets/rowGrouping.ts

@@ -0,0 +1,9 @@
+import type { TColDef } from '../declarations';
+import { RowGroupingRenderer } from '../renderers';
+
+export const rowGrouping: TColDef = {
+  id: 'rowGrouping',
+  cellRenderer: RowGroupingRenderer,
+  minWidth: 50,
+  headerOnFilterPosition: true,
+};

packages/table/src/facade/RowGrouping/RowGroupingContext.ts

@@ -0,0 +1,8 @@
+import * as React from 'react';
+
+export type TRowGroupingContext = {
+  onRowGroupingChange?: (
+    rowIndex: number,
+    event: React.FormEvent<Element>,
+  ) => void;
+};

packages/table/src/facade/RowGrouping/index.ts

@@ -0,0 +1 @@
+export * from './RowGroupingContext';

packages/table/src/facade/index.ts

@@ -1,3 +1,4 @@
 export * from './Action';
 export * from './Bulk';
 export * from './Options';
+export * from './RowGrouping';

packages/table/src/hooks/index.ts

@@ -6,3 +6,4 @@ export * from './useTableVirtualizationColumn';
 export * from './useTableVirtualizationRow';
 export * from './useOrderStruct';
 export * from './useFilterStruct';
+export * from './useRowGrouping';

packages/table/src/hooks/useRowGrouping.ts

@@ -0,0 +1,20 @@
+import * as React from 'react';
+
+export const useRowGrouping = ({ data, initialSelection = [] }) => {
+  const [rowSelection, setRowSelection] = React.useState(initialSelection);
+
+  const toggle = React.useCallback(
+    (index: number) => {
+      setRowSelection(() =>
+        data.map((d, i) => {
+          if (index === i) {
+            d.rowGrouping = !d.rowGrouping;
+          }
+          return d;
+        }),
+      );
+    },
+    [data],
+  );
+  return { rowSelection, toggle };
+};

packages/table/src/renderers/RowGroupingRenderer/RowGroupingRenderer.stories.tsx

@@ -0,0 +1,17 @@
+import { Meta, StoryObj } from '@storybook/react';
+
+import { RowGroupingRenderer } from './RowGroupingRenderer';
+
+const meta: Meta<typeof RowGroupingRenderer> = {
+  title: 'Components/Layout/Table/Renderers/rowGroupingRenderer',
+  component: RowGroupingRenderer,
+};
+
+export default meta;
+type Story = StoryObj<typeof RowGroupingRenderer>;
+
+export const Base: Story = {
+  args: {
+    value: false,
+  },
+};

packages/table/src/renderers/RowGroupingRenderer/RowGroupingRenderer.tsx

@@ -0,0 +1,25 @@
+import * as React from 'react';
+
+import { IconButtonCollapse } from '@devoinc/genesys-ui';
+
+import type { TCellRenderer } from '../../declarations';
+import { TRowGroupingContext } from '../../facade';
+
+export const RowGroupingRenderer: React.FC<TCellRenderer> = ({
+  value,
+  rowIndex,
+  colDef,
+}) => {
+  const context = colDef?.context as TRowGroupingContext;
+
+  return (
+    <IconButtonCollapse
+      onClick={(event) => {
+        if (context?.onRowGroupingChange) {
+          context.onRowGroupingChange(rowIndex, event);
+        }
+      }}
+      state={value ? 'expanded' : 'enabled'}
+    />
+  );
+};

packages/table/src/renderers/RowGroupingRenderer/index.ts

@@ -0,0 +1 @@
+export * from './RowGroupingRenderer';

packages/table/src/renderers/index.ts

@@ -3,4 +3,5 @@ export * from './BooleanRenderer';
 export * from './BulkRenderer';
 export * from './LinkRenderer';
 export * from './OptionsRenderer';
+export * from './RowGroupingRenderer';
 export * from './TextRenderer';

packages/table/stories/RowGrouping.stories.tsx

@@ -0,0 +1,70 @@
+import * as React from 'react';
+import { Meta, StoryObj } from '@storybook/react';
+
+import { Flex } from '@devoinc/genesys-ui';
+
+import {
+  orderDataByOrderStruct,
+  RowGroupingRenderer,
+  Table,
+  TColDef,
+  TextRenderer,
+  useOrderStruct,
+  useRowGrouping,
+} from '../src';
+
+const meta: Meta<typeof Table> = {
+  title: 'Components/Layout/Table/RowGrouping',
+  component: Table,
+  parameters: {
+    layout: 'fullscreen',
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof Table>;
+
+const initialData = Array.from({ length: 10 }).map((_, index) => ({
+  rowGrouping: false,
+  text: `text ${index}`,
+}));
+
+const BulkExample = () => {
+  const { orderStruct, onSort } = useOrderStruct([
+    { id: 'text', sort: 'desc' },
+  ]);
+  const dataOrdered = [...initialData].sort(orderDataByOrderStruct(orderStruct));
+
+  const { rowSelection, toggle } = useRowGrouping({ data: dataOrdered, initialSelection: [] });
+
+  return (
+    <Flex flexDirection="column" gap="cmp-md">
+      <Flex.Item>
+        <Table
+          data={dataOrdered}
+          onSort={(colDef: TColDef) => {
+            onSort(colDef.id);
+          }}
+          colDefs={[
+            {
+              id: 'rowGrouping',
+              cellRenderer: RowGroupingRenderer,
+              width: 46,
+              context: {
+                rowSelection,
+                onRowGroupingChange: (rowIndex) => {
+                  toggle(rowIndex);
+                },
+              }
+            },
+            { id: 'text', cellRenderer: TextRenderer, headerName: 'Text', sortable: true },
+          ]}
+        />
+      </Flex.Item>
+    </Flex>
+  );
+};
+
+export const Base: Story = {
+  render: () => <BulkExample />,
+};