Category: React

Tables are common in web applications. As there are so many free table libraries available, creating and styling a Reactjs table manually is not necessary. So, we’ve carefully chosen a list of the top ReactJS table libraries. We’ll go through all the benefits and drawbacks of each library. Also, we will learn all the installation processes and examples.

As React has such a large ecosystem, there are numerous third-party reactjs table libraries. So, let us look at some of the best Reactjs Table Libraries.

1. Material Table – Reactjs Table

In a React application, the material table is a powerful way to represent data in a table format. Moreover, the elements are styled by Material UI guidelines. It is one of the most popular open-source libraries in the React space and offers a variety of individual components. Depending on the complexity, we can use these components to tackle the styling. This library’s most recent version requires a minimum React version of 16.8.5.

Install the library in a React app from a terminal window and run the following commands to see it in action:

yarn add material-table @material-ui/core

Then include Material Icons. There are two approaches to this. The first method is to simply import the Material Icons font into the file using HTML. public/index.html:

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

Alternatively, you can install the @material-ui/icons package in the React app:

yarn add @material-ui/icons

The data provided to a React app in a real-world application comes from an external API. Inside the src/ directory, create a new file called  data.js  and add the following code snippet:

export const data = [
  {
    id: 1,
    title: 'The Hunger Games',
    authors: 'Suzanne Collins',
    num_pages: 374,
    rating: 4.33
  },
  {
    id: 2,
    title: 'Harry Potter and the Order of the Phoenix',
    authors: 'J.K. Rowling',
    num_pages: 870,
    rating: 4.48
  },
  {
    id: 3,
    title: 'To Kill a Mockingbird',
    authors: 'Harper Lee',
    num_pages: 324,
    rating: 4.27
  },
  {
    id: 4,
    title: 'Pride and Prejudice',
    authors: 'Jane Austen',
    num_pages: 279,
    rating: 4.25
  },
  {
    id: 5,
    title: 'Twilight',
    authors: 'Stephenie Meyer',
    num_pages: 498,
    rating: 3.58
  },
  {
    id: 6,
    title: 'The Book Thief',
    authors: 'Markus Zusak',
    num_pages: 552,
    rating: 4.36
  }
];

Then create a new file called MTable.js and import the material-table library and the array of dummy data:

import MaterialTable from 'material-table';
import { data } from '../data';

Since material-table is a React component, you can define a custom component like this:

const MTable = () => {
  //...
};
export default MTable;

The material-table library anticipates receiving two props. The prop  data  is used to display the data in a row format. The number of columns is defined by another prop  columns . It is an array that expects the title of each column as the heading of the specific column and the original  field:

const columns = [
  { title: 'Title', field: 'title' },
  { title: 'Author', field: 'authors' },
  { title: 'Page Count', field: 'num_pages' },
  { title: 'Rating', field: 'rating' }
];

A third prop on the<MaterialTable /> a component called  title can be used to give the table a title as shown below:

return (
  <div style={{ maxWidth: '100%' }}>
    <MaterialTable columns={columns} data={data} title='Books Directory' />
  </div>
);

To see it in action, import the custom table component in the App.js file:

import MTable from './components/MTable';
function App() {
  return (
    <div style={{ padding: '30px' }}>
      <h1>Material Table Example</h1>
      <MTable />
    </div>
  );
}
export default App;

By default, the material-table library displays a search bar and pagination.

You can customize the view of the table by adding a fourth prop called options that is an object and is used to customize the table.

Add the following prop to <MaterialTable/>:

import { useState } from 'react';
import MaterialTable from 'material-table';
import { data } from '../data';
const MTable = () => {
  const [selectedRow, setSelectedRow] = useState(null);
  const columns = [
    { title: 'Title', field: 'title' },
    { title: 'Author', field: 'authors' },
    { title: 'Page Count', field: 'num_pages' },
    { title: 'Rating', field: 'rating' }
  ];
  return (
    <div style={{ maxWidth: '100%' }}>
      <MaterialTable
        columns={columns}
        data={data}
        title='Books Directory'
        onRowClick={(evt, selectedRow) =>
          setSelectedRow(selectedRow.tableData.id)
        }
        options={{
          search: false,
          rowStyle: rowData => ({
            backgroundColor:
              selectedRow === rowData.tableData.id ? '#67aeae' : '#FFF'
          })
        }}
      />
    </div>
  );
};
export default MTable;

Here is the output:

GitHub Official Documentation

2. React Bootstrap Table2

If you’re using Bootstrap-based UI components in your React app, react-react-bootstrap-table2 is a perfect match for displaying data tables and using the same design system. It has a cleaner design and a smaller bundle size, which eliminates the need to handle too much business logic.

To install it in a React app, run the following command from a terminal window:

yarn add react-bootstrap-table-next

Then, import the Bootstrap CSS library into the React app. This is usually done inside the App.js or index.js file:

import 'react-bootstrap-table-next/dist/react-bootstrap-table2.min.css';

Then, create a custom component file called BTable.js and import the component BootstrapTable from the react-bootstrap-table-next library.

import BootstrapTable from 'react-bootstrap-table-next';
import { data } from '../data';

Each data array field you want to display as an object is here as an array. The value of  dataField  reflects the actual field from the  data  array, while the text  in each object represents the custom header name of each column:

const BTable = () => {
  const columns = [
    { text: 'Title', dataField: 'title' },
    { text: 'Author', dataField: 'authors' },
    { text: 'Page Count', dataField: 'num_pages' },
    { text: 'Rating', dataField: 'rating' }
  ];
  return (
    <div style={{ maxWidth: '100%' }}>
      <BootstrapTable columns={columns} data={data} keyField='id' />
    </div>
  );
};
export default BTable;

Here is a basic table output:

There are two methods for creating custom settings. The first is to provide fundamental capabilities such as sorting data in columns here, in this manner:

const columns = [
  { text: 'Title', dataField: 'title', sort: true },
  { text: 'Author', dataField: 'authors' },
  { text: 'Page Count', dataField: 'num_pages' },
  { text: 'Rating', dataField: 'rating', sort: true }
];

In the preceding code snippet, we add a third property sort with a boolean value of true to the data fields title and rating. This enables sorting in these two columns based on ascending and descending values.

GitHub Official Documentation

3. MUI Datatables

This list includes yet another Material UI-based data table component. If you’re using a Material UI-based design system in your React project, MUI-Datatables is a great way to represent data tables. Filtering, row selection, searching, exporting to CSV format, sorting, and other features are available.

To see it in action, install it in a React project first:

yarn add mui-datatables @material-ui/core @material-ui/icons

Then, in MUITable.js, create a custom component file and import the component frommui-datatables. Let’s use the same dummy data set to display the data inside the table component, so import it from thesrc/data.jsfile as well:

import MUIDataTable from 'mui-datatables';
import { data } from '../data';

columns are here as an array, and each field from the data array that you want to display as an object is here as an object. Each object’s label represents the column’s custom header name:

const MUITable = () => {
  const columns = [
    { label: 'Title', name: 'title' },
    { label: 'Author', name: 'authors' },
    { label: 'Page Count', name: 'num_pages', options: { sort: true } },
    { label: 'Rating', name: 'rating' }
  ];
  const options = {
    filterType: 'checkbox'
  };
  return (
    <div style={{ maxWidth: '100%' }}>
      <MUIDataTable
        columns={columns}
        data={data}
        title='Books Directory'
        options={options}
      />
    </div>
  );
};
export default MUITable;

Other features such as searching, hiding a specific column, and filtering a value are also here.

GitHub Official Documentation

4. react virtualized – Reactjs Table

This is now a multi-purpose component library that supports large lists and tables of data. It supports simple table forms as well as grid, masonry, list, and collection formats for data tables. Because it supports a variety of formats and dynamic data lists, it is one of the most popular open-source component libraries on this list.

Install it in a React app by running the following command from a terminal window:

yarn add react-virtualized

Now you have to import react-virtualized/styles.css:

import { Column, Table } from 'react-virtualized';
import 'react-virtualized/styles.css';
import { data } from '../data';

The Column component shows each component. It accepts a label prop that projects the header title of the column. The dataKey prop represents the field in the data array and a custom value for width for each column:

const RVTable = () => {
  return (
    <div style={{ maxWidth: '100%' }}>
      <Table
        headerHeight={20}
        width={920}
        height={300}
        rowHeight={30}
        rowGetter={({ index }) => data[index]}
        rowCount={data.length}
      >
        <Column label='Title' dataKey='title' width={400} />
        <Column label='Author' dataKey='authors' width={200} />
        <Column label='Pages' dataKey='num_pages' width={100} />
        <Column label='Rating' dataKey='rating' width={100} />
      </Table>
    </div>
  );
};
export default RVTable;

Here is the output:

GitHub Official Documentation

5. React Table – Reactjs Table

React Table is a small package that allows you to display data in a table format. It is a utility library rather than a table component library, as are the other libraries on this list.

To see it in action, first install it in a terminal window by typing the following command:

yarn add react-table

Then, name your custom component file RTTable.js. Because it supports React hooks, import the hook useTable from the the react-table library.

import BootstrapTable from 'react-bootstrap-table-next';
import { data } from '../data';

To define the structure of the columns of the table, add the following:

const RTTable = () => {
  const columns = [
    {
      Header: 'Title',
      accessor: 'title'
    },
    {
      Header: 'Author',
      accessor: 'authors'
    },
    {
      Header: 'Pages',
      accessor: 'num_pages'
    },
    {
      Header: 'Rating',
      accessor: 'rating'
    }
  ];
  //...
};
export default RTTable;

The accessor property has the same value as the key in the data array. To ensure that the array of data is recreated on every render, React Table library recommends the use of the useMemo hook.

import { useMemo } from 'react';
import { useTable } from 'react-table';
import { data as mockData } from '../data';
const RTTable = () => {
  const data = useMemo(() => mockData, []);
  const columns = useMemo(
    () => [
      {
        Header: 'Title',
        accessor: 'title'
      },
      {
        Header: 'Author',
        accessor: 'authors'
      },
      {
        Header: 'Pages',
        accessor: 'num_pages'
      },
      {
        Header: 'Rating',
        accessor: 'rating'
      }
    ],
    []
  );
  // ...
};

Only when the memoized value is changed does React Table calculate the columns based on the data provided. After defining the columns and data array, pass them as arguments to the useTable hook to create a table instance.

const tableInstance = useTable({ columns, data });
const {
  getTableProps,
  getTableBodyProps,
  headerGroups,
  rows,
  prepareRow
} = tableInstance;
return (
  <table {...getTableProps()} style={{ border: 'solid 1px blue' }}>
    <thead>
      {headerGroups.map(headerGroup => (
        <tr {...headerGroup.getHeaderGroupProps()}>
          {headerGroup.headers.map(column => (
            <th
              {...column.getHeaderProps()}
              style={{
                background: '#657',
                color: 'white',
                fontWeight: 'bold'
              }}
            >
              {column.render('Header')}
            </th>
          ))}
        </tr>
      ))}
    </thead>
    <tbody {...getTableBodyProps()}>
      {rows.map(row => {
        prepareRow(row);
        return (
          <tr {...row.getRowProps()}>
            {row.cells.map(cell => {
              return (
                <td
                  {...cell.getCellProps()}
                  style={{
                    padding: '10px',
                    border: 'solid 0.6px gray',
                    background: '#fff'
                  }}
                >
                  {cell.render('Cell')}
                </td>
              );
            })}
          </tr>
        );
      })}
    </tbody>
  </table>
);

Here is the output for the above basic example:

GitHub  Official Documentation Examples 

A Bonus React Table Library – Awesome React Tables 👌🥳

GitHub Official Documentation Examples

Wrapping Up

These component libraries’ purpose is to provide a good development experience while allowing you to represent data in a table. Because of the development costs, some of the integrations these libraries provide are difficult to establish from scratch. Therefore, we’ve gone over all of the steps you’ll need to take to put them into action. With these items, we conclude this blog post on Best React Table Libraries.

Thank you for reading.

Our Reactjs Product

Similar Blog Posts

• Free React Date Picker Components
• Open Source React Chart Libraries
• React Boilerplates You Should Not Miss
• Admin Templates with React
• React Static Site Generators