Merge pull request #350 from komarovalexander/dev

Add groupItems and columns to the GroupRow for better customization
komarovalexander · Oct 14, 2023 · 98bbbf4 · 98bbbf4
2 parents 524cbd3 + 845199e
commit 98bbbf4
Show file tree

Hide file tree

Showing 6 changed files with 250 additions and 6 deletions.
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "ka-table",
-  "version": "8.3.2",
+  "version": "8.4.0",
   "license": "MIT",
   "repository": "github:komarovalexander/ka-table",
   "homepage": "https://komarovalexander.github.io/ka-table/#/overview",

diff --git a/src/lib/Components/Rows/Rows.tsx b/src/lib/Components/Rows/Rows.tsx
@@ -1,13 +1,13 @@
 import React, { RefObject, useEffect, useRef } from 'react';
-
-import { ITableBodyProps } from '../../props';
-import { getValueByField } from '../../Utils/DataUtils';
-import { getRowEditableCells } from '../../Utils/FilterUtils';
 import { getGroupMark, getGroupText, groupSummaryMark } from '../../Utils/GroupUtils';
 import { treeDataMark, treeGroupMark } from '../../Utils/TreeUtils';
+
 import DataAndDetailsRows from '../DataAndDetailsRows/DataAndDetailsRows';
 import GroupRow from '../GroupRow/GroupRow';
 import { GroupSummaryRow } from '../GroupSummaryRow/GroupSummaryRow';
+import { ITableBodyProps } from '../../props';
+import { getRowEditableCells } from '../../Utils/FilterUtils';
+import { getValueByField } from '../../Utils/DataUtils';
 
 export interface IRowsProps extends ITableBodyProps {
   onFirstRowRendered: (firstRowRef: RefObject<HTMLElement>) => any;
@@ -57,6 +57,9 @@ const Rows: React.FunctionComponent<IRowsProps> = (props) => {
             dispatch={dispatch}
             groupIndex={groupIndex}
             groupKey={d.key}
+            groupItems={d.groupItems}
+            columns={columns}
+            groupedColumns={groupedColumns}
             isExpanded={groupsExpanded.some((ge) => JSON.stringify(ge) === JSON.stringify(d.key))}
             text={getGroupText(d.value, column, format)}
             key={JSON.stringify(d.key)}

diff --git a/src/lib/Utils/GroupUtils.ts b/src/lib/Utils/GroupUtils.ts
@@ -41,7 +41,7 @@ export const convertToFlat = (grouped: Map<any, any>, key: any[] = []) => {
     } else {
       const groupKey = [...key];
       groupKey.push(groupValue);
-      result.push({ groupMark, key: groupKey, value: groupValue });
+      result.push({ groupMark, key: groupKey, value: groupValue, groupItems: value });
       result = [...result, ...(Array.isArray(value) ? value : convertToFlat(value, groupKey))];
     }
   });

diff --git a/src/lib/Utils/__snapshots__/GroupUtils.test.ts.snap b/src/lib/Utils/__snapshots__/GroupUtils.test.ts.snap
@@ -3,13 +3,51 @@
 exports[`GroupUtils convertToFlat complex structure 1`] = `
 Array [
   Object {
+    "groupItems": Map {
+      "Cat" => Array [
+        Object {
+          "country": "France",
+          "name": "Simba",
+          "type": "Cat",
+        },
+        Object {
+          "country": "France",
+          "name": "Kas",
+          "type": "Cat",
+        },
+      ],
+      "Dog" => Array [
+        Object {
+          "country": "France",
+          "name": "Slimu",
+          "type": "Dog",
+        },
+        Object {
+          "country": "France",
+          "name": "Rex",
+          "type": "Dog",
+        },
+      ],
+    },
     "groupMark": Object {},
     "key": Array [
       "France",
     ],
     "value": "France",
   },
   Object {
+    "groupItems": Array [
+      Object {
+        "country": "France",
+        "name": "Simba",
+        "type": "Cat",
+      },
+      Object {
+        "country": "France",
+        "name": "Kas",
+        "type": "Cat",
+      },
+    ],
     "groupMark": Object {},
     "key": Array [
       "France",
@@ -28,6 +66,18 @@ Array [
     "type": "Cat",
   },
   Object {
+    "groupItems": Array [
+      Object {
+        "country": "France",
+        "name": "Slimu",
+        "type": "Dog",
+      },
+      Object {
+        "country": "France",
+        "name": "Rex",
+        "type": "Dog",
+      },
+    ],
     "groupMark": Object {},
     "key": Array [
       "France",
@@ -46,13 +96,51 @@ Array [
     "type": "Dog",
   },
   Object {
+    "groupItems": Map {
+      "Cat" => Array [
+        Object {
+          "country": "Brazil",
+          "name": "Simba",
+          "type": "Cat",
+        },
+        Object {
+          "country": "Brazil",
+          "name": "Kas",
+          "type": "Cat",
+        },
+      ],
+      "Dog" => Array [
+        Object {
+          "country": "Brazil",
+          "name": "Slimu",
+          "type": "Dog",
+        },
+        Object {
+          "country": "Brazil",
+          "name": "Rex",
+          "type": "Dog",
+        },
+      ],
+    },
     "groupMark": Object {},
     "key": Array [
       "Brazil",
     ],
     "value": "Brazil",
   },
   Object {
+    "groupItems": Array [
+      Object {
+        "country": "Brazil",
+        "name": "Simba",
+        "type": "Cat",
+      },
+      Object {
+        "country": "Brazil",
+        "name": "Kas",
+        "type": "Cat",
+      },
+    ],
     "groupMark": Object {},
     "key": Array [
       "Brazil",
@@ -71,6 +159,18 @@ Array [
     "type": "Cat",
   },
   Object {
+    "groupItems": Array [
+      Object {
+        "country": "Brazil",
+        "name": "Slimu",
+        "type": "Dog",
+      },
+      Object {
+        "country": "Brazil",
+        "name": "Rex",
+        "type": "Dog",
+      },
+    ],
     "groupMark": Object {},
     "key": Array [
       "Brazil",
@@ -94,13 +194,29 @@ Array [
 exports[`GroupUtils convertToFlat inner group 1`] = `
 Array [
   Object {
+    "groupItems": Map {
+      "Cat" => Array [
+        Object {
+          "country": "France",
+          "name": "Simba",
+          "type": "Cat",
+        },
+      ],
+    },
     "groupMark": Object {},
     "key": Array [
       "France",
     ],
     "value": "France",
   },
   Object {
+    "groupItems": Array [
+      Object {
+        "country": "France",
+        "name": "Simba",
+        "type": "Cat",
+      },
+    ],
     "groupMark": Object {},
     "key": Array [
       "France",
@@ -119,13 +235,83 @@ Array [
 exports[`GroupUtils convertToFlat inner group with summart 1`] = `
 Array [
   Object {
+    "groupItems": Map {
+      "Cat" => Array [
+        Object {
+          "country": "France",
+          "name": "Simba",
+          "type": "Cat",
+        },
+        Object {
+          "groupData": Array [
+            Object {
+              "country": "France",
+              "name": "Simba",
+              "type": "Cat",
+            },
+          ],
+          "groupIndex": 0,
+          "groupSummaryMark": Object {},
+          "key": Array [
+            Array [
+              "France",
+              "Cat",
+            ],
+            "--: + summary--\\\\",
+          ],
+        },
+      ],
+      Object {} => Object {
+        "groupData": Array [
+          Object {
+            "country": "France",
+            "name": "Simba",
+            "type": "Cat",
+          },
+        ],
+        "groupIndex": 0,
+        "groupSummaryMark": Object {},
+        "key": Array [
+          Array [
+            "France",
+            "Cat",
+          ],
+          "--: + summary--\\\\",
+        ],
+      },
+    },
     "groupMark": Object {},
     "key": Array [
       "France",
     ],
     "value": "France",
   },
   Object {
+    "groupItems": Array [
+      Object {
+        "country": "France",
+        "name": "Simba",
+        "type": "Cat",
+      },
+      Object {
+        "groupData": Array [
+          Object {
+            "country": "France",
+            "name": "Simba",
+            "type": "Cat",
+          },
+        ],
+        "groupIndex": 0,
+        "groupSummaryMark": Object {},
+        "key": Array [
+          Array [
+            "France",
+            "Cat",
+          ],
+          "--: + summary--\\\\",
+        ],
+      },
+    ],
     "groupMark": Object {},
     "key": Array [
       "France",
@@ -180,6 +366,13 @@ Array [
 exports[`GroupUtils convertToFlat simple 1`] = `
 Array [
   Object {
+    "groupItems": Array [
+      Object {
+        "country": "France",
+        "name": "Simba",
+        "type": "Cat",
+      },
+    ],
     "groupMark": Object {},
     "key": Array [
       "France",

diff --git a/src/lib/Utils/__snapshots__/PropsUtils.test.ts.snap b/src/lib/Utils/__snapshots__/PropsUtils.test.ts.snap
@@ -47,6 +47,15 @@ Array [
 exports[`getData get grouped data 1`] = `
 Array [
   Object {
+    "groupItems": Array [
+      Object {
+        "column1": "column:1 row:0",
+        "column2": "column:2 row:0",
+        "column3": "column:3 row:0",
+        "column4": "column:4 row:0",
+        "id": 0,
+      },
+    ],
     "groupMark": Object {},
     "key": Array [
       "column:1 row:0",
@@ -61,6 +70,15 @@ Array [
     "id": 0,
   },
   Object {
+    "groupItems": Array [
+      Object {
+        "column1": "column:1 row:1",
+        "column2": "column:2 row:1",
+        "column3": "column:3 row:1",
+        "column4": "column:4 row:1",
+        "id": 1,
+      },
+    ],
     "groupMark": Object {},
     "key": Array [
       "column:1 row:1",
@@ -75,6 +93,15 @@ Array [
     "id": 1,
   },
   Object {
+    "groupItems": Array [
+      Object {
+        "column1": "column:1 row:2",
+        "column2": "column:2 row:2",
+        "column3": "column:3 row:2",
+        "column4": "column:4 row:2",
+        "id": 2,
+      },
+    ],
     "groupMark": Object {},
     "key": Array [
       "column:1 row:2",
@@ -89,6 +116,15 @@ Array [
     "id": 2,
   },
   Object {
+    "groupItems": Array [
+      Object {
+        "column1": "column:1 row:3",
+        "column2": "column:2 row:3",
+        "column3": "column:3 row:3",
+        "column4": "column:4 row:3",
+        "id": 3,
+      },
+    ],
     "groupMark": Object {},
     "key": Array [
       "column:1 row:3",
@@ -103,6 +139,15 @@ Array [
     "id": 3,
   },
   Object {
+    "groupItems": Array [
+      Object {
+        "column1": "column:1 row:4",
+        "column2": "column:2 row:4",
+        "column3": "column:3 row:4",
+        "column4": "column:4 row:4",
+        "id": 4,
+      },
+    ],
     "groupMark": Object {},
     "key": Array [
       "column:1 row:4",