enh: Add configuration to disable container popup

examples/reference/widgets/Tabulator.ipynb

@@ -32,6 +32,7 @@
     "* **`aggregators`** (`dict`): A dictionary mapping from index name to an aggregator to be used for `hierarchical` multi-indexes (valid aggregators include 'min', 'max', 'mean' and 'sum'). If separate aggregators for different columns are required the dictionary may be nested as `{index_name: {column_name: aggregator}}`\n",
     "* **`buttons`** (`dict`): A dictionary of buttons to add to the table mapping from column name to the HTML contents of the button cell, e.g. `{'print': '<i class=\"fa fa-print\"></i>'}`. Buttons are added after all data columns.\n",
     "* **`configuration`** (`dict`): A dictionary mapping used to specify *Tabulator* options not explicitly exposed by Panel.\n",
+    "* **`container_popup`** (`boolean`): If True (default), popups will appear within the table container, otherwise popups will be appended to the body element of the DOM.\n",
     "* **`editors`** (`dict`):  A dictionary mapping from column name to a bokeh `CellEditor` instance or *Tabulator* editor specification.\n",
     "* **`embed_content`** (`boolean`): Whether to embed the `row_content` or to dynamically fetch it when a row is expanded.\n",
     "* **`expanded`** (`list`): The currently expanded rows as a list of integer indexes.\n",

panel/models/tabulator.py

@@ -169,6 +169,8 @@ class DataTabulator(HTMLBox):
 
     theme_classes = List(String)
 
+    container_popup  = Bool(True)
+
     __css_raw__ = CSS_URLS
 
     @classproperty

panel/models/tabulator.ts

@@ -824,7 +824,7 @@ export class DataTabulatorView extends HTMLBoxView {
       paginationMode: this.model.pagination,
       paginationSize: this.model.page_size || 20,
       paginationInitialPage: 1,
-      popupContainer: this.container,
+      popupContainer: this.model.container_popup && this.container,
       groupBy: this.groupBy,
       frozenRows: (row: any) => {
         return (this.model.frozen_rows.length > 0) ? this.model.frozen_rows.includes(row._row.data._index) : false
@@ -1153,9 +1153,11 @@ export class DataTabulatorView extends HTMLBoxView {
       }
       columns.push(button_column)
     }
-    // We insert an empty last column to ensure select editor is rendered in correct position
-    // see: https://github.com/holoviz/panel/issues/7295
-    columns.push({width: 1, maxWidth: 1, minWidth: 1, resizable: false, cssClass: "empty", sorter: null})
+    if (this.model.container_popup) {
+      // We insert an empty last column to ensure select editor is rendered in correct position
+      // see: https://github.com/holoviz/panel/issues/7295
+      columns.push({width: 1, maxWidth: 1, minWidth: 1, resizable: false, cssClass: "empty", sorter: null})
+    }
     return columns
   }
 
@@ -1556,6 +1558,7 @@ export namespace DataTabulator {
     sorters: p.Property<any[]>
     cell_styles: p.Property<any>
     theme_classes: p.Property<string[]>
+    container_popup: p.Property<boolean>
   }
 }
 
@@ -1602,6 +1605,7 @@ export class DataTabulator extends HTMLBox {
       sorters:        [ List(Any),              [] ],
       cell_styles:    [ Any,                     {} ],
       theme_classes:  [ List(Str),           [] ],
+      container_popup: [ Bool, true ],
     }))
   }
 }

panel/widgets/tables.py

@@ -1171,6 +1171,10 @@ class Tabulator(BaseTable):
         Dictionary mapping from column name to a HTML element
         to use as the button icon.""")
 
+    container_popup = param.Boolean(default=True, doc="""
+        If True, popups will appear within the table container, otherwise
+        popups will be appended to the body element of the DOM.""")
+
     expanded = param.List(default=[], nested_refs=True, doc="""
         List of expanded rows, only applicable if a row_content function
         has been defined.""")