xenial-black•3w ago

How to enable search on refinedev/react-table with shadcn?

2 Replies

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 enable search on a table built with @refinedev/react-table and Shadcn UI, you need to use the filtering capabilities provided by TanStack Table (which powers @refinedev/react-table). The general approach is to define filterable columns and render input fields in your table header or above the table, then update the filter state accordingly. Example Approach 1. Define filterable columns:
In your column definitions, specify the meta.filterOperator for the fields you want to be searchable. For example, to enable searching by the title field:

   const columns = React.useMemo<ColumnDef<any>[]>(() => [
     {
       id: "title",
       accessorKey: "title",
       header: "Title",
       meta: {
         filterOperator: "contains",
       },
     },
     // ...other columns
   ], []);

   const columns = React.useMemo<ColumnDef<any>[]>(() => [
     {
       id: "title",
       accessorKey: "title",
       header: "Title",
       meta: {
         filterOperator: "contains",
       },
     },
     // ...other columns
   ], []);

2. Render filter input in the header:
In your table header, render an input field for the searchable column. When the input changes, update the filter value for that column:

   {getHeaderGroups().map((headerGroup) => (
     <TableRow key={headerGroup.id}>
       {headerGroup.headers.map((header) => (
         <TableHead key={header.id}>
           {header.id === "title" ? (
             <div>
               {flexRender(header.column.columnDef.header, header.getContext())}
               <input
                 value={(header.column.getFilterValue() as string) ?? ""}
                 onChange={(e) => header.column.setFilterValue(e.target.value)}
                 placeholder="Search by title"
               />
             </div>
           ) : (
             flexRender(header.column.columnDef.header, header.getContext())
           )}
         </TableHead>
       ))}
     </TableRow>
   ))}

   {getHeaderGroups().map((headerGroup) => (
     <TableRow key={headerGroup.id}>
       {headerGroup.headers.map((header) => (
         <TableHead key={header.id}>
           {header.id === "title" ? (
             <div>
               {flexRender(header.column.columnDef.header, header.getContext())}
               <input
                 value={(header.column.getFilterValue() as string) ?? ""}
                 onChange={(e) => header.column.setFilterValue(e.target.value)}
                 placeholder="Search by title"
               />
             </div>
           ) : (
             flexRender(header.column.columnDef.header, header.getContext())
           )}
         </TableHead>
       ))}
     </TableRow>
   ))}

3. Use Shadcn UI components:
Replace the <input /> with Shadcn's input component if desired, and style the table using Shadcn's <Table />, <TableHead />, etc. This pattern is demonstrated in the TanStack Table + Refine integration, and you can adapt it to use Shadcn UI components for the UI layer. The key is to connect your filter input to the column's filter value using TanStack Table's API. For a full example, see the filtering section in the TanStack Table blog post for Refine, which shows how to wire up the filter input and update the table accordingly. You can then use Shadcn's UI primitives for the actual rendering and styling of the table and inputs Filtering Example.

Note: As of the latest official documentation and blog posts, there is no out-of-the-box search form generator for Shadcn+Refine like there is for Ant Design or Material UI. You need to manually wire up the filter inputs as shown above.

For a complete Shadcn + Refine example, see the official blog post and example repo:
Building a CRUD app with Shadcn UI and Refine ---------------------- 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 enable search on refinedev/react-table with shadcn?

Did you find this page helpful?