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.


.grid {
  height: 320px;
  margin-bottom: 2rem;


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

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

  .grid {
    margin-bottom: 0;



<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>


<script src=""></script>
for(var i = 0; i < 4; i++){

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



Leave email to receive latest updates!