React-table: How to wrap content of a cell?

[mlajszczak]

What version of React-Table are you using?

6.5.0

I have a column in my table that can contain text of significant length. In such case, react-table cuts the content with ellipsis. I'd like it to wrap the text.
Couldn't find any props to set this. I was trying to achieve it by overriding some CSS (removing nowrap etc.) but it ruined the table.

[gary-menzel]

Use getProps for the column (check the doco) or use Cell and wrap your component in a div.

Also, the best place to ask this type of question is #react-table Slack channel (badge in the doco) or on stack-overflow. Github issues are for issues with the code.

[mlajszczak]

Thanks.

Next time I'll use Slack.

[kiranvj]

This should work

         {
            Header: 'Details',
            accessor: 'details',
            Cell: ({ row }) => <div className="text-wrap">{row.details}</div>
          }

In your CSS

.text-wrap { white-space: normal; }