Add filter to list page

Is it possible to add a filter to the list page useTable?

    const {
        getHeaderGroups,
        getRowModel,
        setOptions,
        refineCore: {
            setCurrent,
            pageCount,
            current,
            tableQueryResult: { data: tableData },
        },
    } = useTable({
        columns,
    });

    const {
        getHeaderGroups,
        getRowModel,
        setOptions,
        refineCore: {
            setCurrent,
            pageCount,
            current,
            tableQueryResult: { data: tableData },
        },
    } = useTable({
        columns,
    });

3 Replies

kapa.ai•14mo ago

Hi @silentnyte. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- Yes, it is possible to add a filter to the list page using the useTable hook in refine. The useTable hook has a filter feature that can be used by providing initial, permanent, and defaultBehavior keys to the filters object. The initial is the initial filter state, and the permanent is the permanent filter state. These states are a CrudFilter type that contains the field, the operator, and the value of the filter. You can change the filters state by using the setFilters function. Every change will trigger a new fetch. Here is an example of how you can use the useTable hook to add a filter to your list page:

import React, { useMemo } from "react";  
import { useMany, useTable, HttpError } from "@refinedev/core";  
  
interface IPost {  
 id: number;  
 title: string;  
 content: string;  
 status: "published" | "draft" | "rejected";  
 createdAt: string;  
}  
  
const PostList: React.FC = () => {  
 const { tableQueryResult, filters, setFilters } = useTable<IPost, HttpError>();  
  
 // Fetches the posts for the current page  
 const posts = tableQueryResult?.data?.data ?? [];  
  
 // Gets the current filter values for the fields  
 const currentFilterValues = useMemo(() => {  
 // Filters can be a LogicalFilter or a ConditionalFilter. ConditionalFilter not have field property. So we need to filter them.

import React, { useMemo } from "react";  
import { useMany, useTable, HttpError } from "@refinedev/core";  
  
interface IPost {  
 id: number;  
 title: string;  
 content: string;  
 status: "published" | "draft" | "rejected";  
 createdAt: string;  
}  
  
const PostList: React.FC = () => {  
 const { tableQueryResult, filters, setFilters } = useTable<IPost, HttpError>();  
  
 // Fetches the posts for the current page  
 const posts = tableQueryResult?.data?.data ?? [];  
  
 // Gets the current filter values for the fields  
 const currentFilterValues = useMemo(() => {  
 // Filters can be a LogicalFilter or a ConditionalFilter. ConditionalFilter not have field property. So we need to filter them.

For more information, you can refer to the useTable documentation (https://refine.dev/docs/api-reference/core/hooks/useTable/). ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•14mo ago

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

foreign-sapphireOP•14mo ago

For anyone else looking for the answer this is what worked for me.

    const {
        getHeaderGroups,
        getRowModel,
        setOptions,
        refineCore: {
            setCurrent,
            pageCount,
            current,
            filters,
            setFilters,
            tableQueryResult: { data: tableData },
        },
    } = useTable({
        columns,
    });

    React.useEffect(() => {
        setFilters([
            {
                field: "recipeId",
                operator: "eq",
                value: 2,
            },
        ]);
    }, [filters]);

    const {
        getHeaderGroups,
        getRowModel,
        setOptions,
        refineCore: {
            setCurrent,
            pageCount,
            current,
            filters,
            setFilters,
            tableQueryResult: { data: tableData },
        },
    } = useTable({
        columns,
    });

    React.useEffect(() => {
        setFilters([
            {
                field: "recipeId",
                operator: "eq",
                value: 2,
            },
        ]);
    }, [filters]);

Add filter to list page

Did you find this page helpful?