Skip to main content

Pagination with search form

Search philosophy

On trackmis when we search, chances are we're searching through data to be desplayed on the large table. philosophy is browser should be aware of searching and respect it. ie we can send each others search links and have the same results desplayed on the page

Now after having legal parts out of the way, lets get started.

Searching usually we have some form, The controls on these form should be stored somewhere and they'll update url parameter when user click search button.

Luckly we have much of these api builts as we'll discuss below here

Simple search is when parameters names and value are just visible on browser url and browser respect them

  1. Just import the react-router-dom's useSearchParsms hook as below
import { useSearchParams } from "react-router-dom"; //on top of your page

//below inside your component
const [searchParams, setSearchParams] = useSearchParams();
  1. Then import search's main soup called SearchUtils as below
import { SearchUtils } from "../../../general-components/searches/simple-search";
//and inside your component initialize with helow