Ant Design Vue <a-table>: How to break title text or make two headers?

Question

I want to make an table that have two header and two data in one cell using Ant Table .

I have a template like this.

<template>
    <a-table :columns="columns" :data-source="data">
        //some props
    </a-table>
<template>

And script like this.

columns: [
    { title:'Name', dataIndex:'name', key:'name' },
    { title:'Age', dataIndex:'age', key:'age' },
    { title:'Gender', dataIndex: 'gender', key: 'gender' }
],
data: [
    {
        name: 'John Brown',
        age: 32,
        address: 'Male',
    },
    {
        name: 'Jindel Rose',
        age: 40,
        address: 'Female',
    },
]

For now, I already have a two data in one cell using SlotScope. But my problem is the header.

I cannot break the text of my header and already try some basic attempts like

columns: [
    { title:'Name', dataIndex:'name', key:'name' },
    { title:'Age' + <br/> + 'Gender', dataIndex:'ageGender', key:'ageGender' }
],

Orr some rendering inside my title but i get a lots of error.

How can i achieve the two header in once cell that will looks like below image?

Answer 1

You have errors because Vuejs can't parse HTML in the script. So, in this case is better to do it in the template.

By looking at the documentation, I realised that you can solve this by using a key and an v-if in the template.

What this means is that when the table is been constructed by the Ant Design it will loop through all the columns, and when it sees a column with the specified key it will access the conditional statement and apply the custom template.

Example

<a-table :columns="columns" :data-source="data">
    <template #headerCell="{ column }">

     <template v-if="column.key === 'ageAndGender'">
        <div class="bottom-border">
          age
        </div>
        <div>
          gender
        </div>
      </template>

    </template>

    // .... rest of your table code ...

</a-table> 

And then you can have a custom style for that class, which I named bottom-border

<style scoped>
.bottom-border {
  border-bottom: 1px solid black;
}
</style>