Sort Icon

[milindg]

Hello,

I am using custom sort function in prime react tree table. If I set sortField I am able to see sorticon with ascending order. But I click again on that column it didn't change the sort icon to descending order. How can we achieve it when user will go and sort other column and icon changes accordingly.

Code: Select all

const customSort = (evt) => {
        const {sortField} = evt;
        const checkField = colData.find(n=>n.value === sortField);
        const isNumber = checkField.number ? true : false;
        let exclude = ["0", (nodes.length - 2).toString(), (nodes.length - 1).toString()];
        const s = nodes.filter((s, ind) => exclude.indexOf(s.key) !== -1);
        const f = nodes.filter((e) => exclude.indexOf(e.key) === -1);
        const tmp = f.sort((a, b) => {
        const left = ((isNumber && a.data[sortField]) || (sortField === 'checkNo' && a.data[sortField])) ? Number(a.data[sortField].replace(/[^\w-.]|_/g, "").trim()) : a.data[sortField].toLowerCase();
        const right = ((isNumber && b.data[sortField]) || (sortField === 'checkNo' && b.data[sortField])) ? Number(b.data[sortField].replace(/[^\w-.]|_/g, "").trim()) : b.data[sortField].toLowerCase();
            if (sortOrder === 1)
                return (left < right) - (left > right);
            else 
                return (left > right) - (left < right);
        });
        tmp.unshift(s[0]); tmp.push(s[1]); tmp.push(s[2])
        if (sortOrder === 1) 
            setSortOrder(-1);
        else 
            setSortOrder(1);

        setNodes(tmp);
        setSortField(sortField);
  };

    return (
        <div className="card">
            <TreeTable
                defaultSortOrder={sortOrder}
                sortField={field}
                sortMode="single"
                onSort={customSort}
                rowClassName={rowClassName} 
                showGridlines expandedKeys={expandedKeys} 
                onToggle={(e) => setExpandedKeys(e.value)} 
                resizableColumns scrollable  
                scrollHeight="80vh" value={nodes} tableStyle={1 ? { minWidth: '50rem' }:{}}
            >
            {colData && colData.length && colData.map((s, index)=>(
                <Column  sortable field={s.value} header={s.name} expander={false} style={1?{textAlign: s.number ? 'right': 'left'}:{}}>
                </Column>
            ))
            }
            </TreeTable>
        </div>
    );

Thank you,
Regards,
Milind.

[Jones12F]

You can make the following modifications to your code:
* Add two state variables, sortField and sortOrder, to track the current sort field and order:
const [sortField, setSortField] = useState(null);
const [sortOrder, setSortOrder] = useState(1);

* Update the customSort function to handle the sorting logic and update the sort field and order state:
const customSort = (evt) => {
const { sortField } = evt;
const isAscending = sortField === sortField && sortOrder === 1;

// Your existing sorting logic...

if (isAscending) {
setSortOrder(-1);
} else {
setSortOrder(1);
}
setSortField(sortField);
};

* Modify the defaultSortOrder and sortField props of the TreeTable component to use the state variables:
<TreeTable
defaultSortOrder={sortOrder}
sortField={sortField}
// Rest of the props...
>

With these changes, when the user clicks on a column to sort, the sort field and order states will be updated accordingly. The TreeTable component will receive the updated values, and the sort icon will change to ascending or descending based on the current sort order. MyBKExperience Survey

Best regard,