Multiple Grids

You can easily put more than a single DataGridXL instance on your web pages. You can copy cells from one instance and paste them in the other.

Code

<style>
.grid {
  height: 320px;
  margin-bottom: 2rem;
}

/* DESKTOP STYLES */

@media only screen and (min-width: 768px) {

  .grid-container {
    display: grid;
    grid-gap: 1rem;
    grid-template-columns: 1fr 1fr;
  }

  .grid {
    margin-bottom: 0;
  }

}

</style>

<div class="grid-container">

  <div class="grid" id="grid1"></div>
  <div class="grid" id="grid2"></div>
  <div class="grid" id="grid3"></div>
  <div class="grid" id="grid4"></div>

</div>

<script src="https://code.datagridxl.com/datagridxl2.js"></script>
<script>
for(var i = 0; i < 4; i++){

  window["grid"+i] = new DataGridXL("grid" + (i+1), {
    data: DataGridXL.createDummyData(50,10),
    instantCut: true
  });

}


</script>

Leave email to receive latest updates!