pagination not working if i use filtered value and onfilter props in ant table column

filteredValue={[consultationState]} onFilter={(value:any,record:any)=>{ return record?.order_info?.type.includes(value) }}
22 Replies
genetic-orange
genetic-orange3y ago
please look into this
Omer
Omer3y ago
Hey @rehan1 👋, It looks like you're doing the filtering on the client side. Likewise, you should do the pagination on the client side
genetic-orange
genetic-orange3y ago
only pagination is not working but filtering is working fine ...like the initial page is rendering fine. so when i click on page2 or 3 its getting vanished
Omer
Omer3y ago
Because you're doing the filtering on the client side. Likewise, you should do the pagination on the client side
genetic-orange
genetic-orange3y ago
do u have an example like how to do pagination on client side?
Omer
Omer3y ago
You can find on Ant design docs
genetic-orange
genetic-orange3y ago
ok
Omer
Omer3y ago
Don't forget to set hasPagination to "false" in useTable
conscious-sapphire
conscious-sapphire3y ago
https://refine.dev/docs/api-reference/antd/hooks/table/useTable/#listing This might be a good starting point @rehan1 set the hasPagination to false in useTable hook and pass pagination prop yourself to the <Table/> component
genetic-orange
genetic-orange3y ago
<Table style={{marginTop:"24px"}} {...tableProps} pagination={{ position: ['bottomRight'] }} rowKey="id"> but again if i click on next page its getting vanished in usetable i have set has pagination to false
conscious-sapphire
conscious-sapphire3y ago
Having trouble addressing the issue here, what is getting vanished? Your filter or the data/page? How many items do you show per page and how many you got from the useTable response?
genetic-orange
genetic-orange3y ago
ok ill check it once i am getting all data some where around 250 from usetable . my data is getting vanished when i click on next of pagination <Table {...tableProps}
style={{marginTop:"24px"}}
pagination={{ showSizeChanger: true,
}} i am showing 10 items per page
conscious-sapphire
conscious-sapphire3y ago
Can you check with disabling/commenting the filters? Also can you check if there are any clues on console like logs or errors about that?
genetic-orange
genetic-orange3y ago
if i comment the filters of table column pagination is working
conscious-sapphire
conscious-sapphire3y ago
Can you open an issue on github for this? I'll try to take a look at it, I think I have found the root of the problem but not quite sure yet. While we're working on the issue, maybe you can move the filter logic outside of the table component as a workaround? Like
const { tableProps } = useTable(...);
const filtered = tableProps.dataSource?.filter((element) => element.order_info?.type.includes("some-filter"));

return (
<Table {...tableProps} pagination={..} dataSource={filtered} />
)
const { tableProps } = useTable(...);
const filtered = tableProps.dataSource?.filter((element) => element.order_info?.type.includes("some-filter"));

return (
<Table {...tableProps} pagination={..} dataSource={filtered} />
)
Do you think this would work for your case?
genetic-orange
genetic-orange3y ago
<Table {...tableProps}
style={{marginTop:"24px"}}

pagination={{
showSizeChanger: true, pageSize:10
}}
rowKey="id"> <Table.Column dataIndex={"uid"} render={(_: any, record: any) => ( <div > {record.uid} </div> )} title="Order Id"/> <Table.Column dataIndex={"patientname"} render={(: any, record: any) => ( <div className="risha" > {record.patient_name} </div> )} title="Patient Name" /> <Table.Column dataIndex={"order_info"} filteredValue={[consultationState]} onFilter={(value:any,record:any)=>{ return record?.orderinfo?.type===value }}
render={(
: any, record: any) => ( <div className="video-flex"> <div > {record?.order_info?.type==="Physical"&& Images.inPerson} {record?.order_info?.type==="Virtual"&& Images.video} </div> <div className="video-appoint">{record?.order_info?.type}</div> </div> )} title="Consultation" /></Table> this way i have use used and in useTable i have given pagination as false
conscious-sapphire
conscious-sapphire3y ago
Okay, removing the filteredValue and onFilter props on Table.Column and moving those logic to a filter function might be a good workaround for your case. Do the filtering before passing it to the <Table> and pass the filtered data to dataSource prop of the <Table/>
genetic-orange
genetic-orange3y ago
okay ill try
conscious-sapphire
conscious-sapphire3y ago
Thank you! Please share the progress 🙏
genetic-orange
genetic-orange3y ago
yeah sure
conscious-sapphire
conscious-sapphire3y ago
🚀
genetic-orange
genetic-orange3y ago
@aliemirs using filter outside is working fine . thank you