Drag to Hide Columns

65 of 122
As a user you can drag columns off the grid to hide them.
Result Full HTML CSS JS
Edit Download
[[record.breed]] - [[record.name]]

Full Code

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <title>ZingGrid: Blank Grid</title>
  <script src="https://cdn.zinggrid.com/zinggrid.min.js" defer></script>
  <style>
    .zg-body {
      background: #e6e6e6;
      padding: 100px;
    }

    @media (max-width: 500px) {
      .zg-body {
        padding: 0;
      }
    }

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

<body class="zg-body">
  <!-- Most features can be toggled on the toplevel zing-grid tag -->
  <zing-grid caption="Drag and hide columns" columns-control draggable="columns" drag-action="hide" layout="row" layout-controls="disabled" viewport-stop>
    <!-- dataset -->
    <zg-data data='[
      	{ "breed": "Cane Corso", "name": "Ziva"},
      	{ "breed": "Pug", "name": "Doug"},
      	{ "breed": "Corgi", "name": "Jenny"},
      	{ "breed": "Pomeranian", "name": "Koda"},
      	{ "breed": "Great Dane", "name": "Zeus"},
      	{ "breed": "Frenchie", "name": "Bruce"},
      	{ "breed": "Cane Corso", "name": "Sofia"},
      	{ "breed": "Pomeranian", "name": "Snowball"}
      ]'></zg-data>
    <!-- If you don't want to use all columns from dataset, user must define columns here -->
    <zg-colgroup>
      <zg-column index="breed" type="select" type-select-options="Cane Corso, Corgi, Frenchie, Great Dane, Pomeranian, Pug"></zg-column>
      <zg-column index="name" filter="disabled"></zg-column>
      <zg-column index="custom" header="Combined" filter="disabled">
        <div>[[record.breed]] - [[record.name]]</div>
      </zg-column>
    </zg-colgroup>
  </zing-grid>

  <script></script>
</body>

</html>
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>ZingGrid: Blank Grid</title>
    <script src="https://cdn.zinggrid.com/zinggrid.min.js" defer></script>
  </head>
  <body class="zg-body">
    <!-- Most features can be toggled on the toplevel zing-grid tag -->
    <zing-grid
      caption="Drag and hide columns"
      columns-control
      draggable="columns"
      drag-action="hide"
      layout="row"
      layout-controls="disabled"
      viewport-stop>
      <!-- dataset -->
      <zg-data data='[
      	{ "breed": "Cane Corso", "name": "Ziva"},
      	{ "breed": "Pug", "name": "Doug"},
      	{ "breed": "Corgi", "name": "Jenny"},
      	{ "breed": "Pomeranian", "name": "Koda"},
      	{ "breed": "Great Dane", "name": "Zeus"},
      	{ "breed": "Frenchie", "name": "Bruce"},
      	{ "breed": "Cane Corso", "name": "Sofia"},
      	{ "breed": "Pomeranian", "name": "Snowball"}
      ]'></zg-data>
      <!-- If you don't want to use all columns from dataset, user must define columns here -->
      <zg-colgroup>
        <zg-column index="breed" type="select" 
            type-select-options="Cane Corso, Corgi, Frenchie, Great Dane, Pomeranian, Pug"></zg-column>
        <zg-column index="name" filter="disabled"></zg-column>
        <zg-column index="custom" header="Combined" filter="disabled">
          <div>[[record.breed]] - [[record.name]]</div>
        </zg-column>
      </zg-colgroup>
    </zing-grid>

  </body>
</html>
.zg-body { background:#e6e6e6; padding:100px; }

@media (max-width: 500px) {
  .zg-body { padding: 0; }
}

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

Demo Gallery