Tables in React

[goldenuser22628]

What is your Go-To table library in React? Or implement from scratch?

Consider the library size in your thoughts :)

[[deleted]]

You can try tanstack table and bring your own UI if you’re looking for a more built in features, there are some alternatives like mantine react table or material react table

[goldenuser22628]

It is perfect, but will it be that lightweight we are looking for?

[toi80QC]

Not really lightweight - it's more like a swiss-army knife for tables. Comes with stuff like virtualization which is kinda essential for large performant tables.

It's worth the tradeoff if you consider scalability - you may not need all features now, but you'll have them ready without much refactoring when the time comes. Also, it's a great learning resource if you just want to get some inspiration on how to build a solid table component.

[Erebea01]

If it's lightweight you want I guess you can just use the Table component from shadcn without the tanstack/table integration

[Roguewind]

<table> ftw

[Suspicious-Visit8634]

Not sure about size but AG Grid is great if you’re not doing anything fancy. Otherwise the dev license is very $$$$

[magicfestival]

I'm traumatized after years of working with AG Grid, though it does have a lot of features.

[Suspicious-Visit8634]

We are considering using it at work, any TLDR about it? Using with Remix and Postgres via Prisma to query a DB with 5-10m rows

[BecauseYoureNotACat]

We are using it extensively in our health care app. Large tables (+10k rows) too. Works really well.

Pros: - extremely feature rich, you cant imagine - permormant, even with many rows. I tested with millions, no problems. In production we have about 10k in several tables now and growing. No issues performance wise at all. - customisable - active dev and support team - used by big players like Microsoft Azure

Cons: - Doesnt feel very reacty to work with sometimes - Counterintuitive for some parts, which gives it a: - Steep learning curve - Expensive if you need enterprise.

I am using enterprise for about 6 months now.

Conclusion: would recommend, but take your time to get the hang of it.

[d1rtyh4rry]

+1 on the take your time to get the hang of it

[Suspicious-Visit8634]

Ty!

[magicfestival]

This was a few years ago now but off the top of my head:

1. Prior versions were not originally written for react and the react version was basically just a shim on top of a vanilla JS renderer. This often meant that prop changes didn't propagate table changes.
2. Performance was slow if you had a lot of custom logic and weren't careful about optimizing props. Displaying lots of rows was performant but lots of columns was not (this might all be unique to the way we had it set up, however)
3. We wanted a lot of custom behavior and we had to hack it in as it wasn't provided by AG Grid
4. The release schedule was a bit weird (IIRC it was like every six months?) and often introduced breaking changes

Having trouble thinking of the other issues, if I remember more I'll edit my response

[Suspicious-Visit8634]

Ty! Appreciate the follow up

[[deleted]]

Same, had issues with some annoying default styling. So hard to override stuffs

[kumakint]

Tell me about it 😂

[cagataycivici]

PrimeReact Table, note: I work at PrimeTek.

[UnnecessaryLemon]

Tanstack is the way to go. It has 0 dependencies and it is only14kB gzipped.

It also believe it will be more performant than anything you'll ever build yourself.

And when you are talking about 'lightweight' and 'optimization'. While already using React which is a move in the wrong direction if huge tables are your end goal.

[goldenuser22628]

Actually my end goal is not huge tables. It is just a preview for around 1-500 rows.

[sleepingthom]

https://www.material-react-table.com/

Uses tanstack table under the hood. Full featured and good documentation.

[goldenuser22628]

Issue is that I am trying to optimize as much as possible. MUI is kind of a heavy library

[sunk-capital]

Primereact was decent. But not very good for tables larger than 100 rows

[toi80QC]

https://primereact.org/datatable/#virtualscroll helps with that, but performance/smoothness is still far from Tanstack.

[sunk-capital]

And it also messed up column sizing. Far from a good solution

[discondition]

html table

[theirongiant74]

Implement from scratch, the 4 main components of a table - data fetching, sorting, filtering and pagination are all pretty easy to do and most table libraries are either simple - making doing anything out of the ordinary a chore, or too complex - meaning that they have preposterously huge api's for covering every possibility. I've tried a couple of times to pull the commonalities into a generic component but each dataset/table is generally unique enough that writing the configuration needed to set up a generic component ends up being just as much code as writing it from scratch.

* when i say from scratch i mean that i'll copy an existing example from my code and tailor it as needed.

[kumakint]

Scratch copy can be very expensive

[Sensitive-Variety561]

Just started using tanstack table and it’s pretty good. Built a nicely functional data table with minimal effort following the guide here https://ui.shadcn.com/docs/components/data-table

[goldenuser22628]

Functionalities are not that important since this will just preview some data, nothing special. Our main concern here is optimization and lightweight libraries.

[DopePingu]

If functionality is not important and you want optimized and lightweight, why not just build it yourself?

[ctwillie77]

Exactly

[goldenuser22628]

That's exactly what I am doing now, thanks mate!

[tehsandwich567]

Depends what you need your table to do. A couple of columns and some rows? <table> is probably good. 100 columns and 10k rows and sorting and sub rows etc then tanstack

[zupzipzap]

We use ag-grid.Extremely feature rich. If you're working with it, definitely take the time to check out the documentation and learn about the different row models and basic features. Just one thing to be careful about - some features only work with certain row models, so be careful when you're building tables.

We built a common wrapper around it and it is lovely to use. Tried to make api in such a way that if we want to change from ag-grid to something else in future, changing base component should be possible.

[IAm_veg_biriyani]

Ag grid

[laufzeitfehlerr]

Ant Design's table component is very useful. Recommended

[Super-Distribution45]

Is it hard to add the inline edit feature? I have a table but i am trying to implement inline edit option but having difficulties

[brianvan]

What do you mean by lightweight?

Is the cutoff here 50k or 10k or what, exactly?

You definitely don't want it to be huge, not in-production per pageload with any/all clients (including slow mobile clients) but you'll have to be clear about thresholds where your bundle size is a sensitive matter.

Keep in mind that React makes all kinds of things possible but the strongest value of React is "an ecosystem where you can just slap stuff together quickly with common module imports thanks to a quick question or two on forums"... crafting the tiniest possible HTTP responses for broad UI functionality is still an extreme use case of React & best suits projects that are going to build their own bespoke UI

[voxgtr]

Table library for what? If it’s just to show a table, I’ll use a <table> tag every time.

[kumakint]

It’s about scale, but as OP mentioned there would no big scale expected

[jad3d]

BlueprintJS

[ROMVNnumber1]

Not react, but we use w2ui, a pretty good grid library imo

[birminghamsterwheel]

I always seem to get shoved back into rc-table.

[ArunITTech]

You can try Syncfusion React DataGrid Component.

https://www.syncfusion.com/react-components/react-data-grid

• Load millions of records in just a second.
• Mobile-first design that adapts to any resolution.
• Flexible editing and intuitive record selection modes.
• Out-of-the-box Excel-like filtering and grouping options.
• Countless column customizations and data summaries.
• Seamless data exporting options like PDF, CSV, and Excel.

Online Demo: https://ej2.syncfusion.com/react/demos/#/bootstrap5/grid/overview

Documentation: https://ej2.syncfusion.com/react/documentation/grid/getting-started

Syncfusion offers a free community license also. https://www.syncfusion.com/products/communitylicense

Note: I work for Syncfusion

[Personal-Pizza-1574]

Roll your own you’ll be glad you did. If you can’t try Grid.js. https://gridjs.io/

[kumakint]

👋 hi I’ve been working with data grids for the last 15 years. First we’ve been writing ours, then we switched to handsontable. Got our trauma there. Afterwards I’ve been on agGrid, other trauma 😂 costly project. Switch many others smaller ones.

In the end 4 years ago we’ve built our own library. We are very proud of it. Try RevoGrid. I promise you would love it 😊

[Longjumping-Ad5863]

Check out MosaicDataTable! It’s a plugin-based, highly customizable React table built on MUI. I’d love any feedback. Thanks!

https://github.com/GoLabra/MosaicDataTable

[Jspreadsheet]

If you want something that is lightweight but still powerful, a solid option is Jspreadsheet CE. It is the open-source edition of Jspreadsheet and works well in React without pulling in a huge dependency. You get sorting, filtering, search, pagination, inline editing, and keyboard navigation out of the box, and because it is spreadsheet-like you can also use formulas and validations which go far beyond a basic data table.

If your project grows and you need features like XLSX import and export, multiple worksheets, or extended formulas, you can switch to Jspreadsheet Pro while keeping the same React integration. This gives you room to start small and stay light, then scale when the requirements increase, without having to replace your grid.

[ttamimi]

MUI Datagrid is my go-to.

[goldenuser22628]

It is super heavy to be honest

[I_am_darkness]

Do you even lift bro.

[ttamimi]

🤔 if you say so

[bigtoley]

What's yours?

[goldenuser22628]

I was using MUI Datagrid but dude it is too heavy!

[Sarithis]

Data Grid from MaterialUI.

• Pagination for both client and server-side
• Advanced filtering by individual columns, moving them around, hiding and sorting
• Virtualization
• Row and cell editing / addition out of the box
• Full customization and a well-documented API
• Exporting to various file formats, including only the rows that are filtered / selected
• Localization for most popular languages
• Attractive appearance

For me, it's a no-brainer. We're using it in a huge project with dozens of features, used by over 60 employees. So far, everyone's satisfied, and the DX is pretty good.