Merge pull request #441 from komarovalexander/dev

Fix GroupRow formatting
komarovalexander · Sep 25, 2024 · e462d72 · e462d72
2 parents f662f83 + d148ea8
commit e462d72
Show file tree

Hide file tree

Showing 7 changed files with 25 additions and 9 deletions.
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "ka-table",
-  "version": "11.1.1",
+  "version": "11.1.3",
   "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,5 +1,5 @@
 import React, { RefObject, useEffect, useRef } from 'react';
-import { checkRowOdd, getValueByField } from '../../Utils/DataUtils';
+import { checkIndexOdd, getValueByField } from '../../Utils/DataUtils';
 import { getGroupMark, getGroupText, groupSummaryMark } from '../../Utils/GroupUtils';
 import { treeDataMark, treeGroupMark } from '../../Utils/TreeUtils';
 
@@ -47,7 +47,7 @@ const Rows: React.FunctionComponent<IRowsProps> = (props) => {
     let rowRefLink: any = firstRowRef;
     return (
         <>
-            {data.map((d) => {
+            {data.map((d, index) => {
                 if (d.groupMark === groupMark) {
                     const groupIndex = d.key.length - 1;
                     const group = groups && groups[groupIndex];
@@ -81,7 +81,7 @@ const Rows: React.FunctionComponent<IRowsProps> = (props) => {
                     const isDetailsRowShown = detailsRows.some((r) => r === rowKeyValue);
                     const rowEditableCells = getRowEditableCells(rowKeyValue, editableCells);
                     const isOdd = oddEvenRows
-                        ? isFirstRowOdd ? checkRowOdd(data, rowData) : !checkRowOdd(data, rowData)
+                        ? isFirstRowOdd ? checkIndexOdd(index) : !checkIndexOdd(index)
                         : undefined;
                     const dataRow = (
                         <DataAndDetailsRows

diff --git a/src/lib/Utils/DataUtils.ts b/src/lib/Utils/DataUtils.ts
@@ -90,6 +90,6 @@ export const reorderData = (data: any[], getKey: (d: any) => any, keyValue: any,
     return reorderDataByIndex(data, getKey, keyValue, targetIndex);
 };
 
-export const checkRowOdd = (data: any[], rowData: any) => {
-    return data?.indexOf(rowData) % 2 !== 0;
+export const checkIndexOdd = (index: number) => {
+    return index % 2 !== 0;
 }
diff --git a/src/lib/Utils/GroupUtils.test.ts b/src/lib/Utils/GroupUtils.test.ts
@@ -223,6 +223,14 @@ describe('GroupUtils', () => {
             );
             expect(result).toEqual('Column: Column Title, Value: Group Text');
         });
+        it('format does not return value', () => {
+            const result = getGroupText(
+                'Group Text',
+                { key: 'column1', title: 'Column Title' },
+                ({column, value}) => undefined
+            );
+            expect(result).toEqual('Column Title: Group Text');
+        });
         it('format - groupItems', () => {
             const result = getGroupText(
                 'Group Text',

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

diff --git a/src/lib/Utils/Virtualize.ts b/src/lib/Utils/Virtualize.ts
@@ -1,5 +1,5 @@
 import { VirtualScrolling } from '../Models/VirtualScrolling';
-import { checkRowOdd } from './DataUtils';
+import { checkIndexOdd } from './DataUtils';
 
 export const isVirtualScrollingEnabled = (virtualScrolling?: VirtualScrolling) => {
     return virtualScrolling && virtualScrolling.enabled !== false;
@@ -41,7 +41,7 @@ export const getVirtualized = (virtualScrolling: VirtualScrolling, data: any[],
         endHeight,
         virtualizedData,
         isFirstVisibleRowOdd: oddEvenRows
-            ? checkRowOdd(data, virtualizedData[0])
+            ? checkIndexOdd(data?.indexOf(virtualizedData[0]))
             : undefined
     };
 };
diff --git a/src/lib/Utils/__snapshots__/Virtualize.test.ts.snap b/src/lib/Utils/__snapshots__/Virtualize.test.ts.snap
@@ -4,6 +4,7 @@ exports[`Virtualize getVirtualized itemHeight 40 1`] = `
 Object {
   "beginHeight": 0,
   "endHeight": 3600,
+  "isFirstVisibleRowOdd": undefined,
   "virtualizedData": Array [
     0,
     1,
@@ -23,6 +24,7 @@ exports[`Virtualize getVirtualized scrollTop 0 1`] = `
 Object {
   "beginHeight": 0,
   "endHeight": 900,
+  "isFirstVisibleRowOdd": undefined,
   "virtualizedData": Array [
     0,
     1,
@@ -42,6 +44,7 @@ exports[`Virtualize getVirtualized scrollTop 100 1`] = `
 Object {
   "beginHeight": 90,
   "endHeight": 810,
+  "isFirstVisibleRowOdd": undefined,
   "virtualizedData": Array [
     9,
     10,
@@ -61,6 +64,7 @@ exports[`Virtualize getVirtualized scrollTop 100 bottomInvisibleCount 1`] = `
 Object {
   "beginHeight": 90,
   "endHeight": 760,
+  "isFirstVisibleRowOdd": undefined,
   "virtualizedData": Array [
     9,
     10,
@@ -85,6 +89,7 @@ exports[`Virtualize getVirtualized scrollTop 900 1`] = `
 Object {
   "beginHeight": 890,
   "endHeight": 10,
+  "isFirstVisibleRowOdd": undefined,
   "virtualizedData": Array [
     89,
     90,
@@ -104,6 +109,7 @@ exports[`Virtualize getVirtualized scrollTop 900 topInvisibleCount 1`] = `
 Object {
   "beginHeight": 790,
   "endHeight": 10,
+  "isFirstVisibleRowOdd": undefined,
   "virtualizedData": Array [
     79,
     80,
@@ -133,6 +139,7 @@ exports[`Virtualize getVirtualized with new row 1`] = `
 Object {
   "beginHeight": 80,
   "endHeight": 810,
+  "isFirstVisibleRowOdd": undefined,
   "virtualizedData": Array [
     9,
     10,