grid filter

lib/ui/css/grid.scss

@@ -8,7 +8,7 @@
     overflow: visible;
 
     & {
-        --hover-bg-color: lightyellow;
+        --cell-hover-bg-color: lightyellow;
         --header-border-color: #adaba9;
         --header-bg-color: #fafafa;
         --header-fore-color: #000;
@@ -46,6 +46,8 @@
         --header-filter-padding: 4px 26px 4px 8px;
         --spacing-s: 4px;
         --spacing-cell: 6px 4px 6px 8px;
+        --filter-line-height: 30px;
+        --filter-item-padding: 0 4px;
     }
 
     @include outline();
@@ -369,7 +371,7 @@
             position: absolute;
             line-height: var(--line-height);
             padding: var(--spacing-cell);
-            background-color: var(--hover-bg-color);
+            background-color: var(--cell-hover-bg-color);
             white-space: pre;
             display: flex;
             align-items: center;
@@ -449,12 +451,72 @@
                 cursor: text;
             }
         }
+
+        >.filter-item-list {
+            flex: 1 1 auto;
+            overflow-y: auto;
+            overflow-x: hidden;
+            position: relative;
+            user-select: none;
+            @include scrollbar();
+
+            >.filter-content {
+                position: absolute;
+                width: 100%;
+            }
+
+            .filter-item {
+                width: 100%;
+                white-space: nowrap;
+                overflow: hidden;
+                text-overflow: ellipsis;
+                box-sizing: border-box;
+                padding: var(--filter-item-padding);
+
+                &:hover {
+                    background-color: var(--hover-bg-color);
+                }
+
+                .ui-check-wrapper {
+                    height: var(--filter-line-height);
+                    display: flex;
+
+                    .ui-check-inner+* {
+                        font-size: var(--font-smaller-size);
+                    }
+                }
+            }
+        }
+
+        >.filter-function {
+            display: flex;
+            justify-content: flex-end;
+            padding: 4px;
+
+            >button {
+                box-sizing: border-box;
+                margin-right: 10px;
+                min-width: 40px;
+                height: var(--filter-line-height);
+                border: none;
+                background-color: transparent;
+                cursor: pointer;
+                border-radius: 0;
+                transition: background-color .12s ease;
+
+                @include outline();
+
+                &:hover {
+                    background-color: var(--hover-bg-color);
+                }
+            }
+        }
     }
 }
 
 @media (prefers-color-scheme: dark) {
     .ui-grid {
-        --hover-bg-color: yellow;
+        --cell-hover-bg-color: yellow;
         --header-border-color: #525456;
         --header-bg-color: #050505;
         --header-fore-color: #fff;