Drag to Hide and Reorder Columns

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Demo: Column Drag to Reorder or Hide</title>
  <script nonce="undefined" src="https://cdn.zinggrid.com/zinggrid.min.js"></script>
  <link rel="stylesheet" href="/drag_reorder-hide/drag_reorder-hide.css">
  <style>
    zg-head-cell {
      font-size: 1em;
      font-weight: bold;
      letter-spacing: .05em;
      text-align: left;
      color: #ffffff;
      background: #4bb180;
      --zg-icon-init-fill: #ffffff;
      --zg-head-cell-background_sorted: #e5f5ff;
    }

    zg-head-cell:hover {
      cursor: grab;
      background: #399267;
    }

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

<body class="zg-body">
  <!-- Most features can be toggled on the toplevel zing-grid tag -->
  <zing-grid caption="Drag columns to Reorder or Hide Column" columns-control column-drag="columns" column-drag-action="both" 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="breed, name" header="Combined" filter="disabled">
        <div>[[index.breed]] - [[index.name]]</div>
      </zg-column>
    </zg-colgroup>
  </zing-grid>
  <script>
    ZingGrid.setLicense(['26ccbfec16b8be9ee98c7d57bee6e498']);
    window.addEventListener('load', async () => {
      const response = await fetch('/assets/support/dummy_bar/replicate.json');
      const data = await response.json();

      var myConfig = {
        graphset: [{
          type: "hbar",

          backgroundColor: "white",

          plot: {
            stacked: false,
            "bar-width": "100%", // "bar-width: 17" change to % 
            showZero: false,
            "value-box": {
              text: "%data-risk-owner",
              "font-color": "black",
              placement: "bottom-in"
            }
          },

          plotarea: {
            "adjust-layout": true
          },

          scaleY: {
            label: {
              text: "Count of Action Items"
            },
            minValue: 0,
            maxValue: 60,
            step: 5,
            itemsOverlap: true,
            maxItems: 15
          },

          scaleX: {
            labels: data.labels,
            autoFit: false,
            itemsOverlap: false
          },

          tooltip: {
            text: "%data-risk-owner: %data-actual-value",
            decimals: 2
          },

          series: data.datasets.map(dataset => ({
            values: dataset.values.map(value => Number(value)),
            styles: dataset.colors.map(color => ({
              "background-color": color
            })),
            "data-risk-owner": dataset.riskOwners,
            "data-actual-value": dataset.actualValues
          }))
        }]
      };

      zingchart.render({
        id: "myChart",
        data: myConfig,
        height: "100%",
        width: "100%"
      });
    });
  </script>
</body>

</html>

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Demo: Column Drag to Reorder or Hide</title>
  <script src="https://cdn.zinggrid.com/zinggrid.min.js"></script>
  <link rel="stylesheet" href="/drag_reorder-hide/drag_reorder-hide.css">
</head>

<body class="zg-body">
  <!-- Most features can be toggled on the toplevel zing-grid tag -->
  <zing-grid caption="Drag columns to Reorder or Hide Column" columns-control column-drag="columns" column-drag-action="both" 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="breed, name" header="Combined" filter="disabled">
        <div>[[index.breed]] - [[index.name]]</div>
      </zg-column>
    </zg-colgroup>
  </zing-grid>
</body>

</html>

zg-head-cell {
  font-size: 1em;
  font-weight: bold;
  letter-spacing: .05em;
  text-align: left;
  color: #ffffff;
  background: #4bb180;
  --zg-icon-init-fill: #ffffff;
  --zg-head-cell-background_sorted: #e5f5ff;
}

zg-head-cell:hover {
  cursor: grab;
  background: #399267;
}

window.addEventListener('load', async () => {
  const response = await fetch('/assets/support/dummy_bar/replicate.json');
  const data = await response.json();

  var myConfig = {
    graphset: [{
      type: "hbar",

      backgroundColor: "white",

      plot: {
        stacked: false,
        "bar-width": "100%", // "bar-width: 17" change to % 
        showZero: false,
        "value-box": {
          text: "%data-risk-owner",
          "font-color": "black",
          placement: "bottom-in"
        }
      },

      plotarea: {
        "adjust-layout": true
      },

      scaleY: {
        label: {
          text: "Count of Action Items"
        },
        minValue: 0,
        maxValue: 60,
        step: 5,
        itemsOverlap: true,
        maxItems: 15
      },

      scaleX: {
        labels: data.labels,
        autoFit: false,
        itemsOverlap: false
      },

      tooltip: {
        text: "%data-risk-owner: %data-actual-value",
        decimals: 2
      },

      series: data.datasets.map(dataset => ({
        values: dataset.values.map(value => Number(value)),
        styles: dataset.colors.map(color => ({
          "background-color": color
        })),
        "data-risk-owner": dataset.riskOwners,
        "data-actual-value": dataset.actualValues
      }))
    }]
  };

  zingchart.render({
    id: "myChart",
    data: myConfig,
    height: "100%",
    width: "100%"
  });
});