I Never Want to Create React Tables Any Other Way

Man, the React ecosystem is just amazing. Tables can be very complex in their logic and design. I usually relied on a heavy, bloated data grid from Material-UI. NOT ANYMORE HEHE! Look at this table and tell me it ain't awesome. The combination of shadcn's design with the functionality of tanstack tables is powerful.
Shadcn's UI library: ui.shadcn.com/
My GitHub: github.com/joschan21
Discord: / discord
Twitter: / joshtriedcoding

[@NicolasSouthern]

I’ve been utilizing Tanstack Table in my latest project and have been seeing great results. The documentation can be a little lacking and there’s definitely trial and error with getting it just right but it’s very powerful.

[@wandenreich770]

me too... the documentation was such a headache but it did pay off

[@joshtriedcoding]

Cool to hear, glad it has been working well for you. The styling makes it so nice to work with now

[@belkocik]

@@joshtriedcoding I tried to use react table but the docs are no that great. Would be great if you make a video about React Table Josh :D

[@sevenseven6123]

i also want to shine in and emphasize that the v8 documentation is absolute ass and the only reason I even stumbled upon this video is that I am looking for a guide on it. So yeah, a tutorial would be awesome!

[@jeremymunroe]

Is there server side pagination ?

[@Play_Streams]

After using Tanstack for a while I've just created my own table component. When you think about it, once you deal with the main issues: Pagination, Search, Column sort, Row count selection and Data export you have a pretty reusable tool you can copy over to multiple projects.

[@AnishBishnoi-wf7lv]

can you give me code ?

[@wchorski]

I'm not one to ask for freebies, but if you have a repo to check out that would be epic

[@increase-chrisalaede4813]

Can you share repo?

[@boubeniamohamed236]

I agree with you. Wen tend to try to reuse other's people codes without understanding it. But at the end, it is ok to invent our own tools that we finally reuse it everywhere.

[@Jmfufghf]

I was thinking the same thing but you might be just reinventing the wheel that's already been created by tanstack in the end

[@artu-hnrq]

Useful component. Quick, precise and too valuable presentation! I've been finding really interesting tips from your videos. Thanks for all these shadings 👏

[@joshtriedcoding]

Cheers dude. Happy to hear that. First I filmed a complete walkthrough but figured this kind of overview is just more interesting

[@UwU-dx5hu]

I just loved how you addressed the main two problems forms and tables. Then how presented the whole video. Keep up the good work❤

[@afroj3di]

Just came across ur channel randomly on my feed. As a software developer who works on lots of react projects, I find ur videos really helpful. 👍🏿👍🏿

[@jjrise]

I swear this is the 10th time now I've laughed out loud at one of your videos because of the irony. I started using shadui a few weeks ago, then saw your videos on it. Yesterday I started using his new data table, then saw this video. Same a few months ago with T3 related stuff, trpc, etc. I love how you read my mind and deliver videos at the perfect time ; ).

[@haritpatel5001]

Would love a more detailed video on this ? Maybe a small case project on shadcn. Love your content, always on the point ❤ and value.

[@KevinVandyTech]

Awesome to see coverage on TanStack Table. There are now many implentations and examples for how to use it now. Glad Tailwind is finally getting showcased with it. I have made MUI and Mantine implementations if curious, but they are not quite as modular as this one.

[@AmodeusR]

But this isn't TanStack Table 🤔 It's from UI Shadcn.

[@SeanCassiere]

As someone who's been shipping Tanstack Table for a while now, it's great that Shad was able to get this new styled DataGrid out.

[@joshtriedcoding]

Oh yeah

[@bitcraft3r]

Exactly what I was looking for, and I asked this same question on the day you posted the video!

[@c4346]

Each news on this library is just mind-blowing

[@joshtriedcoding]

Man is on his sigma grindset making these awesome updates

[@alexscorer1]

I love you for explaing these components - gave me such a headache in the past.. I'd also love it if you did a few example projects - such as multiTennant Keep it up!

[@joshtriedcoding]

Cheers man. Haven't heard of multitennant yet, though this library is part of multiple of my open-source projects from the past and I'll very likely use it in the future too

[@matthewrossee]

Hi Josh, what about server side pagination? Because you rarely want to fetch all users from the DB.

[@kikisbytes]

Great video! I'll definitely be trying this

[@thiruvengadam96]

This library was a life saver, saw this video at the right time. I was just about to use Material UI for my dashboard, after seeing this. I am changing my mind.

[@HarshDivecha_FTR]

It's AMAZING, i am using it for my current project, especially for the table, everything important is there, except 1, making the rows draggable has been a headache, still haven't figured it out.

[@buddy.abc123]

Nice! This is so similar to Ag Grid. I guess that makes sense since Tanstack and Ag Grid are partners now

[@ralexand56]

Could you implement something like column freezing. I feel like that's only supported by the more advanced tables.

[@Brocollipy]

Awesome thanks I was just about to go headlong into MUIX Data grid.. not anymore! I was planning to use Formik so sounds like I need to play around with the form solution you mentioned.

[@joshtriedcoding]

Check out the docs, I was amazed at how well they're written. Tables are not an easy topic but the setup is super straightforward

[@varinderpalsingh7281]

I’m using same library for current project only issue I’m having is rendering components like autocomplete, calendar, text field in cell which takes time to load when add more rows

[@blazingfingersguy]

Been wanting to change all my tables with Tanstack Tables. Thank you!

[@joshtriedcoding]

Welcome dude, all the best for that

[@mohammedabujayyab6146]

if you want to make headers fixed, footer for totals also fixed for month summary and grand total. which library should you use?

[@Bodom1978]

I'm really liking what I see from this lib. Will consider it for smaller projects in the future to really see what caveats it has.

[@joshtriedcoding]

Haven't found a caveat yet, shipped multiple projects using it and so far so good

[@farfazzi]

some more features i would like to have: column pivoting, column resize by dragging, column order switch by drag and drop, multiple headers… can we do that? aniway seems pretty neat

[@dogcitydog]

Hello, I did not know this bookstore. It seems to have good performance, but I would like to know if you have the option to enable data editing by cells and copy/paste?

[@kevklash]

Extremely useful! Thanks for sharing!

[@joshtriedcoding]

Cheers man

[@stevebendersky2056]

I have used this table with Tanstack Table, how do I make filter in each of the columns (for example filter by gender or by goal)? thanks

[@longnhat6405]

So the pagination is done on client side? Can this work for serverside pagination?. Server side pagination mean i only fetch data of the page im currently in?. Thanks

[@edgarasben]

Very cool! Can the search, pagination, sorting etc. be done server side? In case on initial load not all data is loaded.

[@Berkeli]

This requires more attention. Tables without server side search, pagination are a no go for 99% of projects

[@faridgonzalez9292]

Hey bro, how are you doing? I listened to you and downloaded the data table but I have a problem. I need to put drop-down selects in one of the columns, to select the user, but I don't know how to do it, I see it as almost impossible. Can? And how would it be? thank you

[@FullStackDevGreg]

In one an hour if watching your videos I discovered a lot, thank you Sir

[@eliazar1997]

This is amazing! thank you brother!!! :D

[@martapfahl940]

My current problem is I am using NextUI and I need a table where I can directly edit the cells and create nested rows. So row entries that have a relationship to a parent column and are collapsable. MUI only provides it in the Pro plan. Maybe I can build this upon the shadcnui code

[@alvinscheibe]

With this component is it possible to perform queries on the server side to do paging?

[@nabinsaud4688]

I immediately added to my project 🎉❤ love the tanstack table

[@joshtriedcoding]

Dope, great to hear

[@allowmeasme]

That line My grandmother could do it made me subscribe. I love how you explained it.

[@utkarshkukreti239]

In one of your other video of nextjs course(where you created a ui for api path) you mentioned mui tables are so good but you didn't mention this point of large client side code of mui tables.

[@nirajgautam403]

I want have an onclick as well as hover events on table cell. How can I do it?

[@MatanSaban]

I tried using shadcn with nextjs as POC and i got a problem, maybe you'll be able to help me with. I added a table with columns visibility and the checkboxes items in the column visibility dropdown are showing the id of the column. The thing is i want to show some label or something so ill be able to use it in different languages and not only english as the id of the cell is always english in my projects..

[@vinitjain7]

does this library works with jsx ?? I tried but init failed coz my root folder doesnt contain tsx.config file

[@henriquematias1986]

ideally the URL should be changing when you go prev / next page so you can deeplink to it!

[@exxedridel9043]

Please do an example of custom pagination, to have for example 15 rows per page instead of the default 10 please!

[@toannew]

Can you please make a video teaching use this react-table (typescript)?

[@Mirislomovmirjalol]

Is it possible to make server pagination, server sort, server filtering?

[@7dainis777]

Do these tables support virtualization for large datasets?

[@dertuman]

Hello there! Thanks for this video, very helpful. Might give it a try. I use Antd currently, it's pretty good. Documentation isn't great though. Also, when you mentioned the grandma line, I found it funny because you made a rookie mistake! (or not so rookie, I see it happening to seniors), anyway if you don't have any arguments you can run the function like this: doSomething, instead of like this: () => doSomething() Thanks again and have a nice day!

[@paschalokafor9043]

Pleass how do i deal with multiple selects or bulk actions

[@LEDsellers]

How would you implement this library using trpc and infinite scroll?

[@joshtriedcoding]

idk man, good chance you might find something in the docs for that

[@martinhltr]

do you know nextui also a great ui package which will be soon also be compatible with next 13.4

[@noext7001]

im using this lib but i have no style when using ssr , any idea why ?

[@avsheshsavani6257]

How to give relational header and subHeader or nested headers?

[@vidzzzzify]

Can we do date range filter using this?

[@CW91]

Does it support lazy loading? It would be nice if I can fetch the first 50 table rows, then next 50 rows is loaded only when Next Page is clicked. The search bar will fetch the search results from server side rather than client data?

[@joshtriedcoding]

Not sure if it does out of the box actually. Not rocket science to implement yourself but it would be awesome if it was supported out of the box

[@brokeartisan]

Looks alot like the AntD api for tables from back in the day but more simplified.

[@shakhruzrakhmatov2285]

Josh, any suggestions if I want to use realtime data for the table? I mean can I still use table component inside server side component, wdyt?

[@joshtriedcoding]

Depends on the use-case, but might make sense to just turn it into a client component to subscribe to realtime events inside of it

[@shakhruzrakhmatov2285]

@@joshtriedcoding thanks man! appreciate the opinion! I am going to use liveblocks for realtime, I am thinking to turnn it into client side component as you said!

[@mazwrld]

i couldn’t integrate this ui library with my existing t3 app but im thinking to build my portfolio with it

[@joshtriedcoding]

why not? Should be compatible with everything related to react like remix, nextjs or vanilla

[@bjornwiberg]

It's also worthy to look into the accesssorFn provided in the columnsDef which makes filtering by column possible when using formated data in the cells I have two defaultFunctions for handling the rendering and the formatting const renderCellValue = (key: string, value: string | number) => { if (key === 'modifiedAt' && value !== null && isValidDate(new Date(value))) { return {value} } return value } const defaultAccessorFn = (key: string, value: AccessorFunctionValue) => { const dateColumns = ['archiveDate', 'createdAt', 'endDate', 'startDate'] if (value === undefined || value === null) return '---' const valueAsDate = new Date(value as string) if (key === 'modifiedAt') return `${format(valueAsDate, 'yyyy-MM-dd HH:mm:ss')}` if (dateColumns.includes(key)) return `${format(valueAsDate, 'yyyy-MM-dd')}` return value } and then my getTableColumns function to be able to provide some custom columns export function getTableColumns( tableColumns: Partial, data: DataType[], ) { return useMemo(() => { const customColumns: [string, TableColumnLayout][] = Object.entries(tableColumns) const dataColumnsKeys = Object.keys(data[0] ?? []) if (customColumns.length > 0) { return customColumns.map(([key, column]) => { const renderFunction = (value: string | number, original: DataType) => { if (column.render) return column.render(value, original) return renderCellValue(key, value) } const accessorFn = (value: string | number) => column.accessorFn ? column.accessorFn(value) : defaultAccessorFn(key, value) return { accessorFn: (originalRow) => accessorFn(originalRow[key]), accessorKey: key, filterFn: 'fuzzy', cell: ({ getValue, row: { original } }) => renderFunction(getValue(), original), header: column.title ?? key, listData: column.listData, size: column.width, } }) } // Return full object if custom columns layout not specified return dataColumnsKeys.map((key) => ({ header: key, accessorKey: key, cell: ({ getValue }) => renderCellValue(key, getValue()), })) }, [data, tableColumns]) }

[@Dhanushsaji]

How to make table head fixed? Thank you

[@jesinthejust2205]

What if I want to add a delete and edit button?

[@smartjefreycoca5425]

is this better than Material React Table that built with Mui table and tanstack table?

[@juicyberg]

can you do a tutorial with tremor react and advanced filtering in nextjs 14+?

[@danielcastrillo81]

The hardest part of Tanstack table is the server side pagination

[@bikerguy3338]

I played around with tanstack table server pagination a few months ago. At that point there wasn’t great documentation so it wasn’t till I found a random example online that I was able to get it going.

[@lalit5408]

We are doing that. We are just making a new REST API call to get next page data. Not sure what's difficult in that.

[@Saurabhkumar-bn3dl]

@@lalit5408 Is your code open source? If not, can you share an overall flow of how you are approaching that.

[@KuroDe_]

How to paginate and sort async data?

[@joaomaia9140]

how to make the table editable?

[@freeguy2418]

This looks like the Datatable plugin from Jquery!

[@anuj7286]

Hey josh, could please make a tutorial on best way to create reusable component for both component library and non component library. Thankyou

[@joshtriedcoding]

Already did: kzbin.info/www/bejne/m4m1nYmmrJaGf7M

[@hetnon]

I'm trying to build a table with no paginatiom but that is intense in the render. I have to resort to List but building a table with that is being a hell. Any ideas?

[@uralguru9719]

Virtualize large lists using the Response window)

[@kjn6037]

Theres no serverside search/pagination and others?

[@vickoalan]

Please can you do a video how we can upload files from NextJs 13.4 to cloudflare R2 ??

[@joshtriedcoding]

Just did one that covers the same thing for S3, I don't think there is a fundamental difference in how you achieve the same thing with R2

[@vickoalan]

@@joshtriedcoding can you give me the Link, because I searched on your channel but didn't found it

[@joshtriedcoding]

@@vickoalan kzbin.info/www/bejne/r6aXfH6jg6uaaLs&ab_channel=Joshtriedcoding

[@fronix5060]

In what way is this less bloated than MuiX DataGrid? Seems to be exactly the same to me?

[@Comphonia]

Sad the React ecosystem doesn’t have an easy component library. MUI is a bloated mess and tables are still a struggle. Mantine is my current library of choice but scary with only a single maintainer. Quasar for Vuejs is the best thing I’ve ever used, columns and paginations are as simple as modifying props on a one line q-table component!

[@dylanarmstrong9328]

Radix is decent and comes without styles which is nice but I know what you mean. I find myself taking HTML templates and just converting them most of the time.

[@khSoraya01]

What about complicated json structure where some fields can be empty and subcolumns....

[@furycorp]

Thanks for sharing this new addition, data tables are such a pain in the ass!

[@joshtriedcoding]

Damn right they were

[@fegreat2462]

can anyone make a sveltekit component from this ui?

[@kuroisan2698]

I prefer building my custom component library you can make it as you want and add anything you prefer like animation and so on

[@joshtriedcoding]

cheers man, it's certainly more work but glad to hear it works for you

[@canpolat1907]

great video again :)

[@user-yx5cm2de9c]

How do we truncate a specific cells in shadcn datatable?

[@Chris...S]

Use the cell: in columes definition and make a function to do the truncation. Josh explains the cell in the video

[@AlexJohnSuarez]

how to make it lazyloading? shadcn example is not perfomant in terms of calling api.

[@coolguyike]

Thanks!!

[@codinginflow]

Looks cool. Now I want to build a project that needs tables 😆 Maybe my own Notion 🤔

[@joshtriedcoding]

Hahaha it's tempting to just include all the cool stuff you see into your projects, it's a trap though! DONT DO IT UNLESS NEEDED :D

[@gregthomas5887]

Were you able to try other features here like virtualization and infinite scrolling?

[@joshtriedcoding]

Tried a bunch, not those two though

[@gregthomas5887]

@@joshtriedcoding excited to find out if shadcn can do those. It's so freaking difficult to customize material ui styling!

[@chhakulizingare9382]

I have a Name column in which I have name and email, Can anybody tell me how to make search by name and email?

[@gabrieltimba4772]

Hi, there is a way to integrate that pagination with my api pagination to not load all data at once?

[@joshtriedcoding]

Not sure if it works out of the box. Might just work! If not, my approach would be to get the current page index, and if it's near the end fetch the next pages from an API

[@KevinVandyTech]

@@joshtriedcoding Yes, using manualPagination and managing pagination state

[@armandsalle8447]

Shadcn Ui is awesome, your videos are great, perfect match

[@joshtriedcoding]

cheers dude, appreciate it

[@danielnoworyta]

How about infinite scroll in this one? This is one of big problems in Table libraries.

[@saidurrahmansiam]

another great video bro....Can you make a video on smart way of auth system integration as Nextjs 13 has server function and API routes now.

[@joshtriedcoding]

Thank you man. Auth hasn't really changed in Next 13 besides validating users in server components, might make for an interesting video tho

[@saidurrahmansiam]

@@joshtriedcoding that would be great for beginners like me 😌

[@GeraldOfori-pr3zt]

can't be used with jsx?

[@blankomog]

Can I do additional styling with tailwind?

[@martiananomaly]

Yes

[@Suragato]

I know this is an example, but please cache the formatter outside the cell render function >.

[@namanjain3711]

It is pretty much easy with ExtJS , and less complex and highly customisable

[@hamidmohamadi2943]

Ohh, I love material-react-table.

[@likwaichan6208]

Ant Design Procomponent's table are pretty good try too

[@tanjungclan3864]

sir maybe it's quite out of topics, but I wonder, do you prefer react form over formik?

[@joshtriedcoding]

Never tried formik, am very happy with react-hook-form. Working very well for me

[@tanjungclan3864]

@@joshtriedcoding okey thanks sir, I think wanna using react-hook-form from now on

[@joshtriedcoding]

@@tanjungclan3864 give it a shot and lmk what you think. I like it a lot

[@tanjungclan3864]

​@@joshtriedcoding sorry sir, my english is bad, can you explain me what is mean imk stand for ?

[@rohit87k]

Can you please share the code. will be great

[@mukhtaradaji2246]

There's no link to the source code?

[@ebadmaev]

What about Antd Design ?

[@yousafwazir286]

wow amazing

[@shahariarniloy8935]

I found antd has way more potentials, not just for table but also for a lot of other components, i wish we will hear up/down side of antd from you.

[@joshtriedcoding]

Interesting suggestion, one of the UI libs I got less experience with

[@gabrielalbuquerque3387]

antd is HUGE! so good! but i dont have tested with nextjs server components yet. i should give a try. do you ever tested antd with RSC?

[@geelemo]

Yh they still have to be client components

[@vonPBDesign]

antd is my favourite. Works like a charm and the design is really well done as well.

[@user-zj3yk7km7y]

the docs for tanstack table are p bad (I mean they are still a work in progress), but shadcn docs make it alot easier to get atleast a basic custom table job done. However if you wanna go beyond that your best bet is to use the examples given in the tanstack v8 docs as they don't have guides prepared yet

[@tensorcode]

Similar to table Ant design