get firestore collection record count for pagination react

Question

I have a table to display users collection including search filter. Now I want to add a material-ui pagination, where i want to pass the total record count. the pagination works fine. How can I get that?

Any help appreciated.!

table and table pagination code

 <Table className={classes.table}>
            <TableHead>
              <TableRow className={classes.tableHeader}>
                <TableCell >#</TableCell>
                <TableCell ></TableCell>
                <TableCell>Name</TableCell>
                <TableCell align="right">Phone</TableCell>
                <TableCell align="right">Role</TableCell>
                <TableCell align="right">Service</TableCell>
                <TableCell align="right">Location</TableCell>
              </TableRow>
            </TableHead>
            <TableBody>
              {filteredList && filteredList
              .slice(page * rowsPerPage, page * rowsPerPage + rowsPerPage)
              .map(row => (
                <TableRow key={row.id}>
                  <TableCell>{items++}</TableCell>
                  <TableCell align="right">
                    <Link to={'/admin/profile/' + row.id} key={row.id} >
                      <Tooltip title="View Profile">
                        <UserIcon/>
                      </Tooltip>
                    </Link>
                  </TableCell>
                  <TableCell component="th" scope="row">
                    {row.sp_Name}
                  </TableCell>
                  <TableCell align="right">{row.sp_Phone}</TableCell>
                  <TableCell align="right">{row.sp_Role}</TableCell>
                  <TableCell align="right">{row.sp_Service}</TableCell>
                  <TableCell align="right">{row.sp_Location}</TableCell>

                  {/* <TableCell align="right">
                    <ApproveIcon onClick={this.handleClickDialogOpen} className={classes.icon} />
                  </TableCell> */}
                  <TableCell align="right">
                    <Tooltip title="Delete">
                      <DeleteIcon onClick={() => this.handleClickDialogOpen(row.id)} className={classes.icon} />
                      {/* <DeleteIcon onClick={() => deleteSP(row.id)} className={classes.icon} /> */}
                    </Tooltip>
                  </TableCell>

                </TableRow>
              ))}
            </TableBody>
          </Table>
          <TablePagination
          rowsPerPageOptions={[5, 10, 25]}
          component="div"
          //count={5}
          count ={filteredList.length} -- I want to pass count
          rowsPerPage={this.state.rowsPerPage}
          page={this.state.page}
          backIconButtonProps={{
            'aria-label': 'Previous Page',
          }}
          nextIconButtonProps={{
            'aria-label': 'Next Page',
          }}
          onChangePage={this.handleChangePage}
          onChangeRowsPerPage={this.handleChangeRowsPerPage}
        />

score 0 · Answer 1 · answered May 20 '19 at 14:40

0

Firestore doesn't keep a count of the number of documents in a collection. If you need that, you'll have to store it yourself and keep it up to date. For an example of this, see the documentation on aggregation queries and distributed counters.

Also see: Firebase firestore collection count

answered May 20 '19 at 14:40

Frank van Puffelen

565,676
79
828
807

1

This isn't a great answer for when you need to do user custom query on a collection and do paging correctly. Is there any improvements on this? – Jonathan Sep 30 '19 at 17:48

get firestore collection record count for pagination react

1 Answers1