TLDR: ¿Alguien conoce una forma plausible de abordar la representación de 6000 registros en una página desde un archivo de Excel o desde un archivo HTML preexistente que no ralentizará mi sitio web?
He creado un sistema de mantenimiento de registros para un cliente que tiene muchos departamentos. Todos los demás departamentos están utilizando el sistema React CRUD que configuré para ellos para realizar un seguimiento y administrar la base de datos en su totalidad.
Tengo una persona en un departamento en particular que solía llenar el sitio web utilizando un archivo HTML que se genera localmente en su máquina a partir de un archivo de Excel. No se moverán de ninguna manera al migrar al sistema que construí e insisten en que les proporcione una forma de cargar un archivo HTML o un archivo de Excel para mostrar datos en el sitio web, y quieren administrar la información localmente. en su propia. Además, quieren todos los 6000 registros en una sola página y tampoco cederán en esto, arrojando paginación de cualquier tipo por la ventana (que previamente había incorporado).
Realmente no tengo ningún reparo con esto, aparte de que he representado los datos en el archivo de Excel usando Sheet.js (xlsx) para convertir el archivo de Excel a JSON y luego mapearlo en una tabla HTML como la siguiente. Es solo un mapa simple como cualquier otro en React:
<thead className="bg-gray-50"> <tr> {libraryColumns.map((column) => ( <th className="px-10 py-3 text-center text-xs font-medium text-gray-500 uppercase tracking-wider" key={column} > {column} </th> ))} </tr> </thead> <tbody className="bg-white divide-y divide-gray-200"> {books.map((book, index) => ( <TableRow book={book} key={index} index={index} /> ))} </tbody> </table>
Esto está funcionando, sin embargo, ha hecho que esta parte del sitio web sea dolorosamente lenta.
Así que tengo dos opciones , puedo continuar por este camino de llenar la página con datos leyendo el archivo de Excel del servidor, convirtiéndolo a JSON y mapeándolo a esta tabla, o podría representar el archivo HTML que el cliente puede generar desde su archivo de Excel. Sin embargo, en el caso de este último, me gustaría un estilo personalizado, y no estoy seguro de si eso es posible. Si no es posible, no estoy casado con eso porque en este punto solo necesito hacerlo y terminar con eso.
Mi pregunta en última instancia es ¿cuál es la mejor práctica para algo como esto?
Desafortunadamente, debo hacer lo que el cliente quiere y no puedo modificar los requisitos, y no estoy seguro de cómo hacer que esto funcione de manera eficiente, si es que es posible.
gracias.
Debe agregar la funcionalidad de desplazamiento infinito (a medida que el usuario se desplaza, carga datos a pedido) o también puede usar la biblioteca de ventana de reacción, tengo un código de trabajo de desplazamiento infinito personalizado, puede consultar mi repositorio aquí https://github. com/amansadhwani/all-features-react/tree/master/src/components/InfiniteScroll