minRows in v7

[Motoxpro]

Thanks for an amazing lib!

I was wondering if this property still exists? If not, what is tghe best way to pad a table to me at least a certain height?

I tried setting a min-height to the table, but the initial row height gets set to the height of the table (I think?) so each row === minHeight

[tannerlinsley]

This was a UI-centric option for the old version, so no, it doesn't exist in the new version, simply because you are in control of the rendering layer.

[tannerlinsley]

You can always detect if your rows.length is less than a minRows prop and just render dummy rows.

[dbertella]

yeah the problem with that is how to create dummy data, if you have a complex structure in your row, like nested elements can be a little tricky. Maybe a plugin can handle this? I guess it will be quite a common feature

[Motoxpro]

@tannerlinsley That makes sense. Here's what I came up with. Using ramdaJs and Material-UI. Again thank you so much for this amazing library and that you for the help!

const MAX_DUMMY_ROWS = 5
...
<TableBody{...getTableBodyProps()}>
    {page.map((row, i) => {
       prepareRow(row);
       renderRow...
     })}
     {R.range(0, Math.min(pageSize - page.length, MAX_DUMMY_ROWS)).map(() => (
        <Box height={50} />
     ))}
</TableBody>

[zachrnolan]

@tannerlinsley I have a table with 21 records (manual pagination from server) and I've set the pageSize to 10. There are a total of 3 pages, but when I go to the 3rd page, it still shows me 10 when it should show just 1. It shows the actual last record at the top and the last 9 are the same ones from the previous page.

I'm struggling to see how I can only show that last record on the 3rd page. When I inspect the page object, it shows 10 items in the array. Any advice?

I'm using react-table 7.0.0-rc.16

[zachrnolan]

It ended up being a problem with the data being returned from the server. Thanks for the great library!

[Joyfred]

For people who are trying to render empty rows without any external libraries

<tbody {...getTableBodyProps()}>
  {page.map((row, i) => {
      prepareRow(row);
      renderRow...
    })}
    {_.range(0, pageSize - page.length).map((i, index) => (
      <tr {...page[0].getRowProps()} key={index}>
        {_.range(0, columns.length).map((j, index) => (
          <td key={index}>&nbsp;</td>
        ))}
      </tr>
    ))}
</tbody>

[ameed-faridi]

@Joyfred what if there is no data?