@holoviz/panel 0.14.4 → 1.0.0-a.2

package/dist/lib/models/tabulator.js

@@ -1,6 +1,6 @@
+var _a, _b, _c;
 import { undisplay } from "@bokehjs/core/dom";
 import { isArray } from "@bokehjs/core/util/types";
-import { HTMLBox } from "@bokehjs/models/layouts/html_box";
 import { build_views } from "@bokehjs/core/build_views";
 import { ModelEvent } from "@bokehjs/core/bokeh_events";
 import { div } from "@bokehjs/core/dom";
@@ -10,32 +10,38 @@ import { TableColumn } from "@bokehjs/models/widgets/tables";
 import { debounce } from "debounce";
 import { comm_settings } from "./comm_manager";
 import { transform_cds_to_records } from "./data";
-import { PanelHTMLBoxView, set_size } from "./layout";
+import { HTMLBox, HTMLBoxView } from "./layout";
 export class TableEditEvent extends ModelEvent {
     constructor(column, row, pre) {
         super();
         this.column = column;
         this.row = row;
         this.pre = pre;
-        this.event_name = "table-edit";
     }
-    _to_json() {
+    get event_values() {
         return { model: this.origin, column: this.column, row: this.row, pre: this.pre };
     }
 }
+_a = TableEditEvent;
 TableEditEvent.__name__ = "TableEditEvent";
+(() => {
+    _a.prototype.event_name = "table-edit";
+})();
 export class CellClickEvent extends ModelEvent {
     constructor(column, row) {
         super();
         this.column = column;
         this.row = row;
-        this.event_name = "cell-click";
     }
-    _to_json() {
+    get event_values() {
         return { model: this.origin, column: this.column, row: this.row };
     }
 }
+_b = CellClickEvent;
 CellClickEvent.__name__ = "CellClickEvent";
+(() => {
+    _b.prototype.event_name = "cell-click";
+})();
 function find_group(key, value, records) {
     for (const record of records) {
         if (record[key] == value)
@@ -234,14 +240,13 @@ const datetimeEditor = function (cell, onRendered, success, cancel) {
     });
     return input;
 };
-export class DataTabulatorView extends PanelHTMLBoxView {
+export class DataTabulatorView extends HTMLBoxView {
     constructor() {
         super(...arguments);
         this.columns = new Map();
         this._tabulator_cell_updating = false;
         this._updating_page = true;
         this._updating_sort = false;
-        this._relayouting = false;
         this._selection_updating = false;
         this._lastVerticalScrollbarTopPosition = 0;
         this._applied_styles = false;
@@ -250,13 +255,12 @@ export class DataTabulatorView extends PanelHTMLBoxView {
     connect_signals() {
         super.connect_signals();
         const p = this.model.properties;
-        const { configuration, layout, columns, theme, groupby } = p;
+        const { configuration, layout, columns, groupby } = p;
         this.on_change([configuration, layout, groupby], debounce(() => this.invalidate_render(), 20, false));
         this.on_change([columns], () => {
             this.tabulator.setColumns(this.getColumns());
             this.setHidden();
         });
-        this.on_change([theme], () => this.setCSS());
         this.connect(p.download.change, () => {
             const ftype = this.model.filename.endsWith('.json') ? "json" : "csv";
             this.tabulator.download(ftype, this.model.filename);
@@ -278,7 +282,7 @@ export class DataTabulatorView extends PanelHTMLBoxView {
                 }
             }
         });
-        this.connect(p.styles.change, () => {
+        this.connect(p.cell_styles.change, () => {
             if (this._applied_styles)
                 this.tabulator.redraw(true);
             this.setStyles();
@@ -307,6 +311,17 @@ export class DataTabulatorView extends PanelHTMLBoxView {
         this.connect(this.model.source.selected.change, () => this.setSelection());
         this.connect(this.model.source.selected.properties.indices.change, () => this.setSelection());
     }
+    get groupBy() {
+        const groupby = (data) => {
+            const groups = [];
+            for (const g of this.model.groupby) {
+                const group = g + ': ' + data[g];
+                groups.push(group);
+            }
+            return groups.join(', ');
+        };
+        return this.model.groupby.length ? groupby : false;
+    }
     get sorters() {
         const sorters = [];
         if (this.model.sorters.length)
@@ -322,38 +337,34 @@ export class DataTabulatorView extends PanelHTMLBoxView {
         this.tabulator.destroy();
         this.tabulator = null;
         this.render();
-        this.relayout();
     }
     redraw() {
-        if (!this._building) {
-            if (this.tabulator.columnManager.element != null) {
-                this.tabulator.columnManager.redraw(true);
-            }
-            if (this.tabulator.rowManager.renderer != null) {
-                this.tabulator.rowManager.redraw(true);
-                this.setStyles();
-            }
+        if (this._building)
+            return;
+        if (this.tabulator.columnManager.element != null) {
+            this.tabulator.columnManager.redraw(true);
+        }
+        if (this.tabulator.rowManager.renderer != null) {
+            this.tabulator.rowManager.redraw(true);
+            this.setStyles();
         }
     }
     after_layout() {
         super.after_layout();
-        if (this.tabulator != null && (!this._relayouting || this._initializing))
+        if (this.tabulator != null && this._initializing)
             this.redraw();
+        this._initializing = false;
     }
     render() {
         super.render();
-        const wait = this.setCSS();
-        if (wait)
-            return;
         this._initializing = true;
-        const container = div({ class: "pnx-tabulator" });
-        set_size(container, this.model);
+        const container = div({ style: "display: contents;" });
+        const el = div({ class: "pnx-tabulator", style: "width: 100%; height: 100%" });
+        container.appendChild(el);
+        this.shadow_el.appendChild(container);
         let configuration = this.getConfiguration();
-        this.tabulator = new Tabulator(container, configuration);
+        this.tabulator = new Tabulator(el, configuration);
         this.init_callbacks();
-        this.renderChildren(true);
-        this.setHidden();
-        this.el.appendChild(container);
     }
     tableInit() {
         this._building = true;
@@ -370,14 +381,10 @@ export class DataTabulatorView extends PanelHTMLBoxView {
         // Initialization
         this.tabulator.on("tableBuilding", () => this.tableInit());
         this.tabulator.on("tableBuilt", () => this.tableBuilt());
-        // Disable frozenColumns during rendering (see https://github.com/olifolkerd/tabulator/issues/3530)
-        this.tabulator.on("dataLoading", () => {
-            this.tabulator.modules.frozenColumns.active = false;
-        });
         // Rendering callbacks
         this.tabulator.on("selectableCheck", (row) => {
             const selectable = this.model.selectable_rows;
-            return (selectable == null) || (selectable.indexOf(row._row.data._index) >= 0);
+            return (selectable == null) || selectable.includes(row._row.data._index);
         });
         this.tabulator.on("tooltips", (cell) => {
             return cell.getColumn().getField() + ": " + cell.getValue();
@@ -420,41 +427,13 @@ export class DataTabulatorView extends PanelHTMLBoxView {
     }
     tableBuilt() {
         this._building = false;
-        this.setHidden();
         this.setSelection();
-        // For remote pagination initialize on tableBuilt
-        this.setMaxPage();
-        this.tabulator.setPage(this.model.page);
-        this.setStyles();
         this.renderChildren();
-        this.setGroupBy();
-        this.setFrozen();
-        this.tabulator.modules.frozenColumns.active = true;
-        this.tabulator.modules.frozenColumns.layout();
-        this._initializing = false;
-    }
-    relayout() {
-        if (this._relayouting)
-            return;
-        this._relayouting = true;
-        if (this.tabulator.rowManager.renderer) {
-            this.tabulator.rowManager.adjustTableSize();
-        }
-        this.update_layout();
-        this.compute_layout();
-        if (this.root !== this) {
-            this.invalidate_layout();
-            const parent = this.root._parent;
-            if (parent != null && parent.relayout != null)
-                parent.relayout();
-        }
-        else if (this._parent != null) { // HACK: Support ReactiveHTML
-            if (this._parent.relayout != null)
-                this._parent.relayout();
-            else
-                this._parent.invalidate_layout();
+        this.setStyles();
+        if (this.model.pagination) {
+            this.setMaxPage();
+            this.tabulator.setPage(this.model.page);
         }
-        this._relayouting = false;
     }
     requestPage(page, sorters) {
         return new Promise((resolve, reject) => {
@@ -513,7 +492,11 @@ export class DataTabulatorView extends PanelHTMLBoxView {
             pagination: this.model.pagination != null,
             paginationMode: this.model.pagination,
             paginationSize: this.model.page_size,
-            paginationInitialPage: 1
+            paginationInitialPage: 1,
+            groupBy: this.groupBy,
+            frozenRows: (row) => {
+                return this.model.frozen_rows.length ? this.model.frozen_rows.includes(row._row.data._index) : false;
+            }
         };
         if (this.model.pagination === "remote") {
             configuration['ajaxURL'] = "http://panel.pyviz.org";
@@ -532,12 +515,12 @@ export class DataTabulatorView extends PanelHTMLBoxView {
             "data": data,
         };
     }
-    renderChildren(initializing = false) {
+    renderChildren() {
         new Promise(async (resolve) => {
             const children = [];
             for (const idx of this.model.expanded) {
-                if (idx in this.model.children)
-                    children.push(this.model.children[idx]);
+                if (this.model.children.has(idx))
+                    children.push(this.model.children.get(idx));
             }
             await build_views(this._child_views, children, { parent: null });
             resolve(null);
@@ -546,15 +529,13 @@ export class DataTabulatorView extends PanelHTMLBoxView {
                 const row = this.tabulator.getRow(r);
                 this._render_row(row);
             }
-            if ((!this.model.expanded.length) && (!initializing))
-                setTimeout(() => this.relayout(), 20);
         });
     }
     _render_row(row) {
-        const index = row._row.data._index;
-        if (this.model.expanded.indexOf(index) < 0 || !(index in this.model.children))
+        const index = row._row?.data._index;
+        if (!this.model.expanded.includes(index) || !this.model.children.has(index))
             return;
-        const model = this.model.children[index];
+        const model = this.model.children.get(index);
         const view = this._child_views.get(model);
         if (view == null)
             return;
@@ -574,8 +555,8 @@ export class DataTabulatorView extends PanelHTMLBoxView {
             const neg_margin = "-" + rowEl.style.paddingLeft;
             viewEl = div({ style: "background-color: " + bg + "; margin-left:" + neg_margin });
         }
-        row.getElement().appendChild(viewEl);
-        view.renderTo(viewEl);
+        rowEl.appendChild(viewEl);
+        view.render_to(viewEl);
     }
     _expand_render(cell) {
         const index = cell._cell.row.data._index;
@@ -620,7 +601,7 @@ export class DataTabulatorView extends PanelHTMLBoxView {
         this.columns = new Map();
         const config_columns = this.model.configuration?.columns;
         let columns = [];
-        columns.push({ field: '_index', frozen: true });
+        columns.push({ field: '_index', frozen: true, visible: false });
         if (config_columns != null) {
             for (const column of config_columns)
                 if (column.columns != null) {
@@ -698,6 +679,9 @@ export class DataTabulatorView extends PanelHTMLBoxView {
             if (tab_column.sorter == 'timestamp') {
                 tab_column.sorter = timestampSorter;
             }
+            if (tab_column.sorter === undefined) {
+                tab_column.sorter = "string";
+            }
             const editor = column.editor;
             const ctype = editor.type;
             if (tab_column.editor != null) {
@@ -741,6 +725,7 @@ export class DataTabulatorView extends PanelHTMLBoxView {
                     this.renderEditor(column, cell, onRendered, success, cancel);
                 };
             }
+            tab_column.visible = (tab_column.visible != false && !this.model.hidden_columns.includes(column.field));
             tab_column.editable = () => (this.model.editable && (editor.default_view != null));
             if (tab_column.headerFilter) {
                 if ((typeof tab_column.headerFilter) === 'boolean' &&
@@ -755,7 +740,8 @@ export class DataTabulatorView extends PanelHTMLBoxView {
             }
             tab_column.cellClick = (_, cell) => {
                 const index = cell.getData()._index;
-                this.model.trigger_event(new CellClickEvent(column.field, index));
+                const event = new CellClickEvent(column.field, index);
+                this.model.trigger_event(event);
             };
             if (config_columns == null)
                 columns.push(tab_column);
@@ -769,7 +755,8 @@ export class DataTabulatorView extends PanelHTMLBoxView {
                 hozAlign: "center",
                 cellClick: (_, cell) => {
                     const index = cell.getData()._index;
-                    this.model.trigger_event(new CellClickEvent(col, index));
+                    const event = new CellClickEvent(col, index);
+                    this.model.trigger_event(event);
                 }
             };
             columns.push(button_column);
@@ -802,9 +789,8 @@ export class DataTabulatorView extends PanelHTMLBoxView {
         const data = this.getData();
         if (this.model.pagination != null)
             this.tabulator.rowManager.setData(data, true, false);
-        else {
+        else
             this.tabulator.setData(data);
-        }
         this.postUpdate();
     }
     addData() {
@@ -817,11 +803,7 @@ export class DataTabulatorView extends PanelHTMLBoxView {
             this.tabulator.scrollToRow(start, "top", false);
     }
     postUpdate() {
-        if (!this.model.pagination)
-            this.setFrozen();
         this.setSelection();
-        if (this.model.height == null && this.model.pagination == null)
-            this.relayout();
     }
     updateOrAddData() {
         // To avoid double updating the tabulator data
@@ -832,8 +814,9 @@ export class DataTabulatorView extends PanelHTMLBoxView {
         this.postUpdate();
     }
     setFrozen() {
-        for (const row of this.model.frozen_rows)
+        for (const row of this.model.frozen_rows) {
             this.tabulator.getRow(row).freeze();
+        }
     }
     updatePage(pageno) {
         if (this.model.pagination === 'local' && this.model.page !== pageno) {
@@ -843,92 +826,26 @@ export class DataTabulatorView extends PanelHTMLBoxView {
         }
     }
     setGroupBy() {
-        if (this.model.groupby.length == 0) {
-            this.tabulator.setGroupBy(false);
-            return;
-        }
-        const groupby = (data) => {
-            const groups = [];
-            for (const g of this.model.groupby) {
-                const group = g + ': ' + data[g];
-                groups.push(group);
-            }
-            return groups.join(', ');
-        };
-        // Need to call it twice, see https://github.com/olifolkerd/tabulator/issues/3666
-        this.tabulator.setGroupBy(groupby);
-        this.tabulator.setGroupBy(groupby);
+        this.tabulator.setGroupBy(this.groupBy);
     }
     setSorters() {
         if (this._updating_sort)
             return;
         this.tabulator.setSort(this.sorters);
     }
-    setCSS() {
-        let theme;
-        let theme_;
-        if (this.model.theme == "default") {
-            theme = "tabulator";
-        }
-        else {
-            if (this.model.theme == "bootstrap") {
-                theme_ = "bootstrap3";
-            }
-            else if (this.model.theme == "semantic-ui") {
-                theme_ = "semanticui";
-            }
-            else {
-                theme_ = this.model.theme;
-            }
-            theme = "tabulator_" + theme_;
-        }
-        const css = this.model.theme_url + theme + ".min.css";
-        let old_node = null;
-        const links = document.getElementsByTagName("link");
-        const dist_index = this.model.theme_url.indexOf('dist/');
-        const start_url = this.model.theme_url.slice(0, dist_index);
-        for (const link of links) {
-            if (link.href.indexOf(start_url) >= 0) {
-                old_node = link;
-                break;
-            }
-        }
-        if (old_node != null) {
-            if (old_node.href.endsWith(css))
-                return false;
-            else {
-                old_node.href = css;
-                setTimeout(() => this.render(), 100);
-                return true;
-            }
-        }
-        let parent_node = document.getElementsByTagName("head")[0];
-        const css_node = document.createElement('link');
-        css_node.type = 'text/css';
-        css_node.rel = 'stylesheet';
-        css_node.media = 'screen';
-        css_node.href = css;
-        css_node.onload = () => {
-            if (!this._building) {
-                this.render();
-                this.relayout();
-            }
-        };
-        parent_node.appendChild(css_node);
-        return true;
-    }
     setStyles() {
-        if (this.tabulator == null || this.tabulator.getDataCount() == 0)
+        const style_data = this.model.cell_styles.data;
+        if (this.tabulator == null || this.tabulator.getDataCount() == 0 || !style_data.size)
             return;
         this._applied_styles = false;
-        for (const r in this.model.styles.data) {
-            const row_style = this.model.styles.data[r];
+        for (const r of style_data.keys()) {
+            const row_style = style_data.get(r);
             const row = this.tabulator.getRow(r);
             if (!row)
                 continue;
             const cells = row._row.cells;
-            for (const c in row_style) {
-                const style = row_style[c];
+            for (const c of row_style.keys()) {
+                const style = row_style.get(c);
                 const cell = cells[c];
                 if (cell == null || !style.length)
                     continue;
@@ -950,7 +867,7 @@ export class DataTabulatorView extends PanelHTMLBoxView {
     setHidden() {
         for (const column of this.tabulator.getColumns()) {
             const col = column._column;
-            if ((col.field == '_index') || (this.model.hidden_columns.indexOf(col.field) > -1))
+            if ((col.field == '_index') || this.model.hidden_columns.includes(col.field))
                 column.hide();
             else
                 column.show();
@@ -998,7 +915,7 @@ export class DataTabulatorView extends PanelHTMLBoxView {
         const selected = this.model.source.selected;
         const index = row._row.data._index;
         if (e.ctrlKey || e.metaKey) {
-            indices = this.model.source.selected.indices;
+            indices = [...this.model.source.selected.indices];
         }
         else if (e.shiftKey && selected.indices.length) {
             const start = selected.indices[selected.indices.length - 1];
@@ -1080,40 +997,38 @@ export class DataTabulator extends HTMLBox {
     constructor(attrs) {
         super(attrs);
     }
-    static init_DataTabulator() {
-        this.prototype.default_view = DataTabulatorView;
-        this.define(({ Any, Array, Boolean, Nullable, Number, Ref, String }) => ({
-            aggregators: [Any, {}],
-            buttons: [Any, {}],
-            children: [Any, {}],
-            configuration: [Any, {}],
-            columns: [Array(Ref(TableColumn)), []],
-            download: [Boolean, false],
-            editable: [Boolean, true],
-            expanded: [Array(Number), []],
-            filename: [String, "table.csv"],
-            filters: [Array(Any), []],
-            follow: [Boolean, true],
-            frozen_rows: [Array(Number), []],
-            groupby: [Array(String), []],
-            hidden_columns: [Array(String), []],
-            indexes: [Array(String), []],
-            layout: [TableLayout, "fit_data"],
-            max_page: [Number, 0],
-            pagination: [Nullable(String), null],
-            page: [Number, 0],
-            page_size: [Number, 0],
-            select_mode: [Any, true],
-            selectable_rows: [Nullable(Array(Number)), null],
-            source: [Ref(ColumnDataSource)],
-            sorters: [Array(Any), []],
-            styles: [Any, {}],
-            theme: [String, "simple"],
-            theme_url: [String, "https://unpkg.com/tabulator-tables@5.3.2/dist/css/"]
-        }));
-    }
 }
+_c = DataTabulator;
 DataTabulator.__name__ = "DataTabulator";
 DataTabulator.__module__ = "panel.models.tabulator";
-DataTabulator.init_DataTabulator();
+(() => {
+    _c.prototype.default_view = DataTabulatorView;
+    _c.define(({ Any, Array, Boolean, Nullable, Number, Ref, String }) => ({
+        aggregators: [Any, {}],
+        buttons: [Any, {}],
+        children: [Any, {}],
+        configuration: [Any, {}],
+        columns: [Array(Ref(TableColumn)), []],
+        download: [Boolean, false],
+        editable: [Boolean, true],
+        expanded: [Array(Number), []],
+        filename: [String, "table.csv"],
+        filters: [Array(Any), []],
+        follow: [Boolean, true],
+        frozen_rows: [Array(Number), []],
+        groupby: [Array(String), []],
+        hidden_columns: [Array(String), []],
+        indexes: [Array(String), []],
+        layout: [TableLayout, "fit_data"],
+        max_page: [Number, 0],
+        pagination: [Nullable(String), null],
+        page: [Number, 0],
+        page_size: [Number, 0],
+        select_mode: [Any, true],
+        selectable_rows: [Nullable(Array(Number)), null],
+        source: [Ref(ColumnDataSource)],
+        sorters: [Array(Any), []],
+        cell_styles: [Any, {}],
+    }));
+})();
 //# sourceMappingURL=tabulator.js.map