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 ()
• 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 ?

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 ?

• javascript
• reactjs

• What do you mean by "responsive", to screen size? And what is "dropdown filter using states"? FWIW, I have used Ag-grid with some success in the past, but for use with Redux the one that did the job was React-virtualized. – JulienD Commented Sep 11, 2017 at 7:12
• Try both and do the evaluation based on your real scenario? From what I can tell, I tested a lot of table engines and ended up writing my own engine ;) – larrydahooster Commented Sep 11, 2017 at 8:28
• which one did you use finally? – Gunjan Commented Apr 15, 2021 at 10:43

4 Answers 4

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

Have you tried looking into ReactTable?

ReactTable tables have built-in functionality for ascending / descending order-sorting when clicking on the column header.

In terms of creating a search filter, it has that functionality as well.

You may have to build the dropdown filter yourself but I believe ReactTable should provide you with a base to complete most of what you are looking to do.

React-table doesn't offer responsive width, though.

I hope this helps!

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

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

I have tried many solutions, however, the easiest one I had got working, was react-table.

Install React-table using npm - npm i react-table. Ref: https://www.npmjs.com/package/react-table.

React table Custom filtering solution - This is how I did a custom filter with react-table..

<ReactTable
          data={data}
          filterable
          defaultFilterMethod={(filter, row) =>
            String(row[filter.id]) === filter.value}
          columns={[
            {
              Header: "Name",
              columns: [
                {
                  Header: "First Name",
                  accessor: "firstName",
                  filterMethod: (filter, row) =>
                    row[filter.id].startsWith(filter.value) &&
                    row[filter.id].endsWith(filter.value)
                },

{
                  Header: "Over 21",
                  accessor: "age",
                  id: "over",
                  Cell: ({ value }) => (value >= 21 ? "Yes" : "No"),
                  filterMethod: (filter, row) => {
                    if (filter.value === "all") {
                      return true;
                    }
                    if (filter.value === "true") {
                      return row[filter.id] >= 21;
                    }
                    return row[filter.id] < 21;
                  },
                  Filter: ({ filter, onChange }) =>
                    <select
                      onChange={event => onChange(event.target.value)}
                      style={{ width: "100%" }}
                      value={filter ? filter.value : "all"}
                    >
                      <option value="all">Show All</option>
                      <option value="true">Can Drink</option>
                      <option value="false">Can't Drink</option>
                    </select>
                }