UseTable how to implement filter search table query and pagination

Iam using UseTable Hook i want to implement table query, search, pagination, sorting

2 Replies

Hi @jakshire01. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- The useTable hook in Refine allows you to fetch data according to the sorter, filter, and pagination states. It uses useList for the fetch and is designed to be headless, meaning you are responsible for handling the UI. Here's a basic example of how to use the useTable hook with Ant Design's <Table> component:

import { HttpError } from "@refinedev/core";  
import { List, TagField, useTable } from "@refinedev/antd";  
import { Table } from "antd";  

interface IPost {  
 id: number;  
 title: string;  
 content: string;  
 status: "published" | "draft" | "rejected";  
}  

const PostList: React.FC = () => {  
 const { tableProps } = useTable<IPost, HttpError>();  

 return (  
 <List>  
 <Table {...tableProps} rowKey="id">  
 <Table.Column dataIndex="id" title="ID" />  
 <Table.Column dataIndex="title" title="Title" />  
 <Table.Column dataIndex="content" title="Content" />  
 <Table.Column dataIndex="status" title="Status" render={(value: string) => <TagField value={value} />} />  
 </Table>  
 </List>  
 );  
};

import { HttpError } from "@refinedev/core";  
import { List, TagField, useTable } from "@refinedev/antd";  
import { Table } from "antd";  

interface IPost {  
 id: number;  
 title: string;  
 content: string;  
 status: "published" | "draft" | "rejected";  
}  

const PostList: React.FC = () => {  
 const { tableProps } = useTable<IPost, HttpError>();  

 return (  
 <List>  
 <Table {...tableProps} rowKey="id">  
 <Table.Column dataIndex="id" title="ID" />  
 <Table.Column dataIndex="title" title="Title" />  
 <Table.Column dataIndex="content" title="Content" />  
 <Table.Column dataIndex="status" title="Status" render={(value: string) => <TagField value={value} />} />  
 </Table>  
 </List>  
 );  
};

(Source: Refine Documentation (https://refine.dev/docs/ui-integrations/ant-design/hooks/use-table)) For sorting, you can use methods returned by the useTable hook to manage sorting. Here's an example of how to sort data:

import React from "react";  
import { useNavigation } from "@refinedev/core";  
import { useTable } from "@refinedev/react-table";  
import { ColumnDef, flexRender } from "@tanstack/react-table";
export const CategoryList = () => {  
 ...  
 return (  
 <div style={{ padding: "16px" }}>  
 <div  
 style={{  
 display: "flex",  
 alignItems: "center",  
 justifyContent: "space-between",  
 }}  
 >  
 <h1>Categories List</h1>  
 </div>  
 <div style={{ maxWidth: "100%", overflowY: "scroll" }}>  
 <table>  
 <thead>  
 {getHeaderGroups().map((headerGroup) => (  
 <tr key={headerGroup.id}>  
 {headerGroup.headers.map((header) => (  
 <th key={header.id}>  
 {header.id === "title" ? (  
 <div onClick={header.column.getToggleSortingHandler()}>  
 {!header.isPlaceholder &&  
 flexRender(  
 header.column.columnDef.header,  
 header.getContext()  
 )}  
 {{  
 asc: " 🔼",  
 desc: " 🔽",  
 }[header.column.getIsSorted() as string] ?? null}  
 </div>  
 ) : (  
 <div>  
 {!header.isPlaceholder &&  
 flexRender(  
 header.column.columnDef.header,  
 header.getContext()  
 )}  
 </div>  
 )}  
 </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>  
 ...  
 </div>  
 );  
};

import React from "react";  
import { useNavigation } from "@refinedev/core";  
import { useTable } from "@refinedev/react-table";  
import { ColumnDef, flexRender } from "@tanstack/react-table";
export const CategoryList = () => {  
 ...  
 return (  
 <div style={{ padding: "16px" }}>  
 <div  
 style={{  
 display: "flex",  
 alignItems: "center",  
 justifyContent: "space-between",  
 }}  
 >  
 <h1>Categories List</h1>  
 </div>  
 <div style={{ maxWidth: "100%", overflowY: "scroll" }}>  
 <table>  
 <thead>  
 {getHeaderGroups().map((headerGroup) => (  
 <tr key={headerGroup.id}>  
 {headerGroup.headers.map((header) => (  
 <th key={header.id}>  
 {header.id === "title" ? (  
 <div onClick={header.column.getToggleSortingHandler()}>  
 {!header.isPlaceholder &&  
 flexRender(  
 header.column.columnDef.header,  
 header.getContext()  
 )}  
 {{  
 asc: " 🔼",  
 desc: " 🔽",  
 }[header.column.getIsSorted() as string] ?? null}  
 </div>  
 ) : (  
 <div>  
 {!header.isPlaceholder &&  
 flexRender(  
 header.column.columnDef.header,  
 header.getContext()  
 )}  
 </div>  
 )}  
 </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>  
 ...  
 </div>  
 );  
};

(Source: [Refine Blog]( ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•7mo ago

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