1

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>
                ```
VicK
  • 11
  • 2
  • 1
    In a table, adjacent data is supposed to correlate. So sorting just one column makes little sense, right? Maybe it is not a table you are looking for, but rather separate lists? – H3AR7B3A7 Dec 23 '21 at 09:02
  • @H3AR7B3A7 It may not make much sense, but that's what I've been asked to do. I also have to use react-table. – VicK Dec 23 '21 at 09:11

0 Answers0