Tailwind Dynamic Table Component with React

Tables are an essential feature in many web applications, helping to organize and display data effectively. In this article, we'll explore a dynamic and beautifully styled table component for managing employee information (list could be anything, e.g. product, students).

This React-based table, built with Tailwind CSS, is ideal for

• Displaying structured data
• Performing basic actions

Use Cases of the Table Component

This table component is suitable for various web applications, such as:

1. Display and manage employee records, salaries, and statuses.
2. Track user data, product inventories, or financial transactions.
3. Present student details, grades, or attendance records.
4. Show customer information, interactions, and subscription statuses.

Its simplicity and customizability make it adaptable for almost any use case requiring structured data presentation.

Table Component Preview

Below is a preview of the table component:

How to Configure and Use the React Tailwind Table Component

The table component is designed to be reusable, configurable, and easy to integrate into your React projects. Here’s how you can use it:

Install Necessary Dependencies Ensure you have Tailwind CSS and Lucide React icons installed in your project:

Copy
1npm install tailwindcss lucide-react

Prepare the Data Define the data and column structure you want to display. For this example, we used dummy employee data:

Copy
1const employeeData = [
2  {
3    name: 'John Doe',
4    cell: '+1 (123) 456-7890',
5    email: 'john.doe@example.com',
6    salary: '$5,000',
7    status: 'Paid',
8    address: '123 Elm Street, Springfield, USA',
9  },
10  // Add more employee objects as needed.
11]
12
13const columns = [
14  { header: 'No.', key: 'index' },
15  { header: 'Name', key: 'name' },
16  { header: 'Cell', key: 'cell' },
17  { header: 'Email', key: 'email' },
18  { header: 'Salary', key: 'salary' },
19  { header: 'Status', key: 'status' },
20  { header: 'Address', key: 'address' },
21  { header: 'Actions', key: 'actions' },
22]

Build The Dynamic React Tailwind Table Component

Use the following code for the Employee Table component:

Copy
1import { SquarePen, Trash2 } from 'lucide-react'
2
3const EmployeeTable = () => {
4  return (
5    <div className="mx-auto max-w-7xl overflow-x-auto px-4 sm:px-6 lg:px-8">
6      <h1 className="my-12 text-center text-2xl font-semibold text-gray-800">
7        Employee Dashboard
8      </h1>
9      <table className="w-full table-auto overflow-hidden rounded-lg border border-gray-200 shadow-sm">
10        <thead className="bg-gray-100">
11          <tr>
12            {columns.map((col) => (
13              <th
14                key={col.key}
15                className="px-4 py-4 text-left text-sm font-semibold uppercase text-[#91929E]"
16              >
17                {col.header}
18              </th>
19            ))}
20          </tr>
21        </thead>
22        <tbody className="divide-y divide-gray-200">
23          {employeeData.map((employee, index) => (
24            <tr
25              key={index}
26              className="bg-white transition duration-200 ease-in-out hover:bg-gray-100"
27            >
28              <td className="px-4 py-6 text-sm text-[#0A1629]">{index + 1}</td>
29              <td className="px-4 py-6 text-sm text-[#0A1629]">
30                {employee.name}
31              </td>
32              <td className="px-4 py-6 text-sm text-[#0A1629]">
33                {employee.cell}
34              </td>
35              <td className="px-4 py-6 text-sm text-[#0A1629]">
36                {employee.email}
37              </td>
38              <td className="px-4 py-6 text-sm text-[#0A1629]">
39                {employee.salary}
40              </td>
41              <td className="px-4 py-6 text-sm">
42                <span
43                  className={`rounded-lg px-3 py-1 text-xs font-semibold ${
44                    employee.status === 'Paid'
45                      ? 'bg-[#E0F9F2] text-[#00D097]'
46                      : 'bg-[#7D859224] text-[#7D8592]'
47                  }`}
48                >
49                  {employee.status}
50                </span>
51              </td>
52              <td className="px-6 py-6 text-sm text-[#0A1629]">
53                {employee.address}
54              </td>
55              <td className="px-6 py-6 text-sm text-[#0A1629]">
56                <div className="flex space-x-4">
57                  <button className="text-[#0A1629] hover:text-gray-700">
58                    <SquarePen size={16} />
59                  </button>
60                  <button className="text-[#F65160] hover:text-red-700">
61                    <Trash2 size={16} />
62                  </button>
63                </div>
64              </td>
65            </tr>
66          ))}
67        </tbody>
68      </table>
69    </div>
70  )
71}
72
73export default EmployeeTable

Feel free to use Tailwind table component in your React project.