feat(DataTable): enable table grouping (#102)

.storybook/app.ts

@@ -1,13 +1,24 @@
 import { createRui } from '../src';
 import * as Icons from '../src/all-icons';
-import Vue from 'vue';
+import Vue, { ref } from 'vue';
 
 const RuiPlugin = createRui({
   theme: {
     icons: Object.values(Icons),
-  }
+  },
+  defaults: {
+    table: {
+      itemsPerPage: ref(10),
+      globalItemsPerPage: false,
+    }
+  },
 })
 
 Vue.use(RuiPlugin);
 
-export const vueInstance = new Vue({ template: '<div />' }).$mount();
+export const vueInstance = new Vue({
+  template: '<div />',
+  setup() {
+    RuiPlugin.setupProvide();
+  }
+}).$mount();

example/src/main.ts

@@ -24,7 +24,9 @@ import {
   RiArrowUpSLine,
   RiCheckboxCircleLine,
   RiCloseFill,
+  RiDeleteBinLine,
   RiErrorWarningLine,
+  RiFileCopyLine,
   RiInformationLine,
   RiMacbookLine,
   RiMoonLine,
@@ -67,6 +69,8 @@ const RuiPlugin = createRui({
       RiArrowUpSLine,
       RiArrowDownSLine,
       RiArrowDownCircleLine,
+      RiDeleteBinLine,
+      RiFileCopyLine,
     ],
   },
   defaults: {

example/src/views/DataTableView.vue

@@ -15,7 +15,7 @@ import { useFetch } from '@vueuse/core';
 import { get, objectOmit, useDebounceFn } from '@vueuse/shared';
 import { computed, onBeforeMount, ref } from 'vue';
 
-interface _User {
+interface User {
   id: number;
   name: string;
   username: string;
@@ -104,6 +104,7 @@ const fixedColumns: DataTableColumn[] = [
   {
     key: 'name',
     label: 'Full name',
+    sortable: true,
   },
   {
     key: 'username',
@@ -131,6 +132,15 @@ const fixedColumns: DataTableColumn[] = [
 ];
 
 const fixedRows = [
+  {
+    id: 9,
+    name: 'Glenna Reichert',
+    username: 'Kamren',
+    email: 'Chaim_McDermott@dana.io',
+    website: 'conrad.com',
+    'address.street': 'Dayna Park',
+    'address.city': 'Bartholomebury',
+  },
   {
     id: 5,
     name: 'Chelsey Dietrich',
@@ -152,7 +162,7 @@ const fixedRows = [
   {
     id: 3,
     name: 'Clementine Bauch',
-    username: 'Samantha',
+    username: 'Kamren',
     email: 'Nathan@yesenia.net',
     website: 'ramiro.info',
     'address.street': 'Douglas Extension',
@@ -167,15 +177,6 @@ const fixedRows = [
     'address.street': 'Victor Plains',
     'address.city': 'Wisokyburgh',
   },
-  {
-    id: 9,
-    name: 'Glenna Reichert',
-    username: 'Delphine',
-    email: 'Chaim_McDermott@dana.io',
-    website: 'conrad.com',
-    'address.street': 'Dayna Park',
-    'address.city': 'Bartholomebury',
-  },
 ];
 
 const emptyTables = ref<
@@ -240,6 +241,8 @@ const emptyTables = ref<
       pagination: { limit: 5, page: 1, total: 5 },
       stickyHeader: true,
       stickyOffset: 72,
+      group: ['username'],
+      collapsed: [],
     },
   },
 ]);
@@ -486,6 +489,8 @@ const apiDatatables = ref<{ title: string; table: DataTableProps }[]>([
       search: '',
       sort: { column: 'name', direction: 'asc' },
       pagination: { limit: 5, page: 1, total: 0 },
+      group: ['username'],
+      collapsed: [],
     },
   },
   {
@@ -507,7 +512,7 @@ const users = computed<Record<string, any>[]>(() =>
   JSON.parse(get(_users) ?? '[]').map(normalize),
 );
 
-const normalize = (user: _User): Record<string, any> => {
+const normalize = (user: User): Record<string, any> => {
   const { address, company } = user;
   return {
     ...objectOmit(user, ['address', 'company']),
@@ -545,19 +550,19 @@ const fakeFetch = async (
 
     const sort = (by: DataTableSortColumn) => {
       result.sort((a, b) => {
-        if (!by.column) {
+        if (!by.column?.toString()) {
           return 0;
         }
         if (by.direction === 'desc') {
-          return `${b[by.column]}`.localeCompare(
-            `${a[by.column]}`,
+          return `${b[by.column?.toString()]}`.localeCompare(
+            `${a[by.column?.toString()]}`,
             undefined,
             sortOptions,
           );
         }
 
-        return `${a[by.column]}`.localeCompare(
-          `${b[by.column]}`,
+        return `${a[by.column?.toString()]}`.localeCompare(
+          `${b[by.column?.toString()]}`,
           undefined,
           sortOptions,
         );
@@ -691,7 +696,10 @@ const toggleRow = (row: any, expanded: any[] | undefined) => {
             :pagination.sync="table.pagination"
             :sort.sync="table.sort"
             :data-cy="`table-empty-${i}`"
+            :group.sync="table.group"
+            :collapsed.sync="table.collapsed"
           >
+            <template #header.address.city> city custom header </template>
             <template #item.action>
               <RuiButton icon variant="text" size="sm">
                 <RuiIcon name="more-fill" color="primary" />
@@ -833,6 +841,8 @@ const toggleRow = (row: any, expanded: any[] | undefined) => {
             :sort-modifiers="{ external: true }"
             :pagination.sync="table.pagination"
             :sort.sync="table.sort"
+            :group.sync="table.group"
+            :collapsed.sync="table.collapsed"
             :data-cy="`table-api-${i}`"
             @update:options="fetchData(i, $event, table.search, true)"
           >
@@ -841,6 +851,9 @@ const toggleRow = (row: any, expanded: any[] | undefined) => {
                 <RuiIcon name="more-fill" color="primary" />
               </RuiButton>
             </template>
+            <template #group.header.content="{ groupValue }">
+              custom group content: {{ groupValue }}
+            </template>
           </RuiDataTable>
         </div>
       </div>

src/components/index.ts

@@ -77,12 +77,15 @@ import {
   type Props as StepperProps,
 } from '@/components/steppers/Stepper.vue';
 import {
-  type TableColumn as DataTableColumn,
   type TableOptions as DataTableOptions,
   type Props as DataTableProps,
-  type SortColumn as DataTableSortColumn,
   default as RuiDataTable,
 } from '@/components/tables/DataTable.vue';
+import {
+  type TableColumn as DataTableColumn,
+  type SortColumn as DataTableSortColumn,
+  type TableSortData as DataTableSortData,
+} from '@/components/tables/TableHead.vue';
 import {
   type Props as ExpandButtonProps,
   default as RuiTableRowExpander,
@@ -175,4 +178,5 @@ export {
   SkeletonLoaderProps,
   TextAreaProps,
   ExpandButtonProps,
+  DataTableSortData,
 };

src/components/tables/DataTable.spec.ts

@@ -1,7 +1,8 @@
 /* eslint-disable max-lines */
 import { describe, expect, it } from 'vitest';
 import { mount } from '@vue/test-utils';
-import DataTable, { type TableColumn } from '@/components/tables/DataTable.vue';
+import DataTable from '@/components/tables/DataTable.vue';
+import { type TableColumn } from '@/components/tables/TableHead.vue';
 import TablePagination from '@/components/tables/TablePagination.vue';
 import { RuiSimpleSelect } from '~/src';
 
@@ -341,10 +342,11 @@ describe('DataTable', () => {
       const paginate = wrapper.findAllComponents(TablePagination);
       expect(paginate).toHaveLength(2);
 
-      expect(paginate.at(0).vm.value).toMatchObject(
-        expect.objectContaining({ limit: 25 }),
-      );
-      expect(paginate.at(1).vm.value).toMatchObject(
+      const first = paginate.at(0).vm as unknown as typeof TablePagination;
+      const second = paginate.at(1).vm as unknown as typeof TablePagination;
+
+      expect(first.value).toMatchObject(expect.objectContaining({ limit: 25 }));
+      expect(second.value).toMatchObject(
         expect.objectContaining({ limit: 25 }),
       );
 
@@ -353,11 +355,9 @@ describe('DataTable', () => {
 
       await nextTick();
 
-      expect(paginate.at(0).vm.value).toMatchObject(
-        expect.objectContaining({ limit: 10 }),
-      );
+      expect(first.value).toMatchObject(expect.objectContaining({ limit: 10 }));
 
-      expect(paginate.at(1).vm.value).toMatchObject(
+      expect(second.value).toMatchObject(
         expect.objectContaining({ limit: 10 }),
       );
 
@@ -388,10 +388,11 @@ describe('DataTable', () => {
       const paginate = wrapper.findAllComponents(TablePagination);
       expect(paginate).toHaveLength(2);
 
-      expect(paginate.at(0).vm.value).toMatchObject(
-        expect.objectContaining({ limit: 25 }),
-      );
-      expect(paginate.at(1).vm.value).toMatchObject(
+      const first = paginate.at(0).vm as unknown as typeof TablePagination;
+      const second = paginate.at(1).vm as unknown as typeof TablePagination;
+
+      expect(first.value).toMatchObject(expect.objectContaining({ limit: 25 }));
+      expect(second.value).toMatchObject(
         expect.objectContaining({ limit: 10 }),
       );
 
@@ -402,11 +403,9 @@ describe('DataTable', () => {
 
       await nextTick();
 
-      expect(paginate.at(0).vm.value).toMatchObject(
-        expect.objectContaining({ limit: 10 }),
-      );
+      expect(first.value).toMatchObject(expect.objectContaining({ limit: 10 }));
 
-      expect(paginate.at(1).vm.value).toMatchObject(
+      expect(second.value).toMatchObject(
         expect.objectContaining({ limit: 25 }),
       );
 
@@ -436,11 +435,12 @@ describe('DataTable', () => {
       const paginate = wrapper.findAllComponents(TablePagination);
       expect(paginate).toHaveLength(2);
 
-      expect(paginate.at(0).vm.value).toMatchObject(
-        expect.objectContaining({ limit: 10 }),
-      );
+      const first = paginate.at(0).vm as unknown as typeof TablePagination;
+      const second = paginate.at(1).vm as unknown as typeof TablePagination;
 
-      expect(paginate.at(1).vm.value).toMatchObject(
+      expect(first.value).toMatchObject(expect.objectContaining({ limit: 10 }));
+
+      expect(second.value).toMatchObject(
         expect.objectContaining({ limit: 25 }),
       );
 
@@ -451,11 +451,9 @@ describe('DataTable', () => {
 
       await nextTick();
 
-      expect(paginate.at(0).vm.value).toMatchObject(
-        expect.objectContaining({ limit: 25 }),
-      );
+      expect(first.value).toMatchObject(expect.objectContaining({ limit: 25 }));
 
-      expect(paginate.at(1).vm.value).toMatchObject(
+      expect(second.value).toMatchObject(
         expect.objectContaining({ limit: 10 }),
       );