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

Author: wenzhixin

extensions/group-by-v2.html

@@ -14,30 +14,40 @@
 </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 => $('<strong>')
+        .addClass('text-primary')
+        .text(`GROUP: ${value}`)[0]
+        .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>