How can I mimic the pageSize from v6 in v7?

[jonathansgardner]

I'd like to show empty rows beneath my data if the length of the data is less than the pageSize. Much like what was the case when a pageSize was set in v6 (see screenshot). I can't seem to find any examples of this using react-table v7. Sorry if I have overlooked something in the docs.

[jonathansgardner]

I came up with a solution. Maybe there is a better way to do this but I wasn't able to find any. I'd love to know it if someone has one.

Anyway, I created a function that finds out how many pages short of the pageSize the current page is and creates that number of rows full of empty (   ) cells. I base the cells on page[ 0 ] so that I am able to pass in the proper row and cell props via ...page[ 0 ].getRowProps and { ...cell.getCellProps() }. This way all of the cells are properly sized.

const renderEmptyRows =  = useCallback( () => {
	let emptyRows = [];

	if ( page.length < pageSize ) {
		const emptyRowsToRender = pageSize - page.length;

		for ( let i = 0; i < emptyRowsToRender; i++ ) {
			emptyRows.push( <div
				key={ i + page.length }
				className={ styles.tableRow }
				{ ...page[ 0 ].getRowProps }
			>
				{ page[ 0 ].cells.map( ( cell, i ) => (
					<div
						key={ i }
						className={ styles.tableCell }
						{ ...cell.getCellProps() }
					>
						&nbsp;
					</div>
				) ) }
			</div> );
		}
	}

	return emptyRows;
}, [ page, pageSize ] );