Customize export: choose a field separator for CSV

Export and print

by Flexmonster Pivot Table

HTML

<script src="https://cdn.flexmonster.com/flexmonster.js"></script>

<div>
  <div class="select-container compact">
    <span class="text">Choose a field separator for CSV export:</span>
    <select id="select-grid-type">
      <option value=",">,</option>
      <option value=";">;</option>
      <option value=":">:</option>
      <option value="|">|</option>
      <option value="/">/</option>
    </select>
  </div>
  <p>
    If you now export the report to CSV, the chosen field separator will be used
    in the exported file.
  </p>
</div>

<div id="pivotContainer"></div>

CSS

@import url(https://cdn.flexmonster.com/assets/jsfiddle-styles.css);

JavaScript

const pivot = new Flexmonster({
  container: "pivotContainer",
  componentFolder: "https://cdn.flexmonster.com/",
  toolbar: true,
  beforetoolbarcreated: customizeToolbar,
  report: "https://cdn.flexmonster.com/reports/report.json"
});

function customizeToolbar(toolbar) {
  let tabs = toolbar.getTabs();
  toolbar.getTabs = function() {
    tabs = tabs.filter(tab => tab.id === "fm-tab-export");
    let exportTab = tabs.find(tab => tab.id == "fm-tab-export");
    let exportToCSVTab = exportTab.menu.find(tab => tab.id == "fm-tab-export-csv");
    exportToCSVTab.handler = () => {
      const fieldSeparator = document.getElementById('CSVFileSeparator').value || ',';
      this.pivot.exportTo("csv", {
        fieldSeparator: fieldSeparator
      })
    }
    return tabs;
  }
}