fascinating-indigo•15mo ago

client side filter with filters.mode=off not working

Hello refine community, filters.mode=off works as expected if I used column header filters. But if I do a search filter using setFilters function the query string in the location bar is updated correctly but the table is not updated until I refresh the page. How can i set the table to update whenever the filters change using setFilters function. ps if I used server side filtering by not setting filter.mode to off. It works as expected

6 Replies

kapa.ai•15mo ago

Hi @damaben. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- Hello! Based on the information provided in the extracts, it seems that you're using client-side filtering with filters.mode set to "off". To update the table whenever the filters change using the setFilters function, you can follow the example below:

import { useTable } from "@refinedev/antd";
import { Table } from "antd";

const ListPage = () => {
  const { tableProps, setFilters } = useTable({
    filters: {
      mode: "off",
    },
  });

  const handleSearch = (searchValue) => {
    setFilters((prevFilters) => {
      // Update the filters based on the search value
      // Replace or merge the filters as needed
    });
  };

  return (
    <>
      {/* Your search input component with handleSearch function */}
      <Table {...tableProps} rowKey="id">
        {/* Your table columns */}
      </Table>
    </>
  );
};

import { useTable } from "@refinedev/antd";
import { Table } from "antd";

const ListPage = () => {
  const { tableProps, setFilters } = useTable({
    filters: {
      mode: "off",
    },
  });

  const handleSearch = (searchValue) => {
    setFilters((prevFilters) => {
      // Update the filters based on the search value
      // Replace or merge the filters as needed
    });
  };

  return (
    <>
      {/* Your search input component with handleSearch function */}
      <Table {...tableProps} rowKey="id">
        {/* Your table columns */}
      </Table>
    </>
  );
};

In this example, you can use the handleSearch function to update the filters based on the search value. The setFilters function allows you to update the filters by providing a function that receives the previous filters and returns the new filters. However, if you want to use server-side filtering, you can simply remove the filters.mode property or set it to "server". If you still face issues, please provide more information or code snippets to better understand your implementation. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•15mo ago

<@1108301188388098078> kapa.ai is still learning and improving, please let us how it did by reacting below

fascinating-indigo•15mo ago

@kapa.ai Impressive. But that what I did and the query string on the location bar gets updated not the table. I have to refresh the page. I am thinking it's may be a bug

kapa.ai•15mo ago

Let me check the knowledge base for you. One moment! :books:

kapa.ai•15mo ago

---------------------- I see, it seems like the table is not updating automatically when the filters change. Based on the information provided in the extracts, I can't confirm if it's a bug or an issue with your implementation. However, you can try the following steps to debug the issue: 1. Make sure you're using the latest version of refine and its related packages. 2. Check if there are any errors or warnings in the browser console. 3. Verify that the setFilters function is being called correctly and the filters are being updated as expected. If you still face issues, it would be helpful to provide more information or code snippets to better understand your implementation. Additionally, you can check the refine documentation (https://refine.dev/docs) and refine blog (https://refine.dev/blog) for more examples and guidance. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

Overview | refine

What is refine?

Blog | refine

A Docusaurus powered blog!

kapa.ai•15mo ago

<@1108301188388098078> kapa.ai is still learning and improving, please let us how it did by reacting below