React中如何實現表格排序和過濾功能

在React中實現表格排序和過濾功能可以通過以下步驟實現：

1. 創建一個包含表格數據的狀態變量和排序條件的狀態變量。可以使用useState來創建這些狀態變量。

const [tableData, setTableData] = useState([...]); // 表格數據
const [sortKey, setSortKey] = useState(''); // 排序字段
const [sortOrder, setSortOrder] = useState('asc'); // 排序順序
const [filterText, setFilterText] = useState(''); // 過濾文本

2. 創建一個函數來處理排序操作。這個函數將根據排序字段和排序順序對表格數據進行排序，并更新表格數據的狀態變量。

const handleSort = (key) => {
  let order = 'asc';
  if (key === sortKey && sortOrder === 'asc') {
    order = 'desc';
  }
  setSortKey(key);
  setSortOrder(order);
  const sortedData = tableData.sort((a, b) => {
    if (order === 'asc') {
      return a[key] > b[key] ? 1 : -1;
    } else {
      return a[key] < b[key] ? 1 : -1;
    }
  });
  setTableData([...sortedData]);
}

3. 創建一個函數來處理過濾操作。這個函數將根據過濾文本對表格數據進行過濾，并更新表格數據的狀態變量。

const handleFilter = (text) => {
  setFilterText(text);
  const filteredData = tableData.filter(item => {
    return Object.values(item).some(value => value.includes(text));
  });
  setTableData([...filteredData]);
}

4. 在表格組件中添加排序和過濾功能。在表頭中添加點擊事件來觸發排序操作，并在搜索框中添加onChange事件來觸發過濾操作。

<table>
  <thead>
    <tr>
      <th onClick={() => handleSort('column1')}>Column 1</th>
      <th onClick={() => handleSort('column2')}>Column 2</th>
      <th onClick={() => handleSort('column3')}>Column 3</th>
    </tr>
    <tr>
      <th><input type="text" value={filterText} onChange={(e) => handleFilter(e.target.value)} /></th>
    </tr>
  </thead>
  <tbody>
    {tableData.map((item, index) => (
      <tr key={index}>
        <td>{item.column1}</td>
        <td>{item.column2}</td>
        <td>{item.column3}</td>
      </tr>
    ))}
  </tbody>
</table>

通過以上步驟，可以在React中實現表格排序和過濾功能。當用戶點擊表頭進行排序或輸入搜索文本進行過濾時，表格數據將會根據排序條件和過濾條件進行相應的操作。