Material-ui: [Tabla] Establecer el ancho de la columna de la tabla

+1

Nada muy especial en esto:

const colWidth {
    width: '2rem'
};

<TableRowColumn style={ colWidth }>
    ...
</TableRowColumn>

<TableRowColumn style={{ width: 100 }}>

no se comporta muy bien con TableHeaderColumn

¿Hay alguna forma de asignar dinámicamente el ancho de col según el contenido?

En mi tabla HTML de vainilla, el ancho de las columnas se establece automáticamente según el contenido. material-ui parece imponer el mismo ancho en todas las columnas. ¿Hay alguna forma de establecer el ancho de la columna para que sea dinámico, como las tablas HTML vanilla?

@sanfilippopablo , <Table> usa el prop table-layout: 'fixed' css, lo que lleva a que todas las columnas tengan el mismo ancho, combinado con white-space: 'nowrap' en cada celda de la tabla para manejar el desbordamiento.

No puede cambiar de manera segura a table-layout: 'auto' ya que la tabla crece infinitamente con su contenido a menos que elimine la proposición css de espacio en blanco mencionada anteriormente. Y si haces esto
ya no puede usar el fixedHeader={true} prop ya que los encabezados están contenidos en una tabla separada: cry :

Se agradecería recibir algunos comentarios.

Lo que he estado haciendo para establecer el ancho de las columnas es para

No puede cambiar de manera segura a table-layout: 'auto' ya que la tabla crece infinitamente con su contenido

¿Qué hay de ajustar el ancho del encabezado de la tabla cuando el ancho tableRowColumn cambia con el contenido?
Parece que no puedo configurarlo para que esos 2 estén alineados.

Supongo que usa fixedHeader={true} y no puede establecer un ancho personalizado o no lo hace y debe mantener sus encabezados dentro de su <TableBody> .

De acuerdo, ¡poner encabezado en tbody funciona! Ahora necesito averiguar cómo hacer columnas de encabezado de varias líneas. ¿Algun consejo?

¿Estás tratando de lograr algo como esto ? (si no es así, probablemente pueda encontrar el ejemplo correcto en este sitio web)

Creo que puedes hacer prácticamente todo lo que quieras con los atributos colSpan en TableHeaderColumn y TableRowColumn y rowSpan en TableRow .

No entiendo, ¿por qué está cerrado?

Poner TableHeader en TableBody no funciona para mí.

@ tvtri96
Lo que sugerimos fue poner tableRow actuando como encabezado de tabla en tableBody,
pero me parece que ahora está funcionando bien.

así es como se ve ahora en mi código:

<Table fixedHeader={true}>
          <TableHeader>
            <TableHeaderComponent schema={schema}/>
          </TableHeader>
          <TableBody displayRowCheckbox={false} showRowHover={true}>
            {this.props.data.map((item, index) => (
              <TableRowComponent key={index} schema={this.props.schema}
                item={item} onRemoveClick={this.handleRemoveItem}
                onEditClick={this.handleEditItem}
              />
            ))}
          </TableBody>
</Table>

y las columnas de encabezado están alineadas correctamente con las columnas del cuerpo.

Gracias por responderme. ¿Qué hay dentro de TableHeaderComponent? Supongo que no es como un TableHeader normal, ¿verdad?
''

Marca de tiempo

Sí, solo está envuelto por razones.

¿Alguna noticia sobre esto? ¿Cómo puedo dejar que las columnas se ajusten automáticamente al contenido?

Esto funciona para mí, tamaño automático:

      <Table style={{tableLayout: 'auto'}}>

@arjan

 <Table style={{tableLayout: 'auto'}}>

Esto no tiene ningún efecto sobre el encabezado.

<Table fixedHeader={false} style={{ tableLayout: 'auto' }}> funciona (dimensionamiento dinámico basado en el contenido).

Necesitaba agregar width: "auto" , lo que da como resultado:

<Table fixedHeader={false} style={{ width: "auto", tableLayout: "auto" }}>

@nathanmarks , vuelva a abrir.

Table debería tener una propiedad incorporada que le permita ajustar el tamaño automáticamente al contenido, y no debería requerir deshabilitar fixedHeader . Yo iría más allá y diría que el tamaño automático del contenido debería ser el comportamiento predeterminado.

@devuxer Lo sentimos, pero no estamos agregando funciones de manera proactiva a la rama v0.x.

@mbrookes , gracias por hacérnoslo saber. ¿Está diciendo que la tabla en v1.x resuelve este problema?

@devuxer Creo que fue reescrito desde cero.

https://material-ui-next.com/demos/tables/

Tenía una tabla con tres columnas, donde la primera y la tercera columna siempre contendrían una pequeña cantidad de texto. Quería que la segunda columna ocupara la mayor parte del espacio para que la primera y la tercera columnas se empujaran hacia los bordes izquierdo y derecho de la tabla, respectivamente. Esto funcionó para mí (usando style aquí en lugar de className por brevedad):

<Table style={{ tableLayout: "auto" }} />
<TableRowColumn style={{ width: "10%" }}>{text}</TableRowColumn>
<TableRowColumn style={{ width: "80%" }}>{text}</TableRowColumn>
<TableRowColumn style={{ width: "10%" }}>{text</TableRowColumn>

Encontré una mejor solución ... entonces, cada columna tiene el mismo ancho.
Digamos que tengo tres columnas, y quiero que la primera ocupe la mitad del ancho total y la tercera debería ser aproximadamente un tercio de la fila; el del medio sea el más pequeño:

  <TableRowColumn colSpan='3'>twice as big!</TableRowColumn>
  <TableRowColumn> I'm small</TableRowColumn>
  <TableRowColumn colSpan='2'>I'm in between</TableRowColumn>

En realidad, tengo 7 columnas, pero la suma de mis colspans es igual a 20; la última solo tiene un icono para eliminar, la mayoría de las otras son colspan 3; el campo de texto grande es colspan 6, y un campo de selección y un selector de fecha son en colspan 2 ...

¡Funciona de maravilla!

Esto es bueno para la v1.4.3

const styles = { 
    narrowCell: {
        'width': '150px',
    }
};

<Table>
    <TableHead>
        <TableRow>
            <TableCell>Company Name</TableCell>
            <TableCell className={classes.narrowCell} numeric>Amount</TableCell>
        </TableRow>
    </TableHead>
    <TableBody>
    <TableRow>
        <TableCell> name 1 </TableCell>
        <TableCell className={classes.narrowCell}> $100 </TableCell>
    </TableRow>
    </TableBody>
</Table>

También puede dar anchos porcentuales, el resto de las celdas se extienden por igual

¿Cómo puedo usar esta solución si tengo que usar colspan={2} en una fila TableHead?

Si agrego colspan={2} todas las columnas tendrán el mismo ancho. Algo como esto:

const styles = { 
    narrowCell: {
        'width': '150px',
    },
    miniCell: {
        'width': '75px',
    },
};

<Table>
    <TableHead>
        <TableRow>
            <TableCell>Company Name</TableCell>
            <TableCell className={classes.narrowCell} numeric colspan={2}>Amounts</TableCell>
        </TableRow>
    </TableHead>
    <TableBody>
    <TableRow>
        <TableCell> name 1 </TableCell>
        <TableCell className={classes.miniCell}> $100 </TableCell>
        <TableCell className={classes.miniCell}> $100 </TableCell>
    </TableRow>
    </TableBody>
</Table>

@Bowfish Si desea cambiar colspan = {2} el ancho de la celda, intente cambiar el ancho de la tabla, dado que abarca toda la tabla. Las celdas más pequeñas se pueden ajustar individualmente.

Aplicar este estilo de alguna manera me ayudó:
Me senté diferente maxWidth para diferentes celdas en fila, pero lo mismo en cada columna usando estilos en línea.

const styles = (theme) => ({
  tableCell: {
    whiteSpace: 'nowrap',
    overflow: 'hidden',
    textOverflow: 'ellipsis',
    maxWidth: '40px',
  },
});

Ninguna de las soluciones publicadas anteriormente funciona. ¿Por qué es tan difícil de lograr?

  <Table fixedHeader={false} style={{tableLayout: "auto" }}>
        <colgroup>
            <col width="250px" />
            <col />
            <col width="40px" />
            <col width="40px" />
        </colgroup>
        <TableHead>
          <TableRow>

la segunda columna es flexible

No estoy seguro de si alguien todavía tiene un problema con esto, pero terminé usando withStyles y funcionó, aquí está el pseudo código:

import {withStyles} from '@material-ui/core/styles';  

const styles = theme => ({
    cell: {
        width:'20%'
    },
    cellLarge: {
        width:'60%'
    } 
});

<Table >
       <TableHead>
               <TableRow>
                        <TableCell className={this.props.classes.cell}>header 1</TableCell>
                         <TableCell className={this.props.classes.cell}>header 2</TableCell>
                         <TableCell className={this.props.classes.cellLarge}>header 3</TableCell>
                </TableRow>
          </TableHead>
                <TableBody>
                        <TableRow>
                            <TableCell>value 1</TableCell>
                            <TableCell>value 2</TableCell>
                            <TableCell>value 3</TableCell>
                        </TableRow>
               </TableBody>
   </Table>

export default withStyles(styles)({ComponentName})

Ninguna de las soluciones publicadas anteriormente funciona. ¿Por qué es tan difícil de lograr?

De alguna manera reconozco por qué no funciona, ¡porque solo configuramos width solo para TableHead o TableBody ! Para que funcione, debemos definir minWidth y maxWidth bot en TableCell en TableHead y TableBody , aquí el ejemplo

<Table>
    <TableHead>
        <TableRow>
            <TableCell column='data1' style={{minWidth:100, maxWidth:100}}>{content}</TableCell>
            <TableCell column='data2' style={{minWidth:'200px', maxWidth:'200px'}}>{content}</TableCell>
        </TableRow>
    </TableHead>
    <TableBody>
            <TableRow>
            <TableCell column='data1' style={{minWidth:100, maxWidth:100}}>{content}</TableCell>
            <TableCell column='data2' style={{minWidth:200, maxWidth:200}}>{content}</TableCell>
            </TableRow>
    </TableBody>
</Table>

Como puede ver, podemos usar tanto el valor para el estilo por entero como por cadena. Pero para la cadena, solo funciona si la definiste con px , si usas un porcentaje, como minWidth:'25%' , no funcionará , ya lo intenté.

¿Por qué utilizo tanto minWidth como maxWidth ? No width ? Como ya lo probé, si quieres que tu columna tenga un ancho fijo, debes usar minWidth y maxWidth lugar de width . No sabía por qué, pero width parece no funcionar para resolver este problema.

Nota: _¡Tanto TableCell en TableHead como TableBody que contienen los mismos datos , deben tener el mismo estilo ! _

Espero que este código les ayude a chicos, salud

Literalmente configuré width: 10%, minWidth: 10% y maxWidth: 10% para cada TableCell, incluidas las que están debajo de los encabezados de la tabla. Luego procedí a crear elementos <colgroup>..etc y también les apliqué los mismos estilos. También configuré el elemento Table en tableLayout: auto y width: auto. Probé todas las soluciones en este hilo y las combiné todas en este resultado final. Además, también utilicé la herramienta "inspeccionar elemento" en Chrome y pirateé todos los elementos de la mesa para usar width: 10% min-width: 10% y max-width: 10%. esto también se reflejó en React inspecter in devtools. literalmente me mostró todos los elementos que he cambiado como "ancho 10%", etc.

resultado: todavía no ajusta el ancho de las columnas

Creo que es seguro asumir ahora que en realidad existe un imposible. y es en este mismo hilo

Editar:

De hecho, terminé haciendo algo que iba en contra de lo que sugerían las personas en este hilo ... configuré autoLayout: fixed en mi tabla y comenzó a funcionar. ¿Qué demonios es esta magia negra?

También lo estoy pasando mal tratando de establecer anchos. Tuve que establecer el ancho de la casilla de verificación de selección: 0.01% para que se mantuviera en un ancho razonable, nada más funciona

Para aquellos atascados en la versión anterior de esto y luchando con el pie de página, agregar fixedFooter = {false} a la solución de @devenovil funciona para mí.

@nathanmarks ¿Puedes al menos aclarar por qué
Esta debería ser una característica requerida muy recurrente.

@pbassut tiene razón. Esta es una característica muy básica para un componente de tabla ... ¿Hay alguna actualización?
O una explicación de por qué es tan problemático implementar ...

@devenovil En lugar de maxWidth , si quieres usar % , puedes usar width como:

<TableCell style={{ width: '35%' }}>
  Table Data
</TableCell>
<TableCell>
  Another Table Data
</TableCell>

Para mí, funcionó para establecer el ancho solo para las celdas en el encabezado: <TableCell width={props.colWidths[index] + '%'}> , esto da como resultado que las columnas de toda la tabla se comporten como se esperaba.

Configuré los anchos de columna con el porcentaje y funciona, pero por alguna razón, agrega una columna fantasma en el extremo derecho. Al inspeccionar el elemento, parece agregar un elemento "TableStubCell" a la tabla. No tengo idea de donde vino.

He tenido problemas similares con otras tablas MUI, y mis soluciones nunca son tan buenas. Sería genial si todos abrieran este problema y lo arreglaran ... claramente, otras personas también están luchando con él.

editar: TableStubCell vino del paquete dx-react-grid-material-ui npm, ¡lo siento por señalar con el dedo!

Mi solución es hacer

<Table>
  <TableHeader>
    <TableRow>
      <TableCell>
        <Box width="200px">
          User Fullname
        </Box>
      </TableCell>
      {/* ...rest of the columns */}
    </TableRow>
  </TableHeader>
  <TableBody>
    <TableRow>
      <TableCell>
        April Mintac Pineda
      </TableCell>
      {/* ...rest of the columns */}
    </TableRow>
    {/* ...rest of the rows */}
  </TableBody>
</Table>

Pero sería bueno si pudiéramos hacer

<Table>
  <TableHeader>
    <TableRow>
      <TableCell width="200px">
        User Fullname
      </TableCell>
      {/* ...rest of the columns */}
    </TableRow>
  </TableHeader>
  <TableBody>
    <TableRow>
      <TableCell>
        April Mintac Pineda
      </TableCell>
      {/* ...rest of the columns */}
    </TableRow>
    {/* ...rest of the rows */}
  </TableBody>
</Table>

Esto me funciona con la versión "@material-ui/core": "4.9.0"

<TableContainer className={classes.container}>
          <Table className={classes.table} stickyHeader size="small">
            <TableHead>
              <TableRow>
                <TableCell width="30%">User Name</TableCell>
                <TableCell width="20%">Designation</TableCell>
                <TableCell width="10%">Nid</TableCell>
                <TableCell width="20%">Email</TableCell>
                <TableCell width="10%">Mobile</TableCell>
                <TableCell width="10%">Gender</TableCell>
              </TableRow>
            </TableHead>
            <TableBody>
              {props.isGridLoading && (
                <TableRow>
                  <TableCell colSpan={6}>
                    <LoadingGridSpinner open={props.isGridLoading} />
                  </TableCell>
                </TableRow>
              )}

              {props.profileObj.lists &&
                props.profileObj.lists.map(row => (
                  <TableRow key={row.userProfileId} hover={true}>
                    <TableCell width="30%">
                      {row.userName}
                    </TableCell>
                    <TableCell width="20%">{row.designation}</TableCell>
                    <TableCell width="10%">{row.nid}</TableCell>
                    <TableCell width="20%">{row.email}</TableCell>
                    <TableCell width="10%">{row.mobile}</TableCell>
                    <TableCell width="10%">{row.gender}</TableCell>
                  </TableRow>
                ))}
            </TableBody>
          </Table>

El enfoque utilizado por @nazrulcsebd y @crizant funcionó para mí. Aquí está mi código:

<TableContainer component={Paper} style={{ marginTop: 10 }}>
          <Table style={{ width: 'auto', tableLayout: 'auto' }}>
          <TableHead>
            <TableRow>
              <TableCell>Team Member</TableCell>
              <TableCell align="left">Level</TableCell>
              <TableCell align="left">Last Login</TableCell>
            </TableRow>
          </TableHead>
          <TableBody>
            { tableArray.map(({ id, name, accessLevel, login }) => (
              <TableRow key={id}>
                <TableCell component="th" scope="row" style={{ width: '35%' }}>
                  {name}
                </TableCell>
                <TableCell align="left">{accessLevel}</TableCell>
                <TableCell align="left">{login}</TableCell>
              </TableRow>
            ))
          }
          </TableBody>
        </Table>
      </TableContainer>

En mi caso, quería tener la columna más pequeña posible para mantener un botón de "acción" al final de la tabla. Agregar style={{ width: 1 }} a TableCell en TableHead hizo el truco.

        <TableContainer component={Paper}>
            <Table className={classes.table} aria-label="simple table">
                <TableHead>
                    <TableRow>
                        {header.map((th, i) => (
                            <TableCell key={i}>{th}</TableCell>
                        ))}
                        <TableCell style={{ width: 1 }}>actions</TableCell>
                    </TableRow>
                </TableHead>
                <TableBody>
                    {data.map((row, i) => (
                        <TableRow key={i} hover>
                            {header.map((h, i) => (
                                <TableCell key={i} align="left">{row[h]}</TableCell>
                            ))}
                            <TableCell>
                                <IconButton aria-label="edit">
                                    <MoreHorizIcon fontSize="small" />
                                </IconButton>
                            </TableCell>
                        </TableRow>
                    ))}
                </TableBody>
            </Table>
        </TableContainer>

const useStyles = makeStyles(theme => ({
  table: {
    "& tr:nth-child(2), & td:nth-child(2) {
      width: '32px',
    }
  }
}));

Y luego, usa el estilo en la raíz de la tabla

 <Table
     ....
     className={classes.table}
>

Todavía no he probado mucho (encabezado fijo, etc.)

Sería mucho mejor si pudiéramos dar el mismo sistema de 12 columnas a las tablas, por ejemplo:

   <TableContainer component={Paper}>
      <Table className={classes.table} aria-label="simple table">
        <TableHead>
          <TableRow>
            <TableCell>Dessert (100g serving)</TableCell>
            <TableCell align="right">Calories</TableCell>
            <TableCell align="right">Fat&nbsp;(g)</TableCell>
            <TableCell align="right">Carbs&nbsp;(g)</TableCell>
            <TableCell align="right">Protein&nbsp;(g)</TableCell>
          </TableRow>
        </TableHead>
        <TableBody>
          {rows.map((row) => (
            <TableRow key={row.name}>
              <TableCell component="th" scope="row" xs={4}>
                {row.name}
              </TableCell>
              <TableCell align="right" xs={2}>{row.calories}</TableCell>
              <TableCell align="right" xs={2}>{row.fat}</TableCell>
              <TableCell align="right" xs={2}>{row.carbs}</TableCell>
              <TableCell align="right" xs={2}>{row.protein}</TableCell>
            </TableRow>
          ))}
        </TableBody>
      </Table>
    </TableContainer>

¿Alguien sabe una manera de permitir que la tabla se desplace en la dirección x si hay demasiadas columnas? Solo puedo hacer que esto suceda dando minWidth = algo codificado (que no es bueno para un número desconocido de columnas)

Parece que fixedHeader={false} style={{width: "auto", tableLayout: "auto"}} se ignoran en la última versión.

¿Algunas ideas?

Terminé con una solución alternativa usando un elemento de lista dentro de la tabla y definiendo el ancho del elemento de lista ...
Algo como:

<TableCell>
  <ul style={{ width: "150px" }}>
    <li>{row.whatever}</li>
    <li>{row.whatever1}</li>
    <li>{row.whatever2}</li>
  </ul>
</TableCell>

2020 y aún es difícil de lograr, la parte más extraña es que trato de establecer el ancho de una columna, ¡las otras columnas se ajustan automáticamente incluso cuando también definí el ancho para ellas! ¿lo que da? Es como si la mesa se estuviera asegurando de que el ancho de toda la mesa no supere el 100%, esto me está haciendo pasar un mal rato. Si no estuviera usando la tabla de material-ui, esto sería muy, muy fácil, ¿parece que la interfaz de usuario del material solo lo hizo difícil?

@aprilmintacpineda ¿ <table> nativos?

@oliviertassinari No convertí el código existente al elemento nativo <table> .

Este ejemplo funciona estableciendo el ancho de todas las columnas
https://codesandbox.io/s/fragrant-framework-oy6uz?file=/src/App.js