ReactJS + Matériel-UI: Comment réduire la largeur de la colonne de Matériel-UI <TableRow/>?

Je suis actuellement à l'aide ReactJS + Matériel-de l'INTERFACE utilisateur, et avec le Matériel de l'INTERFACE utilisateur de <Table>, la largeur des colonnes sont automatiquement réglés en fonction du contenu. Actuellement, il semble appliquer une largeur égale sur toutes les colonnes, mais je veux que certaines colonnes de prendre plus de largeur que les autres.

Donc, il y a un moyen d'attribuer arbitrairement largeur de <TableRow>'s de la colonne et de toujours être dynamique basée sur le contenu au lieu de cela?

InformationsquelleAutor | 2016-11-23
  1. 7

    Vous pouvez définir le style de la TableHeaderColumn et de ses correspondants TableRowColumns. Ci-dessous j'ai mis une largeur de 12 pixels (couleurs de fond et de jaune juste pour de plus amples démonstration de style personnalisé)

    de 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')
);
    • mais c'est codé en dur largeur, correct? Je cherchais une dynamique qui allait changer en fonction du contenu, mais encore plus grande largeur que les autres colonnes.
    • Vous pouvez en outre utiliser les espaces: 'nowrap', et/ou minWidth/maxWidth
    • pourriez-vous montrer le code complet avec l'espace?
    • Votre contenu est-il une ligne de texte, ou peut-on le wrap?
    • Pourriez-vous montrer les deux cas? Parce que, lorsque la fenêtre est réduite, le contenu est emballé.
    • Si vous ne voulez pas d'emballage, vous pouvez le faire: const customColumnStyle = { largeur: 12, backgroundColor: 'jaune', des espaces blancs: 'nowrap' }; Si vous voulez vraiment retour à la ligne, mais seulement si elle est assez grande, puis, au lieu d'ajouter "maxWidth: 400" ou quelle que soit la largeur en pixels que vous souhaitez limiter la largeur.

    InformationsquelleAutor Jeff McCloud
  2. 2

    Se cache une béquille dans la <Table> composant qui lui permet de se comporter comme un HTML <table> élément, c'est à dire adapter la largeur des colonnes pour le contenu:

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

    Il ne vous laisse pas de colonnes de style, un par un, mais au moins c'est moins moche que les grandes colonnes pour les petites contenu par défaut.

    • C'est super, mais attention, il provoque également la table à débordement au bord de l'écran et de devenir invisible si elle devient trop large/la fenêtre devient trop étroit. Plus intéressant, le commentaire en ce thread.
    InformationsquelleAutor François Zaninotto
  3. -1

    en fonction de la réponse de @François Zaninotto @Lane Rettig

    ...

    et en ajoutant à cela ,vous pouvez obtenir un rouleau de la table avec un nombre infini de colonnes...

    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
}
}
    • Cela n'a rien à voir avec la largeur de la colonne
    InformationsquelleAutor yatusiter