react-table pagination

[sonalk215]

I am trying to implement pagination in react-table and below is my code

const BookingTable = (props)=>{
    
    const columns=React.useMemo(
        ()=>[
            {
                Header: 'Sr No',
                accessor: 'sNo',
            },
            {
                Header: 'Events',
                accessor: 'events',
            },
            {
                Header: 'Status',
                accessor: 'status',
            }
        ],
        []
    )

    const getStatus=statusCode=>{
        if(statusCode===4) {
            return "Declined"+statusCode
        }
        else if (statusCode===3) {
            return "Accepted"+statusCode
        }
        else {
            return "No Response"+statusCode
        }
    }

    const data=props.tableData.map(datum=>{
        return {
            id: datum.id,
            sNo: datum.sR_NO,
            startDateTime: datum.startDateTime.dateTime,
            endDateTime: datum.endDateTime.dateTime,
            location: datum.location.displayName,
            events: datum.subject,
            status: getStatus(datum.response.response),
            organiserName: datum.organiser.emailAddress.name,
            organiserMail: datum.organiser.emailAddress.address,
            attendeeName: datum.attendees[0].emailAddress.name,
            attendeeMail: datum.attendees[0].emailAddress.address
        }
    })

    const {
        getTableProps,
        getTableBodyProps,
        headerGroups,
        prepareRow,
        page,
        canPreviousPage,
        canNextPage,
        pageOptions,
        pageCount,
        gotoPage,
        nextPage,
        previousPage,
        setPageSize,
        state: { pageIndex, pageSize },
    } = useTable(
            {
                columns,
                data,
                initialState: {pageIndex: 0, pageSize: 5},
            },
            usePagination
        )

    return (
        <>
            <table 
                {...getTableProps()} 
                className={classes['data-table']}
            >
                <thead>
                    {headerGroups.map(headerGroup=>{
                        return (
                            <tr 
                                {...headerGroup.getHeaderGroupProps()}
                                className={classes['table-header-row']}
                            >
                                {headerGroup.headers.map(column=>{
                                    return (
                                        <th
                                            {...column.getHeaderProps()}
                                            className={classes['table-column-headers']}
                                        >
                                            {column.render('Header')}
                                        </th>
                                    )
                                })}
                            </tr>
                        )
                    })}
                </thead>

                <tbody
                    {...getTableBodyProps()}
                    className={classes['data-table-body']}
                >
                    {page.map((row, i)=>{
                        prepareRow(row)
                        return (
                            <tr
                                {...row.getRowProps()}
                                className={classes['table-body-row']}
                                onClick={()=>props.testRowClick(row)}
                            >
                                {row.cells.map(cell=>{
                                    return (
                                        <td
                                            {...cell.getCellProps()}
                                            className={classes['table-body-data']}
                                        >
                                            {cell.render('Cell')}
                                        </td>
                                     )
                                })}
                            </tr>
                        )
                    })}
                </tbody>
        </table>

            <div className={classes.pagination}>
                <button onClick={() => gotoPage(0)} disabled={!canPreviousPage}>
                    {'<<'}
                </button>{' '}
                <button onClick={() => previousPage()} disabled={!canPreviousPage}>
                    {'<'}
                </button>{' '}
                <button onClick={() => nextPage()} disabled={!canNextPage}>
                    {'>'}
                </button>{' '}
                <button onClick={() => gotoPage(pageCount - 1)} disabled={!canNextPage}>
                    {'>>'}
                </button>{' '}

                <span>
                    Page{' '}
                    <strong>
                        {pageIndex + 1} of {pageOptions.length}
                    </strong>{' '}
                </span>

                <span>
                    | Go to page:{' '}
                    <input
                        type="number"
                        defaultValue={pageIndex + 1}
                        onChange={e => {
                            const page = e.target.value ? Number(e.target.value) - 1 : 0
                            gotoPage(page)
                        }}
                        style={{ width: '100px' }}
                    />
                </span>{' '}

                <select
                    value={pageSize}
                    onChange={e => {
                    setPageSize(Number(e.target.value))
                    }}
                >
                    {[10, 20, 30, 40, 50].map(pageSize => (
                        <option key={pageSize} value={pageSize}>
                            Show {pageSize}
                        </option>
                    ))}
                </select>
            </div>
        </>
    )
}

export default BookingTable;

I am getting data from the api, and the data is complete i.e. api returns 30 records, but i want only 10(or any other number) records per page

While running the code, I am getting error as follows:

Error: Maximum update depth exceeded. This can happen when a component repeatedly calls setState inside componentWillUpdate or componentDidUpdate.

Please help.

[umarluqman]

I believe you need to memoize the data like this

const data = useMemo(() =>
    props.tableData.map((datum) => {
      return {
        id: datum.id,
        sNo: datum.sR_NO,
        startDateTime: datum.startDateTime.dateTime,
        endDateTime: datum.endDateTime.dateTime,
        location: datum.location.displayName,
        events: datum.subject,
        status: getStatus(datum.response.response),
        organiserName: datum.organiser.emailAddress.name,
        organiserMail: datum.organiser.emailAddress.address,
        attendeeName: datum.attendees[0].emailAddress.name,
        attendeeMail: datum.attendees[0].emailAddress.address,
      };
    }),
  [props.tableData]
);

So you won't get the maximum update depth error

[sonalk215]

I tried wrapping my code inside useMemo, as well as useEffect, but everytime I am getting error as

TypeError: Cannot read property 'forEach' of undefined

My code as

const data = useMemo(() =>
    props.tableData.map((datum) => {
      return {
        id: datum.id,
        sNo: datum.sR_NO,
        startDateTime: datum.startDateTime.dateTime,
        endDateTime: datum.endDateTime.dateTime,
        location: datum.location.displayName,
        events: datum.subject,
        status: getStatus(datum.response.response),
        organiserName: datum.organiser.emailAddress.name,
        organiserMail: datum.organiser.emailAddress.address,
        attendeeName: datum.attendees[0].emailAddress.name,
        attendeeMail: datum.attendees[0].emailAddress.address,
      };
    }),
  [props.tableData]
);

I am calling the api from parent component and then passing it to child component(BookingTable).

[umarluqman]

You need to check back the array for the forEach because it's undefined.
You need to give a default value which is empty to the array, you can do that by destructuring

something like this
const { yourArray = [] } = props
so you wouldn't get type error

[sonalk215]

Hi, I am trying pagination as follows, i am using free NASA api as accepts pagination

App.js

import React from 'react'
import { useTable, usePagination } from 'react-table';
import axios from 'axios';
import Table from './Table';

const App=()=>{
  const [data, setData] = React.useState([])
  const [loading, setLoading] = React.useState(false)
  const [pageCount, setPageCount] = React.useState(0)

  const fetchData=(pageNum=0, size=10)=>{
    axios.get('https://www.neowsapp.com/rest/v1/neo/browse?page='+pageNum+'&size='+size+'&api_key=fWZoMnmqE5I8vrn7dHMZdBGspEuzlyaTZlejudxI')
      .then(res=>{
        setData(res.data.near_earth_objects);
        setPageCount(res.data.page.total_pages)
        setLoading(false)
      })
  }

  return (
      <Table
        data={data}
        fetchData={fetchData}
        loading={loading}
        pageCount={pageCount}
      />
  )
}

export default App;

Table.js as below

import React from 'react'
import { useTable, usePagination } from 'react-table';

const Table=({
    data,
    fetchData,
    loading,
    pageCount: controlledPageCount 
  })=> {

    const columns = React.useMemo(
        () => [
          {
            Header: 'Designation',
            accessor: 'designation'
          },
          {
              Header: 'Name',
              accessor: 'name'
          },
          {
              Header: 'Nasa url',
              accessor: 'nasa_jpl_url'
          }
        ],
        []
      )

    const {
      getTableProps, getTableBodyProps, headerGroups, prepareRow, page, canPreviousPage,
      canNextPage, pageOptions, pageCount, gotoPage, nextPage, previousPage, setPageSize,
      state: { pageIndex, pageSize },
    } = useTable(
      {
        columns,
        data,
        initialState: { pageIndex: 0 },
        pageCount: controlledPageCount,
      },
      usePagination
    )

    console.log(pageCount);

    React.useEffect(() => {
      fetchData( pageIndex, pageSize )
    }, [pageIndex, pageSize, ])

return (
  <>
    <pre>
      <code>
        {JSON.stringify(
          {
            pageIndex,
            pageSize,
            pageCount,
            canNextPage,
            canPreviousPage,
          },
          null,
          2
        )}
      </code>
    </pre>
    <table {...getTableProps()}>
      <thead>
        {headerGroups.map(headerGroup => (
          <tr {...headerGroup.getHeaderGroupProps()}>
            {headerGroup.headers.map(column => (
              <th {...column.getHeaderProps()}>
                {column.render('Header')}
              </th>
            ))}
          </tr>
        ))}
      </thead>
      <tbody {...getTableBodyProps()}>
        {page.map((row, i) => {
          prepareRow(row)
          return (
            <tr {...row.getRowProps()}>
              {row.cells.map(cell => {
                return <td {...cell.getCellProps()}>{cell.render('Cell')}</td>
              })}
            </tr>
          )
        })}
        <tr>
          {loading ? (
            <td colSpan="10000">Loading...</td>
          ) : (
            <td colSpan="10000">
              Showing {page.length} of ~{controlledPageCount * pageSize}{' '}
              {/* Showing {page.length} of ~{pageCount}{' '} */}
              results
            </td>
          )}
        </tr>
      </tbody>
    </table>


    <div className="pagination">
      <button onClick={() => gotoPage(0)} disabled={!canPreviousPage}>
        {'<<'}
      </button>{' '}
      <button onClick={() => previousPage()} disabled={!canPreviousPage}>
        {'<'}
      </button>{' '}
      <button 
        onClick={() => nextPage()} disabled={!canNextPage}
        >
        {'>'}
      </button>{' '}
      <button onClick={() => gotoPage(pageCount - 1)} disabled={!canNextPage}>
        {'>>'}
      </button>{' '}
      <span>
        Page{' '}
        <strong>
          {/* {pageIndex + 1} of {pageOptions.length} */}
          {pageIndex + 1} of {controlledPageCount}
        </strong>{' '}
      </span>
      <span>
        | Go to page:{' '}
        <input
          type="number"
          defaultValue={pageIndex + 1}
          onChange={e => {
            const page = e.target.value ? Number(e.target.value) - 1 : 0
            gotoPage(page)
          }}
          style={{ width: '100px' }}
        />
      </span>{' '}
      <select
        value={pageSize}
        onChange={e => {
          setPageSize(Number(e.target.value))
        }}
      >
        {[5, 10, 15, 20].map(pageSize => (
          <option key={pageSize} value={pageSize}>
            Show {pageSize}
          </option>
        ))}
      </select>
    </div>
  </>
)

}

export default Table;

My pageCount is not changing, its coming 1, and Table.js is getting called multiple times (like 8). Also
I am not able to understand the meaning of pageCount: controlledPageCount. I am still not able to figure out pagination with react-table

Please help....