relaxed-coral
relaxed-coral10mo ago

antd table without useTable

how do i set the view elements per page on an antd Table
14 Replies
kapa.ai
kapa.ai10mo ago
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:
const {
tableProps,
setPageSize,
// other returned properties...
} = useTable<TUser>();

// Call setPageSize function with the desired number of items per page
setPageSize(10);
const {
tableProps,
setPageSize,
// other returned properties...
} = useTable<TUser>();

// Call setPageSize function with the desired number of items per page
setPageSize(10);
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: ----------------------
kapa.ai
kapa.ai10mo ago
<@210531867777171456> kapa.ai is still learning and improving, please let us know how it did by reacting below
relaxed-coral
relaxed-coral10mo ago
i wanna do it without useTable <Table dataSource={tableData} rowKey="id" > @kapa.ai
kapa.ai
kapa.ai10mo ago
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:
<Table
dataSource={tableData}
rowKey="id"
pagination={{ pageSize: 10 }} // Set the number of items per page
/>
<Table
dataSource={tableData}
rowKey="id"
pagination={{ pageSize: 10 }} // Set the number of items per page
/>
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: ----------------------
kapa.ai
kapa.ai10mo ago
<@210531867777171456> kapa.ai is still learning and improving, please let us know how it did by reacting below
relaxed-coral
relaxed-coral10mo ago
how do i add a client side name search on antd table @kapa.ai
kapa.ai
kapa.ai10mo ago
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:
import { Table } from "antd";

const ListPage = () => {
const data = [
// your data here
];

const handleSearch = (selectedKeys, confirm, dataIndex) => {
confirm();
// handle your search logic here
};

const handleReset = clearFilters => {
clearFilters();
// reset your search logic here
};

const getColumnSearchProps = dataIndex => ({
filterDropdown: ({
setSelectedKeys,
selectedKeys,
confirm,
clearFilters,
}) => (
<div style={{ padding: 8 }}>
<Input
placeholder={`Search ${dataIndex}`}
value={selectedKeys[0]}
onChange={e =>
setSelectedKeys(e.target.value ? [e.target.value] : [])
}
onPressEnter={() => handleSearch(selectedKeys, confirm, dataIndex)}
style={{ width: 188, marginBottom: 8, display: 'block' }}
/>
<Button
type="primary"
onClick={() => handleSearch(selectedKeys, confirm, dataIndex)}
icon={<SearchOutlined />}
size="small"
style={{ width: 90, marginRight: 8 }}
>
Search
</Button>
<Button onClick={() => handleReset(clearFilters)} size="small" style={{ width: 90 }}>
Reset
</Button>
</div>
),
filterIcon: filtered => <SearchOutlined style={{ color: filtered ? '#1890ff' : undefined }} />,
onFilter: (value, record) =>
record[dataIndex]
? record[dataIndex].toString().toLowerCase().includes(value.toLowerCase())
: '',
});
return (
<Table dataSource={data} rowKey="id">
<Table.Column
dataIndex="name"
title="Name"
{...getColumnSearchProps('name')}
/>
{/* other columns here */}
</Table>
);
};
import { Table } from "antd";

const ListPage = () => {
const data = [
// your data here
];

const handleSearch = (selectedKeys, confirm, dataIndex) => {
confirm();
// handle your search logic here
};

const handleReset = clearFilters => {
clearFilters();
// reset your search logic here
};

const getColumnSearchProps = dataIndex => ({
filterDropdown: ({
setSelectedKeys,
selectedKeys,
confirm,
clearFilters,
}) => (
<div style={{ padding: 8 }}>
<Input
placeholder={`Search ${dataIndex}`}
value={selectedKeys[0]}
onChange={e =>
setSelectedKeys(e.target.value ? [e.target.value] : [])
}
onPressEnter={() => handleSearch(selectedKeys, confirm, dataIndex)}
style={{ width: 188, marginBottom: 8, display: 'block' }}
/>
<Button
type="primary"
onClick={() => handleSearch(selectedKeys, confirm, dataIndex)}
icon={<SearchOutlined />}
size="small"
style={{ width: 90, marginRight: 8 }}
>
Search
</Button>
<Button onClick={() => handleReset(clearFilters)} size="small" style={{ width: 90 }}>
Reset
</Button>
</div>
),
filterIcon: filtered => <SearchOutlined style={{ color: filtered ? '#1890ff' : undefined }} />,
onFilter: (value, record) =>
record[dataIndex]
? record[dataIndex].toString().toLowerCase().includes(value.toLowerCase())
: '',
});
return (
<Table dataSource={data} rowKey="id">
<Table.Column
dataIndex="name"
title="Name"
{...getColumnSearchProps('name')}
/>
{/* other columns here */}
</Table>
);
};
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: ----------------------
kapa.ai
kapa.ai10mo ago
<@210531867777171456> kapa.ai is still learning and improving, please let us know how it did by reacting below
xenial-black
xenial-black10mo 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.
rival-black
rival-black10mo ago
xenial-black
xenial-black10mo 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?
rival-black
rival-black10mo 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.
relaxed-coral
relaxed-coral10mo 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.
<Form layout="horizontal">
<Row justify="start" gutter={[20, 0]}>
<Col span={6}>
<Form.Item name="q">
<Input
placeholder="Nombre"
prefix={<Icons.SearchOutlined />}
onKeyUp={(e) => {handleSearch(e)}}
/>
</Form.Item>
</Col>
</Row>
</Form>
<Form layout="horizontal">
<Row justify="start" gutter={[20, 0]}>
<Col span={6}>
<Form.Item name="q">
<Input
placeholder="Nombre"
prefix={<Icons.SearchOutlined />}
onKeyUp={(e) => {handleSearch(e)}}
/>
</Form.Item>
</Col>
</Row>
</Form>
` then i did a basic search function, which you can modify if you want a search by all fields
const handleSearch = (e: any) => {
const name = e.target.value?.toLowerCase();
const filteredObjects = tableData.filter((item: any) => item.name.toLowerCase().includes(name));
setTableFilteredData(filteredObjects);
}
const handleSearch = (e: any) => {
const name = e.target.value?.toLowerCase();
const filteredObjects = tableData.filter((item: any) => item.name.toLowerCase().includes(name));
setTableFilteredData(filteredObjects);
}
` Where
setTableFilteredData(filteredObjects)
setTableFilteredData(filteredObjects)
sets the table data source
<Table dataSource={tableFilteredData} rowKey="id" pagination={{ pageSize: 50 }}>
<Table dataSource={tableFilteredData} rowKey="id" pagination={{ pageSize: 50 }}>
`
xenial-black
xenial-black10mo 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?