Merge branch 'tables-auto-pagination' into v0.23-compat-quasar1

# Conflicts:
#	demos/tables/app2.jl

Project.toml

@@ -1,7 +1,7 @@
 name = "StippleUI"
 uuid = "a3c5d34a-b254-4859-a8fa-b86abb7e84a3"
 authors = ["Adrian Salceanu <[email protected]>"]
-version = "0.23.3"
+version = "0.23.4"
 
 [deps]
 Colors = "5ae59095-9a9b-59fe-a467-6f913c188581"
@@ -22,10 +22,10 @@ StippleUIDataFramesExt = "DataFrames"
 Colors = "0.12"
 DataFrames = "1"
 Dates = "1.6"
-Genie = "5.23.8"
+Genie = "5.30.4"
 OrderedCollections = "1"
 PrecompileTools = "1"
-Stipple = "0.28.11"
+Stipple = "0.28.14"
 Tables = "1"
 julia = "1.6"
 

demos/tables/app.jl

@@ -5,9 +5,9 @@ using DataFrames
 @genietools
 
 @app begin
-  NO_OF_ROWS = 1000
-  DATA = sort!(DataFrame(rand(NO_OF_ROWS, 2), ["x1", "x2"]))
-  ROWS_PER_PAGE = 10
+  NO_OF_ROWS = 1_000_000
+  DATA = sort!(DataFrame(rand(NO_OF_ROWS, 2), ["x1", "x2"]))::DataFrame # we only sort so that the changes are more visible when filtering and paginating
+  ROWS_PER_PAGE = 100
 
   @out df = DATA
   @out dt = DataTable(DataFrame([]), DataTableOptions(DATA))

demos/tables/app2.jl

@@ -4,40 +4,23 @@ using GenieFramework
 using DataFrames
 @genietools
 
-@app begin
-  NO_OF_ROWS = 1000
-  DATA = sort!(DataFrame(rand(NO_OF_ROWS, 2), ["x1", "x2"]))::DataFrame # we only sort so that the changes are more visible when filtering and paginating
-  ROWS_PER_PAGE = 10
+StippleUI.Tables.set_default_rows_per_page(20)
+StippleUI.Tables.set_max_rows_client_side(11_000)
 
-  @out df = DATA
-  @out dt = DataTable(DataFrame([]), DataTableOptions(DATA))
-  @out pagination = DataTablePagination(rows_per_page = ROWS_PER_PAGE, rows_number = NO_OF_ROWS)
-  @out loading = false
-  @in filter = ""
+@app begin
+  big_data = sort!(DataFrame(rand(1_000_000, 2), ["x1", "x2"]))::DataFrame # we only sort so that the changes are more visible when filtering and paginating
 
-  @onchange isready begin
-    dt = DataTable(DATA[1:ROWS_PER_PAGE, :])
-    filter = ""
-  end
+  @out dt1 = DataTable(big_data; server_side = true)
+  @out dt2 = DataTable(big_data)
 
-  @event request begin
-    loading = true
-    state = process_request(DATA, dt, pagination, filter)
-    dt = state.datatable
-    pagination = state.pagination
-    loading = false
-  end
+  @out loading = false
 
-  @onchange filter begin
-    loading = true
-    pagination.page = 1
-    state = process_request(DATA, dt, pagination, filter)
-    dt = state.datatable
-    pagination = state.pagination
-    loading = false
+  @event dt1_request begin
+    @paginate(dt1, big_data)
+    @push
   end
 end
 
-@page("/", "ui.jl")
+@page("/", "ui2.jl")
 
 end

demos/tables/ui2.jl

@@ -0,0 +1,29 @@
+table(:dt1,
+      server_side = true,
+      loading = :loading,
+      title = "Server side data"
+)
+table(:dt2,
+      loading = :loading,
+      title = "Client side data"
+)
+
+# ParsedHTMLString("""
+# <q-table
+#       row-key="__id"
+#       :loading="loading"
+#       :columns="dt2.columns"
+#       title="Random data"
+#       :data="dt2.data"
+#       :filter="dt2.filter"
+#       :pagination.sync="dt2.pagination"
+#       v-model="dt2">
+#     <template v-slot:top-right>
+#       <q-input dense debounce="300" v-model="dt2.filter" placeholder="Search">
+#         <template v-slot:append>
+#           <q-icon name="search" />
+#         </template>
+#       </q-input>
+#       </template>
+# </q-table>
+# """)

demos/tables/ui2.jl.html

@@ -0,0 +1,11 @@
+<q-table row-key="__id" :loading="loading" :columns="dt.columns" title="Random data" :data="dt.data"
+  v-on:request="function(event) {  handle_event(event, 'dt_request') }" :filter="dt.filter"
+  :pagination.sync="dt.pagination">
+  <template v-slot:top-right>
+    <q-input dense debounce="300" v-model="dt.filter" placeholder="Search">
+      <template v-slot:append>
+        <q-icon name="search" />
+      </template>
+    </q-input>
+  </template>
+</q-table>