web-dev-qa-db-ja.com

反応テーブルを使用してデータをワードラップする方法は？

サーバー応答からテーブルを表示するために https://react-table.js.org/#/story/readme を使用しています。ただし、長さが長い列データの場合は、省略記号が表示されます。完全なデータが表示されるように、ラップする方法を見つけていません。

ドキュメントでは、彼らはstyleプロップについて言及していますが、私はそれを理解することができません。私は以下を試しましたが、うまくいきませんでした。

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

誰かが私に何をすべきかを提案してもらえますか？

reactjsreact-table
10
xploreraj

Cssプロパティwhite-space: unset;を使用する必要があります。

テキストを折り返す列を見つけ、列のプロパティとして次を追加します

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

または、css/sass/scssで.ReactTable .rt-tdを直接ターゲットとするクラスを追加できます

26
Steffan

Steffanによる回答をさらに明確にするには：

これは私の列の定義です：

   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

これを機能させるには、次の構文を使用する必要がありました。

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