my sorting is not working in react-data-table-component

Question

when i click on rank, location or deaths on top it used to sort the list before but now it doesn't work. The data you see is not all of the data i have used there is a few more that would just make the question long so i only added first few. Any help would be appreciated.

const

 data = [
        {
            location: 'Texas',
            deaths: '4,164',
            rank: 1
        },
        {
            location: 'California',
            deaths: '3,449',
            rank: 2
        }
    ]



  const columns = [
        {
          name: <h2>Rank</h2>,
          selector:  row => <h3>{row.rank}</h3>,
          sortable: true,
        },
        {
          name: <h2>Location</h2>,
          selector:  row => <h3>{row.location}</h3>,
          sortable: true,
        },
        {
          name: <h2>Deaths</h2>,
          selector:  row => <h3>{row.deaths}</h3>,
          sortable: true,
        }
      ];


  return (
    <div className='table_map'>
        <DataTable  
            data={data}
            columns={columns}
            print='true'
            theme="solarized"
            fixedHeader
            fixedHeaderScrollHeight="700px"
            customStyles = {customStyles }
        />
    </div>
  )
}
 
export default Table

@Taio yeah for me it happened because i used h2 tags for name in columns section. I removed the h2 tags and it worked properly, hope it helps — isabella-re
– isabella-re, Commented Jul 20, 2022 at 7:26

sokida · Accepted Answer · 2023-03-30 12:50:31Z

0

It can help other people : use cell function to display data with h3 and remove h3 from selector it works for me :

const columns = [
       {
         name: <h2>Rank</h2>,
         selector:  row => row.rank,
         cell:  row => <h3>{row.rank}</h3>,
         sortable: true,
       },
       {
         name: <h2>Location</h2>,
         cell:  row => <h3>{row.location}</h3>,
         selector:  row => row.location,
         sortable: true,
       },
       {
         name: <h2>Deaths</h2>,
         selector:  row => row.deaths,
         cell:  row => <h3>{row.deaths}</h3>,
         sortable: true,
       }
     ];

answered Mar 30, 2023 at 12:50

sokida

5312 gold badges14 silver badges25 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Amir Astaneh Over a year ago

The selector works, but the cell doesn't re-render after each sorting change.

Collectives™ on Stack Overflow

my sorting is not working in react-data-table-component

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related