jeff-moraes / data-grid-tailwind-example Goto Github PK

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

• tailwind style ✅
  • general table style: global css
  • row: rowClass or rowClassRules
  • cell: cellClass or cellClassRules
  • easy, flexible and simple to style with tailwind or global css
• filtering ✅
  • general filter
    • quickFilterText param with quickFilterText state
  • column filter
    • no extra config needed
• sorting ✅
  • no extra config needed
• cell edit ✅
  • can use onCellEditingStopped
• 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
• sorting ✅
  • no extra config needed
• cell edit ✅
  • can use onCellEditStop
• 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
• 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
• sorting ✅
  • possible using param sortingMode
• cell edit ✅
  • can use editableCells param
• 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 ❌
• sorting ✅
  • possible with sort props
• cell edit ❌
• price 🎁
  • free
• example at app/GridJS.tsx

• tailwind style ❌
  • can't use className only pure css
• filtering ✅
  • general filter
    • possible with Extending existing filters
  • column filter
    • no extra config needed
• sorting ✅
  • no extra config needed
• cell edit ✅
  • can use shouldAcceptEdit
• price 💶
  • start from 395 per developer / year

• tailwind style ✅
  • can use className, probably with some limitation
• filtering ✅
  • general filter
    • possible with External Filtering with Input
  • column filter
    • no extra config needed
• sorting ✅
  • no extra config needed
• cell edit ✅
  • can use enterEdit on CellRender
• price 💶
  • start from 999 per developer

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.