Persist select when pagination=remote (#5929)

Author: hoxbro

panel/models/tabulator.py

@@ -56,7 +56,7 @@ class SelectionEvent(ModelEvent):
 
     event_name = 'selection-change'
 
-    def __init__(self, model, indices, selected):
+    def __init__(self, model, indices, selected, flush):
         """ Selection Event
 
         Parameters
@@ -67,14 +67,17 @@ def __init__(self, model, indices, selected):
             A list of changed indices selected/deselected rows.
         selected : bool
             If true the rows were selected, if false they were deselected.
+        flush : bool
+            Whether the current selection should be emptied before adding the new indices.
         """
         self.indices = indices
         self.selected = selected
+        self.flush = flush
         super().__init__(model=model)
 
     def __repr__(self):
         return (
-            f'{type(self).__name__}(indices={self.indices}, selected={self.selected})'
+            f'{type(self).__name__}(indices={self.indices}, selected={self.selected}, flush={self.flush})'
         )
 
 

panel/models/tabulator.ts

@@ -44,12 +44,12 @@ export class CellClickEvent extends ModelEvent {
 }
 
 export class SelectionEvent extends ModelEvent {
-  constructor(readonly indices: number[], readonly selected: boolean) {
+  constructor(readonly indices: number[], readonly selected: boolean, readonly flush: boolean = false) {
     super()
   }
 
   protected get event_values(): Attrs {
-    return {model: this.origin, indices: this.indices, selected: this.selected}
+    return {model: this.origin, indices: this.indices, selected: this.selected, flush: this.flush}
   }
 
   static {
@@ -1070,6 +1070,28 @@ export class DataTabulatorView extends HTMLBoxView {
     let indices: number[] = []
     const selected = this.model.source.selected
     const index: number = row._row.data._index
+
+    if (this.model.pagination === 'remote') {
+      const includes = this.model.source.selected.indices.indexOf(index) == -1
+      const flush = !(e.ctrlKey || e.metaKey || e.shiftKey)
+      if (e.shiftKey && selected.indices.length) {
+        const start = selected.indices[selected.indices.length-1]
+        if (index>start) {
+          for (let i = start; i<=index; i++)
+            indices.push(i)
+        } else {
+          for (let i = start; i>=index; i--)
+            indices.push(i)
+        }
+      } else {
+        indices.push(index)
+      }
+      this._selection_updating = true
+      this.model.trigger_event(new SelectionEvent(indices, includes, flush))
+      this._selection_updating = false
+      return
+    }
+
     if (e.ctrlKey || e.metaKey) {
       indices = [...this.model.source.selected.indices]
     } else if (e.shiftKey && selected.indices.length) {
@@ -1124,11 +1146,11 @@ export class DataTabulatorView extends HTMLBoxView {
       let deselected_indices = deselected.map((x: any) => x._row.data._index)
       if (selected_indices.length > 0) {
         this._selection_updating = true
-        this.model.trigger_event(new SelectionEvent(selected_indices, selected=true))
+        this.model.trigger_event(new SelectionEvent(selected_indices, true, false))
       }
       if (deselected_indices.length > 0) {
         this._selection_updating = true
-        this.model.trigger_event(new SelectionEvent(deselected_indices, selected=false))
+        this.model.trigger_event(new SelectionEvent(deselected_indices, false, false))
       }
     } else {
       const indices: number[] = data.map((row: any) => row._index)