ReactJS + Material-UI: Material-UI'nin <TableRow/> sütun genişliği nasıl azaltılır?

Question

Şu anda ReactJS + Material-UI ürününü kullanıyorum ve Materyal-UI'nin <Table> ile sütun genişliği, içeriğe bağlı olarak otomatik olarak ayarlanır. Geçerli.Yani tüm sütunlarda eşit genişliği zorlar gibi görünüyor, ancak bazı sütunların diğerlerinden daha geniş olmasını istiyorum.

<TableRow> 'un sütununun genişliğini keyfi olarak atamanın ve bunun yerine içerik temelinde dinamik olmanın bir yolu var mı?

Answer 1

TableHeaderColumn ve ilgili TableRowColumns stilini ayarlayabilirsiniz. Ben (tıpkı başka demo özel stil sarı ve arka plan rengi) 12 piksel

genişliği ayarlamak Aşağıda jsFiddle çalışma: 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

bir gibi davranmaya yapar <Table> bileşende gizli prop vardır

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

Bu tarz sütunlar tek tek izin vermez, ama en azından küçük içerikleri b iri sütun daha az çirkin: HTML <table> eleman, yani içeriğe sütun genişlikleri adapte y varsayılan.

Answer 3

verilen yanıta göre François Zaninotto @Lane Rettig

...

ve bununla ekleyerek, sonsuz sütunlu bir kaydırma tablo elde edebilirsiniz ...

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