Material-ui: [docs] Tabla virtualizada

Esperamos que la API actual permita una integración simple con react-virtualized . Estamos abiertos a hacer cualquier cambio en la implementación con el fin de simplificar la integración.

Tener un ejemplo de demostración en los documentos sería increíble.

Si eso puede ayudar, aquí hay un ejemplo de integración con la Lista / Menú https://codesandbox.io/s/oQ0nkl5pk.

@oliviertassinari Lo hice sin react-virtualized porque era un desastre y no funcionaba bien con los componentes de mui.
Además, mi solución actual es un cabezal fijo de CSS puro y un tbody desplazable con altura de tabla dinámica y ancho de columnas dinámicas (probado en Safari también).
El thead siempre en la parte superior con un tbody desplazable es imprescindible para las cuadrículas de datos.

Estoy agregando eliminación de rebotes de desplazamiento, ajustando el rendimiento y arreglando algunos fallos, pero está funcionando muy bien: estoy renderizando "virtualmente" alrededor de ~ 2400 filas, muuuy suave.

Preguntas sobre los componentes Table :

1. ¿Cómo usar ref con componentes MUI? Estoy calculando automáticamente TableThead altura: el problema es que

<TableHead ref={ ref => this.tableThead = ref }>

no devuelve el elemento contenedor DOM real de TableThead sino la instancia de React (comportamiento nativo de React cuando se aplica ref en un elemento que no es DOM) porque eso es algo que debe aplicarse en el TableThead componente en sí mismo; otros componentes pueden necesitar esto, entonces, ¿por qué no tener un refHandler en cada componente MUI que aplica la devolución de llamada dada en el primer elemento renderizado? (Espero haber podido explicar esto @ _ @)
Mi solución actual es extraña

const theadHeight = ReactDOM.findDOMNode(this.tableThead).clientHeight; // eslint-disable-line react/no-find-dom-node

lo que significa usar el findDomNode obsoleto y deshabilitar también eslint.

1. ¿Por qué se aplica border-bottom en celdas en lugar de filas?

2. ¿Qué hay de tener un stripe={true} prop para dividir automáticamente TableBody filas?

3. ¿Por qué .MuiIconButton.root tiene una propiedad de estilo zIndex? 🤔

Espero publicar algo estable sobre esto pronto para que puedan echarle un vistazo, eso es algo que se puede adoptar de manera general.

Lamento molestarme tanto, pero estoy usando mucho mui @ next, ¡ así que estoy detectando muchos casos de uso!

Lo hice sin react-virtualized porque era un desastre y no funcionaba bien con los componentes de mui.

Oh, eso es una vergüenza para nosotros. ¿Alguna idea de lo que podríamos hacer para que sea posible?

1. Puede probar el innerRef para obtener una referencia del TableHead . ref le dará una referencia en el componente withStyles(TableHead) . Si eso no funciona, podríamos exponer una propiedad rootRef . Ese es un patrón que ya estamos usando.

2. Ninguna pista

3. ¿A qué te refieres con raya?
4. Lo he eliminado en # 7467

~~Oh, eso es una vergüenza para nosotros.

En realidad, es una mezcla de react-virtualized contenedores propios, elementos nativos table/thead/tbody DOM y la necesidad de tener un tbody desplazable lo que causó el problema.
Se necesitó mucho trabajo con él: simplemente hacer una solución ad-hoc por MuiTable fue muy fácil.

1. exponer un rootRef sería genial (asumiendo que TableThead elemento principal en el método render es el elemento Thead DOM en sí)

2. entonces, ¿se debería mover border-bottom a tr ? ¿Debería trasladar esto a un tema específico?

3. Me refiero a filas rayadas: fáciles de lograr con like tr:nth-child(odd) { backgroundColor: f2f2f2 pero como ya tenemos el práctico color hover={true} ¿por qué no tener el práctico striped={true} ? :)

4. ¡estupendo!

1. 👍 Suena como un plan, aquí hay un ejemplo , un RP es bienvenido.
2. Bootstrap está haciendo lo mismo , creo que está proporcionando más flexibilidad al usarlo en TableCell .
3. ¿Porque no está en la especificación y se puede implementar simplemente en el área de usuario?
4. 👍

1. No estoy seguro de tener simplemente ref={rootRef} en cada componente.
   Los desarrolladores que lo están usando probablemente (en su mayoría) necesiten tener control sobre el DOM.
   En su ejemplo, <FormControl ref={rootRef} ...> volverá a devolver una referencia al componente React (porque FormControl no es un elemento DOM) y hará que el desarrollador use la solución alternativa que tuve que usar.
   Tal vez deberíamos hacer que rootRef comporte de la siguiente manera:

¿El contenedor del componente renderizado es un elemento DOM?

• si es así, aplique ref={rootRef} en él
• de lo contrario, aplique rootRef={rootRef} en él => que se propagará hasta el primer elemento DOM: de esta manera, el codificador siempre tendrá la referencia DOM real

La solución general en la que puedo pensar es tener propiedades muiRef y rootRef donde el primero aplica la devolución de llamada al contenedor "componente mui" (si corresponde) y el segundo aplica la devolución de llamada como yo dijo antes.
De esta manera, el desarrollador puede tener fácilmente tanto la referencia MUI como la referencia DOM (lo que necesite, cuando lo necesite).
¿Crees que esto tiene sentido?

1. ¿De Verdad? @ _ @

2. ops! Siempre me olvido de las especificaciones del material.

1. Oh, no he pensado en ese caso. El problema al que se refiere es el siguiente:
2. El componente A toma una propiedad ref y rootRef
3. Reaccionar interceptar ref y aplicarlo en el elemento
4. El componente B recibe una propiedad rootRef y la aplica como referencia en la raíz del componente C
5. Reaccionar interceptar este ref y aplicarlo en el elemento

Pero, ¿y si el componente C también tiene una propiedad rootRef?
El componente A puede estar en la tierra del usuario, el componente B puede ser TextField y el componente C puede ser FormControl.

Entonces, mi respuesta, al principio presentamos rootRef como un simple ayudante. No hemos pensado en la industrialización. Entonces, creo que el comportamiento actual es excelente como determinista, simple y sin la limitación que está describiendo, si las personas están interesadas en acceder al elemento dom subyacente, pueden usar la API findDOMNode .

@damianobarbati ¿ -virtual-list fue el experimento con Table y virtualización mencionado aquí ?

Supongo que listComponent = TableBody, itemComponent = TableRow?

Comencé este proyecto que usa react-virtualized con Material 1.0 que puede interesarle.

https://github.com/techniq/mui-table

Todavía es un trabajo en progreso (consulte https://github.com/techniq/mui-table/blob/master/TODO.md) pero podría serle útil. Faltan documentos, pero eche un vistazo a las historias para tener una idea de cómo usarlos.

@techniq ¡ Esto parece prometedor 😄! Creo que sería genial renovar la sección de documentación de la tabla en algún momento para tener:
- https://github.com/DevExpress/devextreme-reactive~~ (licencia comercial)

• https://github.com/gregnb/mui-datatables
• https://github.com/techniq/mui-table

También podemos agregarlo a la sección https://material-ui-next.com/discover-more/related-projects/#material-ui-specific-projects.
Entonces, avísenos cuando el proyecto esté más maduro. Creo que podemos aceptar una solicitud de extracción para promover el proyecto :).

He hecho un PR por react-virtual-list aquí https://github.com/clauderic/react-tiny-virtual-list/pull/30 que permite su uso con material-ui. Luché para que reaccionar-virtual funcionara y creara HTML válido, ya que tiene div codificado.

cc: @kgregory

@eyn buen trabajo! Acabo de terminar una implementación de una tabla de desplazamiento infinito usando react-virtualized y material-ui. Espero hacer una idea general pronto. Cuando lo haga, lo vincularé aquí para futuros visitantes de este tema y posiblemente como un ejemplo en los documentos.

@kgregory , ¿terminaste tu esencia? Todavía estoy buscando una solución básica para la tabla de IU de material virtualizada y no es fácil de encontrar ... ¡Sería de gran ayuda!

¡Gracias por tu trabajo!

@neofox No, lo siento. Nunca llegué a hacerlo, pero tu respuesta es un buen recordatorio. Intentaré encontrar tiempo para armar algo.

@oliviertassinari tu ejemplo en uno de los primeros comentarios que supuestamente muestra cómo usar la lista de materiales con la lista reactiva virtualizada no está funcionando. ¿Todavía tienes ese ejemplo por ahí?

@rolandjitsu Lo siento, no tengo ningún ejemplo. De eso se trata este problema :).

@oliviertassinari lo tengo. Pensé que este problema era sobre la mesa y no sobre <List> , ¿o también cubre las listas?

@rolandjitsu La lista, la mesa, el papel, la lista de cuadrículas. Todo es lo mismo. Este problema se trata de agregar una demostración simple para que las personas puedan ver el patrón y aplicarlo a diferentes componentes. La tabla es un componente que probablemente necesitará virtualización.

@oliviertassinari Me gustaría darle una material-ui @ next integrado con react-virtualized?

@ hassan-zaheer Sí, creo que una demostración simple con react-virtualized al final de la página de documentos de tablas hará el truco :).

Hola. Da la casualidad de tropezar con este hilo al investigar para mi proyecto. Me gustaría saber si hay alguna actualización aquí relacionada con la demostración o la documentación de uso. @kgregory ¿ O puede

@ zd-project Puedes echar un vistazo a mi proyecto mui-virtualized-table .

Solía ​​ser mui-table, pero decidí bifurcar el 2 y admitir diferentes casos de uso ( mui-table aprovecha el DOM directamente y le permite usar cosas como position: sticky y <table> diseño (intervalos de fila / columna, anchos automáticos, etc.) que eran difíciles con react-virtualized.

Dicho esto, mui-virtualized-table acaba de agregar un cambio de

¿Dónde estamos con estos chicos?

@techniq , ¡gracias por mui-virtualized-table ! ¡Es genial! ¿Existe alguna posibilidad de que podamos fusionarlo en mui-org/material-ui ?

Me alegraría que alguien abriera un PR que presentara una demostración de los documentos. De esta manera, podríamos examinar si podemos mejorar la API de la tabla para una mejor integración con las estrategias de virtualización.

@mastertinner ¿Por qué necesitamos agregar esto al núcleo? La virtualización es una estrategia de optimización. No todo el mundo genera grandes conjuntos de datos, por lo que no sería una carga para todos.

@mastertinner Podríamos comenzar haciendo referencia al proyecto en la documentación, por ejemplo aquí: https://material-ui.com/demos/tables/#advanced-use-cases :)

👍 suena como un plan

@mastertinner Aunque todavía lo uso (cuando se necesita virtualización), también uso mi nueva mui-table cuando no necesito una virtualización, y puedo aprovechar el dom (usando table , tr , td , o cuadrícula css para el diseño, eliminando la necesidad de anchos de columna explícitos, etc.) y habilita algunos patrones avanzados como múltiples position: sticky encabezados (como este )

@rogerstorm financió este número con $ 30. Véalo en IssueHunt

Decidí jugar con esto hoy, no lo recomiendo 😭 Esto es lo que he producido hasta ahora:

Disculpe el retraso, mi computadora portátil no es excelente 👎 Utiliza componentes Material-UI y componentes react-virtualized

@joshwooding He hecho exactamente lo mismo que tú, encabezado virtualizado + fijo (con barra de desplazamiento solo en el cuerpo) . Si su implementación usa dos <Table> s separados, entonces creo que tiene los mismos problemas que yo.

• los accesorios de alineación del material (por ejemplo, numeric ) no funcionan, porque puede usar un componente como <div> para el diseño dentro de <TableCell> .
• Puede asignar propiedades css por td y tr para que funcione virtualizado correctamente. No hay forma de dar height o max-height a td y tr y el material <TableCell> tiene su propio relleno, márgenes, por lo que hace es difícil fijar la altura de la fila.

Bueno, el punto es que un componente dentro de <TableCell> es inevitable. Me pregunto si resolvió este problema de una manera elegante. Si no es así, creo que el encabezado virtualizado + fijo (con barra de desplazamiento solo en el cuerpo) es difícil de ser un componente pequeño (tan pequeño como su función) y bien definido.

@worudso Actualmente usa solo un <Table> Necesito encontrar una manera de pasar el número, pero es posible que pueda hacerlo funcionar. Definitivamente no es un componente pequeño y mi código todavía está un poco por todas partes, pero voy a trabajar un poco más y ver si puedo refinarlo.

Creé una caja de arena que demuestra el uso de material-ui y react-virtualized para producir una tabla virtualizada. Este ejemplo en particular usa react-virtualized para dimensionar la tabla a la altura de la ventana.

El componente MuiVirtualizedTable del ejemplo también está disponible en esta esencia .

MuiVirtualizedTable puede aceptar cualquier accesorio compatible con una tabla . El rowClassName no se aplica directamente, sino que se aplica además de otros estilos definidos en MuiVirtualizedTable .

El prop columns espera una matriz de objetos que se usa al representar celdas para cada columna. Cada objeto puede aceptar cualquier accesorio compatible con Column .

Mis disculpas por demorar tanto. He estado ocupado.

FYI, ahora también hay react-window que se supone que es el sucesor de react-virtualized . En caso de que alguien quisiera probar eso.

@kgregory Gracias por compartir el codesandbox.

@joshwooding Gran demostración. Es genial tener un encabezado fijo :). ¡Espero que puedas completar la implementación! En cuanto al reenvío numérico, ¿qué le impide aplicar directamente en las celdas? reaccionar-ventana vs reaccionar-virtualizado

@oliviertassinari Me he fijado el objetivo de usar la API del componente Table y ahora mismo no parece que puedas pasar accesorios personalizados a través del componente Column . Probablemente hay formas de hacerlo sin usar la forma reactiva virtualizada.

@joshwooding ¿ https://github.com/bvaughn/react-virtualized/blob/master/docs/Table.md#headerrowrenderer ?

@oliviertassinari He intentado usar HeaderRowRenderer pero parece que no puede pasar accesorios personalizados a través de él sin manipular los accesorios existentes, ya que esto es lo que se llama para crear las columnas para pasar al headerRenderer:

const renderedHeader = headerRenderer({ columnData, dataKey, disableSort, label, sortBy, sortDirection, });

@oliviertassinari Para una tabla de altura fija, puede editar ligeramente la demostración de @kgregory : https://codesandbox.io/s/6vo8y0929k

@joshwooding ¡Se ve genial! No puedo pensar en nada que falte para convertirlo en una demostración oficial.

@issuehuntfest ha financiado $ 60.00 para este número. Véalo en IssueHunt

@oliviertassinari Trabajaré en implementar esto :)

@joshwooding ha enviado una solicitud de extracción. Véalo en IssueHunt

@oliviertassinari ha recompensado $ 81.00 a @joshwooding. Véalo en IssueHunt

• : bolsa de dinero: Depósito total: $ 90.00
• : tada: Recompensa del repositorio (0%): $ 0.00
• : llave inglesa: Tarifa de servicio (10%): $ 9.00

@oliviertassinari ha recompensado $ 81.00 a @joshwooding. Véalo en IssueHunt

Bien merecido. Buen trabajo @joshwooding!

Tengo una necesidad similar, pero para el componente List ... ¿funcionaría el mismo enfoque para hacer que la lista funcione?

@mdizzy Sí, podríamos agregar una demostración similar para la lista.

Estoy intentando en este momento hacer una lista virtual con react-window (como sugirió el creador usarla en lugar de virtualizada si no necesita la API completa, pero al final la API para una lista realmente no cambia tanto)

Hasta ahora tengo dos grandes problemas:
1) El estilo de los elementos de la lista está roto, especialmente para cosas como iconos / acciones correctos. Supongo que el estilo inyectado de la lista virtual no funciona bien con el estilo de material-ui
2) Los subtítulos pegajosos también se vuelven muy desordenados, probablemente por la misma razón (la posición de uso de la ventana de reacción es absoluta para diseñar los elementos)

Probablemente voy a intentar react-virtualized para ver si funcionan mejor juntos

@MastroLindus Supongo que primero ha probado nuestra demostración de virtualización.

@oliviertassinari Comencé por mi propio camino, encontré los problemas que describí anteriormente, busqué en Google y encontré este hilo.

Luego descubrí la demostración de virtualización, verifiqué su código y descubrí que es básicamente lo mismo que estoy haciendo yo mismo (solo se aplica a Tablas en lugar de listas).

Mis problemas están un poco más relacionados con las listas. El concepto general funciona, pero cosas como iconos, acciones, encabezados fijos no funcionan correctamente.
En detalle, refiriéndome a mis 2 puntos en el comentario anterior:
El problema número 1 podría ser un problema con react-window que no estará presente con react-virtualized. Te lo haré saber tan pronto como lo intente hoy o mañana. Tal vez tengamos suerte y simplemente funcione con react-virtualized. Veamos.
Problema número 2 (los subtítulos adhesivos no funcionan correctamente) Creo que es algo que necesitará una solución ad-hoc de todos modos, ya que su posicionamiento probablemente creará un conflicto sin importar qué. Alguien construyó https://github.com/marchaos/react-virtualized-sticky-tree para un problema similar (teniendo un trato virtualizado de reacción con encabezados adhesivos) pero no tuve tiempo para investigarlo ahora

@MastroLindus ¿Qué problemas tenemos con https://next.material-ui.com/demos/tables/#virtualized -table?

@oliviertassinari Ninguno.
Especifiqué que mis problemas son específicos de listas virtuales, no de tablas virtuales. (Nuevamente: lamento estar escribiendo sobre el problema de Table Virtualized, no hay ninguna para Listas virtualizadas y estaba siguiendo el comentario de @mdizzy )

Con respecto a las listas: usar ListItemSecondaryAction, ListItemIcon y ListSubheader (con encabezados fijos) no parece funcionar, ya que su posicionamiento se complica.
Sin esos componentes, obtuve una lista básica para trabajar con react-window (y supongo que haría lo mismo en react-virtualized)

@MastroLindus Creo que puedes mover la discusión al # 15149.