How to manage noDataComponent or display no rows found in ReactTable V7

Question

I was using the older version of React Table for last couple of months and now when i started using Latest version v7, i started facing difficulty in customizing the table while no data is found in the table to be displayed. It doesn't show any message like 'No Rows Found' which was earlier displayed in previous versions of the table. How could i render the noDataComponent.

Answer 1

As v7 is headless, you are responsible for the output under the varying conditions. You likely have something like map() in place to iterate over the data array similar to:

<TableBody>
    {page.map((row) => {
        prepareRow(row);
        return (
            <TableRow {...row.getRowProps()}>
                {row.cells.map((cell) => {
                    return (
                        <TableCell {...cell.getCellProps()}>
                            {cell.render('Cell')}
                        </TableCell>
                    );
                })}
            </TableRow>
        );
    })}
</TableBody>

You can add some code to detect the condition where no rows are found similar to:

    {page.length === 0 &&
        <TableRow>
            <TableCell>
               No data to display
            </TableCell>
        </TableRow>
    }