ReactJS + Material-UI: Как уменьшить ширину столбца Material-UI's <TableRow/>?

Question

В настоящее время я использую ReactJS + Material-UI, а с помощью Material-UI's <Table> ширина столбцов автоматически устанавливается в зависимости от содержимого. Current.y, похоже, обеспечивает равную ширину для всех столбцов, но я хочу, чтобы некоторые столбцы занимали больше ширины, чем другие.

Так есть способ произвольно назначить ширину столбца <TableRow> и по-прежнему быть динамическим на основе контента?

Answer 1

Вы можете установить стиль TableHeaderColumn и соответствующие TableRowColumns. Ниже я установить ширину 12 пикселей (и цвет фона на желтый только для дальнейшего демо пользовательского стиля)

работает 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') 
); 

Answer 2

Существует скрытая опора в <Table> компонент, который делает его вести себя как HTML <table> элемент, т.е. адаптировать ширину столбцов содержания:

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

это не позволит вам стиль столбцы один за другим, но, по крайней мере, это менее уродливые, чем большие колонки для малого содержания б y по умолчанию.

Answer 3

согласно ответу @ Франсуа Zaninotto @Lane Реттиг

...

и добавляя с этим, вы можете получить таблицу прокрутки с бесконечными колоннами ...

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