Filtering table data is a common requirement in web applications, and React.js provides a powerful way to implement this functionality. In this blog post, we'll walk you through the process of creating a filterable table in a React.js application step by step. We'll cover the following key points:

Let's get started!

Prerequisites

Before we begin, ensure that you have Node.js and npm (Node Package Manager) installed on your computer. If you don't have them installed, you can download and install them from the official website: Node.js.

Step 1: Setting Up Your React Project

If you haven't already set up a React project, you can create one using create-react-app or your preferred method. Open your terminal and run the following commands:

npx create-react-app filterable-table-app
cd filterable-table-app
npm start

This will create a new React application and start the development server.

Step 2: Creating the Table Component

Inside your React project, create a new component for the table. You can place this component in a separate file. Let's call it Table.js. Here's a basic structure for this component:

import React from "react";

function Table({ data }) {
  return (
    <table>
      <thead>
        <tr>
          <th>Name</th>
          <th>Age</th>
          <th>City</th>
        </tr>
      </thead>
      <tbody>{/* Table rows go here */}</tbody>
    </table>
  );
}

export default Table;

This code defines a Table component with a table structure and table headers. We'll add the table rows and filter functionality in the following steps.

Step 3: Implementing the Filter Functionality

To implement the filter functionality, we'll need to manage the filter criteria and apply them to the table data. Here's how you can do it:

import React, { useState } from "react";

function Table({ data }) {
  const [filter, setFilter] = useState("");

  const filteredData = data.filter((item) =>
    item.name.toLowerCase().includes(filter.toLowerCase())
  );

  return (
    <div>
      <input
        type="text"
        placeholder="Filter by name..."
        value={filter}
        onChange={(e) => setFilter(e.target.value)}
      />
      <table>
        <thead>
          <tr>
            <th>Name</th>
            <th>Age</th>
            <th>City</th>
          </tr>
        </thead>
        <tbody>
          {filteredData.map((item) => (
            <tr key={item.id}>
              <td>{item.name}</td>
              <td>{item.age}</td>
              <td>{item.city}</td>
            </tr>
          ))}
        </tbody>
      </table>
    </div>
  );
}

export default Table;

In this code, we use the useState hook to manage the filter state, which represents the filter criteria. The filteredData variable contains the filtered table data based on the name column. As the user types in the input field, the filter criteria are updated, and the table data is filtered accordingly.

Step 4: Styling the Filterable Table

To make your filterable table visually appealing, you can add CSS styles. Create a CSS file named Table.css in the same directory as your Table.js file and add the following styles as a starting point:

table {
  width: 100%;
  border-collapse: collapse;
  margin-top: 20px;
}

th,
td {
  border: 1px solid #ddd;
  padding: 8px;
  text-align: left;
}

th {
  background-color: #f2f2f2;
}

input[type="text"] {
  width: 100%;
  padding: 10px;
  margin-bottom: 10px;
}

These styles provide a clean and minimalistic look to the table and input field.

Step 5: Testing Your Filterable Table

With the integration complete, you can now test your filterable table. Make sure your React application is running (npm start), and visit the page with the filterable table. You can type in the input field to filter the table data by name.

Conclusion

Congratulations! You've successfully created a filterable table in a React.js application. This functionality allows users to search and filter table data easily, making your web application more user-friendly and efficient. You can further enhance the table by adding more filter criteria or additional features to meet the specific requirements of your project.