Set custom width and height of rows, columns, and headers

Custom CSS

by Flexmonster Pivot Table

HTML

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

<div>
  <h2>How to set custom width and height of rows, columns, and headers</h2>
  <p>
    This example demonstrates how to customize the width and height of rows,
    columns, and headers using CSS.
  </p>
  <p>
    The following CSS selectors are used to style rows, columns, and headers:
  </p>
  <ul>
    <li>
      <code>.fm-grid-row</code> and <code>.fm-grid-row-mobile</code> set the
      height of rows.
    </li>
    <li>
      <code>.fm-grid-column</code> and <code>.fm-grid-column-mobile</code> set
      the width of columns.
    </li>
    <li>
      <code>.fm-grid-header</code> and <code>.fm-grid-header-mobile</code> set
      the width and height of headers.
    </li>
  </ul>
  <p>Switch to the CSS box to see an example of using these selectors.</p>
</div>

<div id="pivot-container"></div>

CSS

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

#fm-pivot-view .fm-grid-row,
#fm-pivot-view .fm-grid-row-mobile {
  height: 20px !important;
  min-height: 20px;
}

#fm-pivot-view .fm-grid-column,
#fm-pivot-view .fm-grid-column-mobile {
  width: 90px !important;
  min-width: 90px;
}

#fm-pivot-view .fm-grid-header,
#fm-pivot-view .fm-grid-header-mobile {
  height: 20px !important;
  width: 20px !important;
}

#fm-pivot-view .fm-grid-layout div.fm-cell {
  padding-top: 3px !important;
  padding-bottom: 0 !important;
  font-size: 11px !important;
}

#fm-pivot-view .fm-grid-layout div.fm-sheet-header {
  line-height: 10px !important;
}

JavaScript

const pivot = new Flexmonster({
  container: "pivot-container",
  componentFolder: "https://cdn.flexmonster.com/",
  toolbar: true,
  height: 400,
  report: {
    dataSource: {
      filename: "data/data.csv"
    },
    slice: {
      rows: [
        {
          uniqueName: "Color"
        },
        {
          uniqueName: "[Measures]"
        }
      ],
      columns: [
        {
          uniqueName: "Country"
        }
      ],
      measures: [
        {
          uniqueName: "Price",
          aggregation: "sum"
        }
      ]
    }
  }
});