使用 Tailwind CSS 在 React 中创建表格组件

介绍

在 React 中构建可复用且可自定义的表格组件可以显著简化您的开发流程，尤其是在开发数据驱动型应用程序时。利用 Tailwind CSS 进行样式设置，可确保您的表格既美观又响应迅速。在本文中，我们将逐步讲解如何使用 Tailwind CSS 在 React 中创建功能齐全的表格组件。

先决条件

在开始之前，请确保您已进行以下设置：

已安装 Node.js 和 npm。
已设置好 React 项目。你可以使用 Create React App 创建一个：

npx create-react-app react-tailwind-table
cd react-tailwind-table

Tailwind CSS 已安装并配置。请遵循 React 官方的 Tailwind CSS 安装指南。

步骤 1：设置 Tailwind CSS

首先，在你的 React 项目中设置 Tailwind CSS。如果你还没有设置，请按照以下步骤操作：

安装 Tailwind CSS 及其依赖项：

npm install -D tailwindcss postcss autoprefixer

初始化 Tailwind CSS：

npx tailwindcss init -p

配置 tailwind.config.js：

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    "./src/**/*.{js,jsx,ts,tsx}",
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}

将 Tailwind CSS 指令添加到 src/index.css：

@tailwind base;
@tailwind components;
@tailwind utilities;

步骤2：创建表组件

在 src/components 目录中创建一个新文件 Table.js。该组件将负责渲染表格。

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;

解释

道具：

columns：定义表列的标题和访问器的对象数组。
data：表示要显示的数据行的对象数组。

表结构

该表格被包裹在带有 overflow-x-auto 的 div 中，以确保它可以在较小的屏幕上滚动。
表格元素使用 Tailwind CSS 类进行样式设置。
thead 包含表头，它们是根据 columns 属性动态生成的。
tbody 包含表格行，由 data 属性动态生成。每行使用 even:bg-gray-50 类交替显示背景颜色。

步骤3：使用表格组件

现在，让我们Table在应用程序中使用该组件。更新 src/App.js 以包含带有示例数据的表格组件。

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;

解释

列数组定义表头和访问数据数组中每列数据的键。
数据数组包含要在表中显示的示例数据。
表格组件在 div 内呈现，并使用 Tailwind CSS 类进行填充和样式设置。

结论

现在，您已使用 Tailwind CSS 在 React 中创建了一个可复用且可自定义的表格组件。此组件可以轻松扩展其他功能，例如排序、筛选和分页。借助 Tailwind CSS 的强大功能，您可以确保您的表格在不同屏幕尺寸上都具有响应式显示和视觉吸引力。

文章来源：https://dev.to/timmy471/creating-a-table-component-in-react-with-tailwind-css-2he3