[working] add grid filter

lib/ui/css/grid.scss

@@ -23,6 +23,9 @@
         --row-selected-bg-color: #e6f2fb;
         --text-disabled-color: gray;
 
+        --filter-shadow: 0 3px 6px -4px rgba(0, 0, 0, .12), 0 6px 16px 0 rgba(0, 0, 0, .08), 0 9px 28px 8px rgba(0, 0, 0, .05);
+        --filter-transition: transform .12s ease, opacity .24s ease;
+
         --row-height: 36px;
         --header-line-height: 26px;
         --text-indent: 8px;
@@ -31,6 +34,7 @@
         --loading-border-radius: 20px;
 
         --arrow-size: 4px;
+        --filter-size: 10px;
         --split-width: 8px;
         --dragger-size: 20px;
         --dragger-opacity: .6;
@@ -39,6 +43,7 @@
         --dragger-cursor-opacity: .3;
 
         --header-padding: 4px 12px 4px 8px;
+        --header-filter-padding: 4px 26px 4px 8px;
         --spacing-s: 4px;
         --spacing-cell: 6px 4px 6px 8px;
     }
@@ -93,6 +98,8 @@
 
                     >span {
                         overflow: hidden;
+                        white-space: nowrap;
+                        text-overflow: ellipsis;
                     }
                 }
 
@@ -119,6 +126,36 @@
                     }
                 }
 
+                >.filter {
+                    width: var(--filter-size);
+                    height: var(--filter-size);
+                    top: 50%;
+                    margin-top: calc(0px - var(--filter-size) / 2);
+                    right: calc(var(--arrow-size) * 2 + 4px);
+                    position: absolute;
+                    display: flex;
+
+                    >svg {
+                        width: 100%;
+                        height: 100%;
+                        fill: var(--color);
+                        opacity: .2;
+                        transition: opacity .12s ease;
+
+                        &:hover {
+                            opacity: .8;
+                        }
+                    }
+
+                    &.hover>svg {
+                        opacity: .8;
+                    }
+
+                    &.active>svg {
+                        opacity: 1;
+                    }
+                }
+
                 >.spliter {
                     position: absolute;
                     height: 100%;
@@ -183,6 +220,10 @@
                         border-right: var(--dragger-cursor-size) solid transparent;
                     }
                 }
+
+                &.header-filter>div {
+                    padding: var(--header-filter-padding);
+                }
             }
         }
     }
@@ -367,6 +408,48 @@
             }
         }
     }
+
+    >.filter-panel {
+        position: absolute;
+        width: 200px;
+        height: 300px;
+        box-shadow: var(--filter-shadow);
+        transition: var(--filter-transition);
+        background-color: var(--bg-color);
+        transform: scaleY(0);
+        transform-origin: top;
+        opacity: 0;
+        display: flex;
+        flex-direction: column;
+
+        &.active {
+            transform: scaleY(1);
+            opacity: 1;
+        }
+
+        >.filter-search-holder {
+            position: relative;
+            margin: 8px 8px 4px;
+
+            >.filter-search-box {
+                box-sizing: border-box;
+                text-indent: 16px;
+                width: 100%;
+                font-size: var(--font-smaller-size);
+                line-height: var(--line-height);
+            }
+
+            >svg {
+                position: absolute;
+                width: 12px;
+                height: 12px;
+                top: calc(50% - 6px);
+                left: 4px;
+                fill: var(--color);
+                cursor: text;
+            }
+        }
+    }
 }
 
 @media (prefers-color-scheme: dark) {