對表格的每一列進行排序

Question

我是 React 和 Tailwind CSS 的新手。我在 React 中創建了一個這樣的表：

import React, { useState, useEffect } from 'react'
import { getUsers } from '../../services/userService'

const Table = () => {

    const [users, setUsers] = useState([]);
    const [currentUsers, setCurrentUsers] = useState([]);
    const [search, setSearch] = useState('');

    useEffect(async () => {
    try {
        const response = await getUsers(search);
        setUsers(response.data.users);
        setPageCount(Math.ceil(response.data.users.length / pageItemCount))
        setCurrentUsers(response.data.users.slice(0, pageItemCount))
    } catch (error) { }
}, [search]);

    const handleChange = (event, value) => {
        changePage(value);
    }

    return (
        <div dir='rtl' className='bg-background mt-10 px-5 rd1200:px-30 overflow-auto'>
           
            <table className='w-full border-separate rounded-md'>
                <thead>
                    <tr className='bg-text-secondary text-white shadow-sm text-center'>
                        <th className='p-2'>name</th>
                        <th className='p-2'>mobile</th>
                    </tr>
                </thead>
                <tbody>
                    {currentUsers.map((item, index) =>
                        <tr key={item.id} className={index % 2 === 0 ? 'bg-white shadow-sm text-center' : 'bg-text bg-opacity-5 shadow-sm text-center'}>
                            <td className='text-text text-sm p-2'>{item.first_name}</td>
                            <td className='text-text text-sm p-2'>{item.mobile}</td> 
                        </tr>
                    )}
                </tbody>
            </table>
            
        </div>
    )
}

export default Table

表列是相關的（第一列中的每個名稱在第二列中都有一個相關的手機號碼）。 我想在此表的每一列上添加一個選項，這樣當我單擊該列的 header 時，這些行就會排序（按字母和數字順序）。 例如，起初我有：

name     mobile
----     ------
Selena   236
John     123
Sam      524

當我單擊第一列（名稱）的 header 時，表格應按如下方式排序：

name     mobile
----     ------
John     123
Sam      524
Selena   236

當我再次點擊時，它應該更改為它的初始 state。有什么辦法嗎？

Answer 1

您需要使用Array.sort()對currentUsers state 的副本進行排序，同時還保留一個標志 ( isSorted ) 作為參考，以了解當前顯示的值是否已排序。

const [isSorted, setIsSorted] = useState(false);
const [sortedUsers, setSortedUsers] = useState([]);

const sortFn = (userA, userB) => {
  // sort logic here, it can be whatever is needed
  // sorting alphabetically by `first_name` in this case
  return userA.first_name.localeCompare(userB.first_name)
}

const toggleSort = () => {
  setIsSorted(!isSorted)
}

// when `currentUsers` changes we want to reset our table
// in order to keep it in sync with actual values
// we're also sorting if we were already sorting
useEffect(() => {
  if (isSorted) {
    setSortedUsers(currentUsers.slice().sort(sortFn))
  } else {
    setSortedUsers(currentUsers)
  }
}, [isSorted, currentUsers])

最后，在您的sortedUsers jsx不是currentUsers來顯示數據，因為后者僅用作原始來源，而前者是我們應用所有邏輯的來源。

此外，如果您想要顯示一個圖標或文本以表明顯示的值已排序（或未排序），您可以使用isSorted作為條件。

Answer 2

從另一個答案跟進。 建議創建一個新的 function 以獲取數組的排序版本。 您還需要維護一個標志變量，用於確定我們是否要顯示排序列，當用戶與您的列 header 交互時，該變量會切換為 true/false。

const getUsers = () => {
   return isSorted ? currentUsers.slice().sort(sortFn) : currentUsers
}

然后，在您的代碼中，您將通過調用此 function 來替換當前使用的數組

{getUsers().map((item, index) => ....}