React Reusable Table Component with Pagination

In this article, we will discuss how to create a reusable table component using React-Table with pagination and Bootstrap styling.

Creating reusable components makes web applications efficient and maintainable. We will also demonstrate how to pass sample data from a parent component to the table component.

React-Table is a lightweight and flexible library that provides a simple and easy-to-use solution for creating tables in React applications. It has many built-in features like pagination, sorting and filter capabilities, it is an excellent choice for developers to create complex table components easily.

 

Setup the Project

First, we need to set up a new React project. We will use the create-react-app command-line tool to create our project. Run the following command in your terminal:

npx create-react-app react-table-pagination

 

After the project is created, navigate to the project directory:

cd react-table-pagination

 

Installing Dependencies

Next, we will install the necessary dependencies:

• react-table: for creating the table component
• react-bootstrap and bootstrap: for styling the table component

Run the following command to install these dependencies:

npm install react-table react-bootstrap bootstrap

Creating the Table Component

Create a new file called CustomTable.js in the src directory and add the following code:

import React from "react";
import { useTable, usePagination } from "react-table";

const CustomTable = ({ columns, data }) => {
  const {
    getTableProps,
    getTableBodyProps,
    headerGroups,
    prepareRow,
    page,
    canPreviousPage,
    canNextPage,
    nextPage,
    previousPage,
    state: { pageIndex },
  } = useTable(
    {
      columns,
      data,
      initialState: { pageIndex: 0, pageSize: 5 },
    },
    usePagination
  );

  // Table rendering
  return (
    <>
      <table {...getTableProps()} className="table">
        <thead>
          {headerGroups.map((headerGroup) => (
            <tr {...headerGroup.getHeaderGroupProps()}>
              {headerGroup.headers.map((column) => (
                <th {...column.getHeaderProps()}>{column.render("Header")}</th>
              ))}
            </tr>
          ))}
        </thead>
        <tbody {...getTableBodyProps()}>
          {page.map((row) => {
            prepareRow(row);
            return (
              <tr {...row.getRowProps()}>
                {row.cells.map((cell) => (
                  <td {...cell.getCellProps()}>{cell.render("Cell")}</td>
                ))}
              </tr>
            );
          })}
        </tbody>
      </table>
      <div className="d-flex justify-content-center">
        <ul className="pagination">
          <li className={`page-item ${!canPreviousPage && "disabled"}`}>
            <button
              className="page-link"
              onClick={() => previousPage()}
              disabled={!canPreviousPage}
            >
              {"<"}
            </button>
          </li>
          <li className="page-item">
            <span className="page-link">
              Page {pageIndex + 1} of {Math.ceil(data.length / 5)}
            </span>
          </li>
          <li className={`page-item ${!canNextPage && "disabled"}`}>
            <button
              className="page-link"
              onClick={() => nextPage()}
              disabled={!canNextPage}
            >
              {">"}
            </button>
          </li>
        </ul>
      </div>
    </>
  );
};

export default CustomTable;

 

Adding Pagination

In the CustomTable component, we are using the usePagination plugin provided by React-Table to enable pagination functionality. We have also added buttons for navigating between pages and displaying the current page number.

 

Integrating Bootstrap

To apply Bootstrap styling, we have added the className="table" attribute to the <table> element. Make sure to import Bootstrap in your src/index.js file:

import 'bootstrap/dist/css/bootstrap.min.css';

 

Adding Sample Data

Create a new file called sampleData.js in the src directory and add the following sample data:

export const COLUMNS = [
  {
    Header: "ID",
    accessor: "id",
  },
  {
    Header: "Name",
    accessor: "name",
  },
  {
    Header: "Age",
    accessor: "age",
  },
];

export const DATA = [
  { id: 1, name: "John Doe", age: 28 },
  { id: 2, name: "Jane Doe", age: 32 },
  { id: 3, name: "Alice Johnson", age: 24 },
  { id: 4, name: "Bob Smith", age: 40 },
  { id: 5, name: "Charlie Brown", age: 35 },
  { id: 6, name: "David White", age: 30 },
  { id: 7, name: "Eva Green", age: 29 },
  { id: 8, name: "Fiona Black", age: 22 },
  { id: 9, name: "George Grey", age: 28 },
  { id: 10, name: "Hannah Blue", age: 25 },
  { id: 11, name: "Ivan Red", age: 31 },
  { id: 12, name: "Julia Yellow", age: 27 },
  { id: 13, name: "Kevin Purple", age: 38 },
  { id: 14, name: "Linda Orange", age: 33 },
  { id: 15, name: "Michael Pink", age: 29 },
];

 

Integrating the Table Component into the Parent Component

Update your src/App.js file to include the CustomTable.js:

import React from "react";
import CustomTable from "./CustomTable";
import { COLUMNS, DATA } from "./sampleData";

const App = () => {
  return (
    <div className="App">
      <h1>
        React-Table with Pagination and Bootstrap Styling - FreakyJolly.com
      </h1>
      <CustomTable columns={COLUMNS} data={DATA} />
    </div>
  );
};

export default App;

 

Run the Application

Start your development server by running the following command:

npm start

Navigate to http://localhost:3000 in your browser to view the table component with pagination and Bootstrap styling.

 

FAQs

 

Can I use other CSS frameworks instead of Bootstrap? Yes, you can use any CSS framework of your choice. Simply replace the Bootstrap classes with the appropriate classes from your chosen framework.

 

How can I customize the pagination? You can customize the pagination by modifying the usePagination options or by creating your own custom pagination component.

 

Can I add sorting functionality to the table? Yes, React-Table supports sorting functionality out-of-the-box. You can enable it by adding the useSortBy plugin to your useTable configuration.

 

Is it possible to add filtering functionality to the table component? Yes, you can add filtering functionality using the useFilters plugin provided by React-Table.

 

Can I use this reusable table component with remote data sources? Absolutely! You can fetch data from a remote API and pass it as a prop to the CustomTable component. You may need to adjust the pagination configuration to accommodate server-side pagination.

 

 

Conclusion

In this article, we have successfully created a reusable table component using React-Table with pagination and Bootstrap styling. By following these steps, you can create similar components to suit your application’s requirements.