@soft-stech/bootsman-ui-shadcn 1.1.16 → 1.1.20

package/dist/lib/utils.d.ts

@@ -1,8 +1,9 @@
-import { type ClassValue } from 'clsx';
-import type { Column, Updater } from '@tanstack/vue-table';
-import { type Ref } from 'vue';
+import { Ref } from 'vue';
+import { Column, Updater } from '@tanstack/vue-table';
+import { ClassValue } from 'clsx';
+
 export declare function valueUpdater<T extends Updater<any>>(updaterOrValue: T, ref: Ref): void;
 export declare function cn(...inputs: ClassValue[]): string;
-export declare const tableColumnSortCommon: (column: Column<any>, name: string) => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
+export declare const tableColumnSortCommon: (column: Column<any>, name: string) => import('vue').VNode<import('vue').RendererNode, import('vue').RendererElement, {
     [key: string]: any;
 }>;

package/dist/lib/utils.js

@@ -1,4 +1,4 @@
-import { c as m, t as r, v as e } from "../utils-DMgok1im.js";
+import { c as m, t as r, v as e } from "../utils-X1PecXjd.js";
 import "vue";
 export {
   m as cn,

package/dist/{useFormField-B4RKKA7i.js → useFormField-D4oxdvVu.js}

@@ -1,5 +1,5 @@
 import { ref as se, reactive as We, computed as k, unref as P, nextTick as me, warn as Rt, onMounted as Ut, isRef as qe, watch as fe, provide as Dt, toValue as S, readonly as dn, watchEffect as cn, getCurrentInstance as Ee, onUnmounted as Lt, defineComponent as Je, toRef as _e, resolveDynamicComponent as ht, h as Ge, shallowRef as fn, inject as Ce, onBeforeUnmount as $t } from "vue";
-import { F as vn } from "./BuiFormItem.vue_vue_type_script_setup_true_lang-BhdQMLMy.js";
+import { F as vn } from "./BuiFormItem.vue_vue_type_script_setup_true_lang-D1i-VSBT.js";
 function mn() {
   return xt().__VUE_DEVTOOLS_GLOBAL_HOOK__;
 }

package/dist/{utils-DMgok1im.js → utils-X1PecXjd.js}

@@ -1,5 +1,5 @@
-import { defineComponent as pe, openBlock as fe, createBlock as be, unref as O, normalizeClass as ge, withCtx as me, renderSlot as he, h as V } from "vue";
-import { bm as ye } from "./index-BWXL7qjH.js";
+import { defineComponent as pe, openBlock as fe, createBlock as be, unref as W, normalizeClass as ge, withCtx as me, renderSlot as he, h as R } from "vue";
+import { bm as ye } from "./index-BmssdAmo.js";
 function se(e) {
   var r, t, o = "";
   if (typeof e == "string" || typeof e == "number")
@@ -68,10 +68,10 @@ function ke(e) {
     validators: []
   };
   return ze(Object.entries(e.classGroups), t).forEach(([n, s]) => {
-    W(s, o, n, r);
+    O(s, o, n, r);
   }), o;
 }
-function W(e, r, t, o) {
+function O(e, r, t, o) {
   e.forEach((i) => {
     if (typeof i == "string") {
       const n = i === "" ? r : te(r, i);
@@ -80,7 +80,7 @@ function W(e, r, t, o) {
     }
     if (typeof i == "function") {
       if (Ce(i)) {
-        W(i(o), r, t, o);
+        O(i(o), r, t, o);
         return;
       }
       r.validators.push({
@@ -90,7 +90,7 @@ function W(e, r, t, o) {
       return;
     }
     Object.entries(i).forEach(([n, s]) => {
-      W(s, te(r, n), t, o);
+      O(s, te(r, n), t, o);
     });
   });
 }
@@ -274,7 +274,7 @@ function C(e) {
 function A(e) {
   return !!e && !Number.isNaN(Number(e));
 }
-function E(e) {
+function N(e) {
   return S(e, "number", A);
 }
 function j(e) {
@@ -290,10 +290,10 @@ function z(e) {
   return Ne.test(e);
 }
 const _e = /* @__PURE__ */ new Set(["length", "size", "percentage"]);
-function Oe(e) {
+function We(e) {
   return S(e, _e, de);
 }
-function We(e) {
+function Oe(e) {
   return S(e, "position", de);
 }
 const qe = /* @__PURE__ */ new Set(["image", "url"]);
@@ -323,7 +323,7 @@ function Xe(e) {
   return Be.test(e);
 }
 function He() {
-  const e = p("colors"), r = p("spacing"), t = p("blur"), o = p("brightness"), i = p("borderColor"), n = p("borderRadius"), s = p("borderSpacing"), l = p("borderWidth"), u = p("contrast"), c = p("grayscale"), d = p("hueRotate"), b = p("invert"), h = p("gap"), y = p("gradientColorStops"), w = p("gradientColorStopPositions"), g = p("inset"), m = p("margin"), k = p("opacity"), v = p("padding"), K = p("saturate"), L = p("scale"), Z = p("sepia"), J = p("skew"), X = p("space"), H = p("translate"), $ = () => ["auto", "contain", "none"], B = () => ["auto", "hidden", "clip", "visible", "scroll"], U = () => ["auto", a, r], f = () => [a, r], Q = () => ["", x, C], R = () => ["auto", A, a], Y = () => ["bottom", "center", "left", "left-bottom", "left-top", "right", "right-bottom", "right-top", "top"], G = () => ["solid", "dashed", "dotted", "double", "none"], D = () => ["normal", "multiply", "screen", "overlay", "darken", "lighten", "color-dodge", "color-burn", "hard-light", "soft-light", "difference", "exclusion", "hue", "saturation", "color", "luminosity", "plus-lighter"], _ = () => ["start", "end", "center", "between", "around", "evenly", "stretch"], M = () => ["", "0", a], ee = () => ["auto", "avoid", "all", "avoid-page", "page", "left", "right", "column"], I = () => [A, E], T = () => [A, a];
+  const e = p("colors"), r = p("spacing"), t = p("blur"), o = p("brightness"), i = p("borderColor"), n = p("borderRadius"), s = p("borderSpacing"), l = p("borderWidth"), u = p("contrast"), c = p("grayscale"), d = p("hueRotate"), b = p("invert"), h = p("gap"), y = p("gradientColorStops"), w = p("gradientColorStopPositions"), g = p("inset"), m = p("margin"), k = p("opacity"), v = p("padding"), K = p("saturate"), L = p("scale"), Z = p("sepia"), J = p("skew"), X = p("space"), H = p("translate"), $ = () => ["auto", "contain", "none"], B = () => ["auto", "hidden", "clip", "visible", "scroll"], U = () => ["auto", a, r], f = () => [a, r], Q = () => ["", x, C], G = () => ["auto", A, a], Y = () => ["bottom", "center", "left", "left-bottom", "left-top", "right", "right-bottom", "right-top", "top"], T = () => ["solid", "dashed", "dotted", "double", "none"], D = () => ["normal", "multiply", "screen", "overlay", "darken", "lighten", "color-dodge", "color-burn", "hard-light", "soft-light", "difference", "exclusion", "hue", "saturation", "color", "luminosity"], _ = () => ["start", "end", "center", "between", "around", "evenly", "stretch"], M = () => ["", "0", a], ee = () => ["auto", "avoid", "all", "avoid-page", "page", "left", "right", "column"], I = () => [A, N], E = () => [A, a];
   return {
     cacheSize: 500,
     separator: ":",
@@ -338,7 +338,7 @@ function He() {
       borderWidth: Q(),
       contrast: I(),
       grayscale: M(),
-      hueRotate: T(),
+      hueRotate: E(),
       invert: M(),
       gap: f(),
       gradientColorStops: [e],
@@ -350,7 +350,7 @@ function He() {
       saturate: I(),
       scale: I(),
       sepia: M(),
-      skew: T(),
+      skew: E(),
       space: f(),
       translate: f()
     },
@@ -641,14 +641,14 @@ function He() {
        * @see https://tailwindcss.com/docs/grid-column
        */
       "col-start": [{
-        "col-start": R()
+        "col-start": G()
       }],
       /**
        * Grid Column End
        * @see https://tailwindcss.com/docs/grid-column
        */
       "col-end": [{
-        "col-end": R()
+        "col-end": G()
       }],
       /**
        * Grid Template Rows
@@ -671,14 +671,14 @@ function He() {
        * @see https://tailwindcss.com/docs/grid-row
        */
       "row-start": [{
-        "row-start": R()
+        "row-start": G()
       }],
       /**
        * Grid Row End
        * @see https://tailwindcss.com/docs/grid-row
        */
       "row-end": [{
-        "row-end": R()
+        "row-end": G()
       }],
       /**
        * Grid Auto Flow
@@ -1011,7 +1011,7 @@ function He() {
        * @see https://tailwindcss.com/docs/font-weight
        */
       "font-weight": [{
-        font: ["thin", "extralight", "light", "normal", "medium", "semibold", "bold", "extrabold", "black", E]
+        font: ["thin", "extralight", "light", "normal", "medium", "semibold", "bold", "extrabold", "black", N]
       }],
       /**
        * Font Family
@@ -1062,7 +1062,7 @@ function He() {
        * @see https://tailwindcss.com/docs/line-clamp
        */
       "line-clamp": [{
-        "line-clamp": ["none", A, E]
+        "line-clamp": ["none", A, N]
       }],
       /**
        * Line Height
@@ -1138,7 +1138,7 @@ function He() {
        * @see https://tailwindcss.com/docs/text-decoration-style
        */
       "text-decoration-style": [{
-        decoration: [...G(), "wavy"]
+        decoration: [...T(), "wavy"]
       }],
       /**
        * Text Decoration Thickness
@@ -1255,7 +1255,7 @@ function He() {
        * @see https://tailwindcss.com/docs/background-position
        */
       "bg-position": [{
-        bg: [...Y(), We]
+        bg: [...Y(), Oe]
       }],
       /**
        * Background Repeat
@@ -1271,7 +1271,7 @@ function He() {
        * @see https://tailwindcss.com/docs/background-size
        */
       "bg-size": [{
-        bg: ["auto", "cover", "contain", Oe]
+        bg: ["auto", "cover", "contain", We]
       }],
       /**
        * Background Image
@@ -1512,7 +1512,7 @@ function He() {
        * @see https://tailwindcss.com/docs/border-style
        */
       "border-style": [{
-        border: [...G(), "hidden"]
+        border: [...T(), "hidden"]
       }],
       /**
        * Divide Width X
@@ -1550,7 +1550,7 @@ function He() {
        * @see https://tailwindcss.com/docs/divide-style
        */
       "divide-style": [{
-        divide: G()
+        divide: T()
       }],
       /**
        * Border Color
@@ -1613,7 +1613,7 @@ function He() {
        * @see https://tailwindcss.com/docs/outline-style
        */
       "outline-style": [{
-        outline: ["", ...G()]
+        outline: ["", ...T()]
       }],
       /**
        * Outline Offset
@@ -1703,7 +1703,7 @@ function He() {
        * @see https://tailwindcss.com/docs/mix-blend-mode
        */
       "mix-blend": [{
-        "mix-blend": D()
+        "mix-blend": [...D(), "plus-lighter", "plus-darker"]
       }],
       /**
        * Background Blend Mode
@@ -1911,7 +1911,7 @@ function He() {
        * @see https://tailwindcss.com/docs/transition-duration
        */
       duration: [{
-        duration: T()
+        duration: E()
       }],
       /**
        * Transition Timing Function
@@ -1925,7 +1925,7 @@ function He() {
        * @see https://tailwindcss.com/docs/transition-delay
        */
       delay: [{
-        delay: T()
+        delay: E()
       }],
       /**
        * Animation
@@ -2262,7 +2262,7 @@ function He() {
        * @see https://tailwindcss.com/docs/stroke-width
        */
       "stroke-w": [{
-        stroke: [x, C, E]
+        stroke: [x, C, N]
       }],
       /**
        * Stroke
@@ -2397,10 +2397,10 @@ const oe = (e) => typeof e == "boolean" ? "".concat(e) : e === 0 ? "0" : e, ne =
     asChild: { type: Boolean }
   },
   setup(e) {
-    return (r, t) => (fe(), be(O(ye), {
+    return (r, t) => (fe(), be(W(ye), {
       as: r.as,
       "as-child": r.asChild,
-      class: ge(O(ir)(O(rr)({ variant: r.variant, size: r.size }), r.$attrs.class ?? ""))
+      class: ge(W(ar)(W(rr)({ variant: r.variant, size: r.size }), r.$attrs.class ?? ""))
     }, {
       default: me(() => [
         he(r.$slots, "default")
@@ -2454,12 +2454,19 @@ const oe = (e) => typeof e == "boolean" ? "".concat(e) : e === 0 ? "0" : e, ne =
   }
 );
 /**
- * @license lucide-vue-next v0.365.0 - ISC
+ * @license lucide-vue-next v0.377.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */
+const tr = (e) => e.replace(/([a-z0-9])([A-Z])/g, "$1-$2").toLowerCase();
+/**
+ * @license lucide-vue-next v0.377.0 - ISC
  *
  * This source code is licensed under the ISC license.
  * See the LICENSE file in the root directory of this source tree.
  */
-var N = {
+var V = {
   xmlns: "http://www.w3.org/2000/svg",
   width: 24,
   height: 24,
@@ -2471,88 +2478,95 @@ var N = {
   "stroke-linejoin": "round"
 };
 /**
- * @license lucide-vue-next v0.365.0 - ISC
+ * @license lucide-vue-next v0.377.0 - ISC
  *
  * This source code is licensed under the ISC license.
  * See the LICENSE file in the root directory of this source tree.
  */
-const tr = (e) => e.replace(/([a-z0-9])([A-Z])/g, "$1-$2").toLowerCase();
+const or = ({ size: e, strokeWidth: r = 2, absoluteStrokeWidth: t, color: o, iconNode: i, name: n, class: s, ...l }, { slots: u }) => R(
+  "svg",
+  {
+    ...V,
+    width: e || V.width,
+    height: e || V.height,
+    stroke: o || V.stroke,
+    "stroke-width": t ? Number(r) * 24 / Number(e) : r,
+    class: ["lucide", `lucide-${tr(n ?? "icon")}`],
+    ...l
+  },
+  [...i.map((c) => R(...c)), ...u.default ? [u.default()] : []]
+);
 /**
- * @license lucide-vue-next v0.365.0 - ISC
+ * @license lucide-vue-next v0.377.0 - ISC
  *
  * This source code is licensed under the ISC license.
  * See the LICENSE file in the root directory of this source tree.
  */
-const F = (e, r) => ({ size: t, strokeWidth: o = 2, absoluteStrokeWidth: i, color: n, class: s, ...l }, { attrs: u, slots: c }) => V(
-  "svg",
+const F = (e, r) => (t, { slots: o }) => R(
+  or,
   {
-    ...N,
-    width: t || N.width,
-    height: t || N.height,
-    stroke: n || N.stroke,
-    "stroke-width": i ? Number(o) * 24 / Number(t) : o,
-    ...u,
-    class: ["lucide", `lucide-${tr(e)}`],
-    ...l
+    ...t,
+    iconNode: r,
+    name: e
   },
-  [...r.map((d) => V(...d)), ...c.default ? [c.default()] : []]
+  o
 );
 /**
- * @license lucide-vue-next v0.365.0 - ISC
+ * @license lucide-vue-next v0.377.0 - ISC
  *
  * This source code is licensed under the ISC license.
  * See the LICENSE file in the root directory of this source tree.
  */
-const or = F("ArrowDownUpIcon", [
+const nr = F("ArrowDownUpIcon", [
   ["path", { d: "m3 16 4 4 4-4", key: "1co6wj" }],
   ["path", { d: "M7 20V4", key: "1yoxec" }],
   ["path", { d: "m21 8-4-4-4 4", key: "1c9v7m" }],
   ["path", { d: "M17 4v16", key: "7dpous" }]
 ]);
 /**
- * @license lucide-vue-next v0.365.0 - ISC
+ * @license lucide-vue-next v0.377.0 - ISC
  *
  * This source code is licensed under the ISC license.
  * See the LICENSE file in the root directory of this source tree.
  */
-const nr = F("ArrowDownIcon", [
+const sr = F("ArrowDownIcon", [
   ["path", { d: "M12 5v14", key: "s699le" }],
   ["path", { d: "m19 12-7 7-7-7", key: "1idqje" }]
 ]);
 /**
- * @license lucide-vue-next v0.365.0 - ISC
+ * @license lucide-vue-next v0.377.0 - ISC
  *
  * This source code is licensed under the ISC license.
  * See the LICENSE file in the root directory of this source tree.
  */
-const sr = F("ArrowUpIcon", [
+const ir = F("ArrowUpIcon", [
   ["path", { d: "m5 12 7-7 7 7", key: "hav0vg" }],
   ["path", { d: "M12 19V5", key: "x0mq9r" }]
 ]);
-function cr(e, r) {
+function dr(e, r) {
   r.value = typeof e == "function" ? e(r.value) : e;
 }
-function ir(...e) {
+function ar(...e) {
   return Qe(ve(e));
 }
-const dr = (e, r) => {
+const ur = (e, r) => {
   let t;
-  return e.getIsSorted() === "asc" ? t = nr : e.getIsSorted() === "desc" ? t = sr : t = or, V(
+  return e.getIsSorted() === "asc" ? t = sr : e.getIsSorted() === "desc" ? t = ir : t = nr, R(
     er,
     {
       variant: "none",
       class: "text-foreground px-0 text-base",
       onClick: () => e.toggleSorting(e.getIsSorted() === "asc")
     },
-    () => [r, V(t, { class: "ml-2 h-4 w-4 text-muted-foreground" })]
+    () => [r, R(t, { class: "ml-2 h-4 w-4 text-muted-foreground" })]
   );
 };
 export {
   er as _,
   De as a,
   rr as b,
-  ir as c,
+  ar as c,
   F as d,
-  dr as t,
-  cr as v
+  ur as t,
+  dr as v
 };

package/dist/{x-BK5-DOwl.js → x-CsgWZRM2.js}

@@ -1,6 +1,6 @@
-import { d as e } from "./utils-DMgok1im.js";
+import { d as e } from "./utils-X1PecXjd.js";
 /**
- * @license lucide-vue-next v0.365.0 - ISC
+ * @license lucide-vue-next v0.377.0 - ISC
  *
  * This source code is licensed under the ISC license.
  * See the LICENSE file in the root directory of this source tree.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@soft-stech/bootsman-ui-shadcn",
-  "version": "1.1.16",
+  "version": "1.1.20",
   "type": "module",
   "files": [
     "dist",
@@ -29,49 +29,51 @@
     "coverage": "vitest run --coverage"
   },
   "dependencies": {
-    "@tanstack/vue-table": "8.15.3",
+    "@tanstack/vue-table": "8.16.0",
     "@vee-validate/zod": "4.12.6",
     "@vueuse/core": "10.9.0",
     "class-variance-authority": "0.7.0",
-    "clsx": "2.1.0",
-    "lucide-vue-next": "0.365.0",
-    "radix-vue": "1.6.2",
-    "tailwind-merge": "2.2.2",
+    "clsx": "2.1.1",
+    "lucide-vue-next": "0.377.0",
+    "radix-vue": "1.7.3",
+    "tailwind-merge": "2.3.0",
     "tailwindcss-animate": "1.0.7",
     "v-calendar": "3.1.2",
     "vee-validate": "4.12.6",
-    "vue": "3.4.21",
-    "zod": "3.22.4"
+    "vue": "3.4.26",
+    "zod": "3.23.5"
   },
   "devDependencies": {
-    "@histoire/plugin-vue": "0.17.15",
-    "@playwright/test": "1.43.0",
-    "@rushstack/eslint-patch": "1.10.1",
+    "@histoire/plugin-vue": "0.17.17",
+    "@playwright/test": "1.43.1",
+    "@rushstack/eslint-patch": "1.10.2",
     "@tsconfig/node18": "18.2.4",
     "@types/jsdom": "21.1.6",
-    "@types/node": "20.12.5",
+    "@types/node": "20.12.8",
     "@vitejs/plugin-vue": "5.0.4",
-    "@vitest/coverage-v8": "1.4.0",
+    "@vitest/coverage-v8": "1.5.3",
     "@vue/eslint-config-prettier": "8.0.0",
     "@vue/eslint-config-typescript": "12.0.0",
-    "@vue/test-utils": "2.4.3",
+    "@vue/test-utils": "2.4.5",
     "@vue/tsconfig": "0.5.1",
-    "autoprefixer": "10.4.16",
-    "bumpp": "9.4.0",
+    "autoprefixer": "10.4.19",
+    "bumpp": "9.4.1",
     "eslint": "8.57.0",
-    "eslint-plugin-vue": "9.24.0",
-    "glob": "10.3.10",
-    "histoire": "0.17.15",
+    "eslint-plugin-vue": "9.25.0",
+    "fast-sort": "3.4.0",
+    "glob": "10.3.12",
+    "histoire": "0.17.17",
     "jsdom": "23.2.0",
-    "npm-run-all2": "6.1.1",
-    "postcss": "8.4.33",
+    "npm-run-all2": "6.1.2",
+    "postcss": "8.4.38",
     "prettier": "3.2.5",
-    "prettier-plugin-tailwindcss": "0.5.13",
+    "prettier-plugin-tailwindcss": "0.5.14",
     "tailwindcss": "3.4.3",
-    "typescript": "~5.3.3",
-    "vite": "5.2.8",
-    "vite-plugin-dts": "3.7.2",
-    "vitest": "1.4.0",
-    "vue-tsc": "1.8.27"
+    "typescript": "~5.4.5",
+    "vite": "5.2.11",
+    "vite-plugin-dts": "3.9.0",
+    "vitest": "1.5.3",
+    "vue-tsc": "2.0.16",
+    "mlly": "1.4.2"
   }
 }

package/src/components/stories/{Collapsible.story.vue → BuiCollapsible.story.vue}

@@ -8,7 +8,7 @@ const isOpen = ref(false)
 
 <template>
   <Story title="BuiCollapsible" autoPropsDisabled>
-    <Variant :key="`variant-default`" :title="`Tooltip`">
+    <Variant :key="`variant-default`" :title="`Default`">
       <div class="flex justify-center pt-12">
         <BuiCollapsible v-model:open="isOpen" class="w-[350px] space-y-2">
           <div class="flex items-center justify-between space-x-4 px-4">

package/src/components/stories/BuiDataTable.story.vue

@@ -1,24 +1,22 @@
 <script setup lang="ts">
 import { BuiDataTable } from '@/components/ui/table'
-import type {
-  ColumnDef,
-  PaginationState,
-  RowSelectionState,
-  SortingState
-} from '@tanstack/vue-table'
-import { h, ref } from 'vue'
-import { z } from 'zod'
-import { BuiButton, BuiCheckbox } from '@/index'
+import { BuiButton, BuiCheckbox, BuiTabs, BuiTabsList, BuiTabsTrigger } from '@/index'
 import { tableColumnSortCommon } from '@/lib/utils'
+import type { ColumnDef, PaginationState, Row, RowSelectionState } from '@tanstack/vue-table'
+import { sort, type ISortByObjectSorter } from 'fast-sort'
 import { logEvent } from 'histoire/client'
+import { AlignJustifyIcon, FolderIcon } from 'lucide-vue-next'
+import { computed, h, ref } from 'vue'
+import { z } from 'zod'
 import tasks from './data/tasks.json'
 
 const taskSchema = z.object({
   id: z.string(),
   title: z.string(),
-  status: z.string(),
+  status: z.string().nullable().optional(),
   label: z.string(),
-  priority: z.string()
+  priority: z.string(),
+  errorMessage: z.string().optional()
 })
 type Task = z.infer<typeof taskSchema>
 const columns: ColumnDef<Task>[] = [
@@ -59,7 +57,8 @@ const columns: ColumnDef<Task>[] = [
 ]
 const data = ref<Task[]>(tasks)
 
-const sorting = ref<SortingState>([{ id: 'status', desc: false }])
+type TaskSortingState = { id: keyof Task; desc: boolean }
+const sorting = ref<TaskSortingState[]>([{ id: 'id', desc: false }])
 const pagination = ref<PaginationState>({
   pageIndex: 0,
   pageSize: 10
@@ -71,14 +70,42 @@ function updateSelection(val: RowSelectionState) {
   logEvent('selection was changed', val)
   selection.value = val
 }
+
+type GroupBy = 'none' | 'status'
+const groupBy = ref<GroupBy>('none')
+const groupLabels = {
+  status: ['Status', 'Not in any status']
+}
+
+const sortedData = computed(() => {
+  const sortDirection = (sorting.value[0].desc ? 'desc' : 'asc') as 'asc'
+  const sortColumn = sorting.value[0].id
+  const groupByStr = groupBy.value
+
+  const sortBy: ISortByObjectSorter<Task> | ISortByObjectSorter<Task>[] = [
+    {
+      [sortDirection]: groupByStr === 'none' ? sortColumn : [(row) => row[groupByStr], sortColumn]
+    }
+  ]
+
+  return sort(data.value).by([...sortBy])
+})
+
+function renderSubComponent(row: Row<Task>) {
+  if (row.original.errorMessage) {
+    return () => h('span', { style: 'color: red' }, `Subrow: ${row.original.errorMessage}`)
+  } else {
+    return undefined
+  }
+}
 </script>
 
 <template>
   <Story title="BuiDataTable" autoPropsDisabled :layout="{ type: 'grid', width: '95%' }">
-    <Variant key="variant" title="Sorting, Pagination">
+    <Variant key="variant" title="Sorting, Pagination, Grouping, Subrow">
       <BuiDataTable
         :columns="columns"
-        :data="data"
+        :data="sortedData"
         v-model:sorting="sorting"
         v-model:pagination="pagination"
         @update:selection="updateSelection"
@@ -86,14 +113,29 @@ function updateSelection(val: RowSelectionState) {
         class="caption-top"
         :manualPagination="false"
         :getRowId="(row) => row.id"
+        :groupBy="groupBy === 'none' ? undefined : groupBy"
+        :groupLabels="groupLabels"
+        :renderSubComponent="renderSubComponent"
       >
         <template #caption="{ table }">
           <div class="flex justify-between">
             <BuiButton variant="outline">Download YAML</BuiButton>
-            <span
-              >{{ table.getFilteredSelectedRowModel().rows?.length }} of
-              {{ table.getFilteredRowModel().rows?.length }} row(s) selected</span
-            >
+
+            <BuiTabs v-model="groupBy">
+              <BuiTabsList class="grid w-full grid-cols-2" :variant="'default'">
+                <BuiTabsTrigger value="none" :variant="'default'"
+                  ><AlignJustifyIcon
+                /></BuiTabsTrigger>
+                <BuiTabsTrigger value="status" :variant="'default'">
+                  <FolderIcon />
+                </BuiTabsTrigger>
+              </BuiTabsList>
+            </BuiTabs>
+
+            <span>
+              {{ table.getFilteredSelectedRowModel().rows?.length }} of
+              {{ table.getFilteredRowModel().rows?.length }} row(s) selected
+            </span>
           </div>
         </template>
       </BuiDataTable>