From e9e8c4c6a27686c48ab90daeeb9902dc3f21cc95 Mon Sep 17 00:00:00 2001 From: Philipp Rudiger Date: Tue, 13 May 2025 10:49:40 +0200 Subject: [PATCH 1/4] Fix logic for computing Tabulator page size automatically --- panel/models/tabulator.ts | 69 +++++++++++++++++++++++++-------------- 1 file changed, 44 insertions(+), 25 deletions(-) diff --git a/panel/models/tabulator.ts b/panel/models/tabulator.ts index 673eb45eeb..f96823e554 100644 --- a/panel/models/tabulator.ts +++ b/panel/models/tabulator.ts @@ -375,6 +375,7 @@ export class DataTabulatorView extends HTMLBoxView { _updating_page: boolean = false _updating_expanded: boolean = false _updating_sort: boolean = false + _updating_page_size: boolean = false _selection_updating: boolean = false _last_selected_row: any = null _initializing: boolean @@ -387,6 +388,7 @@ export class DataTabulatorView extends HTMLBoxView { _restore_scroll: boolean | "horizontal" | "vertical" = false _updating_scroll: boolean = false _is_scrolling: boolean = false + _automatic_page_size: boolean = false override connect_signals(): void { super.connect_signals() @@ -569,6 +571,7 @@ export class DataTabulatorView extends HTMLBoxView { } this.redraw(true, true) this.restore_scroll() + this.recompute_page_size() } override stylesheets(): StyleSheetLike[] { @@ -707,41 +710,54 @@ export class DataTabulatorView extends HTMLBoxView { } if (this.model.pagination) { - if (this.model.page_size == null) { - const table = this.shadow_el.querySelector(".tabulator-table") - if (table != null && holder != null) { - const table_height = holder.clientHeight - let height = 0 - let page_size = null - const heights = [] - for (let i = 0; i table_height) { - page_size = i - break - } - } - if (height < table_height) { - page_size = table.children.length - const remaining = table_height - height - page_size += Math.floor(remaining / Math.min(...heights)) - } - this.model.page_size = Math.max(page_size || 1, 1) - } - } this.setMaxPage() this.tabulator.setPage(this.model.page) } this._building = false + console.log("built") schedule_when(() => { const initializing = this._initializing this._initializing = false if (initializing) { this._resize_redraw() } - }, () => this.root.has_finished()) + }, () => this.root.has_finished() && [...this._initialized_stylesheets.values()].every(v => v)) + } + + recompute_page_size(): void { + if (!this.model.pagination || this.model.page_size !== null || this._automatic_page_size) { + return + } + this._automatic_page_size = true + const holder = this.shadow_el.querySelector(".tabulator-tableholder") + const table = this.shadow_el.querySelector(".tabulator-table") + console.log(table?.clientHeight, holder?.clientHeight) + if (table != null && holder != null) { + const table_height = holder.clientHeight + let height = 0 + let page_size = null + const heights = [] + for (let i = 0; i table_height) { + page_size = i-1 + break + } + } + if (height < table_height) { + page_size = table.children.length + const remaining = table_height - height + page_size += Math.floor(remaining / Math.min(...heights))-2 + } + this._updating_page_size = true + try { + this.model.page_size = Math.max(page_size || 1, 1) + } finally { + this._updating_page_size = false + } + } } requestPage(page: number, sorters: any[]): Promise { @@ -1315,6 +1331,9 @@ export class DataTabulatorView extends HTMLBoxView { } setPageSize(): void { + if (!this._updating_page_size) { + this._automatic_page_size = false + } this.tabulator.setPageSize(this.model.page_size) if (this.model.pagination === "local") { this.setStyles() From f0555944ec4212f1821281415ad7d88742b5120d Mon Sep 17 00:00:00 2001 From: Philipp Rudiger Date: Tue, 13 May 2025 11:02:22 +0200 Subject: [PATCH 2/4] Remove leftover console.log --- panel/models/tabulator.ts | 2 -- 1 file changed, 2 deletions(-) diff --git a/panel/models/tabulator.ts b/panel/models/tabulator.ts index f96823e554..b81cc37438 100644 --- a/panel/models/tabulator.ts +++ b/panel/models/tabulator.ts @@ -714,7 +714,6 @@ export class DataTabulatorView extends HTMLBoxView { this.tabulator.setPage(this.model.page) } this._building = false - console.log("built") schedule_when(() => { const initializing = this._initializing this._initializing = false @@ -731,7 +730,6 @@ export class DataTabulatorView extends HTMLBoxView { this._automatic_page_size = true const holder = this.shadow_el.querySelector(".tabulator-tableholder") const table = this.shadow_el.querySelector(".tabulator-table") - console.log(table?.clientHeight, holder?.clientHeight) if (table != null && holder != null) { const table_height = holder.clientHeight let height = 0 From 63003edd6865e484f136f3929c18e5fd6129f99a Mon Sep 17 00:00:00 2001 From: Philipp Rudiger Date: Tue, 13 May 2025 12:47:23 +0200 Subject: [PATCH 3/4] Tweaks --- panel/models/tabulator.ts | 11 +++++++++-- 1 file changed, 9 insertions(+), 2 deletions(-) diff --git a/panel/models/tabulator.ts b/panel/models/tabulator.ts index b81cc37438..a4494b99f8 100644 --- a/panel/models/tabulator.ts +++ b/panel/models/tabulator.ts @@ -728,6 +728,7 @@ export class DataTabulatorView extends HTMLBoxView { return } this._automatic_page_size = true + const responsive = this.model.sizing_mode && (this.model.sizing_mode.includes("height") || this.model.sizing_mode.includes("both")) const holder = this.shadow_el.querySelector(".tabulator-tableholder") const table = this.shadow_el.querySelector(".tabulator-table") if (table != null && holder != null) { @@ -740,14 +741,20 @@ export class DataTabulatorView extends HTMLBoxView { heights.push(row_height) height += row_height if (height > table_height) { - page_size = i-1 + page_size = i + if (responsive) { + page_size -= 1 + } break } } if (height < table_height) { page_size = table.children.length const remaining = table_height - height - page_size += Math.floor(remaining / Math.min(...heights))-2 + page_size += Math.floor(remaining / Math.min(...heights)) + if (responsive) { + page_size -= 2 + } } this._updating_page_size = true try { From 95b929e57e5d99c86afd574dcab729144a186479 Mon Sep 17 00:00:00 2001 From: Philipp Rudiger Date: Tue, 13 May 2025 13:58:34 +0200 Subject: [PATCH 4/4] Fix lint --- panel/models/tabulator.ts | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/panel/models/tabulator.ts b/panel/models/tabulator.ts index a4494b99f8..bde64cbff1 100644 --- a/panel/models/tabulator.ts +++ b/panel/models/tabulator.ts @@ -742,9 +742,9 @@ export class DataTabulatorView extends HTMLBoxView { height += row_height if (height > table_height) { page_size = i - if (responsive) { - page_size -= 1 - } + if (responsive) { + page_size -= 1 + } break } }