Reputation: 11
This is the table I have right now. The problem is that when I want to sort for example the column "Driver" all other columns get sorted as well.
I want to be able to sort them one at a time and only when clicked.
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>
```
Upvotes: 1
Views: 669