J'utilise actuellement ReactJS + Material-UI, et avec <Table>
de Material-UI, la largeur des colonnes est automatiquement définie en fonction du contenu. Actuellement, il semble imposer une largeur égale à toutes les colonnes, mais je veux que certaines colonnes prennent plus de largeur que d'autres.
Donc, y a-t-il un moyen d'attribuer arbitrairement la largeur de la colonne de <TableRow>
tout en restant dynamique en fonction du contenu?
Vous pouvez définir le style de TableHeaderColumn et de ses TableRowColumn correspondants. Ci-dessous, je règle la largeur à 12 pixels (et la couleur d’arrière-plan en jaune juste pour une démonstration ultérieure du style personnalisé)
travail 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')
);
Il existe un accessoire caché dans le composant <Table>
qui le fait se comporter comme un élément HTML <table>
, c’est-à-dire que vous adaptez la largeur des colonnes au contenu:
<Table style={{ tableLayout: 'auto' }} fixedHeader={false} ...>
...
</Table>
Il ne vous permet pas de styler les colonnes une par une, mais au moins, il est moins moche que les grandes colonnes pour les petits contenus par défaut.
selon la réponse de @ François Zaninotto @Lane Rettig
...
et en ajoutant avec cela, vous pouvez obtenir une table de défilement avec des colonnes infinies ...
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
}
}