如何使表在ReactJS中可排序？

Question

在这里，我正在创建与API的连接，并在ReactJS中获取数据。然后在表中填充数组的结果。 React-Table也在呈现分页。必须具有React-Table属性onSortedChange中必须调用的handeler。谁可以帮助我建立在表中按升序和降序排序的方法。

type Props = {
    resourceName: string;
    pageSize: number,
    columns: Array<{
        Header: string,
        accessor: string,
        [string]: any,
    }>
}

type CombinedProps = Props & {
    getData: () => Promise<Object>,
    data: Array<Object>,
    count: number,
    offset: number,
    limit: number,
};


@withRouter
@connectAPI((apiClient: ApiClient, props: CombinedProps) => ({
    getData: {
        send: (data: Object) => apiClient.resources[props.resourceName].list(data),
        success: (response: {results: Array<Object>}, data: Object) => {
            const {
                results, count, offset, limit,
            } = response;
            return {
                data: results,
                count,
                offset,
                pageSize: limit,
            };
        },
    },
}))

class Table extends React.Component<CombinedProps> {
    static defaultProps = {
        pageSize: 10,
    };

    componentDidMount(): void {
        const { getData, pageSize } = this.props;
        getData({
            limit: pageSize,
        });
    }

    getPaginationData = () => {
        const { count, pageSize, offset } = this.props;

        return {
            pages: Math.ceil((count / pageSize) || 1),
            page: (offset / pageSize) || 0,
        };
    };

    handleSortedChange = (sorted) => {
        const { pageSize, offset } = this.props;

        // TODO: It must have loop that converts the columns that are `sorted` into a string and append them in `ordering`
    ```
// from
[{id: 'address.str_name', desc: false}, {id: 'address.str_n', desc: true}]
// to
"address__str_name,-address__str_n"
    ```
// This works fine already !

        const ordering = sorted.map((col) => {
            let r = col.id.replace('.', '__');
            if (col.desc) {
                r = `-${r}`;
            }
            return r;
        });

        this.props.getData({
            limit: pageSize,
            offset,
            ordering: ordering.join(','),
        });
    };

    handlePageChange = (page) => {
        const { pageSize } = this.props;
        this.props.getData({ limit: pageSize, offset: page * pageSize });
    };

    handlePageSizeChange = (pageSize) => {
        this.props.getData({ limit: pageSize, offset: 0 });
    };

    render(): React.ReactNode {
        const { data, pageSize, columns } = this.props;
        // TODO: Handle sort & filters

        return (
            <ReactTable
                data={data}
                columns={columns}
                pageSize={pageSize}
                manual
                onSortedChange={}
                onPageChange={this.handlePageChange}
                onPageSizeChange={this.handlePageSizeChange}
                {...this.getPaginationData()}
            />
        );
    }
}

export default Table;