{"id":11086,"date":"2022-04-11T10:16:00","date_gmt":"2022-04-11T10:16:00","guid":{"rendered":"https:\/\/ui-lib.com\/blog\/?p=11086"},"modified":"2022-08-04T07:18:32","modified_gmt":"2022-08-04T07:18:32","slug":"reactjs-table-libraries","status":"publish","type":"post","link":"https:\/\/ui-lib.com\/blog\/reactjs-table-libraries\/","title":{"rendered":"Top ReactJS Table Libraries in 2022"},"content":{"rendered":"\n

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. <\/p>\n\n\n\n

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.<\/p>\n\n\n\n

1. Material Table – Reactjs Table<\/h2>\n\n\n\n

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<\/code>.<\/p>\n\n\n\n

Install the library in a React app from a terminal window and run the following commands to see it in action:<\/p>\n\n\n\n

yarn add material-table @material-ui\/core<\/pre>\n\n\n\n
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<\/code>:<\/p>\n\n\n\n
<link\n  rel=\"stylesheet\"\n  href=\"https:\/\/fonts.googleapis.com\/icon?family=Material+Icons\"\n\/><\/pre>\n\n\n\n
Alternatively, you can install the @material-ui\/icons<\/code> package in the React app:<\/p>\n\n\n\n
yarn add @material-ui\/icons<\/pre>\n\n\n\n
The data provided to a React app in a real-world application comes from an external API. Inside the src\/<\/code> directory, create a new file called  data.js<\/code>  and add the following code snippet:<\/p>\n\n\n\n
export const data = [\n  {\n    id: 1,\n    title: 'The Hunger Games',\n    authors: 'Suzanne Collins',\n    num_pages: 374,\n    rating: 4.33\n  },\n  {\n    id: 2,\n    title: 'Harry Potter and the Order of the Phoenix',\n    authors: 'J.K. Rowling',\n    num_pages: 870,\n    rating: 4.48\n  },\n  {\n    id: 3,\n    title: 'To Kill a Mockingbird',\n    authors: 'Harper Lee',\n    num_pages: 324,\n    rating: 4.27\n  },\n  {\n    id: 4,\n    title: 'Pride and Prejudice',\n    authors: 'Jane Austen',\n    num_pages: 279,\n    rating: 4.25\n  },\n  {\n    id: 5,\n    title: 'Twilight',\n    authors: 'Stephenie Meyer',\n    num_pages: 498,\n    rating: 3.58\n  },\n  {\n    id: 6,\n    title: 'The Book Thief',\n    authors: 'Markus Zusak',\n    num_pages: 552,\n    rating: 4.36\n  }\n];<\/pre>\n\n\n\n
Then create a new file called MTable.js<\/code> and import the material-table library and the array of dummy data:<\/p>\n\n\n\n
import MaterialTable from 'material-table';\nimport { data } from '..\/data';<\/pre>\n\n\n\n
Since material-table is a React component, you can define a custom component like this:<\/p>\n\n\n\n
const MTable = () => {\n  \/\/...\n};\nexport default MTable;<\/pre>\n\n\n\n
The material-table library anticipates receiving two props. The prop  data<\/code>  is used to display the data in a row format. The number of columns is defined by another prop  columns<\/code> . It is an array that expects the title of each column as the heading of the specific column and the original  field<\/code>:<\/p>\n\n\n\n
const columns = [\n  { title: 'Title', field: 'title' },\n  { title: 'Author', field: 'authors' },\n  { title: 'Page Count', field: 'num_pages' },\n  { title: 'Rating', field: 'rating' }\n];<\/pre>\n\n\n\n
A third prop on the<MaterialTable \/><\/code> a component called  title<\/code> can be used to give the table a title as shown below:<\/a><\/p>\n\n\n\n
return (\n  <div style={{ maxWidth: '100%' }}>\n    <MaterialTable columns={columns} data={data} title='Books Directory' \/>\n  <\/div>\n);<\/pre>\n\n\n\n
To see it in action, import the custom table component in the App.js<\/code> file:<\/p>\n\n\n\n
import MTable from '.\/components\/MTable';\nfunction App() {\n  return (\n    <div style={{ padding: '30px' }}>\n      <h1>Material Table Example<\/h1>\n      <MTable \/>\n    <\/div>\n  );\n}\nexport default App;<\/pre>\n\n\n\n
By default, the material-table library displays a search bar and pagination.<\/p>\n\n\n\n
\"reactjs<\/figure><\/div>\n\n\n\n
You can customize the view of the table by adding a fourth prop called options<\/code> that is an object and is used to customize the table.<\/p>\n\n\n\n
Add the following prop to <MaterialTable\/><\/code>:<\/p>\n\n\n\n
import { useState } from 'react';\nimport MaterialTable from 'material-table';\nimport { data } from '..\/data';\nconst MTable = () => {\n  const [selectedRow, setSelectedRow] = useState(null);\n  const columns = [\n    { title: 'Title', field: 'title' },\n    { title: 'Author', field: 'authors' },\n    { title: 'Page Count', field: 'num_pages' },\n    { title: 'Rating', field: 'rating' }\n  ];\n  return (\n    <div style={{ maxWidth: '100%' }}>\n      <MaterialTable\n        columns={columns}\n        data={data}\n        title='Books Directory'\n        onRowClick={(evt, selectedRow) =>\n          setSelectedRow(selectedRow.tableData.id)\n        }\n        options={{\n          search: false,\n          rowStyle: rowData => ({\n            backgroundColor:\n              selectedRow === rowData.tableData.id ? '#67aeae' : '#FFF'\n          })\n        }}\n      \/>\n    <\/div>\n  );\n};\nexport default MTable;<\/pre>\n\n\n\n
Here is the output:<\/p>\n\n\n\n
\"reactjs<\/figure><\/div>\n\n\n\n
GitHub<\/strong><\/a>       Official Documentation<\/strong><\/a><\/p>\n\n\n\n
2. React Bootstrap Table2<\/h2>\n\n\n\n
If you’re using Bootstrap-based UI components in your React app, react-react-bootstrap-table2<\/a> 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.<\/p>\n\n\n\n
To install it in a React app, run the following command from a terminal window:<\/p>\n\n\n\n
yarn add react-bootstrap-table-next<\/pre>\n\n\n\n
Then, import the Bootstrap CSS library into the React app. This is usually done inside the App.js<\/code> or index.js<\/code> file:<\/p>\n\n\n\n
import 'react-bootstrap-table-next\/dist\/react-bootstrap-table2.min.css';<\/pre>\n\n\n\n
Then, create a custom component file called BTable.js<\/code> and import the component BootstrapTable<\/code> from the react-bootstrap-table-next<\/code> library.<\/p>\n\n\n\n
import BootstrapTable from 'react-bootstrap-table-next';\nimport { data } from '..\/data';<\/pre>\n\n\n\n
Each data array field you want to display as an object is here as an array. The value of  dataField<\/code>  reflects the actual field from the  data<\/code>  array, while the  text<\/code>  in each object represents the custom header name of each column:<\/p>\n\n\n\n
const BTable = () => {\n  const columns = [\n    { text: 'Title', dataField: 'title' },\n    { text: 'Author', dataField: 'authors' },\n    { text: 'Page Count', dataField: 'num_pages' },\n    { text: 'Rating', dataField: 'rating' }\n  ];\n  return (\n    <div style={{ maxWidth: '100%' }}>\n      <BootstrapTable columns={columns} data={data} keyField='id' \/>\n    <\/div>\n  );\n};\nexport default BTable;<\/pre>\n\n\n\n
Here is a basic table output:<\/p>\n\n\n\n
\"reactjs<\/figure><\/div>\n\n\n\n
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:<\/p>\n\n\n\n
const columns = [\n  { text: 'Title', dataField: 'title', sort: true },\n  { text: 'Author', dataField: 'authors' },\n  { text: 'Page Count', dataField: 'num_pages' },\n  { text: 'Rating', dataField: 'rating', sort: true }\n];<\/pre>\n\n\n\n
In the preceding code snippet, we add a third property sort<\/code> with a boolean value of  true<\/code> to the data fields title<\/code> and rating<\/code>. This enables sorting in these two columns based on ascending and descending values.<\/p>\n\n\n\n
\"bootstrap<\/figure><\/div>\n\n\n\n
GitHub<\/strong><\/a>       Official Documentation<\/strong><\/a><\/p>\n\n\n\n
3. MUI Datatables<\/h2>\n\n\n\n
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<\/a> is a great way to represent data tables. Filtering, row selection, searching, exporting to CSV format, sorting, and other features are available.<\/p>\n\n\n\n
To see it in action, install it in a React project first:<\/p>\n\n\n\n
yarn add mui-datatables @material-ui\/core @material-ui\/icons<\/pre>\n\n\n\n
Then, in MUITable.js<\/code>, create a custom component file and import the component frommui-datatables<\/code>. Let’s use the same dummy data set to display the data inside the table component, so import it from thesrc\/data.js<\/code>file as well:<\/p>\n\n\n\n
import MUIDataTable from 'mui-datatables';\nimport { data } from '..\/data';<\/pre>\n\n\n\n
 columns<\/code> 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<\/code> represents the column’s custom header name:<\/p>\n\n\n\n
const MUITable = () => {\n  const columns = [\n    { label: 'Title', name: 'title' },\n    { label: 'Author', name: 'authors' },\n    { label: 'Page Count', name: 'num_pages', options: { sort: true } },\n    { label: 'Rating', name: 'rating' }\n  ];\n  const options = {\n    filterType: 'checkbox'\n  };\n  return (\n    <div style={{ maxWidth: '100%' }}>\n      <MUIDataTable\n        columns={columns}\n        data={data}\n        title='Books Directory'\n        options={options}\n      \/>\n    <\/div>\n  );\n};\nexport default MUITable;<\/pre>\n\n\n\n
\"material<\/figure><\/div>\n\n\n\n
Other features such as searching, hiding a specific column, and filtering a value are also here.<\/p>\n\n\n\n
\"material<\/figure><\/div>\n\n\n\n
GitHub<\/strong><\/a>       Official Documentation<\/strong><\/a><\/p>\n\n\n\n
4. react virtualized – Reactjs Table<\/h2>\n\n\n\n
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.<\/p>\n\n\n\n
Install it in a React app by running the following command from a terminal window:<\/p>\n\n\n\n
yarn add react-virtualized<\/pre>\n\n\n\n
Now you have to import react-virtualized\/styles.css<\/code>:<\/p>\n\n\n\n
import { Column, Table } from 'react-virtualized';\nimport 'react-virtualized\/styles.css';\nimport { data } from '..\/data';<\/pre>\n\n\n\n
The Column<\/code> component shows each component. It accepts a label<\/code> prop that projects the header title of the column. The dataKey<\/code> prop represents the field in the data array and a custom value for width<\/code> for each column:<\/p>\n\n\n\n
const RVTable = () => {\n  return (\n    <div style={{ maxWidth: '100%' }}>\n      <Table\n        headerHeight={20}\n        width={920}\n        height={300}\n        rowHeight={30}\n        rowGetter={({ index }) => data[index]}\n        rowCount={data.length}\n      >\n        <Column label='Title' dataKey='title' width={400} \/>\n        <Column label='Author' dataKey='authors' width={200} \/>\n        <Column label='Pages' dataKey='num_pages' width={100} \/>\n        <Column label='Rating' dataKey='rating' width={100} \/>\n      <\/Table>\n    <\/div>\n  );\n};\nexport default RVTable;<\/pre>\n\n\n\n
Here is the output:<\/p>\n\n\n\n
\"reactjs<\/figure><\/div>\n\n\n\n
GitHub<\/a>      Official Documentation<\/a><\/strong><\/p>\n\n\n\n
5. React Table – Reactjs Table <\/h2>\n\n\n\n
React Table<\/a> 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.<\/p>\n\n\n\n
To see it in action, first install it in a terminal window by typing the following command:<\/p>\n\n\n\n
yarn add react-table<\/pre>\n\n\n\n
Then, name your custom component file RTTable.js<\/code>. Because it supports React hooks, import the hook useTable<\/code> from the the react-table<\/code> library.<\/p>\n\n\n\n
import BootstrapTable from 'react-bootstrap-table-next';\nimport { data } from '..\/data';<\/pre>\n\n\n\n
To define the structure of the columns of the table, add the following:<\/p>\n\n\n\n
const RTTable = () => {\n  const columns = [\n    {\n      Header: 'Title',\n      accessor: 'title'\n    },\n    {\n      Header: 'Author',\n      accessor: 'authors'\n    },\n    {\n      Header: 'Pages',\n      accessor: 'num_pages'\n    },\n    {\n      Header: 'Rating',\n      accessor: 'rating'\n    }\n  ];\n  \/\/...\n};\nexport default RTTable;<\/pre>\n\n\n\n
The accessor<\/code> property has the same value as the key in the data<\/code> array. To ensure that the array of data is recreated on every render, React Table library recommends the use of the useMemo<\/code> hook.<\/p>\n\n\n\n
import { useMemo } from 'react';\nimport { useTable } from 'react-table';\nimport { data as mockData } from '..\/data';\nconst RTTable = () => {\n  const data = useMemo(() => mockData, []);\n  const columns = useMemo(\n    () => [\n      {\n        Header: 'Title',\n        accessor: 'title'\n      },\n      {\n        Header: 'Author',\n        accessor: 'authors'\n      },\n      {\n        Header: 'Pages',\n        accessor: 'num_pages'\n      },\n      {\n        Header: 'Rating',\n        accessor: 'rating'\n      }\n    ],\n    []\n  );\n  \/\/ ...\n};<\/pre>\n\n\n\n
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<\/code> hook to create a table instance.<\/p>\n\n\n\n
const tableInstance = useTable({ columns, data });\nconst {\n  getTableProps,\n  getTableBodyProps,\n  headerGroups,\n  rows,\n  prepareRow\n} = tableInstance;\nreturn (\n  <table {...getTableProps()} style={{ border: 'solid 1px blue' }}>\n    <thead>\n      {headerGroups.map(headerGroup => (\n        <tr {...headerGroup.getHeaderGroupProps()}>\n          {headerGroup.headers.map(column => (\n            <th\n              {...column.getHeaderProps()}\n              style={{\n                background: '#657',\n                color: 'white',\n                fontWeight: 'bold'\n              }}\n            >\n              {column.render('Header')}\n            <\/th>\n          ))}\n        <\/tr>\n      ))}\n    <\/thead>\n    <tbody {...getTableBodyProps()}>\n      {rows.map(row => {\n        prepareRow(row);\n        return (\n          <tr {...row.getRowProps()}>\n            {row.cells.map(cell => {\n              return (\n                <td\n                  {...cell.getCellProps()}\n                  style={{\n                    padding: '10px',\n                    border: 'solid 0.6px gray',\n                    background: '#fff'\n                  }}\n                >\n                  {cell.render('Cell')}\n                <\/td>\n              );\n            })}\n          <\/tr>\n        );\n      })}\n    <\/tbody>\n  <\/table>\n);<\/pre>\n\n\n\n
Here is the output for the above basic example:<\/p>\n\n\n\n
\"React<\/figure><\/div>\n\n\n\n
GitHub<\/strong><\/a>\u00a0      Official Documentation<\/a><\/strong>       Examples<\/strong><\/a>\u00a0<\/p>\n\n\n\n
<\/p>\n\n\n\n
A Bonus React Table Library<\/strong> – Awesome React Tables<\/strong> \ud83d\udc4c\ud83e\udd73<\/p>\n\n\n\n
\"Awesome<\/a><\/figure><\/div>\n\n\n\n
GitHub<\/a><\/strong>       Official Documentation<\/a><\/strong>     Examples<\/a><\/strong><\/p>\n\n\n\n
Wrapping Up<\/h2>\n\n\n\n
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.<\/p>\n\n\n\n
Thank you for reading.<\/p>\n\n\n\n
Our Reactjs Product<\/h2>\n\n\n\n
\n
MatX Pro – React Admin Template<\/a><\/blockquote>