web-dev-qa-db-ja.com

ReactJS + Material-UI：Material-UIの<TableRow />の列幅を減らす方法は？

私は現在ReactJS + Material-UIを使用しており、Material-UIの<Table>を使用すると、列の幅はコンテンツに応じて自動的に設定されます。現在、すべての列に同じ幅を適用しているようですが、一部の列は他の列よりも幅を広くしたいと考えています。

それで、<TableRow>の列の幅を任意に割り当て、それでも代わりにコンテンツに基づいて動的にする方法はありますか？

javascripthtmlcssreactjsmaterial-ui
11
user2426823

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')
);
7
Jeff McCloud

<Table>コンポーネントには、HTML <table>要素のように動作する非表示の小道具があります。つまり、列の幅をコンテンツに適合させます。

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

列を1つずつスタイル設定することはできませんが、少なくともデフォルトでは、小さいコンテンツの大きな列よりも見栄えがします。

2
François Zaninotto

@FrançoisZaninotto @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
    }
}
0
yatusiter