genetic-orange•3y ago

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•3y ago

please look into this

Omer•3y 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•3y 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•3y ago

Because you're doing the filtering on the client side. Likewise, you should do the pagination on the client side

genetic-orange•3y ago

do u have an example like how to do pagination on client side?

Omer•3y ago

You can find on Ant design docs

genetic-orange•3y ago

Omer•3y ago

Don't forget to set hasPagination to "false" in useTable

conscious-sapphire•3y 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•3y 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•3y 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•3y 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•3y 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•3y ago

if i comment the filters of table column pagination is working

conscious-sapphire•3y 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•3y 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•3y 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•3y ago

okay ill try

conscious-sapphire•3y ago

Thank you! Please share the progress 🙏

genetic-orange•3y ago

yeah sure

conscious-sapphire•3y ago

🚀

genetic-orange•3y ago

@aliemirs using filter outside is working fine . thank you