Merge pull request #51 from OnroerendErfgoed/bugfix/50_fix_vue_ag_gri…

…d_header #50 fix ag grid header wanneer er geen resultaten zijn
OnroerendErfgoed · Jul 24, 2023 · 5216b1d · 5216b1d
2 parents f5672c8 + 3ea5d9c
commit 5216b1d
Show file tree

Hide file tree

Showing 2 changed files with 40 additions and 1 deletion.
diff --git a/src/components/dumb/OeGrid.vue b/src/components/dumb/OeGrid.vue
@@ -12,6 +12,21 @@ import { AgGridVue } from 'ag-grid-vue3';
 @import 'pyoes/scss/pyoes-settings';
 
 .ag-grid-vue {
+  .ag-ltr .ag-header-cell::after {
+    display: none;
+  }
+
+  .ag-row,
+  .ag-header-row {
+
+    .ag-cell,
+    .ag-header-cell {
+      border-color: #DDD;
+      border-style: solid;
+      border-width: 0 1px 1px 0;
+    }
+  }
+
   &.ag-theme-balham {
     -webkit-font-smoothing: antialiased;
     background-color: $white;
@@ -29,6 +44,7 @@ import { AgGridVue } from 'ag-grid-vue3';
       padding-top: 0;
     }
   }
+
   .ag-root-wrapper {
     .ag-header {
       background-color: #eee;
@@ -84,6 +100,7 @@ import { AgGridVue } from 'ag-grid-vue3';
 
     .ag-cell-focus {
       outline: none;
+
       &:focus-within {
         border-color: $primary-color;
       }
@@ -117,7 +134,7 @@ import { AgGridVue } from 'ag-grid-vue3';
           cursor: pointer;
           color: $dark-purple;
 
-          + .fa {
+          +.fa {
             margin-left: 5px;
           }
         }
@@ -131,6 +148,7 @@ import { AgGridVue } from 'ag-grid-vue3';
           color: $success-color;
           cursor: default;
         }
+
         i.fa.fa-times {
           color: $alert-color;
           cursor: default;

diff --git a/src/stories/dumb-components/grid.stories.ts b/src/stories/dumb-components/grid.stories.ts
@@ -56,6 +56,27 @@ export const Default: Story = {
   }),
 };
 
+export const DefaultNoData: Story = {
+  render: () => ({
+    components: { OeGrid },
+    setup() {
+      const gridOptions: GridOptions = {
+        columnDefs: [
+          { headerName: 'Make', field: 'make' },
+          { headerName: 'Model', field: 'model' },
+          { headerName: 'Price', field: 'price' },
+        ],
+        rowData: [],
+      };
+      const firstDataRendered = (grid: FirstDataRenderedEvent) => {
+        grid.api.sizeColumnsToFit();
+      };
+      return { firstDataRendered, gridOptions };
+    },
+    template: `<oe-grid style="width: 100%; height: 300px" :grid-options="gridOptions" @first-data-rendered="firstDataRendered" />`,
+  }),
+};
+
 export const Sortable: Story = {
   render: () => ({
     components: { OeGrid },