@ninebone/datagrid 0.1.3 → 0.2.1

package/README.md

@@ -71,6 +71,11 @@ npm install @ninebone/datagrid
             ]);
         });
     </script>
+    
+```
+
+```html
+<ninelab-table show-footer="true">
 ```
 
 

package/dist/css/nine-table.css

@@ -751,6 +751,71 @@ nine-table-col-resizer-panel {
 nine-table-col-resizer-panel.active {
     display: block;
 }
+cell-tree {
+    display: flex;
+    justify-content: flex-start;
+    align-items: center;
+    width: 100%;
+    height: 100%;
+    padding-left: calc(4px + var(--tree-level, 0) * 16px);
+
+    .item {
+        display: flex;
+        align-items: center;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+    }
+
+    .tree-text {
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+        padding-left: 8px;
+    }
+
+    .icon {
+        display: inline-flex;
+        width: 0;
+        height: 12px;
+    }
+
+    .icon.node {
+        width: 4px;
+        height: 4px;
+        background-color: #ccc;
+        border-radius: 50%;
+    }
+
+    .icon.expand-on,
+    .icon.expand-off {
+        width: 12px;
+        background-repeat: no-repeat;
+        background-position: center;
+        background-size: contain;
+    }
+
+    .expand-off {
+        background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="black" viewBox="0 0 16 16"><path d="M14 1a1 1 0 0 1 1 1v12a1 1 0 0 1-1 1H2a1 1 0 0 1-1-1V2a1 1 0 0 1 1-1zM2 0a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V2a2 2 0 0 0-2-2z"/><path d="M8 4a.5.5 0 0 1 .5.5v3h3a.5.5 0 0 1 0 1h-3v3a.5.5 0 0 1-1 0v-3h-3a.5.5 0 0 1 0-1h3v-3A.5.5 0 0 1 8 4"/></svg>');
+    }
+    .expand-on {
+        background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" fill="black" viewBox="0 0 16 16"><path d="M14 1a1 1 0 0 1 1 1v12a1 1 0 0 1-1 1H2a1 1 0 0 1-1-1V2a1 1 0 0 1 1-1zM2 0a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V2a2 2 0 0 0-2-2z"/><path d="M4 8a.5.5 0 0 1 .5-.5h7a.5.5 0 0 1 0 1h-7A.5.5 0 0 1 4 8"/></svg>');
+    }
+}
+
+
+
+tr[grouping="true"] {
+    filter: brightness(99%);
+    td:not(.selected-right) {
+        border-right: none;
+    }
+}
+
+.CELL-TREE.selected-left {
+    padding-left: calc(2px + var(--tree-level, 0) * 16px);
+}
+
 
 
 nine-table-filter-button {
@@ -1740,18 +1805,29 @@ col {
     width: attr(width px);
 }
 
+
+.ng-container-left {
+    col:last-child {
+        width: 100% !important;
+    }
+}
+
 thead {
     display: table-header-group;
     position: sticky;
     top: 0;
-    z-index: 10;
+    z-index: 2;
+}
+
+thead.foot {
+    z-index: 1;
 }
 
 tfoot {
     display: table-footer-group;
     position: sticky;
     bottom: 0;
-    z-index: 10;
+    z-index: 2;
 }
 
 tbody {