docs: add Header/Footer Slots documentation

ghiscoding · Jan 22, 2025 · 241b10b · 241b10b
1 parent 2330a9d
commit 241b10b
Show file tree

Hide file tree

Showing 2 changed files with 21 additions and 0 deletions.
diff --git a/docs/TOC.md b/docs/TOC.md
@@ -58,6 +58,7 @@
 * [Grid Menu](grid-functionalities/grid-menu.md)
 * [Grid State & Presets](grid-functionalities/grid-state-preset.md)
 * [Grouping & Aggregators](grid-functionalities/grouping-aggregators.md)
+* [Header & Footer Slots](grid-functionalities/header-footer-slots.md)
 * [Header Menu & Header Buttons](grid-functionalities/header-menu-header-buttons.md)
 * [Infinite Scroll](grid-functionalities/infinite-scroll.md)
 * [Pinning (frozen) of Columns/Rows](grid-functionalities/frozen-columns-rows.md)

diff --git a/docs/grid-functionalities/header-footer-slots.md b/docs/grid-functionalities/header-footer-slots.md
@@ -0,0 +1,20 @@
+### 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](https://ghiscoding.github.io/slickgrid-react/#/example29) / [Demo Component](https://github.com/ghiscoding/slickgrid-react/blob/master/src/examples/slickgrid/Example29.tsx)
+
+### Basic Usage
+
+##### Component
+
+```tsx
+<SlickgridReact gridId="grid"
+    columnDefinitions={this.columnDefinitions}
+    gridOptions={this.gridOptions}
+    dataset={this.dataset}
+    header={<Header />}
+    footer={<Footer />}
+/>
+```