React-table: Is there a way to force column text to break to new line instead of ellipsis(...)

[cbll]

Currently if the content of a cell is larger than the cell itself, the way to see the content is by dragging the cell and increasing its size(which is fine)

However I have some cells with a lot of information in them; I'd rather have it break the line and expand the entire table horizontally to accommodate for it.

Is there a way to do that currently? Reading through the API and examples, I haven't come across it unfortunately.

Thanks!

[tannerlinsley]

Disable overflow hidden on '.rt-td' styles
On Tue, May 16, 2017 at 6:28 AM cbll [e-mail] wrote:

Currently if the content of a cell is larger than the cell itself, the way
to see the content is by dragging the cell and increasing its size(which is
fine)

However I have some cells with a lot of information in them; I'd rather
have it break the line and expand the entire table horizontally to
accommodate for it.

Is there a way to do that currently? Reading through the API and examples,
I haven't come across it unfortunately.

Thanks!

—
You are receiving this because you are subscribed to this thread.
Reply to this email directly, view it on GitHub
https://github.com/tannerlinsley/react-table/issues/278, or mute the
thread
https://github.com/notifications/unsubscribe-auth/AFUmCQsXQ3CIGJMTvZW64F8C5X2I-D6gks5r6ZZjgaJpZM4Ncaxt
.

[cbll]

Thanks. So what does that mean in reality? Should I overwrite the property in a .css file? I just tried that(changing it to overflow: visible), but that didn't do anything :)

[tannerlinsley]

Yep
On Tue, May 16, 2017 at 6:46 AM cbll [e-mail] wrote:

Thanks. So I just overwrite that property in a my .css file that I load?

—
You are receiving this because you commented.

Reply to this email directly, view it on GitHub
https://github.com/tannerlinsley/react-table/issues/278#issuecomment-301770922,
or mute the thread
https://github.com/notifications/unsubscribe-auth/AFUmCeCcTO8Bs9SH5CU6w_66cU_YbqDyks5r6ZqegaJpZM4Ncaxt
.

[cbll]

I just tried adding this to the top level css, it didn't change it though:

.rt-td{
    overflow: visible;
}

[cbll]

Ah - I added it to the individual columns I want it to happen to, like this:

{
            header: 'Details',
            accessor: 'details',
            minWidth: 150,
            style: {overflow: "visible"},
        }

However, it just pushes the bar horizontally and adds scrolling. Is there any way to push the text downwards, vertically, and increasing the height of the column? that would be prettier :)

[tannerlinsley]

You would need to put a max Width on the column
On Tue, May 16, 2017 at 6:53 AM cbll [e-mail] wrote:

Ah - I added it to the individual columns I want it to happen to, like
this:

{
header: 'Details',
accessor: 'details',
minWidth: 150,
style: {overflow: "visible"},
}

However, it just pushes the bar horizontally and adds scrolling. Is there
any way to push the text downwards, vertically, and increasing the height
of the column? that would be prettier :)

—
You are receiving this because you commented.

Reply to this email directly, view it on GitHub
https://github.com/tannerlinsley/react-table/issues/278#issuecomment-301772610,
or mute the thread
https://github.com/notifications/unsubscribe-auth/AFUmCZqK3tt6f1roEJU5eGTXV9zFba7Iks5r6Zw8gaJpZM4Ncaxt
.

[cbll]

On the individual columns?

I attempted that; It looks very weird(it will have a horizontal scroll bar per default, and some columns overlap?

        const columns = [{
            header: 'Details',
            accessor: 'details',
            style: {overflow: "visible"},
            maxWidth: 200
        },{
            header: 'Severity Level',
            accessor: 'severitylvl',
        },{
            header: 'Time',
            accessor: 'time',
        }, {
            header: 'Source Type',
            accessor: 'srctype',
        }, {
            header: 'Description',
            accessor: 'description',
            style: {overflow: "visible"},
            maxWidth: 350
        }];

[tannerlinsley]

Oh. You may only need to change the white-space CSS property. That should do the trick

[tannerlinsley]

To be more specific, this is the only thing you should need to change (the !important is probably not needed, but was in the codepen:

.rt-td {
  white-space: normal !important
}

Codepen Example: http://codepen.io/tannerlinsley/pen/PmBKGp?editors=0110