fix(TreeTable): onValueChange to return latest sorted data

[KumJungMin]

Defect Fixes

• fix: TreeTable: onValueChange doesn't retrieve the current sorted data #7474

How To Resolve

Issue

• When sorting a column, the onValueChange callback is triggered,
• but it receives data from the previous sort instead of the currently sorted data.

Cause

• The issue occurs because the sorting function was directly referencing external state values.
• As a result, it used values captured by closures from earlier render cycles, which—combined with the asynchronous nature of state updates—meant that the latest state was not reflected at the time of sorting.
• Consequently, the comparator function was operating on stale sort criteria, causing the onValueChange callback to receive data from the previous sort rather than the current one.

Solution

• Updated the sorting functions (sortSingle, sortMultiple) to accept field and order as direct parameters.

// before

if (sortField || ObjectUtils.isNotEmpty(multiSortMeta)) {
      if (props.sortMode === 'single') {
          data = sortSingle(data);
      } else if (props.sortMode === 'multiple') {
          data = sortMultiple(data);
      }
  }

// after

if (sortField || ObjectUtils.isNotEmpty(multiSortMeta)) {
      if (props.sortMode === 'single') {
          data = sortSingle({ data, field: sortField, order: sortOrder });
      } else if (props.sortMode === 'multiple') {
          data = sortMultiple({ data, multiSortMeta });
      }
  }

Test

test sample code

import { Column } from '@/components/lib/column/Column';
import { TreeTable } from '@/components/lib/treetable/TreeTable';
import { useEffect, useState } from 'react';
import { NodeService } from '../../../service/NodeService';

export function BasicDoc() {
  const [nodes, setNodes] = useState([]);

  useEffect(() => {
      NodeService.getTreeTableNodes().then((data) => {
          setNodes(data);
      });
  }, []);

  return (
      <div className="card">
          <TreeTable value={nodes} tableStyle={{ minWidth: '50rem' }} onValueChange={(v) => console.log('onValueChange:sorted first item', v[0]?.data?.name)}>
              <Column field="name" header="Name" expander sortable></Column>
              <Column field="size" header="Size" sortable></Column>
              <Column field="type" header="Type" sortable></Column>
          </TreeTable>
      </div>
  );
}

before: onValueChange is return previous sorted data

2025-03-09.12.59.06.mov

after: onValueChange is return latest sorted data

2025-03-09.12.57.43.mov

[vercel]

Deployment failed with the following error:

Creating the Deployment Timed Out.