Material-table: Material Table drawing more rows than data.

[cbaker]

Heres my forked example
https://codesandbox.io/s/material-table-starter-template-890ih?file=/src/index.js

I don't want 400 rows to show when I put 400 & there is < 400 rows.
I suspect I can fix this by overriding the body component, curious if there's an easier way.

edit: updated title for SEO.

[cbaker]

I decided to just slap
tr:empty{ display:none; }

in my css to fix it, I don't think it should really be drawing a bunch of empty rows but it is what it is I guess.

[oze4]

@cbaker In addition to your solution, and per the docs, you can use options.emptyRowsWhenPaging to remedy this.

<MaterialTable
  // ...
  options={{
    emptyRowsWhenPaging: false, // true by default
  }}
  // ...
/>

---

From the docs:

[cbaker]

@oze4 Hey, thanks. What's the reasoning behind having it true by default?

[oze4]

@cbaker that's a good question. I honestly don't have an answer for you, unfortunately.. I'm not the author, just a contributor and fanboy 😁..

@mbrn (author) would you be so kind to elaborate on this?

[cbaker]

Furthermore @mbrn are you open to changing the default from true to false? I can make a pull request if so.

[oze4]

Worth noting that some folks may consider this a breaking change. Just as you prefer the default to be false, I suppose some out there may expect for it to be true and we could really mess with existing projects that are expecting true. Or I could be wrong...food for thought at the least.

FWIW - like 55% of me thinks that the default should be false.

[mbrn]

Hi @cbaker

Actually pageSize is mostly 5 or 10. So When navigating on pages we don't want that footer position changes. So it is true by default.

[cbaker]

@mbrn that makes sense. Could do a min-height limit no the body tho. Thanks.