React-table: How do I stop rendering of empty rows?

[AshCoolman]

Problem Description

If I set page size to 100, but there is only 7 rows of data - I would like only 7 rows to empty.

Currently 7 rows with data render, along with 93 empty

Code Snippet(s)

First I add rowInfo tot he row props (only runs on rows with data):

          getTrProps={(state, rowInfo, column) => {
            return { rowInfo };
          }}

And then I try to only render based on if this prop exists

         TrComponent={rowProps => rowProps.rowInfo ? ReactTableDefaults.TrComponent : null }

However I get these errors:

ReactReconciler.js:63 Uncaught (in promise) TypeError: Cannot read property 'getHostNode' of null
    at Object.getHostNode (ReactReconciler.js:63)
    at ReactCompositeComponentWrapper.getHostNode (ReactCompositeComponent.js:384)
    at Object.getHostNode (ReactReconciler.js:63)
    at Object.updateChildren (ReactChildReconciler.js:113)
    at ReactDOMComponent._reconcilerUpdateChildren (ReactMultiChild.js:208)
    at ReactDOMComponent._updateChildren (ReactMultiChild.js:312)
    at ReactDOMComponent.updateChildren (ReactMultiChild.js:299)
    at ReactDOMComponent._updateDOMChildren (ReactDOMComponent.js:936)
    at ReactDOMComponent.updateComponent (ReactDOMComponent.js:754)
    at ReactDOMComponent.receiveComponent (ReactDOMComponent.js:716)

System Information

react: 15.4.2
react-table: 5.2.0
node: v6.9.2

[tannerlinsley]

Set the minRows prop to 0

[AshCoolman]

After taking a close look, there is a bit more happening here.

The minRows does not kick into effect when there are multiple pages (e.g. on the last page). I did a little bit of fiddling to get it behaving the way _I_ expected:

• minRows has works even when multiple pages
• minRows 0 is respected

Previous code ( src/index.js line 325):

     const padRows = pages > 1 
      ? _.range(pageSize - pageRows.length)
      : minRows 
      ? _.range(Math.max(minRows - pageRows.length, 0))
      : []

Code ( src/index.js line 325):

   /* minRows has priority, handle minRows = 0 */
    const padRows = Number.isInteger(minRows) 
      ? _.range(Math.max(minRows - pageRows.length, 0))
      : pages > 1 
      ? _.range(pageSize - pageRows.length)
      : []

@tannerlinsley Could you check the code above for intent/sanity? if it is what you want I'll make a merge request.

[AshCoolman]

@tannerlinsley any thoughts?

[Firanolfind]

I created wrapped component and used this method

calculatePageSize = () => Math.max(this.props.minRows, Math.min(this.props.data.length, this.props.pageSize));

then assigned in render:

<ReactTable
  data={data}
  {...props}
  pageSize={this.calculatePageSize()}
 />

use:

<MyCustomTable 
  pageSize={30}
  minRows={0} // whatever you want - could be 3 - 5 row so wont look ugly
  data={data} 
/>