JSFiddle - React, Tailwind, and code Playground

by stitot

HTML

<script src="https://cdn.jsdelivr.net/npm/@highcharts/grid-pro/grid-pro.js"></script>

<div class="demo">
    <div id="container"></div>
    <p class="highcharts-description">
        Expected result is that <code>metaData</code> is always exluded when column is disabled
        <ol>
            <li>Click "Export to CSV" and observe that <code>metaData</code> is included</li>
            <li>Click "Export to JSON" and observe that <code>metaData</code> is excluded</li>
            <li>Click "Export to CSV" again and observe that <code>metaData</code> is now excluded</li>
            <li>Same behaviour applies to "Download ..."
        </ol>
    </p>
    <div class="controls">
        <button id="csvExport">Export to CSV</button>
        <button id="jsonExport">Export to JSON</button>
        <button id="csvDownload">Download CSV</button>
        <button id="jsonDownload">Download JSON</button>
        <label>
            <input type="checkbox" id="modifiedDataToggle" checked />
            Export modified data
        </label>
    </div>
    <h2>Exported file content</h2>
    <textarea id="result"></textarea>
</div>

CSS

@import url("https://cdn.jsdelivr.net/npm/@highcharts/grid-pro/css/grid-pro.css");

body {
    font-family:
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        Roboto,
        Helvetica,
        Arial,
        "Apple Color Emoji",
        "Segoe UI Emoji",
        "Segoe UI Symbol",
        sans-serif;
    background: var(--highcharts-background-color);
    color: var(--highcharts-neutral-color-100);
}

.demo {
    padding: 8px 12px;
}

.highcharts-description {
    padding: 0 8px;
}

#json {
    margin-top: 20px;
}

textarea {
    width: 400px;
    height: 300px;
}

JavaScript

const csvExport = document.querySelector("#csvExport");
const jsonBtn = document.querySelector("#jsonExport");
const csvDownload = document.querySelector("#csvDownload");
const jsonDownload = document.querySelector("#jsonDownload");
const result = document.querySelector("#result");
const modifiedDataToggle = document.querySelector("#modifiedDataToggle");

const grid = Grid.grid("container", {
  dataTable: {
    columns: {
      product: [
        "Apples",
        "Pears",
        "Plums",
        "Bananas",
        "Oranges",
        "Grapes",
        "Strawberries",
        "Blueberries",
      ],
      weight: [100, 40, 0.5, 200, 150, 100, 50, 30],
      price: [1.5, 2.53, 5, 4.5, 3.5, 2.5, 6, 4.2],
      metaData: ["a", "b", "c", "d", "e", "f", "g", "h"],
    },
  },
  header: ["product", "weight", "price", "metaData"],
  columnDefaults: {
    cells: {
      editMode: {
        enabled: true,
      },
    },
    filtering: {
      enabled: true,
    },
  },
  columns: [
    {
      id: "metaData",
      enabled: false,
    },
    {
      id: "weight",
      sorting: {
        sortable: false,
        order: 'desc'
    }
    }
  ],
});

csvExport.addEventListener("click", () => {
  result.innerHTML = grid.exporting.getCSV(modifiedDataToggle.checked);
});

jsonBtn.addEventListener("click", () => {
  result.innerHTML = grid.exporting.getJSON(modifiedDataToggle.checked);
});

csvDownload.addEventListener("click", () => {
  grid.exporting.downloadCSV(modifiedDataToggle.checked);
});

jsonDownload.addEventListener("click", () => {
  grid.exporting.downloadJSON(modifiedDataToggle.checked);
});