Pivot Table

Examples

HTML

<div id="table1"></div>
<br>
<div id="table2"></div>
<br>
<div id="table3"></div>
<br>
<div id="table4"></div>

JavaScript

var pivotTable1 = new hx.PivotTable('#table1')
var pivotTable2 = new hx.PivotTable('#table2')
var pivotTable3 = new hx.PivotTable('#table3')
var pivotTable4 = new hx.PivotTable('#table4', { fullWidth: true })

var data1 = {
  topHead: [
    'Head 1',
    'Head 2',
    'Head 3'
  ],
  leftHead: [
    'Head 1',
    'Head 2',
    'Head 3'
  ],
  body: [
    [
      'Cell 1',
      'Cell 2',
      'Cell 3'
    ],
    [
      'Cell 1',
      'Cell 2',
      'Cell 3'
    ],
    [
      'Cell 1',
      'Cell 2',
      'Cell 3'
    ]
  ]
}

var data2 = {
  leftHead: [
    'Head 1',
    'Head 2',
    'Head 3'
  ],
  body: [
    [
      'Cell 1',
      'Cell 2',
      'Cell 3'
    ],
    [
      'Cell 1',
      'Cell 2',
      'Cell 3'
    ],
    [
      'Cell 1',
      'Cell 2',
      'Cell 3'
    ]
  ]
}

var data3 = {
  topHead: [
    'Head 1',
    'Head 2',
    'Head 3'
  ],
  body: [
    [
      'Cell 1',
      'Cell 2',
      'Cell 3'
    ],
    [
      'Cell 1',
      'Cell 2',
      'Cell 3'
    ],
    [
      'Cell 1',
      'Cell 2',
      'Cell 3'
    ]
  ]
}

pivotTable1.data(data1)
pivotTable2.data(data2)
pivotTable3.data(data3)
pivotTable4.data(data1)

Api

Change Log

Prototypes

hx.PivotTable

A module for creating pivot tables from JSON.

Constructors

hx.PivotTableselectorString / HTMLElementoptionsObject

Create a pivot table object.

Arguments

selectorString / HTMLElement

The selector to create the table in.

options

The options to use for the pivot table

Properties

cellRenderdatumAnyelementHTMLElementisHeadBooleancolumnNumber

A function for rendering the cells in the table body.

The default value of this function is as follows:

function (data, element, isHead, column) {
  hx.select(element).text(data)
}

Arguments

datumAny

The data for the cell

elementHTMLElement

The html element of the cell

isHeadBoolean

Whether the cell is a header cell or a body cell

columnNumber

The column index of the cell

data

The data to render in the pivot table.

The data should be an object with a topHead , leftHead and body .

{
  topHead: [
    'Header',
    ...// Headers for the top of the table
  ],
  leftHead: [
    'Header',
    ...// Headers for the first column
  ],
  body: [
    [
      'Row 1',
      ..// Row Data
    ],
    ...// Body Data
  ]
}

The data does not have to have both a topHead and leftHead.

fullWidthBoolean

Whether to force the table to take up at least the full width available

Default: false

stickyHeadersBoolean

Whether or not to apply the sticky headers from hx.StickyTableHeaders to the table

topLeftCellRenderelementHTMLElement

A function for rendering the top left cell (the division between row headers and column headers)

By default this function does not have a value and will be rendered as an empty cell.

Arguments

elementHTMLElement

The th node of the top left cell. Values entered in this cell will affect the sizes of the left/top headings.

useResponsiveBoolean

Determines whether or not to re-render the table when the container is resized.

Default: true

Methods

datadataObjectPivotTable

A method for providing a pivot table with data

Arguments

data

The data to render in the pivot table.

The data should be an object with a topHead , leftHead and body .

{
  topHead: [
    'Header',
    ...// Headers for the top of the table
  ],
  leftHead: [
    'Header',
    ...// Headers for the first column
  ],
  body: [
    [
      'Row 1',
      ..// Row Data
    ],
    ...// Body Data
  ]
}

The data does not have to have both a topHead and leftHead.

Returns

PivotTable

This pivot table for chaining

dataAny

A method for getting the data set in the current pivot table

Returns

Any

The data for the current pivot table.

Functions

hx.pivotTableoptionsObjectSelection

Creates a new PivotTable set up on a detached element, wrapped in a selection

Arguments

options

See the options object for constructing PivotTable

Returns

Selection

A selection containing an element with an PivotTable initialised on it