Comparing different Data Grid options based on some basic requirements
- tailwind style
- general table style
- row
- cell
- filtering
- general filter
- column filter
- sorting
- cell edit
- price
Feature | AG-Grid | MUI Data Grid | TanStack Table | Ka-table | Grid.js | KendoReact Data Grid |
---|---|---|---|---|---|---|
Tailwind | - General style: global CSS - Row: rowClass or rowClassRules - Cell: cellClass or cellClassRules - Easy to style |
- General style: global CSS - Row: getRowClassName - Cell: cellClassName |
- Normal CSS styling - Verbose for specific classes demo |
- Verbose customizations via childComponents | - General style only - No specific row/cell styling |
- CSS only, no classNames |
Filtering | - General filter - quickFilterText for quick filtering- Column filter |
- General and quick filter via quick filter - Column filter |
- General filter using global filtering - Column filter using column-filtering |
- Search and header filter via search and header filter | - General filter via search props - No column filter |
- General and column filter, extending existing filters |
Sorting | No extra config needed | No extra config needed | - Configurable via sorting | - Via sortingMode parameter |
- Via sort props | No extra config needed |
Edit Cell | - onCellEditingStopped |
- onCellEditStop |
- Requires custom input component setup demo |
- editableCells parameter |
- Not available | - Via shouldAcceptEdit |
Price | Free basic features | Free | Free | Free | Free | Starts at $395 per developer/year |
Demo | View demoAGGrid.tsx |
View demoMuiDataGrid.tsx |
View demo | View demo | View demoGridJS.tsx |
View demo |
- tailwind style ✅
- general table style: global css
- row:
rowClass
orrowClassRules
- cell:
cellClass
orcellClassRules
- easy, flexible and simple to style with tailwind or global css
- filtering ✅
- general filter
quickFilterText
param withquickFilterText
state
- column filter
- no extra config needed
- general filter
- sorting ✅
- no extra config needed
- cell edit ✅
- can use
onCellEditingStopped
- can use
- price 🎁
- free for the basic required features
- https://www.ag-grid.com/license-pricing/ - (community package)
- example at
app/AGGrid.tsx
- tailwind style ✅
- general table style: global css
- row:
getRowClassName
- cell:
cellClassName
- filtering ✅
- general filter
- possible with quick filter
- column filter
- no extra config needed
- general filter
- sorting ✅
- no extra config needed
- cell edit ✅
- can use
onCellEditStop
- can use
- price 🎁
- free
- example at
app/MuiDataGrid.tsx
- tailwind style
- general table style, rows and cells can be style as normal table components using css - it can probably be able to use classNames on 't' (table) component, but it will be a lot more verbose - demo
- filtering ✅
- general filter
- by using global filtering
- column filter
- by using column-filtering
- general filter
- sorting ✅
- by using sorting
- cell edit ✅
- can be done, but it is more verbose as it has to create it's on input component config it to the column that should be editable - demo
- price 🎁
- free
- demos
- tailwind style ✅
- general table style, rows and cells are not so simple to customize but can be done by childComponents - it is more verbose and harder to style an specific row/cell.
- filtering ✅
- general filter
- possible with search
- header filter
- general filter
- sorting ✅
- possible using param
sortingMode
- possible using param
- cell edit ✅
- can use
editableCells
param
- can use
- price 🎁
- free
- demos
- tailwind style
- general table style: className ✅
- styling specific row or cell it is not possible ❌
- filtering
- general filter ✅
- possible with search props
- column filter ❌
- general filter ✅
- sorting ✅
- possible with sort props
- cell edit ❌
- price 🎁
- free
- example at
app/GridJS.tsx
- tailwind style ❌
- filtering ✅
- general filter
- possible with Extending existing filters
- column filter
- no extra config needed
- general filter
- sorting ✅
- no extra config needed
- cell edit ✅
- can use shouldAcceptEdit
- price 💶
- tailwind style ✅
- can use className, probably with some limitation
- filtering ✅
- general filter
- possible with External Filtering with Input
- column filter
- no extra config needed
- general filter
- sorting ✅
- no extra config needed
- cell edit ✅
- can use
enterEdit
onCellRender
- can use
- price 💶
npm run dev
Open http://localhost:3000 with your browser to see the result.
You can test and check some data grid examples by uncommenting the component on page app/page.tsx
.