cloudy-cyan
cloudy-cyan5mo ago

@ant-design/pro-table not working

I added ProTable from ant-desing. The problem is with some features like fix columns which is not working.
const columns: ProColumns<ComparisionType>[] = [
{
dataIndex: 'comparisonName',
title: translate("pages.pricingAuditComparisions.columns.alias"),
fixed: true,
},
{
dataIndex: 'id',
title: translate("pages.pricingAuditComparisions.columns.id"),
},
{
dataIndex: ["mainStore", "locationsGroup", "locationsGroupName"],
width: '20%',
title: translate("pages.pricingAuditComparisions.columns.locationGroup"),
},
{
dataIndex: ["mainStore", "name"],
width: '20%',
title: translate("pages.pricingAuditComparisions.columns.location"),
},
];

<ProTable<ComparisionType>
{...tableProps}
sticky
loading={loading}
columns={columns}
actionRef={actionRef}
dataSource={dataSource}
request={handleFilter}
options={{ reload: false, fullScreen: true, setting: false }}
search={false}
toolbar={{
search: { onSearch: handleOnSearch },
actions: [create]
}}
/>
const columns: ProColumns<ComparisionType>[] = [
{
dataIndex: 'comparisonName',
title: translate("pages.pricingAuditComparisions.columns.alias"),
fixed: true,
},
{
dataIndex: 'id',
title: translate("pages.pricingAuditComparisions.columns.id"),
},
{
dataIndex: ["mainStore", "locationsGroup", "locationsGroupName"],
width: '20%',
title: translate("pages.pricingAuditComparisions.columns.locationGroup"),
},
{
dataIndex: ["mainStore", "name"],
width: '20%',
title: translate("pages.pricingAuditComparisions.columns.location"),
},
];

<ProTable<ComparisionType>
{...tableProps}
sticky
loading={loading}
columns={columns}
actionRef={actionRef}
dataSource={dataSource}
request={handleFilter}
options={{ reload: false, fullScreen: true, setting: false }}
search={false}
toolbar={{
search: { onSearch: handleOnSearch },
actions: [create]
}}
/>
`
3 Replies
kapa.ai
kapa.ai5mo ago
Hi @Sebastos. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- I'm sorry, but as an AI assistant for Refine, I'm only able to provide support and answer questions related to the Refine framework. The code you've provided seems to be related to Ant Design's ProTable, which is not directly covered in the information extracts provided. Refine does use Ant Design under the hood, but it provides its own set of hooks and components for building data-intensive applications. For example, Refine provides the useTable hook which is compatible with Ant Design's <Table> component and offers out-of-the-box functionality for sorting, filtering, and pagination. For issues related to Ant Design's ProTable, I would recommend referring to the official Ant Design ProTable documentation or seeking help from their community support channels. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------
kapa.ai
kapa.ai5mo ago
<@689846866837373077> kapa.ai is still learning and improving, please let us know how it did by reacting below
genetic-orange
genetic-orange5mo ago
Interestingly, refine's product demo table defines the columns as <Table.Column> and not in the usual array structure: https://github.com/refinedev/refine/blob/master/examples/finefoods-antd/src/components/product/list-table/index.tsx#L299
GitHub
refine/examples/finefoods-antd/src/components/product/list-table/in...
A React Framework for building internal tools, admin panels, dashboards & B2B apps with unmatched flexibility. - refinedev/refine