feat: new classes for datatables and some css updates #260

development/issues/open/260.html

@@ -41,7 +41,7 @@
                     },
                     {
                         "id": 3,
-                        "name": "Max Mustermann",
+                        "name": "Max Mustermannasdfjasdklöfjasdklöfjöasdklfjöasdkljfköasldjfklöasdjfklöasdjfklöasdjfkölasdjfklöasdköflasdjlöfkjasdklöfjasdlöfkjasdklöfjasdklöfjklasdjfklö",
                         "street": "Example Road 3",
                         "city": "Hamburg",
                         "zipcode": "20095",
@@ -54,7 +54,7 @@
         </script>
     </monster-datasource-dom>
 
-    <div style="width:400px" class="">
+    <div style="width:400px;margin-bottom:20px" class="">
     <monster-button-bar>
         <monster-button>click 1</monster-button>
         <monster-button>click 2</monster-button>
@@ -73,8 +73,8 @@
     <monster-datatable data-monster-datasource-selector="#myDataSourceID">
         <template id="row">
             <div data-monster-mode="fixed" data-monster-grid-template="1.2rem" data-monster-head="id"
-                 data-monster-replace="path:row.id"></div>
-            <div data-monster-grid-template="auto" data-monster-head="name" data-monster-replace="path:row.name"></div>
+                 data-monster-replace="path:row.id" ></div>
+            <div data-monster-grid-template="auto" class="auto" data-monster-head="name" data-monster-replace="path:row.name"></div>
             <div data-monster-grid-template="3fr" data-monster-head="street"
                  data-monster-replace="path:row.street"></div>
             <div data-monster-align="end" class="end" data-monster-head="city"
@@ -83,8 +83,8 @@
             <div data-monster-mode="hidden" data-monster-head="country" data-monster-replace="path:row.country"></div>
             <div data-monster-mode="hidden" data-monster-head="phone" data-monster-replace="path:row.phone"
                  class="monospace"></div>
-            <div data-monster-mode="hidden" data-monster-head="email" data-monster-replace="path:row.email"></div>
-            <div data-monster-mode="fixed" data-monster-head="" style="overflow:visible">
+            <div data-monster-mode="hidden" class="" data-monster-head="email" data-monster-replace="path:row.email"></div>
+            <div data-monster-mode="fixed" class="visible" data-monster-head="">
                 <monster-button-bar>
                     <monster-button>click 1</monster-button>
                     <monster-button>click 2</monster-button>

source/components/datatable/datatable.mjs

@@ -118,6 +118,7 @@ const columnBarElementSymbol = Symbol("columnBarElement");
  * @example /examples/components/datatable/alignment
  * @example /examples/components/datatable/row-mode
  * @example /examples/components/datatable/grid-template
+ * @example /examples/components/datatable/overview-class
  *
  * @copyright schukai GmbH
  * @summary A beautiful and highly customizable data table. It can be used to display data from a data source.

source/components/datatable/style/datatable.pcss

@@ -34,9 +34,11 @@
 }
 
 [data-monster-role="table-container"] {
-    display: block;
+    display: flex;
+    flex-direction: column;
     width: 100%;
     overflow-x: auto;
+    overflow-y: visible;
     padding: 20px;
     box-sizing: border-box;
     min-width: fit-content;
@@ -96,10 +98,32 @@
         &.center {
             justify-content: center;
         }
+        
+        &.monospace {
+            font-family: var(--monster-font-family-monospace);
+        }
+        
+        &.ellipsis {
+            overflow: hidden;
+            white-space: nowrap;
+            text-overflow: ellipsis;
+        }
 
-        /* &.hidden, &[data-monster-mode=hidden] {
-             display: none;
-         }*/
+        &.wrap {
+            white-space: normal;
+            word-wrap: break-word;
+        }
+
+        &.auto {
+            overflow: auto;
+            white-space: nowrap;
+            scrollbar-width: thin;
+            scrollbar-color: var(--monster-color-primary-1) var(--monster-bg-color-primary-1);
+        }
+        
+        &.visible {
+            overflow: visible;
+        }
 
         & input[type=checkbox] {
             accent-color: var(--monster-bg-color-primary-1);

source/components/form/style/select.pcss

@@ -16,7 +16,7 @@
     width: 100%;
     overflow: auto;
 
-    scrollbar-color: var(--monster-color-primary-1) var(--monster-color-primary-3);
+    scrollbar-color: var(--monster-color-primary-1) var(--monster-bg-color-primary-1);
     scrollbar-width: thin;
 
 }
@@ -231,7 +231,7 @@ div[data-monster-role=selection] {
     display: flex;
     flex-direction: column;
     flex-grow: 1;
-    scrollbar-color: var(--monster-color-primary-1) var(--monster-color-primary-3);
+    scrollbar-color: var(--monster-color-primary-1) var(--monster-bg-color-primary-1);
     scrollbar-width: thin;    
     
 }