Header & Footer Slots

Description

You can add Header and/or Footer to your grid by using the #header and #footer Slots, it's as simple as that. Using these slots also has the advantage of being contained in the same container making them the same width as the grid container.

Demo

Demo / Demo Component

Basic Usage

Component

<template>
  <slickgrid-vue
    grid-id="grid2"
    v-model:options="gridOptions"
    v-model:columns="columns"
    v-model:dataset="dataset"
  >
    <template #header>
      <div class="custom-header-slot">
        <h3>Grid with header and footer slot</h3>
      </div>
    </template>
    <template #footer>
      <div class="custom-footer-slot">
        <CustomFooter />
      </div>
    </template>
  </slickgrid-vue>
</template>