javascript - 如何使用 react-table 一次只对一列进行排序？

Question

这是我现在的桌子。问题是，当我想对“驱动程序”列进行排序时，所有其他列也会被排序。

我希望能够一次对它们进行排序，并且只有在单击时才能排序。

import './Table.css'
import { useMemo } from 'react'
import { COLUMNS } from './Columns'
import { useTable, useSortBy, useFlexLayout  } from 'react-table'
import Data from './Data'


const Table = () => {

    const columns = useMemo(() => COLUMNS, [])
    const data = useMemo(() => Data, [])
    const initialState = useMemo(() => Data, [])



    const {
        getTableProps,
        getTableBodyProps,
        headerGroups,
        rows,
        prepareRow,
        toggleSortBy,
    } = useTable(
        {
            columns,
            data,
            initialState
        },
        useSortBy,
        useFlexLayout
    )

    return (
        <div className='table-container'>
            <table {...getTableProps() }>
                <thead>
                    {
                        headerGroups.map((headerGroups) => (

                            <tr {...headerGroups.getHeaderGroupProps()}>
                                {headerGroups.headers.map( (column) => (
                                    <th   
                             {...column.getHeaderProps(column.getSortByToggleProps())} >
                                        {column.render('Header')}</th>
                                ))}
                            </tr>

                        ))
                    }

                </thead>
                ```