Hide borders and headers on the grid

Custom CSS

by Flexmonster Pivot Table

HTML

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

<div>
  <h2>How to hide borders and headers on the grid</h2>
  <p>
    To hide borders on the grid, set the <code>border</code> property of the
    <code>.fm-grid-view .fm-cell, .fm-data-sheet</code> selector to
    <code>0px !important</code>.
  </p>
  <p>
    Spreadsheet headers can be hidden by setting the
    <a
      href="https://www.flexmonster.com/api/options-object/#showHeaders"
      target="_blank"
    >options.grid.showHeaders</a> property to <code>false</code>.
  </p>
  <p>
    <a
      href="https://www.flexmonster.com/doc/customizing-appearance/"
      target="_blank"
    >Visit our docs for more details on customizing the appearance</a>.
  </p>
</div>

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

CSS

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

.fm-grid-view .fm-cell,
.fm-data-sheet {
  border: 0px !important;
}

JavaScript

var pivot = new Flexmonster({
  container: "#pivot-container",
  componentFolder: "https://cdn.flexmonster.com/",
  toolbar: true,
  report: {
    dataSource: {
      filename: "data/data.json"
    },
    options: {
      grid: {
        showHeaders: false
      }
    }
  }
});