React-table: Max height without paging?

[PetrSnobelt]

Hello, first of all, thank you for wonderful component, it looks really great, documentation and storybook is also well done.

I would like to use it with lot of rows, but instead of paging I prefer render with specified max-height and scroll through rows (sometimes called table freeze headers) Is it possible without writing my own render?

Thank you

[tannerlinsley]

Should be. Just put a css max height on the table body and it will scroll
vertically as well :)
On Thu, Mar 9, 2017 at 6:19 AM PetrSnobelt [e-mail] wrote:

Hello, first of all, thank you for wonderful component, it looks really
great, documentation and storybook is also well done.

I would like to use it with lot of rows, but instead of paging I prefer
render with specified max-height and scroll through rows (sometimes called
table freeze headers) Is it possible without writing my own render?

Thank you

—
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/120, or mute the
thread
https://github.com/notifications/unsubscribe-auth/AFUmCbRSCnyzVvnJEylwzIn24uD6QvXqks5rj_xEgaJpZM4MYEgf
.

[PetrSnobelt]

I hope so, but when I add height:100px on rt-tbody, it stretch rows height to unusable low height

[tannerlinsley]

Ah. That's because the whole table layout is based on flex box. You will
probably need to change the table body to have justify-content: flex-start
and possibly give your tr rows a fixed height.
On Thu, Mar 9, 2017 at 7:53 AM PetrSnobelt [e-mail] wrote:

I hope so, but when I add height:100px on rt-tbody, it stretch rows height
to unusable low height

—
You are receiving this because you commented.
Reply to this email directly, view it on GitHub
https://github.com/tannerlinsley/react-table/issues/120#issuecomment-285372900,
or mute the thread
https://github.com/notifications/unsubscribe-auth/AFUmCTPTCG8P_NpfTpyVpOibEebNqTP8ks5rkBJ8gaJpZM4MYEgf
.

[PetrSnobelt]

Thanks, it needs some more css tweaks, If anyone is interested here is working css:
(based on https://codepen.io/anthonyLukes/pen/DLBeE)

.rt-tbody {
        height:100px;
        justify-content: flex-start;
        flex: 1 1 auto;
        position: relative; /* need this to position inner content */
        overflow-y: auto;
}
.rt-tr-group {
        min-height:25px
}
.rt-thead {
        flex: 0 0 auto;
}

Improvements or suggestions welcomed