[V7] How to render empty rows with flex layout hook

[zecamacho]

Hello,

I'm using useFlexLayout hook and want to render empty rows.

Since variable rows is an empty array, how can I get cell props to correctly display using a flex layout? The columns array is what I'm using to drive the cell rendering but column object does not have cell props.

Any pointers?
Thanks

[awhite9]

You can grab the row props from the headerGroups. So this is how I handled creating the empty padding rows that worked with flex layout and column resizing.

 //uses the table header group props for the empty rows so resizing and flex layout still works
    let createEmptyRow = () => {
        return(
            headerGroups.map((headerGroup: any) => (
                <Table.Row {...headerGroup.getHeaderGroupProps()}>
                    {headerGroup.headers.map((column: any) => (
                        <Table.Cell {...column.getHeaderProps()}>
                            <div><span>&nbsp;</span></div>
                        </Table.Cell>
                    ))}
                </Table.Row>
            ))
        )
    };

    //creating empty padding cells
    let getEmptyRow = () => {
        let emptyRows = [];
        if(page.length%pageSize !== 0 && !canNextPage)
            for (let i = 0; i < (pageSize - page.length%pageSize); i++)
                emptyRows.push(createEmptyRow());

        if(data.length === 0 || page.length === 0)
            for (let i = 0; i < pageSize; i++)
                emptyRows.push(createEmptyRow());

        return emptyRows
    };

Then in my table body I called getEmptyRows(). (note that I'm using pagination so I am using page instead of rows in the body mapping function).

                    <Table.Body {...getTableBodyProps()} >
                        {headerGroups.map((headerGroup: any) => (
                            <Table.Row {...headerGroup.getHeaderGroupProps()}>
                                {headerGroup.headers.map((column: any) => (
                                    <Table.Cell {...column.getHeaderProps()}>
                                        <div>{column.canFilter ? column.render('Filter') : null}</div>
                                    </Table.Cell>
                                ))}
                            </Table.Row>
                        ))}
                    {page.map((row: any, i: number) => {
                        prepareRow(row);
                        return (
                            <Table.Row {...row.getRowProps(getRowProps(row))} key={i}>
                                {row.cells.map((cell: any, index: number) => {
                                    return <Table.Cell {...cell.getCellProps()} key={index}>
                                        {cell.render('Cell')} </Table.Cell>
                                })}
                            </Table.Row>)})}
                        {getEmptyRow()}
                    </Table.Body>

Hope this helps!!

[dkumar431]

@awhite9 This helped. But Are you sure this worked with resizing also? For me when there are empty rows in the table and I am resizing the empty rows are not resizing properly.