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
HeightWeightAgeFavourite sportFavourite fruits
1name-1address-1111footballapple
2name-2address-2222runningorange
3name-3address-3333swimmingpeach
4name-4address-4444basketballbanana
5name-5address-5555footballapple
6name-6address-6666runningorange
7name-7address-7777swimmingpeach
8name-8address-8888basketballbanana
9name-9address-9999footballapple
10name-10address-10101010runningorange
11name-11address-11111111swimmingpeach
12name-12address-12121212basketballbanana
13name-13address-13131313footballapple
14name-14address-14141414runningorange
15name-15address-15151515swimmingpeach
16name-16address-16161616basketballbanana
17name-17address-17171717footballapple
18name-18address-18181818runningorange
19name-19address-19191919swimmingpeach
20name-20address-20202020basketballbanana
21name-21address-21212121footballapple
22name-22address-22222222runningorange
23name-23address-23232323swimmingpeach
24name-24address-24242424basketballbanana
25name-25address-25252525footballapple

⚠️ header slot feature is based on the slotsopen in new window 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 slotsopen in new window feature of vue.js.