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
 

Answer 1

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,
       }
     ];