2

I use the react-data-table-component (along with the react-data-table-component-extensions library) for displaying various tables. I have a datatable where the sorting of any column works when I click on the column header but the default sorting does not work when the page is loaded (on other pages where I use different data, it works).

The initial json array data contains a labelid which I use to get the labelname and labelyear, then I add these values into a new json array and pass the new one into the DataTable.

Code Snippet:

const [initialDiary, setInitialDiary]       = useState([]);
const [updatedDiaries, setUpdatedDiaries]   = useState([]); 

useEffect(() => {
      initialDiary.map(diary => {
          // the get functions return simple strings
          var newDiary = {...diary, ['labelName']:getLabelName(diary.labelID),
                                    ['labelYear']:getLabelYear(diary.labelID)};
          setUpdatedDiaries(prev => [...prev, newDiary]);
      })
}, [winediaries]);

...

// I want to sort by labelyear, the 3rd column
<DataTableExtensions columns={columns} data={updatedDiaries} export={false} print={false}>
      <DataTable noHeader defaultSortField={3} defaultSortAsc={false} highlightOnHover customStyles={customStyles} 
                 pagination paginationRowsPerPageOptions={rows} paginationPerPage={15}>
      </DataTable>
</DataTableExtensions>
1
  • Did you find a solution to this? Stuck here too Commented Sep 22, 2023 at 8:38

0

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.