0

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!

AVilenius
  • 27
  • 5
  • Not exactly related, but it seems like you are currently only sorting your strings by the first letter (`charCodeAt()` with no index will return the first characters code) if you want to sort the entire word alphabetically you can use `<` and `>` string comparisons, see: [Sort array of objects by string property value](https://stackoverflow.com/questions/1129216/sort-array-of-objects-by-string-property-value) – DBS Dec 17 '21 at 11:31
  • @DBS I appreciate the tip! But I think I might just have to take some courses before moving forward, it's not making much sense to me. – AVilenius Dec 17 '21 at 11:44

0 Answers0