diff --git a/package.json b/package.json index cdbe28af..8989605e 100644 --- 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 index 29a17b56..55ed917e 100644 --- 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) => any; @@ -57,6 +57,9 @@ const Rows: React.FunctionComponent = (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 index 73a5ee88..39f03084 100644 --- a/src/lib/Utils/GroupUtils.ts +++ b/src/lib/Utils/GroupUtils.ts @@ -41,7 +41,7 @@ export const convertToFlat = (grouped: Map, 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 index c1b4a923..945b81e4 100644 --- a/src/lib/Utils/__snapshots__/GroupUtils.test.ts.snap +++ b/src/lib/Utils/__snapshots__/GroupUtils.test.ts.snap @@ -3,6 +3,32 @@ 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", @@ -10,6 +36,18 @@ Array [ "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,6 +96,32 @@ 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", @@ -53,6 +129,18 @@ Array [ "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,6 +194,15 @@ 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", @@ -101,6 +210,13 @@ Array [ "value": "France", }, Object { + "groupItems": Array [ + Object { + "country": "France", + "name": "Simba", + "type": "Cat", + }, + ], "groupMark": Object {}, "key": Array [ "France", @@ -119,6 +235,51 @@ 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", @@ -126,6 +287,31 @@ Array [ "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 index d1fbe227..fbe3c234 100644 --- 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", diff --git a/src/lib/props.ts b/src/lib/props.ts index c5ca01f7..30c49c03 100644 --- a/src/lib/props.ts +++ b/src/lib/props.ts @@ -118,12 +118,15 @@ export interface IDataRowProps extends IRowCommonProps { export interface IGroupRowProps { childComponents: ChildComponents; column: Column; + columns?: Column[]; + groupedColumns?: Column[]; contentColSpan: number; dispatch: DispatchFunc; groupIndex: number; groupKey: any[]; isExpanded: boolean; text: string; + groupItems?: any[]; } export interface IGroupSummaryRowProps extends IRowsProps {