Add a custom primevue themes

datalab-org · Oct 11, 2024 · 2ae1232 · 2ae1232
1 parent be690a7
commit 2ae1232
Show file tree

Hide file tree

Showing 2 changed files with 15 additions and 36 deletions.
diff --git a/webapp/src/components/DynamicDataTable.vue b/webapp/src/components/DynamicDataTable.vue
@@ -351,38 +351,3 @@ export default {
   },
 };
 </script>
-
-<style scoped>
-.customize-table .ag-header {
-  font-size: 1rem;
-}
-
-.p-datatable-column-header-content .p-datatable-sort-icon {
-  visibility: hidden !important;
-}
-.p-datatable-column-header-content:hover .p-datatable-sort-icon {
-  visibility: visible !important;
-}
-
-.p-datatable .p-datatable-tbody > tr > td {
-  min-width: 1em;
-  max-width: 200px;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-.p-datatable .p-datatable-thead > tr > th {
-  min-width: 1em;
-  max-width: 200px;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-
-.p-datatable-header-cell.filter-active svg {
-  color: #10b981;
-}
-.p-datatable-header-cell.filter-active {
-  color: #047857;
-}
-</style>
diff --git a/webapp/src/main.js b/webapp/src/main.js
@@ -121,15 +121,29 @@ import "vue-select/dist/vue-select.css";
 // import "primevue";
 import PrimeVue from "primevue/config";
 import Aura from "@primevue/themes/aura";
+import { definePreset } from "@primevue/themes";
 
 const app = createApp(App);
 
+const DatalabPreset = definePreset(Aura, {
+  semantic: {
+    transitionDuration: "0s",
+  },
+  components: {
+    datatable: {
+      headerCellPadding: "0.5rem",
+      bodyCellPadding: "0.5rem",
+      sortIconColor: "transparent",
+    },
+  },
+});
+
 app
   .use(store)
   .use(router)
   .use(PrimeVue, {
     theme: {
-      preset: Aura,
+      preset: DatalabPreset,
       options: {
         darkModeSelector: "none",
       },