Material-ui: [Tabelle] Legen Sie die Spaltenbreite der Tabelle fest

+1

Nichts Besonderes:

const colWidth {
    width: '2rem'
};

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

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

verhält sich mit TableHeaderColumn

Gibt es eine Möglichkeit, die Breite der Spalte basierend auf dem Inhalt dynamisch zuzuweisen?

In meiner Vanilla-HTML-Tabelle wird die Spaltenbreite je nach Inhalt automatisch festgelegt. material-ui scheint für alle Spalten die gleiche Breite zu erzwingen. Gibt es eine Möglichkeit, die Breite der Spalte so einzustellen, dass sie stattdessen dynamisch ist, wie z. B. Vanille-HTML-Tabellen?

@sanfilippopablo , <Table> verwendet die CSS-Requisite table-layout: 'fixed' , was dazu führt, dass alle Spalten dieselbe Breite haben, kombiniert mit white-space: 'nowrap' in jeder Tabellenzelle, um den Überlauf zu behandeln.

Sie können nicht sicher zu table-layout: 'auto' wechseln, da die Tabelle mit ihrem Inhalt unendlich wächst, es sei denn, Sie entfernen die oben erwähnte White-Space-CSS-Requisite. Und wenn Sie dies tun,
Sie können die fixedHeader={true} Requisite nicht mehr verwenden, da die Header dann in einer separaten Tabelle enthalten sind: cry:.

Einige Rückmeldungen wären willkommen.

Was ich getan habe, um die Breite der Spalten festzulegen, ist für die

Sie können nicht sicher zum Tabellenlayout wechseln: 'auto', da die Tabelle dann mit ihrem Inhalt unendlich wächst

Was ist mit dem Anpassen der Tabellenkopfbreite, wenn sich die tableRowColumn-Breite mit dem Inhalt ändert?
Ich kann es scheinbar nicht so einrichten, dass diese beiden ausgerichtet sind.

Ich denke, Sie verwenden entweder fixedHeader={true} und können keine benutzerdefinierte Breite festlegen, oder Sie tun dies nicht und müssen Ihre Header in Ihrem <TableBody> behalten.

Okay, das Setzen des Headers in tbody funktioniert! Jetzt muss ich herausfinden, wie mehrzeilige Kopfzeilen erstellt werden. Irgendwelche Tipps?

Versuchen Sie , so etwas wie zu erreichen dies ? (Wenn nicht, finden Sie wahrscheinlich das richtige Beispiel auf dieser Website)

Ich denke, Sie können so ziemlich alles tun, was Sie wollen, mit den Attributen colSpan auf TableHeaderColumn und TableRowColumn und rowSpan auf TableRow .

Ich verstehe nicht - warum ist das geschlossen?

Das Einfügen von TableHeader in TableBody funktioniert bei mir nicht.

@ tvtri96
Wir haben vorgeschlagen, tableRow als tableheader in tableBody zu setzen.
aber es sieht für mich so aus, als ob es jetzt gut funktioniert.

So sieht es jetzt in meinem Code aus:

<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>

und Kopfspalten sind korrekt an Körperspalten ausgerichtet.

Tks für die Antwort auf mich. Was ist in TableHeaderComponent enthalten? Ich denke, es ist nicht wie ein normaler TableHeader, oder?
`` `

Zeitstempel

Ja, es ist nur aus Gründen verpackt.

Gibt es darüber irgendwelche Neuigkeiten? Wie kann ich die Spalten automatisch an den Inhalt anpassen lassen?

Dies funktioniert bei mir, automatische Größenanpassung:

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

@arjan

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

Dies hat keine Auswirkung auf den Header.

<Table fixedHeader={false} style={{ tableLayout: 'auto' }}> funktioniert (dynamische Dimensionierung basierend auf Inhalten).

Ich musste width: "auto" hinzufügen, was zu Folgendem führt:

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

@ Nathanmarks , bitte wieder öffnen.

Table sollte über eine integrierte Eigenschaft verfügen, damit die Größe automatisch an den Inhalt angepasst werden kann, und es sollte nicht erforderlich sein, fixedHeader deaktivieren. Ich würde noch weiter gehen und sagen, dass die automatische Größe des Inhalts das Standardverhalten sein sollte.

@devuxer Entschuldigung, aber wir fügen dem v0.x-Zweig nicht proaktiv Funktionen hinzu.

@mbrookes , Danke, dass du uns Bescheid gegeben

@devuxer Ich glaube schon, es wurde von Grund auf neu geschrieben.

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

Ich hatte eine Tabelle mit drei Spalten, in der die erste und dritte Spalte immer eine kleine Textmenge enthielten. Ich wollte, dass die zweite Spalte den größten Teil des Platzes einnimmt, damit die erste und die dritte Spalte an den linken bzw. rechten Rand der Tabelle verschoben werden. Dies hat bei mir funktioniert (unter Verwendung von style hier im Gegensatz zu className Kürze halber):

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

Ich habe eine bessere Lösung gefunden ... also hat jede Spalte die gleiche Breite.
Angenommen, ich habe drei Spalten, und ich möchte, dass die erste die Hälfte der Gesamtbreite einnimmt und die dritte etwa ein Drittel der Reihe ausmacht. der in der Mitte ist der kleinste:

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

Eigentlich habe ich 7 Spalten, aber die Summe meiner Colspans beträgt 20 - die letzte enthält nur ein Symbol zum Löschen, die meisten anderen sind Colspan 3 - das große Textfeld ist Colspan 6 und ein Auswahlfeld und ein Datumspicker sind auf Colspan 2 ...

Klappt wunderbar!

Dies ist gut, um in v1.4.3 zu gehen

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>

Kann auch prozentuale Breiten angeben, der Rest der Zellen erstreckt sich gleichmäßig

Wie kann ich diese Lösung verwenden, wenn ich colspan={2} in einer TableHead-Zeile verwenden muss?

Wenn ich colspan={2} hinzufüge, haben alle Spalten die gleiche Breite. Etwas wie das:

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 Wenn Sie die Zellenbreite von colspan = {2} ändern möchten, versuchen Sie, die Tabellenbreite zu ändern, da sie sich über die gesamte Tabelle erstreckt. Kleinere Zellen können individuell angepasst werden.

Die Anwendung dieses Stils hat mir irgendwie geholfen:
Ich habe nur verschiedene maxWidth für verschiedene Cels in der Reihe, aber in jeder Spalte mit Inline-Stilen gleich gesetzt.

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

Keine der oben genannten Lösungen funktioniert. Warum ist das so schwer zu erreichen?

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

Die zweite Säule ist flexibel

Ich bin mir nicht sicher, ob noch jemand ein Problem damit hat, aber am Ende habe ich withStyles verwendet und es hat funktioniert. Hier ist der Pseudocode:

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})

Keine der oben genannten Lösungen funktioniert. Warum ist das so schwer zu erreichen?

Irgendwie erkenne ich, warum es nicht funktioniert, weil wir width nur für TableHead oder TableBody ! Damit es funktioniert, sollten wir minWidth und maxWidth bot auf TableCell in TableHead und TableBody , hier das Beispiel

<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>

Wie Sie sehen können, können wir sowohl den Wert für den Stil als Ganzzahl als auch den String verwenden. Aber für Zeichenfolgen funktioniert es px haben. Wenn Sie einen Prozentsatz wie minWidth:'25%' , wird es nicht funktionieren , ich versuche es bereits.

Warum verwende ich sowohl minWidth als auch maxWidth ? Nicht width ? Da ich es bereits versuche, müssen Sie, wenn Sie Ihre Spalte mit fester Breite erstellen möchten, minWidth und maxWidth anstelle von width . Ich wusste nicht warum, aber width scheint nicht zu funktionieren, um dieses Problem zu lösen.

Hinweis: _Beide TableCell in TableHead und TableBody , die dieselben Daten enthalten , müssen denselben Stil haben ! _

Ich hoffe, dieser Code hilft euch, Prost

Ich habe buchstäblich die Breite: 10%, minWidth: 10% und maxWidth: 10% für jede einzelne TableCell festgelegt, einschließlich derjenigen unter den Tabellenüberschriften. Ich habe dann <colgroup>..etc Elemente erstellt und die gleichen Stile auch auf sie angewendet. Ich habe auch das Table-Element auf tableLayout: auto und width: auto gesetzt. Ich habe jede einzelne Lösung in diesem Thread ausprobiert und sie alle zu dieser einen endgültigen Ausgabe kombiniert. Außerdem habe ich das Tool "Element prüfen" in Chrom verwendet und jedes einzelne Element auf dem Tisch gehackt, um Breite: 10% Min-Breite: 10% und Max-Breite: 10% zu verwenden. Dies spiegelte sich auch im React Inspecter in devtools wider. es zeigte mir buchstäblich alle Elemente, die ich als "Breite 10%" usw. geändert habe.

Ergebnis: Die Breite der Spalten wird immer noch nicht angepasst

Ich denke, es ist sicher anzunehmen, dass es tatsächlich ein Unmögliches gibt, das existiert. und es ist genau in diesem Thread

Bearbeiten:

Am Ende habe ich tatsächlich etwas getan, das gegen das war, was die Leute in diesem Thread vorgeschlagen hatten ... Ich habe autoLayout: in meiner Tabelle festgelegt und es fing an zu funktionieren. Was in aller Welt ist diese schwarze Magie?

Ich habe auch eine schlechte Zeit damit, Breiten einzustellen. Musste das Kontrollkästchen Breite einstellen: 0,01%, damit es auf einer angemessenen Breite bleibt, sonst funktioniert nichts

Für diejenigen, die an der alten Version festhalten und mit der Fußzeile zu kämpfen haben, funktioniert das Hinzufügen von fixedFooter = {false} zu @devenovils Lösung für mich.

@nathanmarks Kannst du wenigstens klären, warum du das geschlossen hast?
Dies sollte eine sehr wiederkehrende erforderliche Funktion sein.

@pbassut ist richtig. Dies ist eine sehr grundlegende Funktion für eine Tabellenkomponente ... Gibt es ein Update?
Oder eine Erklärung, warum die Implementierung so problematisch ist ...

@devenovil Wenn Sie % anstelle von maxWidth möchten, können Sie width wie folgt verwenden :

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

Bei mir hat es funktioniert, die Breite nur für die Zellen im Header festzulegen: <TableCell width={props.colWidths[index] + '%'}> , dies führt dazu, dass sich die Spalten für die gesamte Tabelle wie erwartet verhalten.

Ich habe die Spaltenbreiten mit dem Prozentsatz festgelegt und es funktioniert irgendwie, aber aus irgendeinem Grund wird ganz rechts eine Phantomspalte hinzugefügt. Durch die Überprüfung des Elements scheint der Tabelle ein "TableStubCell" -Element hinzugefügt zu werden. Ich habe keine Ahnung, woher das kommt.

Ich hatte ähnliche Probleme mit anderen MUI-Tabellen und meine Workarounds sind nie so gut. Wäre cool, wenn Sie dieses Problem aufgreifen und beheben würden ... offensichtlich haben auch andere Leute damit zu kämpfen.

Bearbeiten: Die TableStubCell stammt aus dem Paket dx-react-grid-material-ui npm. Tut mir leid, dass Sie mit den Fingern zeigen!

Meine Lösung ist zu tun

<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>

Wäre aber schön wenn wir es einfach machen könnten

<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>

Dies funktioniert bei mir mit der Version "@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>

Der Ansatz von @nazrulcsebd und @crizant hat bei mir funktioniert. Hier ist mein Code:

<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>

In meinem Fall wollte ich die kleinstmögliche Spalte haben, um einen "Aktions" -Button am Ende der Tabelle zu halten. Das Hinzufügen von style={{ width: 1 }} zur TableCell in TableHead hat den Trick gemacht.

        <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',
    }
  }
}));

Verwenden Sie dann den Stil im Stammverzeichnis der Tabelle

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

Ich habe noch nicht viel getestet (fester Header usw.)

Es wäre viel besser, wenn wir Tabellen nur das gleiche 12-Spalten-System geben könnten, zum Beispiel:

   <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>

Kennt jemand eine Möglichkeit, die Tabelle in x-Richtung scrollen zu lassen, wenn zu viele Spalten vorhanden sind? Ich kann dies nur erreichen, indem ich minWidth = etwas Hardcodiertes gebe (was für eine unbekannte Anzahl von Spalten nicht gut ist).

Es scheint, als würden fixedHeader={false} style={{width: "auto", tableLayout: "auto"}} in der neuesten Version ignoriert.

Irgendwelche Ideen?

Am Ende hatte ich eine Problemumgehung, indem ich ein Listenelement in der Tabelle verwendete und die Breite des Listenelements definierte ...
Etwas wie:

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

2020 und immer noch schwer zu erreichen, ist der seltsamste Teil, dass ich versuche, die Breite einer Spalte einzustellen, die anderen Spalten passen sich automatisch an, selbst wenn ich auch die Breite für sie definiert habe! was gibt? Es ist, als würde der Tisch sicherstellen, dass die Breite des gesamten Tisches nicht über 100% hinausgeht. Das macht es mir schwer. Wenn ich nicht die Tabelle von material-ui verwenden würde, wäre dies sehr, sehr einfach. Scheint die materielle Benutzeroberfläche es nur schwierig gemacht zu haben?

@aprilmintacpineda Hast du es mit nativen <table> Elementen versucht?

@oliviertassinari Ich habe den vorhandenen Code nicht in das native <table> -Element konvertiert.

In diesem Beispiel wird die Breite aller Spalten festgelegt
https://codesandbox.io/s/fragrant-framework-oy6uz?file=/src/App.js