T
TanStack•3y ago
exotic-emerald

getCanSort() returning false

I have a simple table built by passing in a data and column object from json data to useReactTable in the TableWidget.js file there are two // todo - ... comments outlining issues I'm having the first and main one being that I am unable to sort any of the columns as canGetSort is retunring false I have a hunch that the issue may be to do with with definitions missing from my mockTableColumns.json file, but after trying many options like, adding an enableSorting flag etc. I am stumped 
{
    "id": "orderid",
    "header": "Order ID",
    "accessor": "orderid",
    "enableSorting": true       <==========
}
{
    "id": "orderid",
    "header": "Order ID",
    "accessor": "orderid",
    "enableSorting": true       <==========
}
the second is that the way of rendering cells in the example was leaving me with blank cells. It's probably worth noting that I am not using the createColumnHelper function as I couldnt figure out its usage for dynamic column structures defined by json data that could be refreshed as opposed to static column data that can be defined in code the same way it is in the docs examples https://codesandbox.io/s/great-hamilton-e1vdnl?file=/src/components/TableWidget.js
jarrednorrisdev
CodeSandbox
great-hamilton-e1vdnl - CodeSandbox
great-hamilton-e1vdnl by jarrednorrisdev using @chakra-ui/react, @emotion/react, @emotion/styled, @tanstack/react-table, react, react-dom, react-icons, react-scripts
1 Reply
sunny-green
sunny-green•3y ago
Without looking too deep, your use of useEffect is incorrect (tho largely misunderstood) and likely responsible for many side effects in your code. A telltale sign of this is to be setting state, which you also rely on referencing in your effects dependency array, causing untold issues in your useEffect. In short: - Fetching data is best handled with separate state management. Tanstack Query for instance. - Manipulating any data or local state from a user event should trigger a handler function, not a useEffect. For plenty of scenarios with Tanstack Table, refer to the Kitchen Sink example here: https://codesandbox.io/s/github/tanstack/table/tree/main/examples/react/kitchen-sink?from-embed=&file=/src/App.tsx For more help on these issues and a better understanding of useEffect, refer to some of these: https://beta.reactjs.org/reference/react/useEffect https://www.youtube.com/playlist?list=PLNqp92_EXZBJs6rKouX5U8-tWJgTLaeKv By sorting this out and refactoring, you may find you no longer have issues. Hope this helps.
CodeSandbox
tanstack-table-example-kitchen-sink - CodeSandbox
tanstack-table-example-kitchen-sink using @emotion/react, @emotion/styled, @tanstack/match-sorter-utils, @tanstack/react-table, @types/react, @types/react-dom, react, react-dom
useEffect
A JavaScript library for building user interfaces
YouTube
Become a Pro React Developer

Did you find this page helpful?