fix(DataTable): external pagination, and sticky table header

rotki · Jan 2, 2024 · adaf47c · adaf47c
1 parent f4e0edf
commit adaf47c
Show file tree

Hide file tree

Showing 4 changed files with 31 additions and 12 deletions.
diff --git a/example/cypress/e2e/data-table.cy.ts b/example/cypress/e2e/data-table.cy.ts
@@ -197,33 +197,37 @@ describe('DataTable', () => {
   });
 
   it.only('checks for data tables with sticky header', () => {
-    cy.get('div[data-cy=table-expandable-0]').as('sticky');
+    cy.get('div[data-cy="table-expandable-0"]').as('sticky');
 
     cy.get('@sticky')
       .find('> div > table > tbody > tr:nth-child(5)')
       .as('row4');
 
     cy.get('@sticky')
-      .find('> div > table thead[data-id=head-clone]')
+      .find('> div > table > thead[data-id=head-clone]')
+      .should('exist');
+
+    cy.get('@sticky')
+      .find('> div > table > thead[data-id=head-main]')
+      .as('mainHead')
       .should('exist');
 
     cy.get('@row4')
       .scrollIntoView()
-      .get('@sticky')
-      .find('> div > table thead[data-id=head-main]')
+      .get('@mainHead')
       .should((thead) => {
         const classes = Cypress.$(thead).attr('class');
         expect(classes).to.contain('_sticky__header_');
-        expect(classes).to.contain('_stick__top_');
+        expect(classes).not.to.contain('_stick__top_');
       });
 
     cy.window()
+      .get('body')
       .scrollTo('top')
-      .get('@sticky')
-      .find('> div > table thead[data-id=head-main][class*=_sticky__header_]')
+      .get('@mainHead')
       .should((thead) => {
         const classes = Cypress.$(thead).attr('class');
-        expect(classes).to.contain('_stick__top_');
+        expect(classes).not.to.contain('_stick__top_');
       });
   });
 });
diff --git a/example/src/assets/main.css b/example/src/assets/main.css
@@ -1,8 +1,12 @@
 @import './style.css';
 
 @layer base {
+  html {
+    @apply overflow-hidden;
+  }
+
   body {
-    @apply bg-white text-black;
+    @apply bg-white text-black h-screen overflow-y-auto overflow-x-hidden;
   }
 
   .dark body {

diff --git a/example/src/main.ts b/example/src/main.ts
@@ -3,7 +3,7 @@ import '@rotki/ui-library/style.css';
 import '@fontsource/roboto/latin.css';
 
 import { createApp } from 'vue';
-import { createPinia } from 'pinia';
+import { createPinia, storeToRefs } from 'pinia';
 import {
   RiAddFill,
   RiAlertLine,
@@ -30,8 +30,12 @@ import {
 } from '@rotki/ui-library';
 import App from '@/App.vue';
 import router from '@/router';
+import { useCounterStore } from '@/stores/counter';
 
 const app = createApp(App);
+
+app.use(createPinia());
+const { itemsPerPage } = storeToRefs(useCounterStore());
 const RuiPlugin = createRui({
   theme: {
     icons: [
@@ -58,9 +62,14 @@ const RuiPlugin = createRui({
       RiArrowDownCircleLine,
     ],
   },
+  defaults: {
+    table: {
+      itemsPerPage,
+      globalItemsPerPage: false,
+    },
+  },
 });
 
-app.use(createPinia());
 app.use(router);
 app.use(RuiPlugin);
 

diff --git a/example/src/stores/counter.ts b/example/src/stores/counter.ts
@@ -9,5 +9,7 @@ export const useCounterStore = defineStore('counter', () => {
     count.value++;
   }
 
-  return { count, doubleCount, increment };
+  const itemsPerPage = ref(15);
+
+  return { count, doubleCount, increment, itemsPerPage };
 });