release 1.3.0

data-grid.js

@@ -634,19 +634,20 @@ class DataGrid extends HTMLElement {
     return len;
   }
   computeDefaultHeight() {
-    this.defaultHeight = this.root.querySelector("table").offsetHeight;
-
-    // If we have a fixed height, make sure we have overflowY set
-    if (this.style.height) {
-      this.style.height = this.defaultHeight + "px";
-      this.style.overflowY = "auto";
-      // Otherwise incomplete row would not look good
-      this.root.querySelector("table").style.height = "100%";
-    }
-    // If our min height is too small, make sure we adjust the value
-    if (this.style.minHeight && parseInt(this.style.minHeight) > this.defaultHeight) {
-      this.style.minHeight = this.defaultHeight + "px";
-    }
+    // Wait until height is fully computed
+    requestAnimationFrame(() => {
+      this.defaultHeight = this.root.querySelector("table").offsetHeight;
+
+      // If we have a fixed height, make sure we have overflowY set
+      if (this.style.height) {
+        this.style.height = this.defaultHeight + "px";
+        this.style.overflowY = "auto";
+      }
+      // If our min height is too small, make sure we adjust the value
+      if (this.style.minHeight && parseInt(this.style.minHeight) > this.defaultHeight) {
+        this.style.minHeight = this.defaultHeight + "px";
+      }
+    });
   }
   configureUi() {
     this.createMenu();
@@ -908,7 +909,7 @@ class DataGrid extends HTMLElement {
     this.log("sort data");
 
     // Early exit
-    if(col && this.getColProp(col.getAttribute("field"), "noSort")) {
+    if (col && this.getColProp(col.getAttribute("field"), "noSort")) {
       return;
     }
 

demo-server.html

@@ -22,8 +22,35 @@
   <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5/dist/css/bootstrap.min.css">
   <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/mvp.css@1/mvp.css" />
   <link rel="stylesheet" href="data-grid.min.css" />
+  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js" type="module"></script>
   <script type="module">
     import DataGrid from './data-grid.min.js';
+
+    var toastLiveExample = document.getElementById('liveToast')
+    var toast = new bootstrap.Toast(toastLiveExample)
+
+    function postJson(url, data) {
+      // request options
+      const options = {
+        method: 'POST',
+        body: JSON.stringify(data),
+        headers: {
+          'Content-Type': 'application/json'
+        }
+      }
+
+      // send POST request
+      fetch(url, options)
+        .then(res => res.json())
+        .then(res => console.log(res));
+    }
+    document.getElementById("server-demo").addEventListener("edit", (ev) => {
+      let grid = document.getElementById("server-demo");
+
+      postJson(grid.url + "?action=edit", ev.detail);
+      toastLiveExample.querySelector(".toast-body").innerHTML = "Row was updated";
+      toast.show();
+    });
   </script>
 </head>
 
@@ -44,12 +71,25 @@ <h2>Server usage</h2>
     <p>Server parameters are sent as query string and are <code>start</code>, <code>length</code> and <code>search</code>.</p>
     <p>To enable server mode, use <code>server=true</code></p>
 
-    <data-grid id="server-demo" style="height:600px" url="demo-server.php" expand resizable sticky selectable autosize="true" filter="true" sort="true" debug="true" server="true" sticky="true"></data-grid>
+    <data-grid id="server-demo" style="height:600px" url="demo-server.php" expand resizable sticky selectable autosize="true" filter="true" sort="true" debug="true" server="true"
+      sticky="true"></data-grid>
+
+    <footer>
+      <hr />
+      Made with <l-i name="heart" set="em"></l-i> in <l-i name="be" set="fl"></l-i> by <a href="https://www.lekoala.be">LeKoala</a>
+    </footer>
 
-  <footer>
-    <hr />
-    Made with <l-i name="heart" set="em"></l-i> in <l-i name="be" set="fl"></l-i> by <a href="https://www.lekoala.be">LeKoala</a>
-  </footer>
+    <div class="position-fixed bottom-0 end-0 p-3" style="z-index: 11">
+      <div id="liveToast" class="toast" role="alert" aria-live="assertive" aria-atomic="true">
+        <div class="toast-header">
+          <strong class="me-auto">Data Grid</strong>
+          <button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button>
+        </div>
+        <div class="toast-body">
+          Hello, world! This is a toast message.
+        </div>
+      </div>
+    </div>
 </body>
 
 </html>

demo-server.php

@@ -9,6 +9,24 @@
 $length = intval($_GET["length"] ?? 10);
 $sort = $_GET["sort"] ?? null;
 $sortDir = $_GET["sortDir"] ?? null;
+$action = $_GET["action"] ?? null;
+
+session_start();
+if (empty($_SESSION["data"])) {
+    $_SESSION["data"] = [];
+}
+if ($action) {
+    switch ($action) {
+        case "edit":
+            $content = trim(file_get_contents("php://input"));
+            $decoded = json_decode($content, true);
+            $data = $decoded["data"];
+            $_SESSION["data"][$data["id"]] = $data;
+            echo json_encode(["success" => 1]);
+            break;
+    }
+    die();
+}
 
 // Mock some data instead of querying a db
 $data = [];
@@ -18,12 +36,16 @@
     "Facebook",
 ];
 foreach (range(1, 998) as $i) {
-    $data[] = [
-        "id" => $i,
-        "first_name" => "First name " . $i,
-        "last_name" => "Last name " . $i,
-        "company" => $companies[$i % 3]
-    ];
+    if (isset($_SESSION["data"][$i])) {
+        $data[] = $_SESSION["data"][$i];
+    } else {
+        $data[] = [
+            "id" => $i,
+            "first_name" => "First name " . $i,
+            "last_name" => "Last name " . $i,
+            "company" => $companies[$i % 3]
+        ];
+    }
 }
 
 // That would be an order by clause
@@ -94,6 +116,7 @@
                 "field" => "company",
                 "title" => "Company",
                 "noSort" => true,
+                "editable" => true,
             ],
         ],
     ],

package.json

@@ -1,6 +1,6 @@
 {
   "name": "data-grid-component",
-  "version": "1.2.0",
+  "version": "1.3.0",
   "description": "Standalone data grid web component",
   "main": "data-grid",
   "scripts": {

readme.md

@@ -179,6 +179,8 @@ document.getElementById("demo2-grid").addEventListener("edit", (ev) => {
 });
 ```
 
+You can check `demo-server.html` to get a sample usage with saving functionnality
+
 ## Api
 
 - getFirst: go to first page
@@ -193,10 +195,19 @@ document.getElementById("demo2-grid").addEventListener("edit", (ev) => {
 - removeRow: remove a row
 - getData: get data
 
-## Todo
+## Server
+
+For large data set, you may need to use the pagination or filtering on the server.
+
+It works just the same way except the response should return a a `meta` key with
+
+- total: the total (unfiltered) number of rows.
+- filtered: the total value of rows matching the current filter.
+
+Server parameters are sent as query string and are `start`, `length` and `search`.
+To enable server mode, use `server=true`
 
-- Server side pagination/filtering
-- Cell renderer
+You can check `demo-server.html` and `demo-server.php` for an example.
 
 ## Demo