ReactJS + Material-UI: सामग्री-UI के <TableRow/> की कॉलम चौड़ाई को कैसे कम करें?

Question

मैं वर्तमान में ReactJS + Material-UI का उपयोग कर रहा हूं, और सामग्री-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

<Table> घटक यह एक की तरह व्यवहार करता है कि में एक छिपे हुए प्रोप नहीं है एचटीएमएल <table> तत्व, यानी सामग्री लिए कॉलम की चौड़ाई अनुकूलित:

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

यह नहीं करता आप शैली कॉलम एक के बाद एक, लेकिन कम से कम यह छोटे सामग्री ख के लिए बड़े स्तंभों से कम बदसूरत है वाई डिफ़ॉल्ट।

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