Ojalá me puedas ayudar con un problema que tengo. Estoy usando React Table en mi sitio. Me gustaría usar las propiedades filtrables y ordenables al mismo tiempo. He notado que cuando uso filterable, sortable ya no funciona. ¿Puede ser un error de React Table? ¿Sabes cómo puedo abordar este problema?
const columns = () => [ { Header: 'Name', accessor: 'name', sortable: true, }, { Header: 'ID', accessor: 'id', width: 80, sortable: true, }, { Header: 'Country', accessor: 'country', width: 100, filterable: true, Filter: ({ filter, onChange }) => ( // DROPDOWN WITH OPTIONS ... ), },]
Olvidé mencionar que estaba usando react-table v6. Como algunos de ustedes han dicho, definitivamente era posible usar filterable y sortable al mismo tiempo. Desafortunadamente, parece que esto debe hacerse usando una fila diferente. Si, por ejemplo, desea filtrar por un menú desplegable, colóquelo debajo de la etiqueta de la columna.
Después de depurar mucho, noté que mi problema provenía de CSS. La fila filtrable estaba en la parte superior de la etiqueta de las columnas y, por lo tanto, deshabilitaba la función clasificable. No estoy seguro si alguna vez has visto un ejemplo de cómo abordar esto. Para reemplazar la etiqueta de la columna por la etiqueta de selección. Si es así, te agradecería mucho que lo compartieras. Muchas gracias por sus respuestas
Definitivamente puede hacer que una tabla se pueda filtrar y ordenar al mismo tiempo con ganchos de tabla de reacción. Creé un ejemplo para ilustrarlo:
No necesita pasar accesorios sortable o filterable a su matriz de columnas. Si implementó el filtrado en su tabla y desea agregar la clasificación, todo lo que tiene que hacer es seguir los siguientes pasos:
useSortBy hookuseTable después del gancho useFilters : useTable(..., useFilters, useSortBy)th a su elemento número alguna interfaz de usuario que le mostrará al usuario el orden de clasificación: <span> {column.isSorted ? column.isSortedDesc ? " 🔽" : " 🔼" : ""} </span>Esta es una modificación que muestra cómo puede funcionar para usted (ya que no se compartió la solución completa). Consulte: https://github.com/vaclav18/react-table/blob/master/examples/filtering/src/App.js
El ejemplo en vivo está aquí: https://react-table.tanstack.com/docs/examples/filtering
El ejemplo en vivo es solo para filtrar, por lo que los cambios estarían en: línea 3 línea 277 línea 347 El ordenable: verdadero no es necesario aquí
Consulte /docs/src/pages/docs/api/useSortBy.md para obtener más información.