R
Refine

ask-any-question

Add filter to list page

Eextended-salmon11/14/2023
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,
});
Kkapa.ai11/14/2023
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: ----------------------
Kkapa.ai11/14/2023
<@395261846862561301> kapa.ai is still learning and improving, please let us know how it did by reacting below
Eextended-salmon11/14/2023
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]);

Looking for more? Join the community!

R
Refine

ask-any-question

Join Server