web-dev-qa-db-fra.com

Comment faire Word-wrap pour les données en utilisant react-table?

J'utilise https://react-table.js.org/#/story/readme pour afficher le tableau à partir de la réponse du serveur. Mais pour les données de colonne de grande longueur, elles montrent des points de suspension. Je ne trouve pas de moyen de l'envelopper, afin que les données complètes soient affichées.

Dans la doc, ils ont mentionné style prop, mais je ne suis pas en mesure de le comprendre. J'ai essayé ci-dessous, mais cela n'a pas fonctionné.

<ReactTable
    data={respDataArr}
    columns={columns}
    style={{overflow:'wrap'}}
/>

Quelqu'un peut-il suggérer quel changement dois-je faire?

reactjsreact-table
10
xploreraj

Vous voudrez utiliser la propriété css white-space: unset;

recherchez la colonne que vous souhaitez avoir un texte d'habillage et ajoutez ce qui suit en tant que propriété de la colonne

style:{ 'white-space': 'unset'}

Vous pouvez également ajouter une classe qui cible .ReactTable .rt-td directement dans votre css/sass/scss

26
Steffan

Pour clarifier davantage la réponse selon Steffan:

Voici ma définition de colonne:

   const responsesData = [{..}, {..} .... etc ..];
   const columsDefnSamplesQsReactTable = [{
        Header: 'Question Code',
        accessor: 'Id'
    }, {
        Header: 'Question Text',
        accessor: 'QuestionText',
        style: { 'white-space': 'unset' } // allow for words wrap inside only this cell
    }];

    <ReactTable data={responsesData} columns= columsDefnSamplesQsReactTable } 
     defaultPageSize={3} />

enter image description here

11
SmoothyBoothy

Pour que cela fonctionne pour moi, j'ai dû utiliser cette syntaxe:

style: { 'whiteSpace': 'unset' }
2
EllaVader