how to show paginated table in react

user_15005034 0
Viewed 135

I want to render a table in React on a page. Table has contains a lot of rows so I want to apply pagination. Like when someone clicks on page 2 link(/open_alerts/?page=2), table fetches next rows while keeping the same page and just changing the data. But i am facing problem, i can not know in my AlertsTable component the value of page parameter. i saw something useParams hook but this is not allowed in class component. How can I achieve the desired thing?

Home page is at / and it contains link to /open_alerts/ page. App.js:

    <Router>
    <Switch>
      <Route exact path="/">
        <Link to="/open_alerts/">Open Alerts</Link>
        <div className="Charts">
          <AlertsChart id="alerts-chart"/>
          <RegionsChart id="regions-chart"/>
        </div>
      </Route>
      <Route path="/open_alerts/"> 
        <Link to="/">Home page</Link>       
        <AlertsTable />
      </Route>
    </Switch>
    </Router>

How do i know in AlertsTable component the page number so that i may use page number in my API call to server to get the paginated response?

alerts_table.js:

    export class AlertsTable extends React.Component {
    .
    . // code here
    .
    render() {
        return (
          <div>
            <h1>
              Open alerts
            </h1>
            { !this.state.isfetched ? <p>Fetching open alerts</p>: 
            <div>
              <AlertsRenderer alerts={this.state.alerts}/>
              <PaginatedButton pages={this.state.pages_count} />
            </div> }
          </div>
        );
      }
    }

paginated_button.js:

    export function PaginatedButton(props) {
      return (
        <Router>
        {props.pages.map(page_no => (
          <button>
            <Link exact to={"/open_alerts/?page="+(parseInt(page_no)+1)}>{page_no+1}</Link>
          </button>
        ))}
        </Router>
    )}

AlertsRenderer is just a functional component that gets alerts from props and displays using HTML table tags.

react-router reactjs
1 Answers

useParams wouldn't help you anyway since that is the route's match params, nothing to do with an URL's query string parameters.

You will have to process the query string, which can be accessed from the location route prop.

{
  key: 'ac3df4', // not with HashHistory!
  pathname: '/somewhere',
  search: '?some=search-string',
  hash: '#howdy',
  state: {
    [userDefined]: true
  }
}

Use URLSearchParams to process the query string.

const search = this.props.location.search;
const queryParams = Object.fromEntries(new URLSearchParams(search));


const search = "?page=2";
const queryParams = Object.fromEntries(new URLSearchParams(search));

console.log(queryParams);

You can access the route props by a number of ways, but with class-based components they are either directly passed when the component is directly rendered by a Route component on the render or component props, or if you decorate the component with the withRouter Higher Order Component.

In your case it seems that <AlertsTable /> is not directly rendered by a Route component so you should decorate AlertsTable with withRouter and access the location prop that is passed.

user_86908570
Related