title: Pagination does not work when filtering. How can i fix?
body: <p><strong>i have one datatable. Datatable has result and pagination. Result works fine, but when filtering, pagination moves according to result. This is normal page.</strong><a href="https://i.stack.imgur.com/pUPxW.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/pUPxW.png" alt="enter image description here" /></a></p>
  <p><strong>Filtering but still 9 page. And result 10.</strong></p>
  <p><a href="https://i.stack.imgur.com/PfFSZ.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/PfFSZ.png" alt="enter image description here" /></a></p>
  <p><strong>now result 20 but page 5. Because in normal case, when you make 20, it becomes 5 pages. How can i fix?</strong></p>
  <p><a href="https://i.stack.imgur.com/wIFc7.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/wIFc7.png" alt="enter image description here" /></a></p>
  <pre><code>const [currentPage, setCurrentPage] = useState(1);
  
    const [select, setSelect] = useState(10);
    function handleChange(e) {
      setSelect(e.target.value);
    }
  
    const indexOfLast = currentPage * select;
    const indexOfFirst = indexOfLast - select;
    const splitData = rows.slice(indexOfFirst, indexOfLast);
    const totalPages = Math.ceil(rows.length / select);
  
    const renderHeadingRow = (item) =&gt; {
      return &lt;td&gt;{item}&lt;/td&gt;;
    };
  
    const renderRow = (item, index) =&gt; {
      console.log(splitData[index])
      return (
        &lt;tr key={index}&gt;
          {splitData[index]
            ?.filter((val) =&gt; {
              if (searchWord == &quot;&quot;) {
                return val;
              }
              else if(item[1].toLowerCase().includes(searchWord.toLowerCase())){
                return val
              }
              else if(item[2].toLowerCase().includes(searchWord.toLowerCase())){
                return val
              }
              else if(item[5].toLowerCase().includes(searchWord.toLowerCase())){
                return val
              }
            })
            .map((data, no) =&gt; {
              return &lt;td&gt;{splitData[index][no]}&lt;/td&gt;;
            })}
        &lt;/tr&gt;
      );
    };
  
    const theadData = &lt;tr&gt;{heading.map(renderHeadingRow)}&lt;/tr&gt;;
    const tbodyData = splitData.map(renderRow);
  </code></pre>