fix(component-library): fix styling of data table toolbar header

shopware · Jan 17, 2025 · a8d3340 · a8d3340
1 parent 045b002
commit a8d3340
Show file tree

Hide file tree

Showing 2 changed files with 13 additions and 0 deletions.
diff --git a/.changeset/purple-crabs-add.md b/.changeset/purple-crabs-add.md
@@ -0,0 +1,5 @@
+---
+"@shopware-ag/meteor-component-library": patch
+---
+
+hide data table toolbar when it has no header
diff --git a/packages/component-library/src/components/table-and-list/mt-data-table/mt-data-table.vue b/packages/component-library/src/components/table-and-list/mt-data-table/mt-data-table.vue
@@ -2008,6 +2008,10 @@ $tableCellPadding: $tableCellPaddingTop $tableCellPaddingRight $tableCellPadding
   .mt-card__toolbar {
     flex-direction: column;
     gap: 0;
+
+    &:has(.mt-data-table__toolbar:empty) {
+      padding: 0;
+    }
   }
 
   .mt-data-table__search {
@@ -2053,6 +2057,10 @@ $tableCellPadding: $tableCellPaddingTop $tableCellPaddingRight $tableCellPadding
     display: flex;
     align-items: center;
     gap: var(--scale-size-8);
+
+    &:empty {
+      display: none;
+    }
   }
 
   // TODO: improve the name of this css selector