React-table: defaultPageSize without Pagination

[lucianlam]

Hi,

I am new to react and is looking for a table implementation in react and I stumbled onto React Table and it seems to be a really thought out component with lots of customization.

My question is, I want to turn off pagination by setting showPagination={false}, and for example, if I have a table with 10 rows, and I set defaultPageSize={5}, there is no scroll bar to see the rest of the data.

Is there a way to turn off pagination and being able to see all the data?

Thanks!

[tannerlinsley]

TL;DR, React-Table doesn’t support vertical scrolling, only pagination.

To keep the table extremely performant and customizable, we chose to adhere
to a one opinionated rule: No vertical scrolling. This keeps things easy
and predictable but most importantly, keeps the code very small by not
having to deal with virtualization or scrolling performance hacks. Like
you're noticing now, it limits us to pagination as the only method of
showing more views of the data.

Long story short, by turning off the pagination, there is no other built-in
way for the user to see the next page.

If you absolutely need vertical scrolling, I would say React Table
isn’t the answer. But I myself have been in that situation and had to
seriously question the need for vertical scrolling in my own apps. It
ended up causing more problems and heartache than it was worth, which is
exactly how React Table was born :)

On Fri, Mar 3, 2017 at 3:44 PM Lucian Lam [e-mail] wrote:

Hi,

I am new to react and is looking for a table implementation in react and I
stumbled onto React Table and it seems to be a really thought out component
with lots of customization.

My question is, I want to turn off pagination by setting
showPagination={false}, and for example, if I have a table with 10 rows,
and I set defaultPageSize={5}, there is no scroll bar to see the rest of
the data.

Is there a way to turn off pagination and being able to see all the data?

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

[lucianlam]

Thanks for the quick reply. I love React Table so far, so maybe I can persuade others that pagination can work with our current workflow of the app. :)

[tannerlinsley]

I hope so :) The biggest proponent is avoiding scroll traps for mobile
users. It really is a much better experience.

On Fri, Mar 3, 2017 at 4:03 PM Lucian Lam [e-mail] wrote:

Thanks for the quick reply. I love React Table so far, so maybe I can
persuade others that pagination can work with our current workflow of the
app. :)

—
You are receiving this because you commented.

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

[tannerlinsley]

Closing for now, reopen when appropriate :)

[vinch]

I noticed that setting showPagination={false} and defaultPageSize={-1} will show all the items. I'm not sure if it's a desired behavior or not.

[ChrisLincoln]

@vinch It will show all by N-1 rows. We missed it by -><- that much. I like the pagination. I have one meager table in my desktop app where I want the expected behavior. I am going to just whip out a plain-old table in this case.

[vinch]

@ChrisLincoln You're right about N-1 rows. Haven't notice before.

[ChrisLincoln]

@vinch This does seem to work: Setting defaultPageSize={N}. This is the codepen for the Fixed Headers with scrolling which is modified to show a result of 30 rows.
https://codesandbox.io/s/52z78rw944

[alexjtark]

you can achieve this with css.

.rt-body {
min-width: unset;
height: 200px; //or whatever height you want here
overflow: hidden;
overflow-y: scroll;
}

and on the reactTable props:

defaultPageSize={data.length}

side scrolling may not work well however but if you dont require that this should be fine

[GuySerfaty]

@vinch showPagination={false} + defaultPageSize={-1} hide rows when I have only 1 row...

defaultPageSize={data.length} is the best option?

[SagaGG]

@tannerlinsley the point is react table provide the no pagination function, why still need default page size option, the basic requirement is show all the data of table, I do not think this design make sense, sorry for my complain.

[tannerlinsley]

@alexjtark hit the nail on the head. If you choose to "hack" react-table to not use pagination, his suggestion will send you in the right direction:

.rt-body {
  min-width: unset;
  height: 200px; //or whatever height you want here
  overflow: hidden;
  overflow-y: scroll;
}

and on the reactTable props:
defaultPageSize={data.length}