Added draft of DataGridColumnsManager that uses Search and Dropdown

src/myfasthtml/assets/myfasthtml.css

@@ -459,7 +459,7 @@
 
 .mf-search-results {
     margin-top: 0.5rem;
-    max-height: 200px;
+    max-height: 400px;
     overflow: auto;
 }
 

src/myfasthtml/controls/DataGrid.py

@@ -14,6 +14,7 @@ from myfasthtml.controls.CycleStateControl import CycleStateControl
 from myfasthtml.controls.DataGridColumnsManager import DataGridColumnsManager
 from myfasthtml.controls.DataGridQuery import DataGridQuery, DG_QUERY_FILTER
 from myfasthtml.controls.Mouse import Mouse
+from myfasthtml.controls.Panel import Panel
 from myfasthtml.controls.datagrid_objects import DataGridColumnState, DataGridRowState, \
   DatagridSelectionState, DataGridHeaderFooterConf, DatagridEditionState
 from myfasthtml.controls.helpers import mk
@@ -138,6 +139,8 @@ class DataGrid(MultipleInstance):
     self.commands = Commands(self)
     self.init_from_dataframe(self._state.ne_df, init_state=False)  # state comes from DatagridState
     
+    self._panel = Panel(self, _id="-panel")
+    
     # add DataGridQuery
     self._datagrid_filter = DataGridQuery(self)
     self._datagrid_filter.bind_command("QueryChanged", self.commands.filter())
@@ -649,7 +652,7 @@ class DataGrid(MultipleInstance):
             self._columns_manager,
             cls="flex"),
           cls="flex items-center justify-between mb-2"),
-      self.mk_table(),
+      self._panel.set_main(self.mk_table()),
       Script(f"initDataGrid('{self._id}');"),
       Mouse(self, combinations=self._mouse_support),
       id=self._id,

src/myfasthtml/controls/DataGridColumnsManager.py

@@ -1,6 +1,8 @@
-from fasthtml.components import Div
+from fasthtml.components import *
 
 from myfasthtml.controls.Dropdown import Dropdown
+from myfasthtml.controls.Search import Search
+from myfasthtml.controls.datagrid_objects import DataGridColumnState
 from myfasthtml.controls.helpers import mk
 from myfasthtml.icons.fluent_p1 import settings16_regular
 
@@ -9,7 +11,23 @@ class DataGridColumnsManager(Dropdown):
   def __init__(self, parent, _id=None):
     super().__init__(parent, _id=_id, align="right")
     self.button = mk.icon(settings16_regular)
-    self.content = Div("DataGridColumnsManager")
+    self.content = self.create_content()
   
+  def mk_column(self, col_def: DataGridColumnState):
+    return Div(
+      Input(type="checkbox", checked=col_def.visible, cls="ml-2"),
+      Label(col_def.col_id, cls="ml-2"),
+      cls="flex mb-1",
+    )
+  
+  def create_content(self):
+    return Search(self,
+                  items_names="Columns",
+                  items=self.columns,
+                  get_attr=lambda x: x.col_id,
+                  template=self.mk_column
+                  )
+  
+  @property
   def columns(self):
     return self._parent._state.columns

src/myfasthtml/controls/DataGridsManager.py

@@ -8,7 +8,6 @@ from fasthtml.components import Div
 from myfasthtml.controls.BaseCommands import BaseCommands
 from myfasthtml.controls.DataGrid import DataGrid
 from myfasthtml.controls.FileUpload import FileUpload
-from myfasthtml.controls.Panel import Panel
 from myfasthtml.controls.TabsManager import TabsManager
 from myfasthtml.controls.TreeView import TreeView, TreeNode
 from myfasthtml.controls.helpers import mk
@@ -106,7 +105,7 @@ class DataGridsManager(MultipleInstance):
     parent_id = self._tree.ensure_path(document.namespace)
     tree_node = TreeNode(label=document.name, type="excel", parent=parent_id)
     self._tree.add_node(tree_node, parent_id=parent_id)
-    return self._mk_tree(), self._tabs_manager.change_tab_content(tab_id, document.name, Panel(self).set_main(dg))
+    return self._mk_tree(), self._tabs_manager.change_tab_content(tab_id, document.name, dg)
   
   def select_document(self, node_id):
     document_id = self._tree.get_bag(node_id)
@@ -137,9 +136,7 @@ class DataGridsManager(MultipleInstance):
     
     # Recreate the DataGrid with its saved state
     dg = DataGrid(self._tabs_manager, _id=document.datagrid_id)  # reload the state & settings
-    
+    return dg
-    # Wrap in Panel
-    return Panel(self).set_main(dg)
   
   def clear_tree(self):
     self._state.elements = []

src/myfasthtml/controls/Search.py

@@ -64,7 +64,7 @@ class Search(MultipleInstance):
     self.items = items or []
     self.filtered = self.items.copy()
     self.get_attr = get_attr or (lambda x: x)
-    self.template = template or Div
+    self.template = template or (lambda x: Div(self.get_attr(x)))
     self.commands = Commands(self)
   
   def set_items(self, items):

src/myfasthtml/core/instances.py

@@ -117,7 +117,7 @@ class BaseInstance:
       return _id
     
     if _id.startswith("-") and parent is not None:
-      return f"{parent.get_prefix()}{_id}"
+      return f"{parent.get_id()}{_id}"
     
     return _id