📙
Aurelia-Slickgrid
Live DemoGitHub
  • Introduction
  • Getting Started
    • Quick start
  • Styling
    • Dark Mode
    • Styling CSS/SASS/Themes
  • Column Functionalities
    • Cell Menu (Action Menu)
    • Editors
      • Autocomplete
      • old Date Picker (flatpickr)
      • new Date Picker (vanilla-calendar)
      • LongText (textarea)
      • Select Dropdown Editor (single/multiple)
    • Filters
      • Autocomplete
      • Input Filter (default)
      • Select Filter (dropdown)
      • Compound Filters
      • Range Filters
      • Custom Filter
      • Styling Filled Filters
      • Single Search Filter
    • Formatters
    • Sorting
  • Events
    • Available events
    • On Events
  • Slick Grid/DataView Objects
    • Slick Grid/DataView Objects
  • Grid Functionalities
    • Auto-Resize / Resizer Service
    • Resize by Cell Content
    • Column Picker
    • Composite Editor Modal
    • Custom Tooltip
    • Add, Update or Highlight a Datagrid Item
    • Dynamically Add CSS Classes to Item Rows
    • Column & Row Spanning
    • Context Menu
    • Custom Footer
    • Excel Copy Buffer Plugin
    • Export to Excel
    • Export to File (csv/txt)
    • Grid Menu
    • Grid State & Presets
    • Grouping & Aggregators
    • Header & Footer Slots
    • Header Menu & Header Buttons
    • Infinite Scroll
    • Pinning (frozen) of Columns/Rows
    • Providing data to the grid
    • Row Detail
    • Row Selection
    • Tree Data Grid
    • Row Based Editing Plugin
  • Developer Guides
    • CSP Compliance
  • Localization
    • with I18N
    • with Custom Locales
  • Backend Services
    • Custom Backend Service
    • OData
    • GraphQL
      • JSON Result Structure
      • Filtering Schema
      • Pagination Schema
      • Sorting Schema
  • Testing
    • Testing Patterns
  • Migrations
    • Migration Guide to 2.x (2018-06-23)
    • Migration Guide to 3.x (2020-12-20)
    • Migration Guide to 4.x (2021-12-11)
    • Migration Guide to 5.x (2022-10-18)
    • Migration Guide to 6.x (2023-05-29)
    • Migration Guide to 7.x (2023-12-15)
    • Migration Guide to 8.x (2024-05-10)
    • Migration Guide to 9.x (2025-05-10)
Powered by GitBook
On this page
Edit on GitHub
  1. Grid Functionalities

Header & Footer Slots

Last updated 24 days ago

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

/

Basic Usage

ViewModel

<aurelia-slickgrid grid-id="grid"
                    columns.bind="columnDefinitions"
                    options.bind="gridOptions"
                    dataset.bind="dataset">
  <div au-slot="slickgrid-header" class="custom-header-slot">
    <h3>Grid Header</h3>
  </div>
  <div au-slot="slickgrid-footer" class="custom-footer-slot">
    <h3>Grid Footer</h3>
  </div>
</aurelia-slickgrid>
Demo
Demo Component