web-dev-qa-db-de.com

ReactJS + Material-UI: Wie kann die Spaltenbreite von <TableRow /> der Material-UI reduziert werden?

Ich verwende derzeit ReactJS + Material-UI und mit dem <Table> der Material-UI wird die Spaltenbreite je nach Inhalt automatisch festgelegt. Momentan scheint es, dass alle Spalten die gleiche Breite haben, aber ich möchte, dass einige Spalten mehr Breite haben als andere.

Gibt es also eine Möglichkeit, die Breite der <TableRow> -Spalte willkürlich zuzuweisen und stattdessen trotzdem basierend auf dem Inhalt dynamisch zu sein?

7
user2426823

Sie können den Stil der TableHeaderColumn und ihrer entsprechenden TableRowColumns festlegen. Im Folgenden stelle ich die Breite auf 12 Pixel ein (und die Hintergrundfarbe auf Gelb, um das benutzerdefinierte Styling weiter zu demonstrieren).

jsFiddle: https://jsfiddle.net/0zh1yfqt/1/

const {
  Table,
  TableHeader,
  TableHeaderColumn,
  TableBody,
  TableRow,
  TableRowColumn,
  MuiThemeProvider,
  getMuiTheme,
} = MaterialUI;

 class Example extends React.Component {
  render() {
    const customColumnStyle = { width: 12, backgroundColor: 'yellow' };

    return (
      <div>
        <Table>
          <TableHeader>
            <TableRow>
              <TableHeaderColumn>A</TableHeaderColumn>
              <TableHeaderColumn style={customColumnStyle}>B</TableHeaderColumn>
              <TableHeaderColumn>C</TableHeaderColumn>
            </TableRow>            
          </TableHeader>
          <TableBody>
            <TableRow>
              <TableRowColumn>1</TableRowColumn>
              <TableRowColumn style={customColumnStyle}>2</TableRowColumn>
              <TableRowColumn>3</TableRowColumn>
            </TableRow>
            <TableRow>
              <TableRowColumn>4</TableRowColumn>
              <TableRowColumn style={customColumnStyle}>5</TableRowColumn>
              <TableRowColumn>6</TableRowColumn>
            </TableRow>
            <TableRow>
              <TableRowColumn>7</TableRowColumn>
              <TableRowColumn style={customColumnStyle}>8</TableRowColumn>
              <TableRowColumn>9</TableRowColumn>
            </TableRow>
          </TableBody>
        </Table>
      </div>
    );
  }
}

const App = () => (
  <MuiThemeProvider muiTheme={getMuiTheme()}>
    <Example />
  </MuiThemeProvider>
);

ReactDOM.render(
  <App />,
  document.getElementById('container')
);
6
Jeff McCloud

In der <Table>-Komponente gibt es eine versteckte Requisite, die bewirkt, dass sie sich wie ein HTML-<table>-Element verhält, d. H. Die Spaltenbreiten müssen an den Inhalt angepasst werden:

<Table style={{ tableLayout: 'auto' }} fixedHeader={false} ...>
    ...
</Table>

Es ist nicht möglich, Spalten nacheinander zu formatieren, aber es ist zumindest weniger hässlich als große Spalten für kleine Inhalte.

1

laut der Antwort von @ François Zaninotto @Lane Rettig

... 

und wenn Sie dies hinzufügen, können Sie eine Scroll-Tabelle mit unendlichen Spalten erhalten ...

componentDidMount() {
    let tbody = $(this.refs.table)
    if (tbody && tbody.length == 1) {
        let div = tbody[0].refs.tableDiv
        div.style.overflowX = 'auto'
        div.parentElement.style.overflowX = 'hidden'
    } else {
        // error handling
    }
}
0
yatusiter