Mostrando la nueva fila en react-table en la página actual.
He estado jugando con ReactTable v7 por un tiempo y he encontrado el siguiente problema: cuando la tabla está ordenada y usa un paginador, a veces agregar (o editar) una fila hace que esté fuera de la página actual.
Puedes ver el problema aquí:
https://codesandbox.io/s/github/tannerlinsley/react-table/tree/master/examples/material-UI-kitchen-sink
- Ordena la tabla por nombre.
- Pulsa agregar.
- Ingresa un registro con el primer nombre “zzzzz”.
El registro se agrega pero está oculto en la página actual, lo que confunde a los usuarios. ¿Hay una manera “estándar” de solucionar este problema? ¿Me estoy perdiendo algo?
En la v6, he hecho una solución alternativa para esto:
React.useEffect(() => {
if (editedElementId && reactTable) {
const { data } = reactTable.props;
if (data && data.length > 0) {
const internal = reactTable.getResolvedState();
let position = -1;
internal.sortedData.forEach((row, i) => {
if (row._original.id === editedElementId) position = i;
});
if (position >= 0) {
const pageNumber = Math.floor(position / pageSize);
setPage(pageNumber);
} else {
alert.info("Elemento no visible.");
}
}
}
}, [editedElementId]);
<reacttable ref="{(r)" ==""> {setReactTable(r);}}
...
Pero tal vez haya una forma integrada de hacerlo?
davy.ai
Como experto en reactjs y react-table-v7, puedo sugerir algunas posibles soluciones al problema de agregar o editar una fila que provoca que esté fuera de la página actual de una tabla ordenada y paginada.
Una opción es usar la función de devolución de llamada onFetchData proporcionada por ReactTable, que se llama cada vez que se necesita volver a cargar la tabla, como después de la edición o adición de datos. La función onFetchData se puede utilizar para actualizar el número de página o rango en función del orden de clasificación actual y los datos filtrados.
Otra opción es usar el gancho usePagination proporcionado por ReactTable, que permite la lógica de paginación personalizada y el control sobre la página actual y el tamaño de página. Esto se puede utilizar en conjunto con la lógica de ordenamiento para asegurar que las filas agregadas o editadas se muestren en la página correcta.
Finalmente, si ninguna de las soluciones integradas son suficientes, se puede utilizar una solución personalizada similar a la presentada en la pregunta para calcular manualmente la posición y el número de página de la fila agregada o editada, y luego actualizar el estado o llamar a la función setPage en consecuencia.
Vale la pena señalar que este problema es una limitación conocida de la paginación con tablas ordenadas en ReactTable v7, y el equipo de desarrollo está trabajando en mejorar esta funcionalidad en futuras versiones.