Working on ColumnsManager. Added CycleStateControl and DataGridColumnsManager.

src/myfasthtml/assets/myfasthtml.css

@@ -26,21 +26,18 @@
     width: 16px;
     min-width: 16px;
     height: 16px;
-    margin-top: auto;
 }
 
 .mf-icon-20 {
     width: 20px;
     min-width: 20px;
     height: 20px;
-    margin-top: auto;
 }
 
 .mf-icon-24 {
     width: 24px;
     min-width: 24px;
     height: 24px;
-    margin-top: auto;
 
 }
 
@@ -48,14 +45,12 @@
     width: 28px;
     min-width: 28px;
     height: 28px;
-    margin-top: auto;
 }
 
 .mf-icon-32 {
     width: 32px;
     min-width: 32px;
     height: 32px;
-    margin-top: auto;
 }
 
 /*
@@ -470,7 +465,6 @@
 
 .mf-dropdown-wrapper {
     position: relative; /* CRUCIAL for the anchor */
-    display: inline-block;
 }
 
 
@@ -478,15 +472,19 @@
     display: none;
     position: absolute;
     top: 100%;
-    left: 0px;
-    z-index: 1;
-    width: 200px;
-    border: 1px solid black;
-    padding: 10px;
+    left: 0;
+    z-index: 50;
+    min-width: 200px;
+    padding: 0.5rem;
     box-sizing: border-box;
     overflow-x: auto;
-    /*opacity: 0;*/
-    /*transition: opacity 0.2s ease-in-out;*/
+
+    /* DaisyUI styling */
+    background-color: var(--color-base-100);
+    border: 1px solid var(--color-border);
+    border-radius: var(--radius-md);
+    box-shadow: 0 4px 6px -1px color-mix(in oklab, var(--color-neutral) 20%, #0000),
+    0 2px 4px -2px color-mix(in oklab, var(--color-neutral) 20%, #0000);
 }
 
 .mf-dropdown.is-visible {
@@ -494,6 +492,36 @@
     opacity: 1;
 }
 
+/* Dropdown vertical positioning */
+.mf-dropdown-below {
+    top: 100%;
+    bottom: auto;
+}
+
+.mf-dropdown-above {
+    bottom: 100%;
+    top: auto;
+}
+
+/* Dropdown horizontal alignment */
+.mf-dropdown-left {
+    left: 0;
+    right: auto;
+    transform: none;
+}
+
+.mf-dropdown-right {
+    right: 0;
+    left: auto;
+    transform: none;
+}
+
+.mf-dropdown-center {
+    left: 50%;
+    right: auto;
+    transform: translateX(-50%);
+}
+
 /* *********************************************** */
 /* ************** TreeView Component ************* */
 /* *********************************************** */

src/myfasthtml/assets/myfasthtml.js

@@ -410,6 +410,18 @@ function getCellId(event) {
   return {cell_id: null};
 }
 
+/**
+ * Check if the click was on a dropdown button element.
+ * Used with hx-vals="js:getDropdownExtra()" for Dropdown toggle behavior.
+ *
+ * @param {MouseEvent} event - The mouse event
+ * @returns {Object} Object with is_button boolean property
+ */
+function getDropdownExtra(event) {
+  const button = event.target.closest('.mf-dropdown-btn');
+  return {is_button: button !== null};
+}
+
 /**
  * Shared utility function for triggering HTMX actions from keyboard/mouse bindings.
  * Handles dynamic hx-vals with "js:functionName()" syntax.
@@ -1498,7 +1510,6 @@ function initDataGridMouseOver(gridId) {
   }
 
   const wrapper = document.getElementById(`tw_${gridId}`);
-  const selectionModeDiv = document.getElementById(`tsm_${gridId}`);
 
   // Track hover state
   let currentHoverRow = null;
@@ -1512,6 +1523,7 @@ function initDataGridMouseOver(gridId) {
     const cell = e.target.closest('.dt2-cell');
     if (!cell) return;
 
+    const selectionModeDiv = document.getElementById(`tsm_${gridId}`);
     const selectionMode = selectionModeDiv?.getAttribute('selection-mode');
 
     if (selectionMode === 'row') {