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
Simple search is when parameters names and value are just visible on browser url and browser respect them
- Just import the
react-router-dom
'suseSearchParsms
hook as below
import { useSearchParams } from "react-router-dom"; //on top of your page
//below inside your component
const [searchParams, setSearchParams] = useSearchParams();
- 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