Header slot

You can customize only certain column header by using slot #header-{name}:

This is a new feature since version 1.2.25

<template>
  <EasyDataTable
    :headers="headers"
    :items="items"
  >
    <template #header-name="header">
      <div class="customize-header">
        <img src="../images/name.png" class="header-icon">
        {{ header.text }}
      </div>
    </template>
    <template #header-address="header">
      <div class="customize-header">
        <img src="../images/address.png" class="header-icon">
        {{ header.text }}
      </div>
    </template>
  </EasyDataTable>
</template>

<script lang="ts" setup>
import { ref } from "vue";
import type { Header, Item } from "vue3-easy-data-table";
import { mockClientItems } from "../mock";

const items = ref<Item[]>(mockClientItems(100));
const headers: Header[] = [
  { text: "Name", value: "name" },
  { text: "Address", value: "address" },
  { text: "Height", value: "height", sortable: true },
  { text: "Weight", value: "weight", sortable: true },
  { text: "Age", value: "age", sortable: true },
  { text: "Favourite sport", value: "favouriteSport" },
  { text: "Favourite fruits", value: "favouriteFruits" },
];
</script>

<style>
.customize-header {
  display: flex;
  justify-items: center;
  align-items: center;
}
.header-icon {
  display: inline-block;
  width: 20px;
  height: 20px;
}
</style>

⚠️ Attention: the {name} of #header-{name} should be a value of header item:

Example

	#	Name	Address	Height	Weight	Age	Favourite sport	Favourite fruits
	1	name-1	address-1	1	1	1	football	apple
	2	name-2	address-2	2	2	2	running	orange
	3	name-3	address-3	3	3	3	swimming	peach
	4	name-4	address-4	4	4	4	basketball	banana
	5	name-5	address-5	5	5	5	football	apple
	6	name-6	address-6	6	6	6	running	orange
	7	name-7	address-7	7	7	7	swimming	peach
	8	name-8	address-8	8	8	8	basketball	banana
	9	name-9	address-9	9	9	9	football	apple
	10	name-10	address-10	10	10	10	running	orange
	11	name-11	address-11	11	11	11	swimming	peach
	12	name-12	address-12	12	12	12	basketball	banana
	13	name-13	address-13	13	13	13	football	apple
	14	name-14	address-14	14	14	14	running	orange
	15	name-15	address-15	15	15	15	swimming	peach
	16	name-16	address-16	16	16	16	basketball	banana
	17	name-17	address-17	17	17	17	football	apple
	18	name-18	address-18	18	18	18	running	orange
	19	name-19	address-19	19	19	19	swimming	peach
	20	name-20	address-20	20	20	20	basketball	banana
	21	name-21	address-21	21	21	21	football	apple
	22	name-22	address-22	22	22	22	running	orange
	23	name-23	address-23	23	23	23	swimming	peach
	24	name-24	address-24	24	24	24	basketball	banana
	25	name-25	address-25	25	25	25	football	apple

rows per page:

25

• 25
• 50
• 100

1–25 of 100

You can also use header slot to modify header text generically.

<template>
  <EasyDataTable
    :headers="headers"
    :items="items"
  >
    <template #header="header">
      {{ header.text.toUpperCase() }}
    </template>
  </EasyDataTable>
</template>

<script lang="ts" setup>
import { ref } from "vue";
import type { Header, Item } from "vue3-easy-data-table";
import { mockClientItems } from "../mock";

const items = ref<Item[]>(mockClientItems(100));
const headers: Header[] = [
  { text: "Name", value: "name" },
  { text: "Address", value: "address" },
  { text: "Height", value: "height", sortable: true },
  { text: "Weight", value: "weight", sortable: true },
  { text: "Age", value: "age", sortable: true },
  { text: "Favourite sport", value: "favouriteSport" },
  { text: "Favourite fruits", value: "favouriteFruits" },
];
</script>

Example

	#	NAME	ADDRESS	HEIGHT	WEIGHT	AGE	FAVOURITE SPORT	FAVOURITE FRUITS
	1	name-1	address-1	1	1	1	football	apple
	2	name-2	address-2	2	2	2	running	orange
	3	name-3	address-3	3	3	3	swimming	peach
	4	name-4	address-4	4	4	4	basketball	banana
	5	name-5	address-5	5	5	5	football	apple
	6	name-6	address-6	6	6	6	running	orange
	7	name-7	address-7	7	7	7	swimming	peach
	8	name-8	address-8	8	8	8	basketball	banana
	9	name-9	address-9	9	9	9	football	apple
	10	name-10	address-10	10	10	10	running	orange
	11	name-11	address-11	11	11	11	swimming	peach
	12	name-12	address-12	12	12	12	basketball	banana
	13	name-13	address-13	13	13	13	football	apple
	14	name-14	address-14	14	14	14	running	orange
	15	name-15	address-15	15	15	15	swimming	peach
	16	name-16	address-16	16	16	16	basketball	banana
	17	name-17	address-17	17	17	17	football	apple
	18	name-18	address-18	18	18	18	running	orange
	19	name-19	address-19	19	19	19	swimming	peach
	20	name-20	address-20	20	20	20	basketball	banana
	21	name-21	address-21	21	21	21	football	apple
	22	name-22	address-22	22	22	22	running	orange
	23	name-23	address-23	23	23	23	swimming	peach
	24	name-24	address-24	24	24	24	basketball	banana
	25	name-25	address-25	25	25	25	football	apple

rows per page:

25

• 25
• 50
• 100

1–25 of 100

⚠️ header slot feature is based on the slots feature of vue.js. So before using the header slot feature in vue3-easy-data-table, Please make sure you have known how to use the slots feature of vue.js.

customize-headers slot

You can use customize-headers slot to customize headers like header grouping.

⚠️ Attention: If you are using customize-headers slot, you can not use sorting feature, filtering feature and fixed column feature.

<template>
  <EasyDataTable
    :headers="headers"
    :items="items"
  />
    <template #customize-headers>
      <thead class="customize-headers">
        <tr>
          <th colspan="2" rowspan="2"></th>
          <th colspan="7">info</th>
        </tr>
        <tr>
          <th>name</th>
          <th>address</th>
          <th>height</th>
          <th>weight</th>
          <th>age</th>
          <th>favouriteSport</th>
          <th>favouriteFruits</th>
        </tr>
      </thead>
    </template>
  </EasyDataTable>
</template>

Example

		info
		name	address	height	weight	age	favouriteSport	favouriteFruits
	1	name-1	address-1	1	1	1	football	apple
	2	name-2	address-2	2	2	2	running	orange
	3	name-3	address-3	3	3	3	swimming	peach
	4	name-4	address-4	4	4	4	basketball	banana
	5	name-5	address-5	5	5	5	football	apple
	6	name-6	address-6	6	6	6	running	orange
	7	name-7	address-7	7	7	7	swimming	peach
	8	name-8	address-8	8	8	8	basketball	banana
	9	name-9	address-9	9	9	9	football	apple
	10	name-10	address-10	10	10	10	running	orange
	11	name-11	address-11	11	11	11	swimming	peach
	12	name-12	address-12	12	12	12	basketball	banana
	13	name-13	address-13	13	13	13	football	apple
	14	name-14	address-14	14	14	14	running	orange
	15	name-15	address-15	15	15	15	swimming	peach
	16	name-16	address-16	16	16	16	basketball	banana
	17	name-17	address-17	17	17	17	football	apple
	18	name-18	address-18	18	18	18	running	orange
	19	name-19	address-19	19	19	19	swimming	peach
	20	name-20	address-20	20	20	20	basketball	banana
	21	name-21	address-21	21	21	21	football	apple
	22	name-22	address-22	22	22	22	running	orange
	23	name-23	address-23	23	23	23	swimming	peach
	24	name-24	address-24	24	24	24	basketball	banana
	25	name-25	address-25	25	25	25	football	apple

rows per page:

25

• 25
• 50
• 100

1–25 of 100