1

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?

enter image description here

CAustin
  • 4,525
  • 13
  • 25
Newbee
  • 702
  • 1
  • 13

1 Answers1

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>
Gass
  • 7,536
  • 3
  • 37
  • 41
  • Thank you for answering the question. But this doesn't fix my problem. The given answer doesn't work. Luckily, after some time of debugging, I get a simple solution by inserting a line break(\n) between the text. **SOLUTION =>** ```title: 'Age \n Gender',```. I upvote this answer hoping that will help in some cases. – Newbee May 29 '23 at 05:23
  • hi @Newbee, it does work. I tested it in CodeSandBox. You may had done a bad implementation and so it didn't work, but that does not mean my answer is wrong. In any case, I'm glad you came up with a solution. Personally I don't like it very much, because you don't have any possibility for styling or templating in case you want to improve the look and feel. – Gass May 29 '23 at 14:59