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

• React Datasheet Grid es un componente para integrar una UI tipo hoja de cálculo en apps de React, conectando el estado y la definición de columnas para construir pantallas de captura de datos
• El uso básico consiste en pasar value, onChange y columns a <DataSheetGrid />, buscando un flujo más simple que un <input /> común
• Su arquitectura de virtualización y la optimización de renderizado mínimo le permiten manejar cientos de miles de filas, por lo que es adecuado para interfaces de tablas de gran volumen
• Permite controlar el comportamiento, los widgets y los estilos, haciendo posible la personalización según los requisitos del producto
• Soporta copiar/pegar con Excel, Google Sheets y Notion, además de navegación por teclado, menú contextual, arrastre de selección, animaciones e implementación basada en TypeScript

---

Resumen de React Datasheet Grid

• React Datasheet Grid es un componente para crear una UI de hoja de cálculo en React
• Están disponibles NPM y GitHub como canales de instalación y distribución
• El ejemplo de uso básico conecta el estado de React con value y onChange, y pasa columns
  • const [rows, setRows] = useState([])
  • <DataSheetGrid value={rows} onChange={setRows} columns={columns} />

Usabilidad y rendimiento

• Forma de inicio

  • Tiene una estructura que puede usarse de inmediato al conectar el estado y las columnas
  • La documentación incluye Getting started

• Manejo de gran volumen

  • DSG está optimizado para la velocidad y, gracias a su arquitectura de virtualización, puede procesar cientos de miles de filas
  • El renderizado está optimizado al mínimo y se ofrecen performance guides para exprimir aún más el rendimiento

• Personalización

  • Se puede controlar el comportamiento de la hoja de cálculo
  • Se pueden implementar widgets propios
  • Se pueden cambiar los estilos de DSG para ajustarlos a la app

Funciones compatibles y documentación

• Soporta copiar/pegar con Excel, Google Sheets y Notion
• Soporta navegación por teclado y atajos
• Soporta clic derecho y menús contextuales personalizados
• Permite expandir el área de selección arrastrando desde la esquina
• Ofrece animaciones fluidas y está implementado en TypeScript
• La documentación relacionada incluye Features, Examples, Reference

[GN⁺]

Opiniones de Hacker News

• Creo que el objetivo del proyecto de no competir en funcionalidades y hacerlo fácilmente extensible es una decisión realmente acertada.
  Hace más de 10 años tuve que elegir un componente de data grid para usar en un proyecto, y los clientes querían funciones “tipo Excel”.
  La lista de funcionalidades posibles que los proveedores de componentes tenían que crear era enorme; incluso contando solo funcionalidades “pequeñas” individuales, fácilmente superaban las 200, y cada cliente quería un subconjunto distinto.
  Componentes como selectores de fecha/hora también son complejos, pero las expectativas puestas en un grid están en otro nivel por completo.
  Como nadie puede hacerlo todo, la decisión de dejar que la comunidad ayude es muy inteligente.

  • Me da curiosidad si puedes compartir para qué industria era ese proyecto.

• Empecé a usarlo en un proyecto esta semana; era para cambiar una interfaz de “editar cada fila en un cuadro de diálogo” a un modo de edición en tabla inline, y la edición se volvió mucho más rápida.
  También se volvió posible pegar filas, y funciona bien incluso en su estado básico.
  Escribí yo mismo los componentes de columnas para manejar la validación con popovers por celda.
  Me encontré con dos cosas: no hay redimensionamiento de columnas integrado, y quería desactivar la función de seleccionar filas/columnas al hacer clic en el encabezado o en el gutter.
  No estoy seguro de que esto último sea una necesidad lo bastante común como para incluirla en la biblioteca.

  • Gracias por el feedback. DSG es una herramienta hecha para hacer las cosas básicas lo mejor posible y permitir que los usuarios la extiendan como quieran.
    El redimensionamiento de columnas se debatió durante mucho tiempo, pero creo que va en contra de la dirección de crear una herramienta simple y fácil de usar.
    Siento que el ajuste responsivo del tamaño de columnas es un mejor punto medio.
    La segunda idea, de hecho, parece fácil de implementar.
  • El redimensionamiento de columnas es una función bastante común, así que probablemente se agregue pronto.

• Los componentes tipo DataSheetGrid son como el santo grial de la UX/UI, pero recuerdo que lograr todos los detalles es realmente complejo.
  Les deseo éxito y financiamiento.
  He visto que pasa lo mismo sin importar la plataforma base, sea web o escritorio, y tengo buenos recuerdos de cosas como [1].
  [1] https://www.infragistics.com/

  • Coincido. Para ingresar muchos datos repetitivos, creo que esta es la mejor UI.
    Claro que no pretendo decir que inventé algo.
    Gracias por tus palabras, y el financiamiento de open source no es fácil.

• A primera vista se ve bien, pero el texto hero de la parte superior, que cambia sin parar, alterna entre 3 y 4 líneas y hace que la página se sacuda constantemente arriba y abajo, así que cuesta un poco leer el resto del contenido.
  Pasa en Firefox iOS.

  • Aquí tengo el mismo problema, y es muy molesto de ver porque la página salta arbitrariamente hacia arriba y hacia abajo.
    Ocurre en iOS Safari.
  • Gracias a todos los que avisaron sobre este problema. Nunca me había topado con él, y lo corregiré pronto.
  • En Firefox iOS en realidad se ve bien.

• Está bien, pero le faltan varias funciones clave de cosas como Airtable o MUI DataGrid: ordenamiento/filtrado, congelar filas/columnas, filas de agregación, pivotes, etc.
  El concepto es bueno, y espero que sigan construyendo un buen competidor open source frente a los componentes propietarios.

  • Gracias por el feedback. DSG no se hizo para competir en funcionalidades, sino con el objetivo de ofrecer la mejor UX/UI posible y extensibilidad.
    Por eso esas partes hay que implementarlas por cuenta propia.
    Idealmente, estaría bueno que se creara un paquete de npm para cada funcionalidad grande, pero para eso el proyecto tendría que recibir mucha más atención.

• ¿Qué pasó con DataTables? ¿Alguien se acuerda? Como esa herramienta era medio mala pero se usaba en todas partes, el autor solía cobrar por soporte.

  • Todavía la usamos, y sigue siendo bastante excelente.
    El autor la ha mantenido durante más de 10 años con compatibilidad hacia atrás perfecta.
    Ahora la envolvimos con React, y después la reescribimos en React, pero mantuvimos igual la API de comunicación para no cambiar los endpoints del servidor.
  • Por suerte parece haber quedado mayormente atrás junto con jQuery.

• ¿Soy el único al que le molesta la forma en que el rectángulo de foco se mueve literalmente de una posición a otra cuando haces clic en otra celda?
  Si haces clic en una celda a varias casillas de distancia, se nota especialmente cómo el rectángulo azul de foco se desliza hacia el nuevo objetivo.
  Google no hace eso.

• Está bien hecho y se ve bien, pero ojalá no todo lo nuevo estuviera basado en React.
  ¿Dónde puedo encontrar nuevas herramientas web geniales que pueda usar en mi proyecto sin exigir la locura compleja de React?
  No me gusta mucho la forma de instalar cosas con npm.

• @nick-keller, gracias por crearlo. Lo conocí hace un mes y se veía bastante prometedor.
  Trae selección de rangos por defecto, que en algunas alternativas es una función de pago, y además permite personalizar celdas.
  Sin embargo, el ejemplo que mejor muestra qué se puede crear con esto es la captura de pantalla de la sección “customizable” en la landing page, pero no hay una demo de que realmente sea posible.
  Tuve dificultades intentando crear encabezados personalizados y menús de encabezado, así que me pasé a AG-Grid e implementé yo mismo la selección de rangos.

  • Tal vez debería implementar más ejemplos. Parece ser la forma más eficiente de ayudar a la gente.

• En iOS parece que no se puede pegar en las celdas, aunque sí se puede escribir.
  Me pregunto si es el comportamiento previsto o un bug.
  ¿En la versión de escritorio sí se puede pegar?