From ab1f66ad3b240e56bf537296d3a5ca16a86483cc Mon Sep 17 00:00:00 2001
From: Philipp Rudiger <prudiger@anaconda.com>
Date: Fri, 10 May 2024 13:24:12 +0200
Subject: [PATCH] Make Tabulator resize handling more robust

---
 panel/models/tabulator.ts | 19 ++++++++++++++++++-
 1 file changed, 18 insertions(+), 1 deletion(-)

diff --git a/panel/models/tabulator.ts b/panel/models/tabulator.ts
index 89bb0cc6f1..89ebd974c8 100644
--- a/panel/models/tabulator.ts
+++ b/panel/models/tabulator.ts
@@ -308,6 +308,7 @@ export class DataTabulatorView extends HTMLBoxView {
 
   tabulator: any
   columns: Map<string, any> = new Map()
+  container: HTMLDivElement | null = null
   _tabulator_cell_updating: boolean=false
   _updating_page: boolean = false
   _updating_sort: boolean = false
@@ -317,11 +318,14 @@ export class DataTabulatorView extends HTMLBoxView {
   _lastHorizontalScrollbarLeftPosition: number = 0
   _applied_styles: boolean = false
   _building: boolean = false
+  _debounced_redraw: any = null
   _restore_scroll: boolean = false
+  _size: (number | null)[] = [null, null]
 
   override connect_signals(): void {
     super.connect_signals()
 
+    this._debounced_redraw = debounce(() => this._resize_redraw(), 20, false)
     const {
       configuration, layout, columns, groupby, visible, download,
       children, expanded, cell_styles, hidden_columns, page_size,
@@ -467,7 +471,19 @@ export class DataTabulatorView extends HTMLBoxView {
 
   override after_resize(): void {
     super.after_resize()
-    this.redraw(false, true)
+    this._debounced_redraw()
+  }
+
+  _resize_redraw(): void {
+    if (this._initializing || !this.container || this._building) {
+      return
+    }
+    const width = this.container.clientWidth
+    const height = this.container.clientHeight
+    if (!width || !height) {
+      return
+    }
+    this.redraw(true, true)
   }
 
   setCSSClasses(el: HTMLDivElement): void {
@@ -485,6 +501,7 @@ export class DataTabulatorView extends HTMLBoxView {
     this._initializing = true
     const container = div({style: "display: contents;"})
     const el = div({style: "width: 100%; height: 100%; visibility: hidden;"})
+    this.container = el
     this.setCSSClasses(el)
     container.appendChild(el)
     this.shadow_el.appendChild(container)