Customizing the Format cells pop-up window

Customizing the Toolbar

by Flexmonster Pivot Table

HTML

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

<div>
  <h2>Customizing the Format cells pop-up window</h2>
  <p>
    In the <b>Format cells</b> pop-up window, you can override the default
    formatting values and limit configs available in the dropdown menus.
  </p>
  <p>
    To limit the list of available configs in the dropdown menus, specify only
    the needed values in the
    <code>toolbar.defaults.numberFormatting.[config_name]</code> array inside
    the
    <a
      href="https://www.flexmonster.com/api/beforetoolbarcreated/"
      target="_blank"
      >beforetoolbarcreated</a
    >
    handler (lines 23 to 92 in the JavaScript box).
  </p>
  <p>
    To change the predefined values in the pop-up window, you need to configure
    the
    <a
      href="https://www.flexmonster.com/doc/number-formatting/#default"
      target="_blank"
      >default number format</a
    >
    in the report (lines 10 to 20 in the JavaScript box).
  </p>
</div>

<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: [
      {
        uniqueName: "",
        textAlign: "left",
        thousandsSeparators: " ",
        decimalSeparator: ",",
        decimalPlaces: 1,
        negativeNumberFormat: "1-",
        positiveCurrencyFormat: "$1", 
        negativeCurrencyFormat: "-$1",
        isPercent: false
      },
    ],
  },
  beforetoolbarcreated: function (toolbar) {
    toolbar.defaults.numberFormatting.textAligns = [
      {
        label: "align_left",
        value: "left",
      },
      {
        label: "align_right",
        value: "right",
      },
    ]
    toolbar.defaults.numberFormatting.thousandsSeparators = [
      {
        label: "(Space)",
        value: " ",
      },
    ]
    toolbar.defaults.numberFormatting.decimalSeparators = [
      {
        label: ",",
        value: ",",
      },
    ]
    toolbar.defaults.numberFormatting.decimalPlaces = [
      {
        label: "none",
        value: -1,
      },
      {
        label: "0",
        value: 0,
      },
      {
        label: "1",
        value: 1,
      },
    ]
    toolbar.defaults.numberFormatting.negativeNumberFormats = [
      {
        label: "-1",
        value: "-1",
      },
      {
        label: "1-",
        value: "1-",
      },
    ]
    toolbar.defaults.numberFormatting.positiveCurrencyFormats = [
      {
        label: "$1",
        value: "$1",
      },
    ]
    toolbar.defaults.numberFormatting.negativeCurrencyFormats = [
      {
        label: "-$1",
        value: "-$1",
      },
      {
        label: "-1$",
        value: "-1$",
      },
    ]
    toolbar.defaults.numberFormatting.isPercent = [
      {
        label: "false_value",
        value: false,
      },
    ]
  },
 ...