@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•6mo 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•6mo ago

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

sensitive-blue•6mo 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