React : Top 5 Free npm Packages for Creating Smart Data Tables

In this tutorial, we will be exploring the top 5 free npm packages that can be used to create smart, full-featured data tables in React. Each package has its own set of features and advantages, so we will be looking at the pros and cons of each package, and providing examples of how to use them in a React application.

# 1: react-table

The first package on our list is react-table, a lightweight, fast and extendable data table built specifically for React. One of the main advantages of react-table is its small size, which makes it ideal for projects with limited resources.

npm install react-table

import ReactTable from 'react-table';

const columns = [{
    Header: 'Name',
    accessor: 'name'
  }, {
    Header: 'Age',
    accessor: 'age'
  }, {
    Header: 'Address',
    accessor: 'address'
  }]

const data = [{
    name: 'John Doe',
    age:32,
address: '123 Main St'
}, {
name: 'Jane Smith',
age: 45,
address: '456 Park Ave'
}]

const App = () => {
return (
<div>
<ReactTable
             data={data}
             columns={columns}
         />
</div>
)
}

The above code snippet shows a basic example of how to use react-table. It creates a table with 3 columns (Name, Age, Address) and data passed to it.

Pros:

• Lightweight and fast
• Extensible – Flexible
•  Good performance

Cons:

• Limited built-in functionality
• Limited styling options

 

# 2: react-data-grid

The second package is [react-data-grid](https://github.com/adazzle/react-data-grid), a powerful and flexible data grid built for React. It provides a wide range of features such as sorting, filtering, and editing, making it a great choice for projects that require more advanced functionality.

npm install react-data-grid

import DataGrid from 'react-data-grid';

const columns = [{
    key: 'name',
    name: 'Name'
  }, {
    key: 'age',
    name: 'Age'
  }, {
    key: 'address',
    name: 'Address'
  }]

const data = [{
    name: 'John Doe',
    age: 32,
    address: '123 Main St'
  }, {
    name: 'Jane Smith',
    age: 45,
    address: '456 Park Ave'
  }]

const App = () => {
    return (
        <div>
            <DataGrid 
                columns={columns}
                rows={data}
            />
        </div>
    )
}

The above code snippet shows a basic example of how to use react-data-grid. It creates a table with 3 columns (Name, Age, Address) and data passed to it.

Pros:

• Wide range of built-in functionality
• Highly customizable
• Good performance

Cons:

• Large file size
• Complex API

 

# 3: react-bootstrap-table

The third package is react-bootstrap-table, a data table built on top of Bootstrap and React. It provides a simple and easy-to-use API and a wide range of features such as pagination, sorting, and filtering.

npm install react-bootstrap-table

import BootstrapTable from 'react-bootstrap-table';

const columns = [{
    dataField: 'name',
    text: 'Name'
  }, {
    dataField: 'age',
    text: 'Age'
  }, {
    dataField: 'address',
    text: 'Address'
  }]

const data = [{
    name: 'John Doe',
    age: 32,
    address: '
'123 Main St'
}, {
name: 'Jane Smith',
age: 45,
address: '456 Park Ave'
}]

const App = () => {
return (
<div>
<BootstrapTable 
             data={data}
             columns={columns}
         />
</div>
)
}

The above is

a basic example of how to use react-bootstrap-table. It creates a table with 3 columns (Name, Age, Address) and data passed to it.

Pros:

• Simple and easy-to-use API
• Wide range of built-in functionality
• Built on top of Bootstrap, which provides a consistent look and feel across all platforms

Cons:

• Limited customization options
• May not be suitable for projects that require highly customized data tables

 

#4: react-material-table

The fourth package is react-material-table, a data table built with Material-UI and React. It provides a wide range of features such as pagination, sorting, and filtering, and offers a modern, Material-UI based design.

npm install react-material-table

import MaterialTable from 'react-material-table';

const columns = [{
    title: 'Name',
    field: 'name'
  }, {
    title: 'Age',
    field: 'age'
  }, {
    title: 'Address',
    field: 'address'
  }]

const data = [{
    name: 'John Doe',
    age: 32,
    address: '123 Main St'
  }, {
    name: 'Jane Smith',
    age: 45,
    address: '456 Park Ave'
  }]

const App = () => {
    return (
        <div>
            <MaterialTable 
                columns={columns}
                data={data}
            />
        </div>
    )
}

The above code snippet shows a basic example of how to use react-material-table. It creates a table with 3 columns (Name, Age, Address) and data passed to it.

Pros:

• Modern, Material-UI based design
• Wide range of built-in functionality
• Customizable

Cons:

• Limited documentation
• Issues with certain features, such as sorting and pagination

 

# 5: react-table-v6

The fifth package is react-table-v6, a lightweight, fast and extendable data table built specifically for React. This version of react-table is a major update from version 6.0 which includes some breaking changes and new features.

npm install react-table@next

import { useTable } from 'react-table'

const columns = [{
    Header: 'Name',
    accessor: 'name'
  }, {
    Header: 'Age',
    accessor: 'age'
  }, {
    Header: 'Address',
    accessor: 'address'
  }]

const data = [{
    name: 'John Doe',
    age: 32,
    address: '123 Main St'
  }, {
    name: 'Jane Smith',
    age: 45,
    address: '456 Park Ave'
  }]

const App = () => {
  const {
    getTableProps,
    getTableBodyProps,
    headerGroups,
    rows,
    prepareRow,
  } = useTable({ columns, data })

    return (    <div>
        <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>
    </div>
  )
}

The above code snippet shows a basic example of how to use react-table-v6. It creates a table with 3 columns (Name, Age, Address) and data passed to it.

Pros:

• Lightweight and fast
• Extensible
• Flexible
• Good performance
• New features and improvements

Cons:

• Breaking changes from version 6.0
• Limited built-in functionality

 

Here are the npm links for the packages discussed in this tutorial:

1. react-table
2. react-data-grid
3. react-bootstrap-table
4. react-material-table
5. react-table-v6 (you can use npm install react-table@next to install the latest version)

It’s worth noting that React-table-v6 is a major update from version 6.0 which includes some breaking changes and new features, so it’s recommended to read the documentation before installing it, and also make sure that it’s compatible with your current project.

 

Conclusion

In this tutorial, we have looked at the top 5 free npm packages that can be used to create smart, full-featured data tables in React. We have discussed the pros and cons of each package and provided examples of how to use them in a React application. By following these steps, you should now have a better understanding of which package will best suit your project‘s needs.