integration/index.html

<html>
  <head>
    <script type="module">
      import { mkConfig, generateCsv, download } from "/export-to-csv.js";

      // Configs
      const csvConfig = mkConfig({ useKeysAsHeaders: true });
      const txtConfig = mkConfig({
        useKeysAsHeaders: true,
        useTextFile: true,
      });
      const tsvConfig = mkConfig({
        useKeysAsHeaders: true,
        useTextFile: true,
        delimiter: "\t",
      });
      const csvConfigCustomFilename = mkConfig({
        useKeysAsHeaders: true,
        filename: "Best CSV",
      });
      const txtConfigCustomFilename = mkConfig({
        useKeysAsHeaders: true,
        useTextFile: true,
        filename: "Best CSV as Text",
      });
      const tsvConfigCustomFilename = mkConfig({
        useKeysAsHeaders: true,
        fileExtension: "tsv",
        delimiter: "\t",
        filename: "Best CSV as TSV",
      });

      const mockData = [
        {
          name: "Rouky",
          date: "2023-09-01",
          percentage: 0.4,
          quoted: '"Pickles"',
          nullish: null,
          "string with spaces as header": "value with spaces",
        },
        {
          name: "Keiko",
          date: "2023-09-01",
          percentage: 0.9,
          quoted: '"Cactus"',
          nullish: "test",
          "string with spaces as header": "more spaces",
        },
      ];

      const csv = generateCsv(csvConfig)(mockData);
      const txt = generateCsv(txtConfig)(mockData);
      const tsv = generateCsv(tsvConfig)(mockData);
      const csvCustomFilename = generateCsv(csvConfig)(mockData);
      const txtCustomFilename = generateCsv(txtConfig)(mockData);
      const tsvCustomFilename = generateCsv(tsvConfig)(mockData);

      const csvBtn = document.querySelector("#csv");
      const txtBtn = document.querySelector("#txt");
      const tsvBtn = document.querySelector("#tsv");
      const csvBtnCustom = document.querySelector("#csv-custom");
      const txtBtnCustom = document.querySelector("#txt-custom");
      const tsvBtnCustom = document.querySelector("#tsv-custom");

      csvBtn.addEventListener("click", () => download(csvConfig)(csv));
      txtBtn.addEventListener("click", () => download(txtConfig)(txt));
      tsvBtn.addEventListener("click", () => download(tsvConfig)(tsv));
      csvBtnCustom.addEventListener("click", () =>
        download(csvConfigCustomFilename)(csvCustomFilename),
      );
      txtBtnCustom.addEventListener("click", () =>
        download(txtConfigCustomFilename)(txtCustomFilename),
      );
      tsvBtnCustom.addEventListener("click", () =>
        download(tsvConfigCustomFilename)(tsvCustomFilename),
      );
    </script>
  </head>

  <body>
    <h1>Export to CSV testing</h1>
    <button id="csv">Download as CSV</button>
    <button id="txt">Download as TXT</button>
    <button id="tsv">Download as TSV</button>
    <button id="csv-custom">Download as CSV (custom filename)</button>
    <button id="txt-custom">Download as TXT (custom filename)</button>
    <button id="tsv-custom">
      Download as TSV (custom filename and extension)
    </button>
  </body>
</html>