Réagir colonne de Table de largeur fixe gâte toute la table
Quelqu'un peut-il m'expliquer pourquoi je ne peux pas définir une largeur fixe sur prénom de la colonne?C'est paramètre transmis largeur mais ça gâche toute la table.Si vous bricoler avec redimensionnement(par la souris) la colonne autres colonnes apparaît.Est-ce dû à flebox?Je ne suis pas familier avec flexbox.
JS:
var ReactTable = ReactTable.default
class App extends React.Component {
constructor() {
super();
this.state = {
data: []
};
}
render() {
const { data } = this.state;
return (
<div>
<ReactTable
data={data}
columns={[
{
Header: "Name",
columns: [
{
width:'50',
Header: "First Name",
accessor: "firstName"
},
{
Header: "Last Name",
id: "lastName",
accessor: d => d.lastName
}
]
},
{
Header: "Info",
columns: [
{
Header: "Age",
accessor: "age"
},
{
Header: "Status",
accessor: "status"
}
]
},
{
Header: 'Stats',
columns: [
{
Header: "Visits",
accessor: "visits"
}
]
}
]}
defaultPageSize={10}
className="-striped -highlight"
/>
<br />
</div>
);
}
}
ReactDOM.render(<App />, document.getElementById("app"));
HTML:
<link href="https://cdnjs.cloudflare.com/ajax/libs/react-table/6.5.3/react-table.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-table/6.5.3/react-table.js"></script>
<div id="app"></div>
Si quelqu'un peut ajouter react-table
pour les balises je serai heureux.
Vous devez vous connecter pour publier un commentaire.
Je ne sais pas beaucoup sur la réaction de la table, mais essayez de ne pas utiliser les guillemets
JS:
HTML:
Je ne sais pas beaucoup sur
react-table
, mais vous pouvez résoudre ce problème en définissantwidth
pour toutes les colonnes.JS:
HTML: