Presentación en HN: DataSheetGrid, un componente de React al estilo Airtable

Presentación de React Datasheet Grid

• React Datasheet Grid es un componente de React similar a Airtable que permite crear hojas de cálculo atractivas.
• Asociación con Tggl.io, que ayuda a los equipos de tecnología y producto a lanzar productos de mejor calidad más rápido y a mejorar la tasa de conversión.
• Ofrece el componente DataSheetGrid, fácil de usar: solo hay que conectar el estado.

Facilidad de uso

• React Datasheet Grid es más fácil de usar que <input />.
• Permite gestionar y modificar el estado de las filas de la hoja de cálculo usando useState.

Rendimiento

• Velocidad optimizada con una arquitectura de virtualización que puede manejar fácilmente cientos de miles de filas.
• Rendimiento optimizado con renderizado mínimo; siguiendo la guía de rendimiento se puede aprovechar al máximo el desempeño de DSG.

Posibilidades de personalización

• Permite controlar todo el comportamiento de la hoja de cálculo, implementar widgets propios y personalizar el estilo de DSG para adaptarlo a la app.

Muchas funciones

• Soporte para copiar y pegar desde Excel, Google Sheets, Notion y más.
• Soporte completo para navegación por teclado y atajos.
• Soporte para clic derecho y menús contextuales personalizados.
• Soporte para arrastrar desde la esquina para expandir la selección.
• Animaciones fluidas.
• Construido con Typescript.

Opinión de GN⁺

Lo más importante de React Datasheet Grid es que ofrece facilidad de uso, excelente rendimiento, posibilidades de personalización y una gran variedad de funciones. Este componente puede ayudar a los desarrolladores a implementar funciones de hoja de cálculo de forma rápida y eficiente, contribuyendo a mejorar la experiencia de usuario y a reducir el tiempo de desarrollo del producto. Por estas razones, puede ser una herramienta muy interesante para los desarrolladores de software.

[GN⁺]

Comentarios de Hacker News

• Que el objetivo del proyecto se haya centrado en ofrecer extensibilidad fácil en lugar de competir por funciones fue una decisión muy inteligente.

  • Recuerda una experiencia en un proyecto anterior en la que tuvieron que elegir un componente de cuadrícula de datos con funciones "tipo Excel" que querían los clientes. Había muchísimas funciones pequeñas, y cada cliente quería un subconjunto distinto de ellas.
  • Muchos componentes son complejos, pero las expectativas sobre una cuadrícula están en un nivel completamente distinto.
  • Nadie puede hacerlo todo, y apoyarse en la ayuda de la comunidad es una decisión sensata.

• Esta semana empezaron a usarlo en un proyecto, reemplazando una interfaz de "editar cada fila en un cuadro de diálogo" por un modo de edición de tabla en línea. Funcionó bien de inmediato, y escribieron su propio componente de columna para manejar validación con popovers en cada celda.

  • No tiene redimensionado de columnas integrado (aunque no ha sido un gran problema para usarlo).
  • Querían desactivar la función de seleccionar filas o columnas al hacer clic en el encabezado o el canalón. Puede que no sea una necesidad lo bastante común como para integrarla en la librería.

• El componente DataSheetGrid se considera el santo grial del UX/UI, pero en verdad es demasiado complejo para abarcar todos los detalles. Le desean todo el éxito y financiamiento. Han visto repetirse la misma historia más allá de la plataforma base, ya sea web o escritorio.

• Este componente se ve bien, pero le faltan algunas funciones clave como las de Airtable o MUI DataGrid (ordenamiento/filtrado, fijar filas/columnas, filas de agregación, pivote, etc.).

  • Aun así, es un buen concepto, y le desean suerte construyendo un competidor OSS adecuado.

• A primera vista se ve genial, pero el texto hero de la parte superior de la página cambia constantemente y hace que la página se mueva hacia arriba y hacia abajo, así que cuesta leer el resto. (En Firefox para iOS)

• ¿Alguien recuerda qué pasó con DataTables? Esa herramienta era pésima pero se usaba muchísimo, y su autor cobraba por soporte.

• Les molesta la forma en que el rectángulo de enfoque realmente se mueve de un lugar a otro cuando se hace clic en otra celda. Si haces clic a varias celdas de distancia, puedes ver cómo el rectángulo azul de enfoque se desplaza rápidamente hasta el nuevo destino. Google no hace eso.

• Este componente se ve realmente genial, y lo necesitaban hace un mes. Piensan probarlo.

• En iOS no se puede pegar en una celda, pero sí escribir. ¿Ese comportamiento es intencional o es un bug? ¿En la versión de escritorio sí se puede pegar?

• Gracias a @nick-keller. Encontraron esto hace un mes y se veía muy prometedor. La selección de rangos viene disponible por defecto (en algunas soluciones alternativas es una función pro), y se pueden personalizar las celdas. Sin embargo, no hay una demo que muestre lo que realmente es posible, así que en la landing de la sección "personalizable" solo enseñan como captura de pantalla el mejor ejemplo. Tuvieron dificultades para crear encabezados personalizados y menús de encabezado, así que se cambiaron a AG-Grid e implementaron su propia selección de rangos.