DEV Community

Ayantunji Timilehin
Ayantunji Timilehin

Posted on

Creating a Table Component in React with Tailwind CSS

Introduction

Building a reusable and customizable table component in React can significantly streamline your development process, especially when working on data-driven applications. Leveraging Tailwind CSS for styling ensures that your table is both stylish and responsive. In this article, we'll walk through the steps to create a fully functional table component in React using Tailwind CSS.

Prerequisites

Before we begin, ensure you have the following set up:

  1. Node.js and npm installed.
  2. A React project set up. You can create one using Create React App:
npx create-react-app react-tailwind-table
cd react-tailwind-table

Enter fullscreen mode Exit fullscreen mode
  1. Tailwind CSS installed and configured. Follow the official Tailwind CSS installation guide for React.

Step 1: Setting Up Tailwind CSS

First, set up Tailwind CSS in your React project. If you haven't already, follow these steps:

  1. Install Tailwind CSS and its dependencies:
npm install -D tailwindcss postcss autoprefixer
Enter fullscreen mode Exit fullscreen mode
  1. Initialize Tailwind CSS:
npx tailwindcss init -p
Enter fullscreen mode Exit fullscreen mode
  1. Configure tailwind.config.js:
/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    "./src/**/*.{js,jsx,ts,tsx}",
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}
Enter fullscreen mode Exit fullscreen mode
  1. Add Tailwind CSS directives to src/index.css:
@tailwind base;
@tailwind components;
@tailwind utilities;

Enter fullscreen mode Exit fullscreen mode

Step 2: Creating the Table Component

Create a new file Table.js in the src/components directory. This component will be responsible for rendering the table.

import React from 'react';

const Table = ({ columns, data }) => {
  return (
    <div className="overflow-x-auto">
      <table className="min-w-full bg-white border border-gray-200">
        <thead className="bg-gray-200">
          <tr>
            {columns.map((column) => (
              <th
                key={column.accessor}
                className="py-2 px-4 border-b border-gray-200 text-left text-gray-600"
              >
                {column.Header}
              </th>
            ))}
          </tr>
        </thead>
        <tbody>
          {data.map((row, rowIndex) => (
            <tr key={rowIndex} className="even:bg-gray-50">
              {columns.map((column) => (
                <td
                  key={column.accessor}
                  className="py-2 px-4 border-b border-gray-200 text-gray-800"
                >
                  {row[column.accessor]}
                </td>
              ))}
            </tr>
          ))}
        </tbody>
      </table>
    </div>
  );
};

export default Table;

Enter fullscreen mode Exit fullscreen mode

Explanation

Props:

  • columns: An array of objects defining the headers and accessors for the table columns.

  • data: An array of objects representing the rows of data to display.

Table Structure

  • The table is wrapped in a div with overflow-x-auto to ensure it is scrollable on smaller screens.

  • The table element uses Tailwind CSS classes for styling.

  • The thead contains the table headers, which are dynamically generated from the columns prop.

  • The tbody contains the table rows, dynamically generated from the data prop. Each row alternates background colors using the even:bg-gray-50 class.

Step 3: Using the Table Component

Now, let's use the Table component in our application. Update src/App.js to include the table component with sample data.

import React from 'react';
import Table from './components/Table';

const App = () => {
  const columns = [
    { Header: 'Name', accessor: 'name' },
    { Header: 'Age', accessor: 'age' },
    { Header: 'Email', accessor: 'email' },
  ];

  const data = [
    { name: 'John Doe', age: 28, email: 'john@example.com' },
    { name: 'Jane Smith', age: 34, email: 'jane@example.com' },
    { name: 'Mike Johnson', age: 45, email: 'mike@example.com' },
  ];

  return (
    <div className="container mx-auto p-4">
      <h1 className="text-2xl font-bold mb-4">User Table</h1>
      <Table columns={columns} data={data} />
    </div>
  );
};

export default App;

Enter fullscreen mode Exit fullscreen mode

Explanation

  • The columns array defines the table headers and the keys to access each column's data in the data array.

  • The data array contains the sample data to be displayed in the table.

  • The Table component is rendered inside a div with Tailwind CSS classes for padding and styling.

Conclusion

You've now created a reusable and customizable table component in React using Tailwind CSS. This component can easily be extended with additional features such as sorting, filtering, and pagination. By leveraging the power of Tailwind CSS, you ensure that your table is responsive and visually appealing across different screen sizes.

Top comments (4)

Collapse
 
kolade112 profile image
Bayo David

Thanks a lot for this! Pushing to my projects

Collapse
 
franklyn12388 profile image
Fank

Extremely helpful for quickly setting up a clean, responsive table in React with Tailwind CSS.

Collapse
 
bryanwills45 profile image
Bryan Wills

I could give this a try in my smaller projects. Are you looking to make this table component more robust? In that it can do more like react table and the likes

Collapse
 
timmy471 profile image
Ayantunji Timilehin

Yeah I could make make it open source