Merge pull request #363 from komarovalexander/dev

Add rowData as a parameter to a format function
komarovalexander · Dec 19, 2023 · 49f2cea · 49f2cea
2 parents ba0879f + 0fcb465
commit 49f2cea
Show file tree

Hide file tree

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

diff --git a/src/Demos/HeaderFilterDemo/HeaderFilterDemo.tsx b/src/Demos/HeaderFilterDemo/HeaderFilterDemo.tsx
@@ -1,8 +1,8 @@
-import React from 'react';
-
 import { DataType, Table } from '../../lib';
 import { FilteringMode, SortDirection, SortingMode } from '../../lib/enums';
 
+import React from 'react';
+
 const dataArray: any[] = [
     { id: 1, name: 'Mike Wazowski', score: 80, passed: true, nextTry: new Date(2021, 10, 8) },
     { id: 2, name: 'Billi Bob', score: 55, passed: false, nextTry: new Date(2021, 10, 8) },
@@ -19,6 +19,7 @@ const HeaderFilterDemo: React.FC = () => {
                 {
                     key: 'name',
                     title: 'Name', dataType: DataType.String, sortDirection: SortDirection.Descend,
+                    isFilterable: false
                 },
                 {
                     key: 'score',
@@ -44,11 +45,6 @@ const HeaderFilterDemo: React.FC = () => {
                 }
             }}
             rowKeyField={'id'}
-            childComponents={{
-                headFilterButton: {
-                    content: ({ column: {key}}) => key === 'name' && <></>,
-                },
-            }}
         />
     );
 };

diff --git a/src/lib/Components/CellText/CellText.tsx b/src/lib/Components/CellText/CellText.tsx
@@ -14,11 +14,12 @@ const CellText: React.FunctionComponent<ICellTextProps> = (props) => {
         dispatch,
         editingMode,
         rowKeyValue,
+        rowData,
         value,
     } = props;
 
     const formattedValue =
-    (format && format({ column, value }))
+    (format && format({ column, value, rowData  }))
     || value?.toString();
 
     const { elementAttributes, content } = getElementCustomization({

diff --git a/src/lib/Components/PopupContent/PopupContent.tsx b/src/lib/Components/PopupContent/PopupContent.tsx
@@ -19,7 +19,7 @@ const PopupContent: React.FC<IPopupContentProps> = (props) => {
         const value = getValueByColumn(item, column);
 
         const formattedValue =
-      (format && format({ column, value }))
+      (format && format({ column, value, rowData: item }))
       || value?.toString();
         return formattedValue;
     });

diff --git a/src/lib/Components/Rows/Rows.tsx b/src/lib/Components/Rows/Rows.tsx
@@ -61,7 +61,7 @@ const Rows: React.FunctionComponent<IRowsProps> = (props) => {
                             columns={columns}
                             groupedColumns={groupedColumns}
                             isExpanded={groupsExpanded.some((ge) => JSON.stringify(ge) === JSON.stringify(d.key))}
-                            text={getGroupText(d.value, column, format)}
+                            text={getGroupText(d.value, column, format, d.groupItems)}
                             key={JSON.stringify(d.key)}
                         />
                     );

diff --git a/src/lib/Utils/FilterUtils.ts b/src/lib/Utils/FilterUtils.ts
@@ -144,7 +144,7 @@ export const filterByHeaderFilter = (data: any[], columns: Column[], format?: Fo
         return initialData.filter((item: any) => {
             const value: any = getValueByColumn(item, column);
             const fieldValue =
-        (format && format({ column, value }))
+        (format && format({ column, value, rowData: item }))
         || value?.toString();
             return column.headerFilterValues?.includes(fieldValue);
         });

diff --git a/src/lib/Utils/GroupUtils.test.ts b/src/lib/Utils/GroupUtils.test.ts
@@ -223,6 +223,15 @@ describe('GroupUtils', () => {
             );
             expect(result).toEqual('Column: Column Title, Value: Group Text');
         });
+        it('format - groupItems', () => {
+            const result = getGroupText(
+                'Group Text',
+                { key: 'column1', title: 'Column Title' },
+                ({column, value, rowData }) => `Column: ${column.title}, Value: ${value}, rowData: ${JSON.stringify(rowData)}`,
+                [{ id: 'hello'}, {id: 'im robot'}],
+            );
+            expect(result).toEqual('Column: Column Title, Value: Group Text, rowData: {\"id\":\"hello\"}');
+        });
     });
 
     describe('isMaxDeep', () => {

diff --git a/src/lib/Utils/GroupUtils.ts b/src/lib/Utils/GroupUtils.ts
@@ -114,8 +114,8 @@ export const groupBy = (data: any[], keyGetter: any, isEmptyValue: boolean = fal
 
 export const getGroupMark = () => groupMark;
 
-export const getGroupText = (value: any, column: Column, format?: FormatFunc) => {
-    return format ? format({ column, value }) : `${(column && column.title ? column.title + ': ' : '')}${value}`;
+export const getGroupText = (value: any, column: Column, format?: FormatFunc, groupItems?: any[]) => {
+    return format ? format({ column, value, rowData: groupItems?.[0] }) : `${(column && column.title ? column.title + ': ' : '')}${value}`;
 };
 
 export const isMaxDeep = (groupPanel: GroupPanelSettings, columns: Column[], groups?: Group[]) => {

diff --git a/src/lib/types.ts b/src/lib/types.ts
@@ -20,7 +20,7 @@ export type DispatchFunc = (action: any) => void;
 export type OnDispatchFunc = (action: any, tableProps: ITableProps) => void;
 export type ControlledPropsKeys = (keyof ITableProps)[];
 export type Field = string;
-export type FormatFunc = (props: { value: any, column: Column }) => any;
+export type FormatFunc = (props: { value: any, column: Column, rowData?: any; }) => any;
 export type FilterFunc = (props: { column: Column }) => ((value: any, filterRowValue: any, rowData?: any) => boolean) | void;
 export type SortFunc = (props: { column: Column }) =>  ((value1: any, value2: any) => 0 | 1 | -1) | void;
 export type SearchFunc = (props: { searchText: string, rowData: any, column: Column }) => boolean;