From 163997661c76b00ff87ab0a2d0a701d67639d64d Mon Sep 17 00:00:00 2001
From: zhixin <wenzhixin2010@gmail.com>
Date: Tue, 7 Oct 2025 10:39:00 +0800
Subject: [PATCH] Enhance group-by-v2 example with full configuration

* Implement groupBy functionality with custom formatter
* Add sortable columns for shape, color, and area
* Include checkbox selection for state field
---
 extensions/group-by-v2.html | 55 +++++++++++++++++++++++--------------
 1 file changed, 34 insertions(+), 21 deletions(-)

diff --git a/extensions/group-by-v2.html b/extensions/group-by-v2.html
index 3f0b96bd..8a9352e2 100644
--- a/extensions/group-by-v2.html
+++ b/extensions/group-by-v2.html
@@ -14,30 +14,43 @@
 </script>
 
 <template>
-  <table
-    id="table"
-    data-group-by="true"
-    data-group-by-field="shape"
-    data-url="json/data6.json"
-  >
-    <thead>
-      <tr>
-        <th data-field="shape">
-          Shape
-        </th>
-        <th data-field="color">
-          Color
-        </th>
-        <th data-field="area">
-          Area
-        </th>
-      </tr>
-    </thead>
-  </table>
+  <table id="table"></table>
 </template>
 
 <script>
   function mounted () {
-    $('#table').bootstrapTable()
+    $('#table').bootstrapTable({
+      url: 'json/data6.json',
+      groupBy: true,
+      groupByField: 'shape',
+      groupByFormatter: value => {
+        const strong = document.createElement('strong')
+
+        strong.className = 'text-primary'
+        strong.textContent = `GROUP: ${value}`
+        return strong.outerHTML
+      },
+      columns: [
+        {
+          field: 'state',
+          checkbox: true
+        },
+        {
+          field: 'shape',
+          title: 'Shape',
+          sortable: true
+        },
+        {
+          field: 'color',
+          title: 'Color',
+          sortable: true
+        },
+        {
+          field: 'area',
+          title: 'Area',
+          sortable: true
+        }
+      ]
+    })
   }
 </script>