如何在React中創建可復用且靈活的表格組件支持自定義列、搜索和分頁

要在React中創建可復用且靈活的表格組件，支持自定義列、搜索和分頁，可以按照以下步驟進行：

1. 創建一個名為Table的組件，在組件內部定義表格的結構和邏輯。
2. 使用props傳遞表格所需的數據和配置參數，包括列的定義、搜索功能和分頁功能。
3. 在表格組件內部根據傳入的列定義和數據，動態生成表頭和表格內容。
4. 實現搜索功能，可以在表格組件內部添加一個搜索框，根據用戶輸入的關鍵字過濾顯示的數據。
5. 實現分頁功能，可以在表格組件內部添加分頁器，并根據當前頁碼和每頁顯示的條目數進行數據的切片展示。
6. 讓表格組件支持自定義列，可以在props中傳入列定義的配置參數，根據配置參數動態生成列。
7. 最后，在父組件中使用Table組件，并傳入相應的數據和配置參數，即可實現一個可復用且靈活的表格組件。

以下是一個簡單的示例代碼，演示了如何在React中創建一個可復用的表格組件：

import React, { useState } from 'react';

const Table = ({ data, columns }) => {
  const [searchTerm, setSearchTerm] = useState('');
  const [currentPage, setCurrentPage] = useState(1);
  const itemsPerPage = 5;

  const filteredData = data.filter((item) =>
    Object.values(item).some((value) =>
      value.toString().toLowerCase().includes(searchTerm.toLowerCase())
    )
  );

  const paginatedData = filteredData.slice(
    (currentPage - 1) * itemsPerPage,
    currentPage * itemsPerPage
  );

  return (
    <div>
      <input
        type="text"
        placeholder="Search..."
        value={searchTerm}
        onChange={(e) => setSearchTerm(e.target.value)}
      />
      <table>
        <thead>
          <tr>
            {columns.map((column) => (
              <th key={column}>{column}</th>
            ))}
          </tr>
        </thead>
        <tbody>
          {paginatedData.map((item, index) => (
            <tr key={index}>
              {columns.map((column) => (
                <td key={column}>{item[column]}</td>
              ))}
            </tr>
          ))}
        </tbody>
      </table>
      <div>
        <button
          onClick={() => setCurrentPage(currentPage - 1)}
          disabled={currentPage === 1}
        >
          Prev
        </button>
        <span>{currentPage}</span>
        <button
          onClick={() => setCurrentPage(currentPage + 1)}
          disabled={currentPage === Math.ceil(filteredData.length / itemsPerPage)}
        >
          Next
        </button>
      </div>
    </div>
  );
};

export default Table;

在父組件中使用Table組件并傳入數據和列定義：

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

const data = [
  { id: 1, name: 'Alice', age: 25 },
  { id: 2, name: 'Bob', age: 30 },
  { id: 3, name: 'Charlie', age: 35 },
  { id: 4, name: 'David', age: 40 },
];

const columns = ['id', 'name', 'age'];

const App = () => {
  return <Table data={data} columns={columns} />;
};

export default App;

通過以上步驟，您就可以在React中創建一個可復用且靈活的表格組件，支持自定義列、搜索和分頁功能。您可以根據實際需求對表格組件進行定制和擴展，以滿足不同場景下的需求。