I'm just getting started with react and js in general and bumping into an issue with my project.
I am using the Table component from rsuite and getting my data from a JSON file.
It's possible to sort the columns but I am unable to make it work on the "date" column.
JSON sample
{
"date": "2021-11-09",
"trades": 1770,
"trade volume usd": 1465910.6286105276,
"trade volume bnb": 2236.1136668385216
},
{
"date": "2021-12-05",
"trades": 3727,
"trade volume usd": 426820.94097494334,
"trade volume bnb": 760.6065715369932
}
Here is the component code that I currently have:
export const TableComp = () => {
const data = monstaData;
const [sortColumn, setSortColumn] = React.useState();
const [sortType, setSortType] = React.useState();
const [loading, setLoading] = React.useState(false);
const getData = () => {
if (sortColumn && sortType) {
return data.sort((a, b) => {
let x = a[sortColumn];
let y = b[sortColumn];
if (typeof x === 'string') {
x = x.charCodeAt();
}
if (typeof y === 'string') {
y = y.charCodeAt();
}
if (sortType === 'asc') {
return x - y;
} else {
return y - x;
}
});
}
return data;
};
const handleSortColumn = (sortColumn, sortType) => {
setLoading(true);
setTimeout(() => {
setLoading(false);
setSortColumn(sortColumn);
setSortType(sortType);
}, 50);
};
return (
<Table
virtualized
height={400}
data={getData()}
showHeader={true}
bordered={true}
cellBordered={true}
sortColumn={sortColumn}
sortType={sortType}
onSortColumn={handleSortColumn}
loading={loading}
onRowClick={data => {
console.log(data);
}}
>
<Table.Column resizable="true" align="center" fixed sortable>
<Table.HeaderCell>date</Table.HeaderCell>
<Table.Cell dataKey="date" />
</Table.Column>
<Table.Column resizable="true" align="center" fixed sortable>
<Table.HeaderCell>trades</Table.HeaderCell>
<Table.Cell dataKey="trades" />
</Table.Column>
<Table.Column resizable="true" align="center" fixed sortable>
<Table.HeaderCell>trade volume usd</Table.HeaderCell>
<Table.Cell dataKey="trade volume usd" />
</Table.Column>
<Table.Column resizable="true" align="center" fixed sortable>
<Table.HeaderCell>trade volume bnb</Table.HeaderCell>
<Table.Cell dataKey="trade volume bnb" />
</Table.Column>
</Table>
);
};
I'm sure it's an easy fix but I'm just not good enough to figure it out yet so would appreciate any help.
One thing I tried was to format the date in the JSON as an integer unix timestamp because then it would get the proper sorting, but I wasn't able to convert it back to YYYY-MM-DD format when filling the table.
Very grateful for any tips!