Demos Back to Docs

CRUD Grid with Node Express Server

83 of 124
This is a fully featured CRUD demo using a Node.js Express server to implement CRUD functionality. The server is hosted on Glitch here.
Result Full HTML CSS JS
Edit Download

Full Code

<!DOCTYPE html>
<html class="zg-html">

<head>
  <meta charset="utf-8">
  <title>ZingGrid: Build a CRUD Grid in 60 Seconds</title>
  <script nonce="undefined" src="https://cdn.zinggrid.com/dev/zinggrid-dev.min.js"></script>
  <style>
    zg-column:nth-child(1),
    zg-row zg-cell:nth-child(1),
    zg-row zg-head-cell:nth-child(1) {
      display: none;
    }

    zing-grid[loading] {
      height: 387px;
    }
  </style>
</head>

<body class="zg-body">
  <zing-grid src="https://us-central1-zingsoft-demo-endpoints.cloudfunctions.net/jammin-salmon/api/movies/" editor editor-controls></zing-grid>
  <script>
    ZingGrid.setLicense(['26ccbfec16b8be9ee98c7d57bee6e498']);
  </script>
</body>

</html>
<!DOCTYPE html>
<html class="zg-html">
  <head>
    <meta charset="utf-8">
    <title>ZingGrid: Build a CRUD Grid in 60 Seconds</title>
    <script src="https://cdn.zinggrid.com/dev/zinggrid-dev.min.js"></script>
  </head>
  <body class="zg-body">
		<zing-grid src="https://us-central1-zingsoft-demo-endpoints.cloudfunctions.net/jammin-salmon/api/movies/" editor editor-controls></zing-grid>
  </body>
</html>
zg-column:nth-child(1),
zg-row zg-cell:nth-child(1),
zg-row zg-head-cell:nth-child(1){
  display: none;
}
// No JS code

Related Docs

Interested in this demo? Modify it to your needs in ZingSoft Studio, our testing sandbox. It's free to sign up, and you can come back and edit at any time!

Edit in Studio

Related Docs

Demo Gallery