DEV Community

loading...
Cover image for Best React Data-Table Library for 2021

Best React Data-Table Library for 2021

codedthemes profile image CodedThemes ・7 min read

Alt Text

To represent data effectively table is one of the best ways to arrange information in an interactive way. Manually creating and styling a table is no longer efficient. React has a much wide variety of data table libraries. A ready-to-use library saves the developer time and costs and tale less effort.

Before using a table make sure to publish and manage your customized tables in cloud component hubs like Bit (Github). It’ll save you time and make sure you don’t bore yourself to death by repeating yourself.

Let’s lookout for the most popular React table libraries:

Material table

Material table is a powerful way of representing data in table format in react application. It is following the material design concept. It is one of the most popular open-source libraries available in the React space and provides different individual components. These components can be used to tackle the styling depending on the complexity.

This is one of the most used React Table libraries with more than 2,300 stars on GitHub.

Advantages

•Actions based on one or multiple rows

•Feature-packed (Custom Column Rendering, Editable, Detail panel for each row)

•Export to CSV

•Many properties that can be used to customize the UI and behavior

•Extensive documentation

To see it in action, install the library by running the following commands in a React app from a terminal window:

yarn add material-table @material-ui/core 
npm install @material-ui/core
npm install material-table
Enter fullscreen mode Exit fullscreen mode

Import the material-icons library in one of the two following methods:

1. Directly reference the style sheet in HTML:

<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
Enter fullscreen mode Exit fullscreen mode

2. Install Material Icons:

npm install @material-ui/icons
Enter fullscreen mode Exit fullscreen mode

create a component named MaterialTable.js and import material-table.

import MaterialTable from "material-table";

Initialize the table data inside the function “Table” as follows.
export const Table = () => {
      const data = [
        { name: "John", email: "john@gmail.com", age: 12, gender: "Male" },
        { name: "Bren", email: "bren@gmail.com", age: 24, gender: "Male" },
        { name: "Marry", email: "marry@gmail.com", age: 18, gender: "Female" },
        { name: "Shohail", email: "shohail@gmail.com", age: 25, gender: "Male" },
        { name: "Aseka", email: "aseka@gmail.com", age: 19, gender: "Female" },
        { name: "Meuko", email: "meuko@gmail.com", age: 12, gender: "Female" },
      ];
    };
Enter fullscreen mode Exit fullscreen mode

Let’s define the columns for the material data table as follows:

const columns = [
        {
          title: "Name",
          field: "name",
        },
        {
          title: "Email",
          field: "email",
        },
        {
          title: "Age",
          field: "age",
        },
        {
          title: "Gender",
          field: "gender",
        },
      ];
Enter fullscreen mode Exit fullscreen mode

Now bind the columns in a MaterialTable tag within the return statement as follows:

return (

        <MaterialTable title="Employee Details" data={data} columns={columns} />
      );
Enter fullscreen mode Exit fullscreen mode

Define the MaterialTable in the App.js file. Some options can be defined along with the table definition as follows:

<MaterialTable
          title="Employee Details"
          data={data}
          columns={columns}
          options={{ search: true, paging: false, filtering: true, exportButton: true }}
    />
Enter fullscreen mode Exit fullscreen mode

Finally, import the table component into the App.js file as follows:

function App() {
      return (
        <div className="app">
          <div className="containers">
            <Table></Table>
          </div>
        </div>
      );
    }
Enter fullscreen mode Exit fullscreen mode

RC table

RC table table is another simple and light weight React table library with 650+ github stars. It is ideal if you want to use your own styling on top of the existing behaviour.

Advantages

•Light-weight

•Filter data via dropdown menus on the column headings

•Many examples with source code

Disadvantage

•Less documentation

Start by installing the corresponding library.

npm install rc-table
Enter fullscreen mode Exit fullscreen mode

Create a component named RcTable.js and import the rc-table module:

import Table from "rc-table";
Enter fullscreen mode Exit fullscreen mode

Now define the columns of the table within the export statement as follows:

export const Rctable = () => {
      const columns = [
        {
          title: "Name",
          dataIndex: "name",
          key: "name",
          width: 100,
        },
        {
          title: "Age",
          dataIndex: "age",
          key: "age",
          width: 100,
        },
        {
          title: "Email",
          dataIndex: "email",
          key: "email",
          width: 200,
        },
        {
          title: "Permanent",
          dataIndex: "permanent",
          key: "permanent",
          width:100,
        },
      ];
    };
Enter fullscreen mode Exit fullscreen mode

Insert some data to be displayed in the table:

const data = [
        {
          name: "Jack",
          age: 28,
          email: "jack@gmail.com",
          key: "1",
          permanent: "yes",
        },
        {
          name: "Rose",
          age: 36,
          email: "rose@gmail.com",
          key: "2",
          permanent: "no",
        },]
Enter fullscreen mode Exit fullscreen mode

Now bind the columns in a Table tag within the return statement as follows:

return (
        <Table
          columns={columns}
          data={data}
          tableLayout="auto"
        />
      );
Enter fullscreen mode Exit fullscreen mode

To render a table, import the RcTable component into the App.js file:

import { Rctable } from "./components/rctable";
    function App() {
      return (
        <div className="app">
          <div className="containers">
            <Rctable />
          </div>
        </div>
      );
    }
Enter fullscreen mode Exit fullscreen mode

Rsuite-Table

This is versatile React Table component that supports virtualization, fixed headers and columns, tree views, and much more. One of the best things about this library, it makes sorting pretty simple.

Advantages

•Uncommon features (Right-to-left, adjustable column widths, expandable child nodes)

•Many components (Loaders, Buttons, Modals)

•Extensive documentation

Disadvantages

•Customizing styling can be complicated due to the complex default styling rules

**Install the relevant package via NPM:

npm install rsuite-table
Enter fullscreen mode Exit fullscreen mode

Now create a component named rsuiteTable.js and import the rsuite-table module:

import { Table } from "rsuite-table";
Create a JSON file named users.json and add a list of users to it:
[{
            "id": 1,
            "avartar": "https://s3.amazonaws.com/uifaces/faces/twitter/justinrob/128.jpg",
            "city": "New Amieshire",
            "email": "Leora13@yahoo.com",
            "firstName": "Ernest Schuppe SchuppeSchuppeSchuppeSchuppeSchuppeSchuppe Schuppe",
            "lastName": "Schuppe",
            "street": "Ratke Port",
            "zipCode": "17026-3154",
            "date": "2016-09-23T07:57:40.195Z",
            "bs": "global drive functionalities",
            "catchPhrase": "Intuitive impactful software",
            "companyName": "Lebsack - Nicolas",
            "words": "saepe et omnis",
            "sentence": "Quos aut sunt id nihil qui.",
            "stars": 820,
            "followers": 70
        }
]
Enter fullscreen mode Exit fullscreen mode

Import the users.json and rsuite-table.css files into the rsuiteTable.js:

import fakeData from "./users.json";
import "rsuite-table/dist/css/rsuite-table.css";
Enter fullscreen mode Exit fullscreen mode

Now create an export function which includes the following code snippet to defined the columns of the table along with their individual options:

export const Rsuittable = () => {
      const [fakeDatum] = useState(fakeData);


      return (
        <Table data={fakeDatum} height={400}>
          <Column width={100} align="center" fixed resizable>
            <HeaderCell>ID</HeaderCell>
            <Cell dataKey="id" />
          </Column>
          <Column width={150} align="center" fixed resizable>
            <HeaderCell>First Name</HeaderCell>
            <Cell dataKey="firstName" />
          </Column>
          <Column width={150} align="center" fixed resizable>
            <HeaderCell>Last Name</HeaderCell>
            <Cell dataKey="lastName" />
          </Column>
          <Column width={200} align="center" sortable fixed resizable>
            <HeaderCell>City</HeaderCell>
            <Cell dataKey="city" />
          </Column>
          <Column width={300} align="center" sortable={true} fixed resizable>
            <HeaderCell>Street</HeaderCell>
            <Cell dataKey="street" />
          </Column>
          <Column width={300} align="center" fixed resizable>
            <HeaderCell>Company Name</HeaderCell>
            <Cell dataKey="companyName" />
          </Column>
          <Column width={200} align="center" fixed resizable>
            <HeaderCell>Email</HeaderCell>
            <Cell dataKey="email" />
          </Column>
          <Column width={120} fixed="right">
            <HeaderCell>Action</HeaderCell>
            <Cell>
              {(rowData) => {
                function handleAction() {
                  alert(`id:${rowData.id}`);
                }
                return (
                  <span>
                    <a onClick={handleAction}>
                      {" "}
                      <b>Edit</b>{" "}
                    </a>{" "}
                    |
                    <a onClick={handleAction}>
                      {" "}
                      <b>Remove</b>{" "}
                    </a>
                  </span>
                );
              }}
            </Cell>
          </Column>
        </Table>
      );
    };

Import Rsuittable.js component into the App.js file.
import { Rsuittable } from "./components/rsuitTable";
    function App() {
      return (
        <div className="app">
          <div className="containers">
            <Rsuittable />
          </div>
        </div>
      );
    }
Enter fullscreen mode Exit fullscreen mode

React-Table

React-Table is alight weight, fast, easy to customize and extendable data grid built for React applications. It is fully controllable via optional props and callbacks. Its 11,000+ stars on GitHub make it an excellent option for any React Application.

Advantages

•Simple design with easy customization

•Supports both client-side and server-side pagination

•Supports Pivoting and Aggregation

Disadvantages

•Minimal documentation

Install the corresponding packages via NPM:

npm install react-table
Enter fullscreen mode Exit fullscreen mode

Create a component named reactTable.js and import the react-table module:

import { useTable } from "react-table";

Now create an export function named Reacttable:
export const Reacttable = () => {}
Enter fullscreen mode Exit fullscreen mode

Insert the following code inside the above export function to define the columns of the table:

const columns = [
        {
          Header: "Name",
          accessor: "name",
        },
        {
          Header: "Age",
          accessor: "age",
        },
        {
          Header: "Email",
          accessor: "email",
        },
        {
          Header: "City",
          accessor: "city",
        },
      ];
Enter fullscreen mode Exit fullscreen mode

Add the data to be displayed on the table:

const data = [
        {
          name: "Ayaan",
          age: 26,
          email:'ayaan@gmail.com',
          city:'Colombo'
        },
        {
          name: "Ahana",
          age: 22,
          email:'ahana@gmail.com',
          city:'Kandy'
        }
]
Enter fullscreen mode Exit fullscreen mode

Use the useTable property from the react-table module as follows to define its behaviour:

const {
        getTableProps,
        getTableBodyProps,
        headerGroups,
        rows,
        prepareRow,
      } = useTable({
        columns,
        data,
      });
Enter fullscreen mode Exit fullscreen mode

Add the following code inside the return statement to return the table with its column, options, and data:

return (
        <table {...getTableProps()}>
          <thead>
            {headerGroups.map((headerGroup) => (
              <tr {...headerGroup.getHeaderGroupProps()}>
                {headerGroup.headers.map((column) => (
                  <th {...column.getHeaderProps()}>{column.render("Header")}</th>
                ))}
              </tr>
            ))}
          </thead>
          <tbody {...getTableBodyProps()}>
            {rows.map((row, i) => {
              prepareRow(row);
              return (
                <tr {...row.getRowProps()}>
                  {row.cells.map((cell) => {
                    return <td {...cell.getCellProps()}>{cell.render("Cell")}</td>;
                  })}
                </tr>
              );
            })}
          </tbody>
        </table>
      );
Enter fullscreen mode Exit fullscreen mode

Import the Reacttable component into the App.js file.

import { Reacttable } from "./components/reactTable";
    function App() {
     return (
     <div className="app">
     <div className="containers">
     <Reacttable />
     </div>
     </div>
     );
    }
Enter fullscreen mode Exit fullscreen mode

Material-UI-datatables

Material-UI-data tables another Table library based on the Material UI design to build responsive data tables. It has three responsive modes “vertical”, “Standard” and “Simple” for mobile devices. It is well accepted with more than 1,500 stars on GitHub.

Advantages

•Provides custom components and styling

•Highly responsive for any device

•Simplify processes like filtering, view/hide columns, pagination, sorting

•Clear and detailed documentation

Disadvantages

•Does not support localization through external libraries

**Start by installing the material-ui/core and material-fonts libraries as mui-datatables requires them:

npm install @material-ui/core @material-ui/icon
Enter fullscreen mode Exit fullscreen mode

Now install the mui-datatables package:

npm install mui-datatables
Enter fullscreen mode Exit fullscreen mode

Create a component named muidataTable.js and import the mui-datatables package:

import MUIDataTable from "mui-datatables";
Enter fullscreen mode Exit fullscreen mode

Now define the columns required for the table:

const columns = [
        {
          name: "name",
          label: "Name",
          options: {
            filter: true,
            sort: true,
          },
        },
        {
          name: "company",
          label: "Company",
          options: {
            filter: true,
            sort: false,
          },
        },
        {
          name: "city",
          label: "City",
          options: {
            filter: true,
            sort: false,
          },
        },
        {
          name: "state",
          label: "State",
          options: {
            filter: true,
            sort: false,
          },
        },
      ];
Enter fullscreen mode Exit fullscreen mode

Next, insert some raw data to be displayed in the table:

const data = [
        {
          name: "Joe James",
          company: "Test Corp",
          city: "Yonkers",
          state: "NY",
        },
        {
          name: "John Walsh",
          company: "Test Corp",
          city: "Hartford",
          state: "CT",
        }
]
Enter fullscreen mode Exit fullscreen mode

Make sure to enter the filter type in options as follows:

const options = {
        filterType: "checkbox",
      };
Enter fullscreen mode Exit fullscreen mode

Bind the columns in a MUIDataTable tag in the return statement as follows:

return (
        <MUIDataTable
          title={"Employee List"}
          data={data}
          columns={columns}
          options={options}
        />
      );
Enter fullscreen mode Exit fullscreen mode

Import the muidataTable component into the App.js file as follows:

import { Muitable } from "./components/muidataTable";


    function App() {
      return (
        <div className="app">
          <div className="container">
            <Muitable />
          </div>
        </div>
      );
    }
Enter fullscreen mode Exit fullscreen mode

Conclusion

Like any other React Library, the libraries in our list give developers a head start by allowing them to avoid the hassles of designing the behavior and styling of tables, which are commonly used in React and all types of applications.

Discussion (0)

pic
Editor guide