From efda0fa28c7bd856eed23ff23209dec477ce6a03 Mon Sep 17 00:00:00 2001
From: Dwayne Charrington <dwaynecharrington@gmail.com>
Date: Sat, 21 Dec 2024 16:31:12 +1000
Subject: [PATCH] feat(showcase): add showcase for au2 data grid component

- Introduced a new documentation page for the Au2 Data Grid, detailing its features, usage examples, and installation instructions. This enhances visibility and accessibility for users interested in integrating the component into their Aurelia 2 applications.
---
 content/showcase/au2-data-grid/index.md | 65 +++++++++++++++++++++++++
 1 file changed, 65 insertions(+)
 create mode 100644 content/showcase/au2-data-grid/index.md

diff --git a/content/showcase/au2-data-grid/index.md b/content/showcase/au2-data-grid/index.md
new file mode 100644
index 0000000..a8006aa
--- /dev/null
+++ b/content/showcase/au2-data-grid/index.md
@@ -0,0 +1,65 @@
+---
+title: "Au2 Data Grid"
+description: "A flexible data grid component for Aurelia 2 that supports custom elements, pagination, sorting, and column management."
+date: 2023-01-15
+showcase_categories: ["plugins", "data"]
+github: "Sayan751/au2-data-grid"
+npm: "@sparser/au2-data-grid"
+demo: "https://sparser.github.io/au2-data-grid"
+featured_image: "/images/showcase/au2-data-grid.png"
+---
+
+## Overview
+
+Au2 Data Grid is a powerful and flexible data grid component for Aurelia 2 applications. Its standout feature is the ability to define the entire grid structure in markup, allowing seamless integration with your custom Aurelia 2 elements.
+
+## Features
+
+- **Custom Element Support**: Define grid columns using your own Aurelia 2 custom elements
+- **Flexible Selection**: Configure single, multiple, or no item selection
+- **Data Source Freedom**: Support for both static content and backend services
+- **Pagination**: Built-in support for pageable content
+- **Sorting**: Custom sort functionality via callbacks
+- **Column Management**: 
+  - Drag-and-drop column reordering
+  - Column resizing
+  - Efficient updates without full grid re-rendering
+
+## Usage Example
+```html
+<data-grid model.bind="people">
+
+  <!-- column #1 -->
+  <grid-column>
+    <header>
+      <value-text value="First name"></value-text>        <!-- custom element -->
+    </header>
+    <normal-text value.bind="item.fname"></normal-text>   <!-- custom element -->
+  </grid-column>
+
+  <!-- column #2 -->
+  <grid-column>
+    <header>
+      <value-text value="Last name"></value-text>
+    </header>
+    <normal-text value.bind="item.lname"></normal-text>
+  </grid-column>
+
+  <!-- column #3 -->
+  <grid-column>
+    <header>
+      <value-text value="Age"></value-text>
+    </header>
+    <normal-text value.bind="item.age"></normal-text>
+  </grid-column>
+</data-grid>
+```
+
+## Installation 
+
+```bash
+npm i @sparser/au2-data-grid
+```
+
+
+The grid is designed to be framework-agnostic in terms of HTTP communication, allowing you to use your existing HTTP pipeline for data fetching and management.
\ No newline at end of file