reactjs - react-table v7 排序行为：当第三次单击列标题时，排序被删除

Question

我正在使用反应表 v7。我已将排序添加到我的表中，尽管排序具有这种行为，即当第三次单击标题时，排序被删除。我希望在将排序应用于标题后切换排序，例如，如果我单击标题，现在它按升序排序，然后第二次单击降序，然后第三次单击返回降序，依此类推。只有在单击其他标题时才应删除排序。

这是代码片段

import React from 'react'
import { useSortBy, useTable } from 'react-table'

const Grid = (props) => {
    console.log(props)
    const { data, columns, showFooter = false, disableSort = false } = props
    const {
        getTableProps,
        getTableBodyProps,
        headerGroups,
        rows,
        prepareRow,
        footerGroups
    } = useTable({ columns, data, disableSortBy: false }, useSortBy)

    return (
        <div className="radius_16 bg-white p-3 mt-3">
            <div className="table_border">
                <table {...getTableProps()} className="table tr_bg mb-0">
                    <thead>
                        {headerGroups.map(headerGroup => (
                            <tr {...headerGroup.getHeaderGroupProps()}>
                                {headerGroup.headers.map(column => {
                                    console.log(column)
                                    return <th
                                        {...column.getHeaderProps(column.getSortByToggleProps())}
                                    >
                                        <div style={{ display: 'flex', justifyContent: 'space-between' }}>
                                            {column.render('Header')}
                                            {<i className={`fad color_orange cursor_pointer sorting  ${column.isSorted ? column.isSortedDesc ? 'fa-sort-down' : 'fa-sort-up' : ''}`} style={{ minWidth: 10 }} />}
                                        </div>
                                    </th>
                                })}
                            </tr>
                        ))}
                    </thead>
                    <tbody {...getTableBodyProps()}>
                        {rows.map(row => {
                            prepareRow(row)
                            return (
                                <tr {...row.getRowProps()}>
                                    {row.cells.map(cell => {
                                        return (
                                            <td
                                                {...cell.getCellProps()}
                                            >
                                                {cell.render('Cell')}
                                            </td>
                                        )
                                    })}
                                </tr>
                            )
                        })}
                    </tbody>
                    {showFooter && <tfoot>
                        {footerGroups.map(group => (
                            <tr {...group.getFooterGroupProps()} className="bg_dark_gray">
                                {group.headers.map(column => (
                                    <td {...column.getFooterProps()}>{column.render('Footer')}</td>
                                ))}
                            </tr>
                        ))}
                    </tfoot>}
                </table>
            </div>
        </div>
    )
}

export default Grid

标签： reactjsreact-table