R
Refine

ask-any-question

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

Eexotic-emerald10/14/2022
filteredValue={[consultationState]} onFilter={(value:any,record:any)=>{ return record?.order_info?.type.includes(value) }}
Eexotic-emerald10/14/2022
please look into this
OOmer10/14/2022
Hey @rehan1 👋, It looks like you're doing the filtering on the client side. Likewise, you should do the pagination on the client side
Eexotic-emerald10/14/2022
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
OOmer10/14/2022
Because you're doing the filtering on the client side. Likewise, you should do the pagination on the client side
Eexotic-emerald10/14/2022
do u have an example like how to do pagination on client side?
OOmer10/14/2022
You can find on Ant design docs
Eexotic-emerald10/14/2022
ok
OOmer10/14/2022
Don't forget to set hasPagination to "false" in useTable
Ddeep-jade10/14/2022
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
Eexotic-emerald10/14/2022
<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
Ddeep-jade10/14/2022
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?
Eexotic-emerald10/14/2022
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
Ddeep-jade10/14/2022
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?
Eexotic-emerald10/14/2022
if i comment the filters of table column pagination is working
Ddeep-jade10/14/2022
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?
Eexotic-emerald10/14/2022
<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
Ddeep-jade10/14/2022
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/>
Eexotic-emerald10/14/2022
okay ill try
Ddeep-jade10/14/2022
Thank you! Please share the progress 🙏
Eexotic-emerald10/14/2022
yeah sure
Ddeep-jade10/14/2022
🚀
Eexotic-emerald10/14/2022
@aliemirs using filter outside is working fine . thank you

Looking for more? Join the community!

R
Refine

ask-any-question

Join Server
Recommended Posts
useform-metadataBut the error is coming from the UserWithRolesRemove useModal form titleI want to remove title from useModalForm so i gave title ={null } its not workinguseExport with arrays in schemaI have resources that have array fields, which I am spreading to fields like `arrayItem.0.name, arrastartswith operatorstartswith operator not supportedediting usemodal form footeri am having a custom button in antmodal footer footer={<Button >okk</Button>} if i click on this sasetFilters for json objectis there a way to apply nested filters for json b object retuning from usetable , using setFiltersfiltering ant table based on useSelect hookconsider i have select dropdown where i have values as one, two and three . Below i have ant table wselectionSet issueError: unexpected null value for type "uuid": {"response":{"errors":[{"extensions":{"path":"$.selectselection sort issuefield "krseva_frequencies" not found in type: 'query_root': {"response":{"errors":[{"extensions":{"pmigration issues./node_modules/@pankod/refine-react-router/dist/esm/index.js 49:10-11 export 'useIsAuthenticated' (iNested Filtering in useTablehow to do nested filtering in useTable hook?Strapi issue.I am trying to replicate the invoice generator from here: https://refine.dev/blog/refine-react-adminantd filter tableconsider an example of antd table with columns as name,age,dob,and id . i am able to filter ant tablhow to select an item from dropdown listhow to select an item from dropdown list through click and pass that selected element to another comcommenti edited my comment, I needed to thank you on it for all your helpuseTable from refine-react-table is killing my IDEHi! I'm using `refine` with the new `mantineUI` integration. I'm trying to get a list working for soOverriding default padding of 'main' areaSorry for all the noob questions but what is the 'correct' way to override the default padding of thinitialValues empty in serachFormProps with syncWithLocation set to TrueHi, I am setting `syncWithLocation` to true for useTable from Antd, the `initialValues` in searchForLogin-componentHello team I am trying to setup a login component for a new project i am trying out in refine. Is thcustom-pageswith NextJS