u/ceolter

Worth every penny. 

AG Grid is excellent.

https://www.ag-grid.com/

It has a free tier that comes with all the standard items you need in a datagrid eg sorting, filtering, editing and so on. The paid tier is for advanced use cases like row grouping, pivoting etc, and if you need these advanced cases then AG Grid is worth every penny.

The way you have your cellClassRules defined is wrong, as the values are strings, which the grid will process as expressions rather than functions.

So instead of this:

'cellClassRules': {'bg-red-300': 'params => !isToday(params.value)','bg-green-300': 'params => isToday(params.value)'}

You should have this:

'cellClassRules': {'bg-red-300': params => !isToday(params.value),'bg-green-300': params => isToday(params.value)}

If you do want expression variants, then the format is this:

'cellClassRules': {'bg-red-300': '!isToday(value)','bg-green-300': 'isToday(value)'}

However when using expressions, I'm not sure isToday will be available in the scope of the expression. The grid under the hood uses eval() to evaluation the expression which would mean your local function is not available.

AG Grid supports this, set domLayout='autoHeight'. Here it is in the docs:

https://www.ag-grid.com/react-data-grid/grid-size/#grid-auto-height

Fair! AG Grid Community is free though.

MUIX is a poor mans clone of AG Grid.

AG Grid Community is FREE!! The community version comes with Filtering.

With regards "prettiest", you can style AG Grid, either use / modify one of the provided themes, or build a theme from scratch (so full control of style / CSS).

Use Tanstack Table if your application is Search Engine Facing. Tanstack Table is designed to create the smallest possible bundle size which is what you want for SEO. The tradeoff is you need to write more code in Tanstack Table (it comes with no UI) and it's features are limited compared to complete grid components (that come with a UI).

If building an Enterprise Application (or anything not search engine facing), then AG Grid is the gold standard. All the other new-ish data grids on the market are wannabie clones of AG Grid (eg MUIX). However none have come close to the breadth of features, or the quality, of the AG Grid product, or the AG Grid supporting documentation.

Understood.

If you ever want the license explained further, then please get in touch with us [[email protected]](mailto:[email protected])

Regards desktop apps (Electron etc), there is no extra charge, we see Electron as a browser. The only way we would charge a deployment license for Electron is if the Electron app was hosting an HTTP instance that was distributing another web app that included AG Grid (which this is generally not what Election is about). In our EULA we define what a server is, and an Electron desktop app is not a server.

Regards rotating teams, this should not be a problem. We license the project, not the individual developers. So eg if Project A has 5 devs, you license Project A for 5 devs, and that's all even if all 5 devs leave and you have to hire another 5 devs!

My opinion is co-located developers work more cohesively which is especially important for complicated projects. You are welcome to disagree, I encourage you to start another Reddit discussing the advantages and disadvantages of co-located developers as this is going off topic.

If DOM order is forced, then row animation (moving rows after sort of filter) is lost. That's why it's not on by default.

Disclaimer, I founded AG Grid. The comment above is misleading. Corrections....

• React-only focus: React is a rendering layer only. 90% of a datagrids code is not UI and as such should not be written in React. AG Grid's history means it comes with 10 years of experience. AG Grid for React uses React for all it's rendering - this is not wrapping. The statement "so it needs adapters and manage conflicting priorities" is not true.
• Extensibility: You can use AG Gird with whatever other front end library you want, you are not tied down to just what we offer. We focus on what we are the experts in which is the DataGrid.
• A larger community: AG Grid is used by what we call 'the upper end of the market' ie Enterprise Application Developers where it is used extensively, many of the largest investment banks have standardised on AG Grid. What we call the 'lower end of the market' is where Data Grid requirements are not as complex, eg eCommerce portals or generally the World Wide Web. Other grids fulfil the simpler needs of the lower end. This 'lower end' is a larger community. Same to be said about Tanners (excellent) TanStack Table - it's far more downloads than AG Grid because it's better suited to Search Engine Facing websites, not Enterprise Applications.
• Culture: We are a highly skilled team of co-located developers which is needed to pull off something as complex as AG Grid. AG Grid simply wouldn't exist with it's current quality and depth of features if we relied on the Open Source model. A simpler project would suit the open source remote working model.
• User Experience: This is subjective.

Paying per dev is how the industry works, we are doing what's standard.

The price is indicative to the quality. The breadth of features puts AG Grid in a class of it's own (no other grid out there has anything like eg AG Grid's Integrated Charting or Server Side Row Model) and the depth of features is also world class (features other grids have, for example Filtering, are simple implementations compared to the depth we have in AG Grid).

Given the sheer size of the project, we have a large team co-located in London (40+ at the time of writing) which is an expensive operation.

So in short, you get what you pay for. AG Grid is a premium product in a class of it's own. If you put AG Grid into your application it is a very solid investment.

Use AG Grid. It has pagination, but 1m rows with eg 100 rows per page still had 10,000 pages which is bad UX. AG Grid has other strategies for 1m rows eg it's Server Side Row Model allows infinite scrolling over 1m records, as well as Row Grouping with Lazy Loading groups, allowing a good UX for navigating large datasets. Disclaimer - I founded AG Grid.

The reason I started AG Grid is because there was nothing like it available, and I needed it for my work. All the open-source free grids were very poor. 8 years later and AG Grid has come such a long way, only possible with 40+ people working now on the project (half of them developers on the dev team). Just as I'm sure you get paid a salary for the code you right, we are not a charity, we need our salaries too!

There are video tutorials to get you started with AG Grid and React that are in the docs, they are very good to get started. I highly recomend you check them out.

There are multipe AG Grid themes available, including dark themes, you can select from some on the main demo page. All the themes are custisable with CSS variables, so you can tweak them to your liking. You can also create your own theme from scratch. We are working on a dark mode for the website so you can read the docs in dark mode, it's coming in our next release.

Yes you can create your own statusbar. The grid has events you can listen on to update your status bar. Just place your status bar under the grid and make it looks similar.

Yes the best features are paid for features, however there is no datagrid out there that offers AG Grid style enterprise features for free.

Disclaimer, I'm the founder of AG Grid, however I'm also friends with Tanner. You can see from tanstack.com that AG Grid is both a sponsor but more importantly a partner with TanStack.

TanStack table is lightweight and headless. You have to create your own UI. It will take more code to implement the features you need with the gain your app should have a smaller bundle size (as the imported library is smaller).

AG Grid 'comes with batteries' as Tanner says, or comes with a UI. AG Grid's feature set is broader (eg Integrated Charting, or Pivot Table) and more polished (eg Grouping in AG Grid is more detailed than Grouping in TanStack Table). The border and more polished feature set, and the UI included, is why AG Grid has a larger bundle size.

Use TanStack Table when the page you are developing is Search Engine Facing, such that page download speed is highly important. Here putting more effort into your own UI makes sure you don't implement things your app doesn't need and doesn't add to your download speed.

Use AG Grid when building an Enterprise Application. With AG Grid you will write less code and have a more powerful grid at the end. The only cost is library size.

Most big organisations writing Enterprise Apps tend to use AG Grid.

Most Search Engine Websites tend to use TanStack Table.

If the table is behind a login, or not a webpage where SEO is important, then the value of a small bundle size is lost with regards website ranking.

AG Grid having issues on customization is not a common theme amongst AG Grid users. I would find this out for yourself - identify the customisations you want to do and spike it in AG Grid and TanStack, shouldn't take to long in either.

Why do people expect the team at AG Grid to work for free? To create a data grid of the standard AG Grid is requires a team of talented developers working full time, it's just not possible as an open source project. That's one reason why there is a massive difference in quality between AG Grid and other grid projects.

If you are not worried about the quality of the product you are building, then using a sub-par grid makes sense. However you might end up spending more time trying to do things, or implement things, that AG Grid comes with, so you'll end up with a sub par project that costs you more to deliver (assuming you value your time).

​

Disclaimer, I'm the founder of AG Grid, and I founded AG Grid for my own project because I was fed up with the quality of the other projects out there.

Just use AG Grid latest version?

Here is instructions on putting your own content into a cell using just JavaScript, React, Angular, Vue

https://www.ag-grid.com/javascript-data-grid/component-cell-renderer/

https://www.ag-grid.com/react-data-grid/component-cell-renderer/

https://www.ag-grid.com/angular-data-grid/component-cell-renderer/

https://www.ag-grid.com/vue-data-grid/component-cell-renderer/

Most of the links above also link to YouTubes explaining same.

There is no free open source equivalent of AG Grid Enterprise. Anyone who has tried to copy it has also tried to charge for it.

Your configuration must have something that can be improved, as AG Grid is used in many enterprise applications and performance issues isn't something that we get. If you are trailing, then you probably have a trail key, which gives you access to support. If you build a sample app in plunker showing what you are doing where the performance is slow, we can take a look.

Are you using React 18 and Strict Mode? If yes, this is the problem. It's a "feature" included in React 18 to test that you component can be un-mounted and mounted again, in preparation of a future React feature. It's enabled only when in Strick Mode. So either take Strick Mode out, work around it similar to what the blog here describes.

Here it's explained with a solution: https://blog.ag-grid.com/avoiding-react-18-double-mount/

AG Grid is very good . . . . On the internet, anyone can argue any other gird is better, so my advice is give AG Grid a try, use it as a baseline and also try the others. If you don't pick AG Grid, can you advise why not???

Disclaimer - I wrote AG Grid.

Not sure what you mean by "server-side-rendering feature is paid-only" - if you are talking about lazy loading of rows as you scroll down, aka infinite scroll, then ag-Grid Communities Infinite Row Model will do that.

However why do you want server side rendering? (again not sure what you mean exactly by this) - it's possible to give ag-Grid thousands of rows with 50 columns and have it all in the client, then let ag-Grid sort and filter it with ease.