Fix update_column_definition (#32)

nicegui_tabulator/core/tabulator.js

@@ -51,14 +51,21 @@ function extractEventArg(eventName, argsObject) {
   return result;
 }
 
+function onSocketConnect(fn) {
+  window.Vue.nextTick(() => {
+    const socket = window.socket;
+    socket.on("connect", fn);
+  });
+}
+
 export default {
   template: `<div></div>`,
   props: {
     options: Object,
     resource_path: String,
   },
   async mounted() {
-    await this.$nextTick(); // NOTE: wait for window.path_prefix to be set
+    await new Promise((resolve) => setTimeout(resolve, 0)); // NOTE: wait for window.path_prefix to be set
     const hasNiceGuiTabulatorTheme = document.querySelector('link.nicegui-tabulator-theme') !== null;
     if (!hasNiceGuiTabulatorTheme) {
       await Promise.all([
@@ -75,6 +82,13 @@ export default {
       }, 800);
     });
 
+    // here we need to wait for socket connection before emitting events, because some events may not be triggered at page load
+    onSocketConnect(() => {
+      this.$emit('connected');
+    })
+
+    this.$emit('connected');
+
   },
 
   methods: {

nicegui_tabulator/core/tabulator.py

@@ -63,6 +63,12 @@ def on_update_cell_slot(e):
 
         self.on("updateCellSlot", on_update_cell_slot)
 
+        def on_connected():
+            self.__deferred_task.flush()
+            self.__deferred_task.component_connected = True
+
+        self.on("connected", on_connected)
+
     @property
     def index_field(self):
         """Get the index field for the tabulator table.By default Tabulator will look for this value in the id field for the data."""

nicegui_tabulator/core/utils.py

@@ -6,16 +6,14 @@
 class DeferredTask:
     def __init__(self):
         self._tasks = []
+        self.component_connected = False
 
         async def on_client_connect(
             client: ng_client,
         ):
             await client.connected()
 
-            for task in self._tasks:
-                task()
-
-            self._tasks.clear()
+            self.flush()
 
             # Avoid events becoming ineffective due to page refresh when sharing the client.
             if not client.shared:
@@ -24,11 +22,17 @@ async def on_client_connect(
         ui.context.client.on_connect(on_client_connect)
 
     def register(self, task: Callable[..., None]):
-        if ui.context.client.has_socket_connection:
+        if ui.context.client.has_socket_connection and self.component_connected:
             task()
         else:
             self._tasks.append(task)
 
+    def flush(self):
+        for task in self._tasks:
+            task()
+
+        self._tasks.clear()
+
 
 def generate_dataframe_unique_id_column_name():
     return f"__{uuid.uuid4().hex}"

tests/test_tabulator.py

@@ -894,3 +894,24 @@ def _():
     )
 
     server_data_checker.expect_server_data(page)
+
+
+def test_table_creation_and_method_call_after_page_load(
+    browser: BrowserManager, page_path: str
+):
+    @ui.page(page_path)
+    def _():
+        df = pd.DataFrame({"index": [1, 2]})
+
+        def build_table():
+            table = tabulator.from_pandas(df).style("font-size: 75%")
+            table.update_column_definition("index", {"title": "works"})
+
+        ui.button("build table", on_click=build_table).props("no-caps")
+
+    page = browser.open(page_path)
+
+    page.get_by_text("build table").click()
+
+    body_expect = expect(page.locator("body"))
+    body_expect.to_contain_text("works")