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>
);
Regards,
Milind.