feat(DataTable): add ability to disable row selection, and sync colum…

…n grouping fix
rotki · Feb 9, 2024 · a4ab88e · a4ab88e
1 parent ba256bb
commit a4ab88e
Show file tree

Hide file tree

Showing 4 changed files with 192 additions and 120 deletions.
diff --git a/example/src/views/DataTableView.vue b/example/src/views/DataTableView.vue
@@ -288,6 +288,22 @@ const emptyTables = ref<
       collapsed: [],
     },
   },
+  {
+    title: 'Selection with disabled rows',
+    table: {
+      rowAttr: 'id',
+      rows: fixedRows,
+      cols: fixedColumns,
+      value: [9, 5],
+      disabledRows: fixedRows.slice(0, 3),
+      outlined: true,
+      sort: [{ column: 'name', direction: 'asc' }],
+      pagination: { limit: 5, page: 1, total: 5 },
+      stickyHeader: true,
+      group: ['username'],
+      collapsed: [],
+    },
+  },
 ]);
 
 const expandableTables = ref<

diff --git a/src/components/tables/DataTable.spec.ts b/src/components/tables/DataTable.spec.ts
@@ -5,6 +5,13 @@ import TablePagination from '@/components/tables/TablePagination.vue';
 import { RuiButton, RuiCheckbox, RuiSimpleSelect } from '~/src';
 import type { TableColumn } from '@/components/tables/TableHead.vue';
 
+interface User {
+  id: number;
+  name: string;
+  title: string;
+  email: string;
+}
+
 function createWrapper(options?: any) {
   return mount(DataTable, {
     ...options,
@@ -19,7 +26,7 @@ function createWrapper(options?: any) {
 }
 
 describe('dataTable', () => {
-  const data = [
+  const data: User[] = [
     ...[...new Array(50)].map((_, index) => ({
       email: `lindsay.walton${index}@example.com`,
       id: index + 1,
@@ -143,6 +150,24 @@ describe('dataTable', () => {
         .find('tbody tr:nth-child(2) div[data-cy=expanded-content]')
         .exists(),
     ).toBeTruthy();
+
+    expect(
+      wrapper
+        .find('div[data-cy=table-pagination] div[class*=limit]')
+        .exists(),
+    ).toBeTruthy();
+
+    expect(
+      wrapper
+        .find('div[data-cy=table-pagination] div[class*=ranges]')
+        .exists(),
+    ).toBeTruthy();
+
+    expect(
+      wrapper
+        .find('div[data-cy=table-pagination] div[class*=navigation]')
+        .exists(),
+    ).toBeTruthy();
   });
 
   it('multiple expand toggles correctly', async () => {

diff --git a/src/components/tables/DataTable.stories.ts b/src/components/tables/DataTable.stories.ts
@@ -10,6 +10,15 @@ import DataTable, { type Props } from './DataTable.vue';
 import type { TableColumn } from './TableHead.vue';
 import type { Meta, StoryFn, StoryObj } from '@storybook/vue';
 
+interface User {
+  id: number;
+  name: string;
+  title: string;
+  email: string;
+  role: string;
+  date: string;
+}
+
 const render: StoryFn<Props> = args => ({
   components: { Button, Card, DataTable, Icon, TextField },
   provide: {
@@ -148,7 +157,7 @@ const render: StoryFn<Props> = args => ({
     </div>`,
 });
 
-const data = [
+const data: User[] = [
   {
     date: '10.09.2023',
     email: 'Lefteris@example.com',