JSFiddle - React, Tailwind, and code Playground

Export and print

by Flexmonster Pivot Table

HTML

<script src="https://cdn.flexmonster.com/flexmonster.js"></script>
<button onclick="excel()">Export to excel</button>
<button onclick="csv()">Export to CSV</button>
<div id="pivot-container"></div>

CSS

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

JavaScript

const pivot = new Flexmonster({
  container: 'pivot-container',
  componentFolder: 'https://cdn.flexmonster.com/',
  toolbar: true,
  report: {
    dataSource: {
      filename: 'data/data.csv',
    },
    formats: [
      {
        name: 'decimalFormat',
      },
    ],
    slice: {
      reportFilters: [
        {
          uniqueName: 'Color',
          filter: {
            members: ['color.[blue]', 'color.[green]'],
          },
        },
      ],
      rows: [
        {
          uniqueName: 'Category',
          filter: {
            measure: {
              uniqueName: 'Price',
              aggregation: 'sum',
            },
            query: {
              top: 10,
            },
          },
        },
      ],
      columns: [
        {
          uniqueName: 'Business Type',
          filter: {
            query: {
              contain: 'a',
            },
          },
        },
        {
          uniqueName: '[Measures]',
        },
      ],
      measures: [
        {
          uniqueName: 'Price',
          aggregation: 'sum',
          format: 'decimalFormat',
        },
      ],
    },
  },
});

function formatQuery(query) {
  return Object.entries(query)
    .map(([key, value]) => {
      if (Array.isArray(value)) {
        return `${key}: ${value.join(' - ')}`;
      }
      if (typeof value === 'object') {
        return `${key}: ${JSON.stringify(value)}`;
      }
      return `${key}: ${value}`;
    })
    .join(', ');
}

function getAllFilters() {
  let fields = pivot.getAllHierarchies();
  return fields.reduce((acc, f) => {
    const filter = pivot.getFilter(f.uniqueName);
    if (filter != null) {
      acc[f.uniqueName] = filter;
    }
    return acc;
  }, {});
}

function formatFilter(field, filter) {
  if (!filter.query) return null;
  const queryText = formatQuery(filter.query);

  if (filter.measure) {
    return `${field}...