React table filtering & responsive

Question

I want to create table using react that should have following functionality

• search filter using name filter
• dropdown filter using states
• ascending and descending order sorting when clicking on the column header.
• Make table responsive

You can assume following data - var data = [{name: 'zz',state: 'ua'},{name: 'hhj',state: 'op'}]

I've search following react plugins for table functionality -

• React Griddle (https://github.com/griddlegriddle/griddle)
• React data grid (https://github.com/adazzle/react-data-grid)

While looking into stars at the github, It seems react griddle is better but What would be best plugin to achieve the goal ?

Answer 1

You can check my table implementation that build on material-ui library.

https://github.com/mbrn/material-table

Answer 2

I spent the day reading about all the plugins available with more than 100 stars or forks. I've been using react-table the last months but it hasn't been updated in months, his creator wrote in an issue that he's planning to release the upgrade in 6 months (too late for some of us).

The requirement more difficult to find is "make table responsive". Only two of then fulfilled this requirement: react-data-grid and tabulator. Both repositories were created more than 2 years ago, have more than 1000 commits and have been updated during the last week.

react-data-grid: Its not fully responsive but at least it keep the first column fixed, it has a very good demo and documentation written specifically for React

tabulator: Its full responsive with an option called Responsive Layout Collapsed List but its documentation is not written specifically for React, since it can be used with Vue and Angular too.

TL:DR; For an advanced front-end dev I would recommend tabulator, for a junior developer I would recommend react-data-grid to not struggle creating your tables