sets an object with properties that define the appearance and behavior of the Pivot layout

object layout;


var pivot = new dhx.Pivot(document.body, {
    data: dataset,
    fields: {
        rows: ["form", "name"],
        columns: ["year"],
        values: [{ id: "oil", method: "max" }, { id: "oil", method: "sum" }],
    fieldList: [
        { id: "name", label: "name" },
        // the full list of fields
    layout: {                       
        leftMargin: 300,            
        // other attributes         

Related samples


Here is the list of possible layout arguments:

  • leftMargin - (number) defines the space between the left side of the Pivot and the datatable
  • gridOnly - (boolean) specifies that only the grid part is rendered (the "Hide/Show Settings" button remains on the screen). False by default
  • readonly - (boolean) sets the readonly mode for Pivot. False by default
  • columnsWidth - (number|string) sets the width of the columns, can be set either as a number of pixels or "auto"
  • liveReload - (boolean) true by default. Enables automatic updates in Pivot on applying new settings. If set to false, defines that changes in the Pivot settings will be applied only after clicking the Apply button
  • fieldsCloseBtn - (boolean) adds close buttons for all selected fields (in the Rows, Columns and Data sections)
  • showFilters - (boolean) defines whether filters will be enabled on Pivot initialization, true by default
  • footer - (boolean) adds a footer row into the grid to show a total result of the operation set for a column
  • gridMode - (string) the mode of displaying data in grid: "tree" (default) or "flat"
  • repeatRowsHeaders - (boolean) defines whether the content of headers will be repeated in every row, false by default. This config is applied only when the grid is used in the "flat" mode
  • fieldSelectorType - (string) defines the appearance of the fields selectors: "loop" or "dropdown" (default)
See also
Back to top