Soy nuevo tanto en reaccionar como en Tailwind CSS. He creado una tabla como esta en reaccionar:
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 TableLas columnas de la tabla están relacionadas (cada nombre en la primera columna tiene un número de móvil relacionado en la segunda columna). Quiero agregar una opción en cada columna de esta tabla, de modo que cuando haga clic en el encabezado de esa columna, las filas se ordenen (alfabéticamente y numéricamente). Como ejemplo, al principio tengo:
name mobile ---- ------ Selena 236 John 123 Sam 524Cuando hago clic en el encabezado de la primera columna (nombre), la tabla debe ordenarse así:
name mobile ---- ------ John 123 Sam 524 Selena 236y cuando hago clic de nuevo, debería cambiar a su estado inicial. ¿Hay alguna manera?
Necesitaría usar Array.sort() para ordenar una copia de su estado actual de currentUsers , al mismo tiempo que mantiene una bandera ( isSorted ) como referencia para saber si los valores que se muestran actualmente están ordenados o no.
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]) Finalmente, en su jsx , usaría sortedUsers para mostrar los datos en lugar de currentUsers , ya que este último solo se usa como fuente sin procesar y el primero es al que aplicamos toda la lógica.
Si, además, desea mostrar un ícono o texto para mostrar que los valores mostrados están ordenados (o no), puede usar isSorted para la condición.
Siguiendo con la otra respuesta. Recomendaría crear una nueva función con el fin de obtener la versión ordenada de la matriz. También necesitaría mantener una variable indicadora que determine si queremos mostrar la columna ordenada o no, que se alterna verdadero/falso cuando el usuario interactúa con el encabezado de su columna.
const getUsers = () => { return isSorted ? currentUsers.slice().sort(sortFn) : currentUsers }En su código, luego reemplazaría la matriz que está usando actualmente con una llamada a esta función
{getUsers().map((item, index) => ....}