dependent-tan•1h ago

Mash multiple fields into one with Antd tables

I have a table with And and currently I fetch data like this:
const { tableProps } = useTable<UserListItem>() I want to join the cells for first and lastname into one, howdo I do that? this is what I currently have: { title: 'First Name', dataIndex: 'firstName', key: 'firstName', }, { title: 'Last name', dataIndex: 'lastName', key: 'lastName', },

2 Replies

kapa.ai•1h ago

Hi @khadhulu. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- To combine (mash) the "First Name" and "Last Name" fields into a single column in an Ant Design table when using Refine's useTable, you should use the render prop of the <Table.Column> component. This allows you to customize how the cell is displayed, so you can concatenate the two fields. Here's how you can do it:

<Table.Column
    title="Full Name"
    key="fullName"
    render={(_, record) => `${record.firstName} ${record.lastName}`}
/>

<Table.Column
    title="Full Name"
    key="fullName"
    render={(_, record) => `${record.firstName} ${record.lastName}`}
/>

This approach is shown in several Refine examples, where the render prop is used to customize the display of table cells by combining or formatting multiple fields as needed. For example, in the Refine Pixels Admin Dashboard example, the render prop is used to display custom content in table columns. So, instead of having two separate columns for first and last name, you can remove those and add a single column as shown above. This will display the full name in one cell for each row. Example usage:

<Table {...tableProps} rowKey="id">
    <Table.Column
        title="Full Name"
        key="fullName"
        render={(_, record) => `${record.firstName} ${record.lastName}`}
    />
    {/* other columns */}
</Table>

<Table {...tableProps} rowKey="id">
    <Table.Column
        title="Full Name"
        key="fullName"
        render={(_, record) => `${record.firstName} ${record.lastName}`}
    />
    {/* other columns */}
</Table>

This method is fully compatible with Refine's useTable and Ant Design's <Table /> component integrationCreating a Table View With Refine and Ant Design. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•1h ago

<@236239059184386048> Kapa.ai is still learning and improving, please let me know how I did by reacting below.

Mash multiple fields into one with Antd tables

Did you find this page helpful?