antd table without useTable
how do i set the view elements per page on an antd Table
14 Replies
Hi @royercross. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave:
----------------------
To set the view elements per page on an Ant Design Table in a refine application, you can use the
setPageSize
method provided by the useTable
hook. This method is used to set the current pageSize
, and every change in the pageSize
will trigger a new request to the data provider.
Here is an example of how you might use it:
Remember that by default, pagination happens on the server side. If you want to do pagination handling on the client side, you can pass the pagination.mode
property and set it to "client". Also, you can disable the pagination by setting the "off".
For more details, you can refer to the refine documentation (https://refine.dev/docs/api-reference/antd/hooks/table/useTable) and the TanStack Table documentation (https://tanstack.com/table/v8).
----------------------
Note: you can ask me a follow up question by @ mentioning me again
:speech_balloon:
----------------------<@210531867777171456> kapa.ai is still learning and improving, please let us know how it did by reacting below
ratty-blush•14mo ago
i wanna do it without useTable
<Table dataSource={tableData} rowKey="id" >
@kapa.ai
Let me check the knowledge base for you. One moment! :books:
----------------------
If you want to set the number of items per page without using the
useTable
hook, you can do so by using the pagination
prop of the Ant Design Table
component. The pagination
prop accepts an object where you can set the pageSize
property to determine the number of items per page.
Here's an example:
In this example, the table will display 10 items per page. You can adjust the pageSize
value as needed.
For more information, you can refer to the Ant Design Table documentation (https://ant.design/components/table/).
----------------------
Note: you can ask me a follow up question by @ mentioning me again
:speech_balloon:
----------------------<@210531867777171456> kapa.ai is still learning and improving, please let us know how it did by reacting below
ratty-blush•14mo ago
how do i add a client side name search on antd table @kapa.ai
Let me check the knowledge base for you. One moment! :books:
----------------------
To add a client-side name search on an Ant Design Table in a refine application, you can use the
filters
prop of the Ant Design Table.Column
component. You can set the filters.mode
to "off" to disable server-side filtering and handle filtering on the client side.
Here's an example:
In this example, a search input is added to the "Name" column. When you type in the input and press enter or click the "Search" button, the handleSearch
function is called. When you click the "Reset" button, the handleReset
function is called.
For more information, you can refer to the Ant Design Table documentation (https://ant.design/components/table/).
----------------------
Note: you can ask me a follow up question by @ mentioning me again
:speech_balloon:
----------------------<@210531867777171456> kapa.ai is still learning and improving, please let us know how it did by reacting below
deep-jade•14mo ago
I am also interested in this topic. Is it possible to do client side search in all columns? I know antd table supports per column filter/search. I wondering how to do a global search in all columns. thanks.
foreign-sapphire•14mo ago
Hey guys,
You can checkout this for client-side filtering.
https://refine.dev/docs/api-reference/antd/hooks/table/useTable/#how-can-i-handle-client-side-filtering
deep-jade•14mo ago
@salihozdemir thank you. For client-side filtering, it's like Antd table filtering/sorting, it's per column filter. I'd like to know if there's a client-side search among all columns. Ex: I can find a sub-string in every data grid. Because my backend db is firestore, it does not support substring search. What I can imagine is implement this at client side. But I don't know how to do this in refine framework. Do you think it's possible if I manipulate the datasource of the Table?
foreign-sapphire•14mo ago
Hey @henry_22928,
Off course, you can do that. You can use the
useTable
hook with pagination.mode
, filters.mode
, and sorters.mode
set to "off"
and then you can use <Table>
component's props to handle the filtering, sorting, and pagination client-side.ratty-blush•14mo ago
That works if you wanna do search by column.
Since i wanted to do a global search i made a custom form before my table.
`
then i did a basic search function, which you can modify if you want a search by all fields
`
Where sets the table data source `
deep-jade•14mo ago
Thank you guys! Be honest, I am new to refine. I don't know how to combine refine useTable and Table prop "datasource". I mean, in refine, the datasource is provided by useTable. How do I search for some keywords, then modify datasource and call hook api to let Table update its UI?