ratty-blush•3w ago

How to do a table data search with @refinedev/react-table with a custom key outside the columns def?

How can I create a custom table data search with refinedev/react-table based on TanStack react table to pass the '_query' key to the backend?

5 Replies

kapa.ai•3w ago

Hi @regn. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- To implement a custom table data search with @refinedev/react-table (TanStack Table adapter) and send a custom key like _query to your backend, you should use the onSearch option of the useTable hook. This allows you to build custom filters outside of the column definitions and pass them to your data provider. Here’s how you can do it: 1. Use the onSearch option in useTable
The onSearch function receives the form values and should return an array of filter objects (CrudFilters). You can map your custom search input to the _query key here. 2. Trigger the search from a custom input
You can create a search form or input outside the table columns and call the search function. Example:

import React from "react";
import { useTable } from "@refinedev/react-table";
import { ColumnDef, flexRender } from "@tanstack/react-table";

export const ProductTable: React.FC = () => {
    const [search, setSearch] = React.useState("");

    const {
        getHeaderGroups,
        getRowModel,
        refineCore: { setCurrent, pageCount, current, search: triggerSearch },
    } = useTable({
        columns: [
            // ...your column definitions
        ],
        refineCoreProps: {
            onSearch: (params) => {
                // Map your custom search input to the "_query" key
                return [
                    {
                        field: "_query",
                        operator: "eq",
                        value: params._query,
                    },
                ];
            },
        },
    });

    const handleSearch = (e: React.FormEvent) => {
        e.preventDefault();
        // Call the search function with your custom key
        triggerSearch({ _query: search });
    };
return (
        <div>
            <form onSubmit={handleSearch}>
                <input
                    value={search}
                    onChange={(e) => setSearch(e.target.value)}
                    placeholder="Search..."
                />
                <button type="submit">Search</button>
            </form>
            <table>
                <thead>
                    {getHeaderGroups().map((headerGroup) => (
                        <tr key={headerGroup.id}>
                            {headerGroup.headers.map((header) => (
                                <th key={header.id}>
                                    {flexRender(
                                        header.column.columnDef.header,
                                        header.getContext()
                                    )}
                                </th>
                            ))}
                        </tr>
                    ))}
                </thead>
                <tbody>
                    {getRowModel().rows.map((row) => (
                        <tr key={row.id}>
                            {row.getVisibleCells().map((cell) => (
                                <td key={cell.id}>
                                    {flexRender(
                                        cell.column.columnDef.cell,
                                        cell.getContext()
                                    )}
                                </td>
                            ))}
                        </tr>
                    ))}
                </tbody>
            </table>
        </div>
    );
};

import React from "react";
import { useTable } from "@refinedev/react-table";
import { ColumnDef, flexRender } from "@tanstack/react-table";

export const ProductTable: React.FC = () => {
    const [search, setSearch] = React.useState("");

    const {
        getHeaderGroups,
        getRowModel,
        refineCore: { setCurrent, pageCount, current, search: triggerSearch },
    } = useTable({
        columns: [
            // ...your column definitions
        ],
        refineCoreProps: {
            onSearch: (params) => {
                // Map your custom search input to the "_query" key
                return [
                    {
                        field: "_query",
                        operator: "eq",
                        value: params._query,
                    },
                ];
            },
        },
    });

    const handleSearch = (e: React.FormEvent) => {
        e.preventDefault();
        // Call the search function with your custom key
        triggerSearch({ _query: search });
    };
return (
        <div>
            <form onSubmit={handleSearch}>
                <input
                    value={search}
                    onChange={(e) => setSearch(e.target.value)}
                    placeholder="Search..."
                />
                <button type="submit">Search</button>
            </form>
            <table>
                <thead>
                    {getHeaderGroups().map((headerGroup) => (
                        <tr key={headerGroup.id}>
                            {headerGroup.headers.map((header) => (
                                <th key={header.id}>
                                    {flexRender(
                                        header.column.columnDef.header,
                                        header.getContext()
                                    )}
                                </th>
                            ))}
                        </tr>
                    ))}
                </thead>
                <tbody>
                    {getRowModel().rows.map((row) => (
                        <tr key={row.id}>
                            {row.getVisibleCells().map((cell) => (
                                <td key={cell.id}>
                                    {flexRender(
                                        cell.column.columnDef.cell,
                                        cell.getContext()
                                    )}
                                </td>
                            ))}
                        </tr>
                    ))}
                </tbody>
            </table>
        </div>
    );
};

Key points: - The onSearch function lets you build custom filters, including keys not present in your column definitions. - You can trigger the search with any custom input and map it to the _query key. - The returned filter array will be sent to your data provider, which should handle the _query key accordingly. This approach is based on the advanced search example in the Refine documentation, where onSearch is used to build custom filters for the table data, and you can adapt it to use any key you need, such as _query Table Search. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•3w ago

<@336843331416096768> Kapa.ai is still learning and improving, please let me know how I did by reacting below.

ratty-blushOP•3w ago

There is no 'search' object exported from useTable from "@refinedev/react-table" @kapa.ai

kapa.ai•3w ago

Let me check the knowledge base for you again. One moment! :books: ---------------------- You are correct—according to the official documentation, there is no search or triggerSearch function exported from useTable in @refinedev/react-table. The useTable hook for the TanStack Table adapter does not provide a built-in search handler like the Ant Design integration does. Instead, filtering in @refinedev/react-table is handled via column filters or by manipulating the filters state directly. If you want to implement a custom search that sends a special key (like _query) to your backend, you should use the setColumnFilters method provided by TanStack Table, and configure your columns or filter logic accordingly. Here’s how you can implement a custom search outside the column definitions: 1. Define your columns as usual. 2. Use setColumnFilters to set a custom filter. 3. In your data provider, handle the _query key as needed. Example:

import React from "react";
import { useTable } from "@refinedev/react-table";
import { ColumnDef, flexRender } from "@tanstack/react-table";

const columns = React.useMemo<ColumnDef<any>[]>(() => [
    // ...your column definitions
], []);

const PostList: React.FC = () => {
    const { setColumnFilters, getHeaderGroups, getRowModel } = useTable({
        columns,
    });

    const [search, setSearch] = React.useState("");

    const handleSearch = (e: React.FormEvent) => {
        e.preventDefault();
        setColumnFilters([
            {
                id: "_query", // custom key
                value: search,
            },
        ]);
    };
return (
        <div>
            <form onSubmit={handleSearch}>
                <input
                    value={search}
                    onChange={(e) => setSearch(e.target.value)}
                    placeholder="Search..."
                />
                <button type="submit">Search</button>
            </form>
            <table>
                <thead>
                    {getHeaderGroups().map((headerGroup) => (
                        <tr key={headerGroup.id}>
                            {headerGroup.headers.map((header) => (
                                <th key={header.id}>
                                    {flexRender(
                                        header.column.columnDef.header,
                                        header.getContext()
                                    )}
                                </th>
                            ))}
                        </tr>
                    ))}
                </thead>
                <tbody>
                    {getRowModel().rows.map((row) => (
                        <tr key={row.id}>
                            {row.getVisibleCells().map((cell) => (
                                <td key={cell.id}>
                                    {flexRender(
                                        cell.column.columnDef.cell,
                                        cell.getContext()
                                    )}
                                </td>
                            ))}
                        </tr>
                    ))}
                </tbody>
            </table>
        </div>
    );
};

import React from "react";
import { useTable } from "@refinedev/react-table";
import { ColumnDef, flexRender } from "@tanstack/react-table";

const columns = React.useMemo<ColumnDef<any>[]>(() => [
    // ...your column definitions
], []);

const PostList: React.FC = () => {
    const { setColumnFilters, getHeaderGroups, getRowModel } = useTable({
        columns,
    });

    const [search, setSearch] = React.useState("");

    const handleSearch = (e: React.FormEvent) => {
        e.preventDefault();
        setColumnFilters([
            {
                id: "_query", // custom key
                value: search,
            },
        ]);
    };
return (
        <div>
            <form onSubmit={handleSearch}>
                <input
                    value={search}
                    onChange={(e) => setSearch(e.target.value)}
                    placeholder="Search..."
                />
                <button type="submit">Search</button>
            </form>
            <table>
                <thead>
                    {getHeaderGroups().map((headerGroup) => (
                        <tr key={headerGroup.id}>
                            {headerGroup.headers.map((header) => (
                                <th key={header.id}>
                                    {flexRender(
                                        header.column.columnDef.header,
                                        header.getContext()
                                    )}
                                </th>
                            ))}
                        </tr>
                    ))}
                </thead>
                <tbody>
                    {getRowModel().rows.map((row) => (
                        <tr key={row.id}>
                            {row.getVisibleCells().map((cell) => (
                                <td key={cell.id}>
                                    {flexRender(
                                        cell.column.columnDef.cell,
                                        cell.getContext()
                                    )}
                                </td>
                            ))}
                        </tr>
                    ))}
                </tbody>
            </table>
        </div>
    );
};

Important notes: - The setColumnFilters method is the TanStack Table way to set filters, and Refine will send these as filters to your data provider Filtering. - There is no search or triggerSearch function in @refinedev/react-table’s useTable. - If you need to send a custom key like _query, you must handle it in your data provider and ensure your backend understands this key. If you need global filtering (not tied to a specific column), note that as of now, Refine’s TanStack Table adapter does not support globalFilter out of the box. You would need to manage this manually, as discussed in this GitHub issue: "at the moment, we don’t support setGlobalFilters. This means that useTable doesn’t monitor changes to globalFilter and won’t send requests to the API accordingly." In summary:
- Use setColumnFilters for custom search keys. - There is no search or triggerSearch in @refinedev/react-table’s useTable. - For global search, you may need to manage API requests manually if you want to bypass Refine’s filtering logic. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•3w ago

<@336843331416096768> Kapa.ai is still learning and improving, please let me know how I did by reacting below.

How to do a table data search with @refinedev/react-table with a custom key outside the columns def?

Did you find this page helpful?