General approach to learning tables
Hi, what is the best way to understand how to use tables?
Because I just discovered it and thought the Guide would be an incremental code-along thing which explains what is happening,
but right at the first intro of code in Colum Defs, there are
RowActionsand columnHelper.display which are not explained and cannot be found in the Basic example either.
I'd love a recommonded approach to this, since I am a bit confused her. Not blaming the docs, more like admitting that my coding experience isn't high level enough to easily grasp this, so looking for help 🙂2 Replies
fascinating-indigo•3y ago
<RowActions is just a component. I don't believe it is apart of Table. It can be anything you want the cell to fill with.
As far as columnHelper.display I believe it correlates to https://tanstack.com/table/v8/docs/guide/column-defs#column-def-types
While column defs are just plain objects at the end of the day, a createColumnHelper function is exposed from the table core which, when called with a row type, returns a utility for creating different column definition types with the highest type-safety possible.
helpful-purple•3y ago
Hey @SayNoToDucks
The best way I find to think about Tanstack Table is this:
- it’s a headless library, meaning it does not output any kind of User Interface.
- it’s a powerful state management layer.
It takes in your data and column definitions, then:
- gives you access to a complete set of tools in which to update that dataset
- returns a large object with every table relevant structure and option/function you could need.
Take pagination, for instance:
- Your data can be paginated by configuring the options passed in to your table instance.
- to display the pagination output, you define your own UI, then consume the relevant pagination hook/function provided by TT.
Right now the best way to learn it is look thru the codesandbox examples in the docs, fork them and play around.
There’s also plenty of open sourced projects using TT, like material-react-table and shadcn-ui to name a few.
https://www.material-react-table.com/
https://ui.shadcn.com/docs/components/data-table
Look thru their source code.
Hope this helps. Let us know how you go.
Material React Table
Material React Table, a fully featured Material UI V5 implementation of TanStack React Table V8. Written from the ground up in TypeScript.
Data Table
Powerful table and datagrids built using TanStack Table.