angular / angular/components

help(COMPONENT): Getting Sticky to work right for Angular Material Data Table.

Abierto
#19,872 6 comentarios 0 reacciones 0 asignados Ver en GitHub
area: material/table cannot reproduce P4 troubleshooting
Lenguaje dominante
TypeScript
Estrellas
25k
Forks
6.8k
Merge medio
1 d 8 h
PR fusionados (30 d)
91

Descripción

#### What are you trying to do?

Get sticky to work right. Here's a Stackblitz that has an ID column that is sticky, and two other columns. In this case sticky works correctly because there are only two other columns:

https://stackblitz.com/edit/angular-material-minimal-sticky

However if we add 100 columns, as is done in this demo:

https://stackblitz.com/edit/angular-material-minimal-with-paging-and-sorting-and-sticky-100

The ID column disappears when scrolling horizontally.

The solution suggested on SO is to use inline-flex:

https://stackoverflow.com/questions/62562388/getting-sticky-to-always-stick-the-column-in-material-data-table

However that creates another problem, which is that the header cells no longer expand to fit the table with.

That can cause table rows to wrap inside the main table container as described here:

https://stackoverflow.com/questions/62584549/material-data-table-wraps-rows-when-table-width-allows-it

Any thoughts on how to get sticky to work right, without causing the wrapping issues?

Guía de contribución

Abrir la guía de contribución

Línea de trabajo

Comienza reproduciendo el comportamiento en las dos demos enlazadas de StackBlitz y compáralo con el enfoque inline-flex descrito en las respuestas enlazadas de Stack Overflow. Investiga el comportamiento de las columnas fijas de las tablas de datos de Angular Material y, a continuación, verifica que la columna ID siga siendo visible con 100 columnas, mientras el dimensionamiento de la cabecera y el ajuste de línea de las filas siguen funcionando correctamente.

Escrito por el modelo de indexación a partir del texto del issue.

Evaluación

Stack tecnológico
angular, typescript
Área
frontend
Tipo de issue
Error
Dificultad
4/5
Tiempo estimado
3-5 días
Estado de actividad
Estancado
Claridad
Bastante claro
Aptitud para principiantes
35/100

Recibe los nuevos issues en tu correo

Un resumen breve de issues de GitHub para principiantes.