I Never Want to Create React Tables Any Other Way 

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.

The tanstack react table docs are hot garbage

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.

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

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.

Each news on this library is just mind-blowing

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 ; ).

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.

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

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

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!

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

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

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?

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

for simplistic table Tanstack react-table is great, for complex tables like pivot tables, it's not great at all. ag-grid is far superior.

It’ll work until there’s thousands of records. Why on earth we want client side pagination? It doesn’t make any sense. I tried using this with server side but docs were non existent.

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

stop make this kind of '1 + 1' example. Let's consider the reality-functionable Component, you guys never want to repeat useReactTable in all pages.

Why not create your own table component? If you are finding it difficult, just ask ai.

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

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

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.

This looks like the Datatable plugin from Jquery!

The hardest part of Tanstack table is the server side pagination

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

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

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

I never want to create tables in any way

But where is data coming from?

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.

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!

I haven't tried this library yet. Does the browser render the table component as an actual element? This is important for crawlers and accessible design. There's nothing worse than tables being built with divs and flex to simulate a table.

I was excited but when I saw shadcn/ui I really got frustrated. I already tried to use it but it doesn't work well with JS; lots of errors and I'm also not a big fan of using TS (as it's highly recommended). You can judge me but I think TS has too much code for the same - not to say polluted. Code gets ugly and it botters me a lot.

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

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..

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

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

When fetching columns and data from a database this becomes a nightmare. I just dont understand...

i feel like this lib is also a bit bloated. It needs tailwind css to work. I have a project that uses bootstrap so adding tailwind css just to use this lib is kinda weird IMHO

"My grandma could do it" 👌

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

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

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

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

wait till you find out that uber's baseweb design has not 1, not 2 but 3 table components with all the bells and whistles :D

mui datagrid is better than both tanstack table and shadcn table . u will find that the hard way if u have a serious project

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

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

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]) }

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

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

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.

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

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

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

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

I move from react hook form to mantine form. And I never want to go back.

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!

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

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

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

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

literally wrote out a table five days ago and then I see this. 😑

Pleass how do i deal with multiple selects or bulk actions

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

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.

anyone can give me the source code josh was created?????

Anyone here tried to sort date range using this data-table?

Do these tables support virtualization for large datasets?

How to give relational header and subHeader or nested headers?

can anyone make a sveltekit component from this ui?

How to make table head fixed? Thank you

Great video! I have bene using tanstack query for a while but never their tables, For that I result to Mui DataGrid (pro). It's massive and comprehensive but it works. You get all out of the box without the need to reimplement your own pagination buttons and more. Again, it comes down to - is shipping 300kb of Mui tables to the user an issue? We want to say yes, because we are thought to, but in reality it depends on who your "users" are. In my case, users are sitting in an office with great wifi connection (800kbps download speeds) with max 3 year old laptops (dell xps 15's, X1's, M1/2 macs) so speed, in any form, isn'y really an issue. With that being said I am always up for trying something new and better and this just may be it!

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

I'm not really sure why you're emphasizing on shadcns implementations. They are just simple wrappers around already great libraries like react-table in this case. Same with another video about calendars, where react-daypicker is the brain behind it all. Its not that its wrong and shadcns implementations/wrappers are cool, but I'd like to see more emphasis on the base libraries he's using under the hood :)

wow amazing

Ant Design Procomponent's table are pretty good try too

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

I had to back out of the library , i love the components but it does something to your tailwind which makes it annoying to customize, even styles that have nothing to do with the components just act weirdly like mb-4 works but mb-3 or 5or 6 or 8 don't work.

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

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

bro, your videos are so helpful, ty

Theres no serverside search/pagination and others?

Can you please share the code. will be great

Great video! I'll definitely be trying this

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?

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

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

Ant Design is the best!

Ohh, I love material-react-table.

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?

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

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

Similar to table Ant design

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.

You said MUI table is 300 kB, but you didn't say how much shadcn data table is.

Never say "never"

cool but stop flashbanging!!! 😢

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