adverse-sapphire•2y ago

Make table on List component x-scrollable

I am having a hard time to make a scrollable table working with a useTable hook using antdesign nested within the List component (see screenshot) I managed to make it work by writing custom css (using tailwind classes) div.ant-spin-nested-loading { @apply overflow-y-auto; } Is there anyway you could expose a property that would allow for this option? I tried to play around with the "scroll" property on the <Table> component but without success.

3 Replies

kapa.ai•2y ago

Hi @thejorge4666. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- The useTable hook from refine provides a tableProps object that includes a scroll property. This property is intended to control whether the table can be scrollable. By default, it is set to { x: true }, which makes the table horizontally scrollable. However, from the information provided in the extracts, it's not clear if vertical scrolling can be directly controlled using the scroll property. Here is how you can use the scroll property:

const { tableProps } = useTable()  

<Table {...tableProps} scroll={{ x: true }} rowKey="id">  
 <Table.Column title="Title" dataIndex="title" />  
</Table>

const { tableProps } = useTable()  

<Table {...tableProps} scroll={{ x: true }} rowKey="id">  
 <Table.Column title="Title" dataIndex="title" />  
</Table>

If you're having trouble with the scroll property, it might be worth checking the Ant Design <Table> (https://ant.design/components/table/#API) documentation for more details on how to use it. If you're still having issues, it might be a good idea to raise this as a feature request on the refine GitHub page, as it's not clear from the provided extracts if there's a built-in way to make the table vertically scrollable using the useTable hook. Sources: - Refine useTable Hook Documentation (https://refine.dev/docs/api-reference/antd/hooks/table/useTable) - Refine Blog Post (https://refine.dev/blog/refine-pixels-5) ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•2y ago

<@897927276304416769> kapa.ai is still learning and improving, please let us how it did by reacting below

adverse-sapphireOP•2y ago

This wont work, but made it work with custom css

Make table on List component x-scrollable

Did you find this page helpful?