ReactJS + Material-UI：Material-UIの列幅を縮小する方法<TableRow/>？

Question

私は現在ReactJS + Material-UIを使用しており、Material-UIの<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

それはAのように振る舞うます<Table>コンポーネント内の隠された小道具がありますHTML <table>要素、すなわちコンテンツに列幅を合わせる：

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

それはあなたのスタイルの列を一つずつすることはできませんが、少なくともそれは小さなコンテンツBの大列未満醜いですyデフォルト。

Answer 3

の答えに応じフランソワZaninotto @Lane Rettig

...

及びこれに追加すると、あなたは無限の列を持つスクロールテーブルを取得することができます...

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