From b541bafe8835213c96db4b5fe3bc2c0aff8ca328 Mon Sep 17 00:00:00 2001 From: Cassio Accioly Date: Sun, 25 May 2025 11:23:47 +0200 Subject: [PATCH 1/6] Create cell memoization options in datatable props, including detailed documentation --- components/lib/datatable/BodyCell.js | 12 ++++++-- components/lib/datatable/BodyRow.js | 3 ++ components/lib/datatable/DataTable.js | 6 ++++ components/lib/datatable/TableBody.js | 3 ++ components/lib/datatable/datatable.d.ts | 39 +++++++++++++++++++++++++ components/lib/utils/ObjectUtils.js | 5 ++-- components/lib/utils/utils.d.ts | 2 +- 7 files changed, 65 insertions(+), 5 deletions(-) diff --git a/components/lib/datatable/BodyCell.js b/components/lib/datatable/BodyCell.js index 614d4c379c..e21482ed74 100644 --- a/components/lib/datatable/BodyCell.js +++ b/components/lib/datatable/BodyCell.js @@ -691,14 +691,22 @@ export const RadioCheckCell = React.memo( RadioCheckCell.displayName = 'RadioCheckCell'; +const defaultKeysToCompare = ['rowData', 'field', 'allowCellSelection', 'isCellSelected', 'editMode', 'index', 'tabIndex', 'editing', 'expanded', 'editingMeta', 'frozenCol', 'alignFrozenCol']; + export const BodyCell = React.memo( (props) => { return ; }, (prevProps, nextProps) => { - const keysToCompare = ['field', 'allowCellSelection', 'isCellSelected', 'editMode', 'index', 'tabIndex', 'editing', 'expanded', 'editingMeta', 'rowData', 'frozenCol', 'alignFrozenCol']; + if (nextProps.cellMemo === false) return false - return ObjectUtils.selectiveCompare(prevProps, nextProps, keysToCompare); + const memoProps = nextProps.cellMemoProps + const keysToCompare = Array.isArray(memoProps) && memoProps.every(prop => typeof prop === 'string') ? memoProps : defaultKeysToCompare + + const memoPropsDepth = nextProps.cellMemoPropsDepth + const depth = typeof memoPropsDepth === 'number' && memoPropsDepth > 0 ? memoPropsDepth : 1 + + return ObjectUtils.selectiveCompare(prevProps, nextProps, keysToCompare, depth); } ); diff --git a/components/lib/datatable/BodyRow.js b/components/lib/datatable/BodyRow.js index 4affae1ac4..cbe875defb 100644 --- a/components/lib/datatable/BodyRow.js +++ b/components/lib/datatable/BodyRow.js @@ -605,6 +605,9 @@ export const BodyRow = React.memo((props) => { const cellProps = mergeProps({ hostName: props.hostName, allowCellSelection: props.allowCellSelection, + cellMemo: props.cellMemo, + cellMemoProps: props.cellMemoProps, + cellMemoPropsDepth: props.cellMemoPropsDepth, cellClassName: props.cellClassName, checkIcon: props.checkIcon, collapsedRowIcon: props.collapsedRowIcon, diff --git a/components/lib/datatable/DataTable.js b/components/lib/datatable/DataTable.js index c8aa4b56f8..18c87f2873 100644 --- a/components/lib/datatable/DataTable.js +++ b/components/lib/datatable/DataTable.js @@ -1688,6 +1688,9 @@ export const DataTable = React.forwardRef((inProps, ref) => { { extends Omit Date: Sun, 25 May 2025 11:27:10 +0200 Subject: [PATCH 2/6] Prettier --- components/lib/datatable/BodyCell.js | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) diff --git a/components/lib/datatable/BodyCell.js b/components/lib/datatable/BodyCell.js index e21482ed74..0ce466d8be 100644 --- a/components/lib/datatable/BodyCell.js +++ b/components/lib/datatable/BodyCell.js @@ -698,13 +698,13 @@ export const BodyCell = React.memo( return ; }, (prevProps, nextProps) => { - if (nextProps.cellMemo === false) return false + if (nextProps.cellMemo === false) return false; - const memoProps = nextProps.cellMemoProps - const keysToCompare = Array.isArray(memoProps) && memoProps.every(prop => typeof prop === 'string') ? memoProps : defaultKeysToCompare + const memoProps = nextProps.cellMemoProps; + const keysToCompare = Array.isArray(memoProps) && memoProps.every((prop) => typeof prop === 'string') ? memoProps : defaultKeysToCompare; - const memoPropsDepth = nextProps.cellMemoPropsDepth - const depth = typeof memoPropsDepth === 'number' && memoPropsDepth > 0 ? memoPropsDepth : 1 + const memoPropsDepth = nextProps.cellMemoPropsDepth; + const depth = typeof memoPropsDepth === 'number' && memoPropsDepth > 0 ? memoPropsDepth : 1; return ObjectUtils.selectiveCompare(prevProps, nextProps, keysToCompare, depth); } From bd2c0478e15be21617d11b5da97b238bf8f36f2f Mon Sep 17 00:00:00 2001 From: Cassio Accioly Date: Sun, 25 May 2025 11:37:50 +0200 Subject: [PATCH 3/6] Fixed TS error --- components/lib/utils/utils.d.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/components/lib/utils/utils.d.ts b/components/lib/utils/utils.d.ts index 219d45e3b2..a102b6b56d 100644 --- a/components/lib/utils/utils.d.ts +++ b/components/lib/utils/utils.d.ts @@ -153,7 +153,7 @@ export declare class ObjectUtils { static sort(value1: any, value2: any, order: number, locale: string | string[]): number; static getNestedValue(obj: object, path: string): any; static absoluteCompare(objA: object, objB: object, maxDepth?: number, currentDepth?: number): boolean; - static selectiveCompare(a: object, b: object, keysToCompare?: string[], maxDepth?: number = 1): boolean; + static selectiveCompare(a: object, b: object, keysToCompare?: string[], maxDepth: number = 1): boolean; } /** From fa646104b339ec23709310611a0b976444b9c6ca Mon Sep 17 00:00:00 2001 From: Cassio Accioly Date: Sun, 25 May 2025 11:40:47 +0200 Subject: [PATCH 4/6] Fixed TS error --- components/lib/utils/utils.d.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/components/lib/utils/utils.d.ts b/components/lib/utils/utils.d.ts index a102b6b56d..fe76dc3e75 100644 --- a/components/lib/utils/utils.d.ts +++ b/components/lib/utils/utils.d.ts @@ -153,7 +153,7 @@ export declare class ObjectUtils { static sort(value1: any, value2: any, order: number, locale: string | string[]): number; static getNestedValue(obj: object, path: string): any; static absoluteCompare(objA: object, objB: object, maxDepth?: number, currentDepth?: number): boolean; - static selectiveCompare(a: object, b: object, keysToCompare?: string[], maxDepth: number = 1): boolean; + static selectiveCompare(a: object, b: object, keysToCompare?: string[], maxDepth?: number): boolean; } /** From d143771caf517412f217ea6a87c2f1c28c309681 Mon Sep 17 00:00:00 2001 From: Melloware Date: Sun, 25 May 2025 07:36:06 -0400 Subject: [PATCH 5/6] Update datatable.d.ts --- components/lib/datatable/datatable.d.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/components/lib/datatable/datatable.d.ts b/components/lib/datatable/datatable.d.ts index 466107766f..b81347a050 100644 --- a/components/lib/datatable/datatable.d.ts +++ b/components/lib/datatable/datatable.d.ts @@ -1127,7 +1127,7 @@ interface DataTableBaseProps extends Omit Date: Sun, 25 May 2025 21:42:03 +0200 Subject: [PATCH 6/6] Created ref for expandedRows in TableBody.js so that the onRowToggle runs with the most updated value --- components/lib/datatable/TableBody.js | 12 +++++++++--- 1 file changed, 9 insertions(+), 3 deletions(-) diff --git a/components/lib/datatable/TableBody.js b/components/lib/datatable/TableBody.js index 1077ca7304..0107e1e667 100644 --- a/components/lib/datatable/TableBody.js +++ b/components/lib/datatable/TableBody.js @@ -629,6 +629,12 @@ export const TableBody = React.memo( } }; + const expandedRowsRef = React.useRef(props.expandedRows); + + React.useEffect(() => { + expandedRowsRef.current = props.expandedRows; + }, [props.expandedRows]); + const onRowToggle = (event) => { let expandedRows; let dataKey = props.dataKey; @@ -637,7 +643,7 @@ export const TableBody = React.memo( if (hasDataKey) { let dataKeyValue = String(ObjectUtils.resolveFieldData(event.data, dataKey)); - expandedRows = props.expandedRows ? { ...props.expandedRows } : {}; + expandedRows = expandedRowsRef.current ? { ...expandedRowsRef.current } : {}; if (expandedRows[dataKeyValue] != null) { delete expandedRows[dataKeyValue]; @@ -653,9 +659,9 @@ export const TableBody = React.memo( } } } else { - let expandedRowIndex = findIndex(props.expandedRows, event.data); + let expandedRowIndex = findIndex(expandedRowsRef.current, event.data); - expandedRows = props.expandedRows ? [...props.expandedRows] : []; + expandedRows = expandedRowsRef.current ? [...expandedRowsRef.current] : []; if (expandedRowIndex !== -1) { expandedRows = expandedRows.filter((_, i) => i !== expandedRowIndex);