Pagination and activePage prop

[vlrmprjct]

Hello @joaocarmo ,

just my next question ...

I try to figure out how to set the table initially to a different page.
Lets say the route entry url looks like ../whatever/fancy/page/2 . Now I listen to an activePage param, here the 2 .

Is there a way to handle this ?

[joaocarmo]

Great question, @vlrmprjct!

You can already control the component through its internal API like:

import { useEffect, useRef } from 'react'
import SmartDataTable from 'react-smart-data-table'
import data from './data.json'

const getPageFromUrlPath = () => {  
  const url = new URL(window.location)
  const urlParts = url.pathname.split('/')
  const page = urlParts[urlParts.length - 1]

  return page ? parseInt(page, 10) : 1
}

const App = () => {
  const tableRef = useRef()

  useEffect(() => {
    if (tableRef?.current) {
      tableRef.current.handleOnPageChange(null, { activePage: getPageFromUrlPath() })
    }
  }, [])

  return (
    <main>
      <h1>App</h1>
      <hr />
      <SmartDataTable
        name="test"
        data={data}
        perPage={10}
        ref={tableRef}
      />
    </main>
  )
}

[vlrmprjct]

Olá @joaocarmo,

Thank You ! Nice !
I will give that a try and in this case I would decline the PR.

[vlrmprjct]

Works pretty neat @joaocarmo ,
also with this solution it is possible to create an "external" pagination everywhere in the markup!

Thank You! 👍🏼

[joaocarmo]

@vlrmprjct great to know it worked out well for you! Thanks for letting me know.

I've added the information to the proper section in the documentation.