Class PivotTableComponent

Pivot Table with and pagination.

Example

import { Component } from '@angular/core';
import * as DM from './sample-ecommerce';
import { measureFactory } from '@sisense/sdk-data';

@Component({
  selector: 'code-example',
  template: `
    `<csdk-pivot-table
      [dataSet]="DM.DataSource"
      [dataOptions]="dataOptions"
      [styleOptions]="styleOptions"
    >` `</csdk-pivot-table>` 
  `,
})
export class CodeExample {
  DM = DM;
  dataOptions = {
    rows: [
      {
        column: DM.Commerce.Date.Years,
        dateFormat: 'yyyy',
        name: 'Year',
      },
      DM.Commerce.Condition,
    ],
    columns: [DM.Commerce.AgeRange],
    values: [measureFactory.sum(DM.Commerce.Revenue, 'Total Revenue')],
  };
  styleOptions = {
    rowsPerPage: 10,
    height: 425,
    width: 800,
  };
}

Additional examples:

Highlighting relative magnitude within a column with data bars:

import { Component } from '@angular/core';
import * as DM from './sample-ecommerce';
import { measureFactory } from '@sisense/sdk-data';

@Component({
  selector: 'code-example',
  template: `
    `<csdk-pivot-table
      [dataSet]="DM.DataSource"
      [dataOptions]="dataOptions"
      [styleOptions]="styleOptions"
    >` `</csdk-pivot-table>` 
  `,
})
export class CodeExample {
  DM = DM;
  dataOptions = {
    rows: [DM.Commerce.Condition, DM.Commerce.AgeRange],
    columns: [
      {
        column: DM.Commerce.Date.Years,
        dateFormat: 'yyyy',
        name: 'Year',
      },
    ],
    values: [
      {
        column: measureFactory.sum(DM.Commerce.Revenue, 'Total Revenue'),
        dataBars: true,
      },
    ],
  };
  styleOptions = {
    rowsPerPage: 10,
    height: 425,
    width: 850,
  };
}

Sorting rows: Condition and Age Range rows sorted directly by their own values (equivalent to a user clicking a row heading and choosing Sort Descending):

import { Component } from '@angular/core';
import * as DM from './sample-ecommerce';
import { measureFactory } from '@sisense/sdk-data';

@Component({
  selector: 'code-example',
  template: `
    `<csdk-pivot-table
      [dataSet]="DM.DataSource"
      [dataOptions]="dataOptions"
      [styleOptions]="styleOptions"
    >` `</csdk-pivot-table>` 
  `,
})
export class CodeExample {
  DM = DM;
  dataOptions = {
    rows: [
      {
        column: DM.Commerce.Condition,
        sortType: 'sortDesc',
      },
      {
        column: DM.Commerce.AgeRange,
        sortType: 'sortDesc',
      },
    ],
    columns: [{ column: DM.Commerce.Date.Years }],
    values: [
      { column: measureFactory.sum(DM.Commerce.Revenue, 'Revenue') },
      { column: measureFactory.sum(DM.Commerce.Quantity, 'Units') },
    ],
  };
  styleOptions = {
    rowsPerPage: 12,
    height: 425,
    width: 1200,
  };
}

Sorting rows by a value column: Age Range sorted by its Revenue values (equivalent to a user clicking the Revenue value heading and sorting Age Range Descending):

import { Component } from '@angular/core';
import * as DM from './sample-ecommerce';
import { measureFactory } from '@sisense/sdk-data';

@Component({
  selector: 'code-example',
  template: `
    `<csdk-pivot-table
      [dataSet]="DM.DataSource"
      [dataOptions]="dataOptions"
      [styleOptions]="styleOptions"
    >` `</csdk-pivot-table>` 
  `,
})
export class CodeExample {
  DM = DM;
  dataOptions = {
    rows: [
      DM.Commerce.Condition,
      {
        column: DM.Commerce.AgeRange,
        sortType: {
          direction: 'sortDesc',
          by: {
            valuesIndex: 0,
          },
        },
      },
    ],
    values: [
      measureFactory.sum(DM.Commerce.Revenue, 'Revenue'),
      measureFactory.sum(DM.Commerce.Quantity, 'Units'),
    ],
  };
  styleOptions = {
    rowsPerPage: 12,
    height: 425,
    width: 800,
  };
}

Grand totals across rows and columns:

import { Component } from '@angular/core';
import * as DM from './sample-ecommerce';
import { measureFactory } from '@sisense/sdk-data';

@Component({
  selector: 'code-example',
  template: `
    `<csdk-pivot-table
      [dataSet]="DM.DataSource"
      [dataOptions]="dataOptions"
      [styleOptions]="styleOptions"
    >` `</csdk-pivot-table>` 
  `,
})
export class CodeExample {
  DM = DM;
  dataOptions = {
    rows: [
      {
        column: DM.Commerce.Date.Years,
        dateFormat: 'yyyy',
        name: 'Year',
      },
      DM.Commerce.Condition,
    ],
    columns: [DM.Commerce.AgeRange],
    values: [measureFactory.sum(DM.Commerce.Revenue, 'Total Revenue')],
    grandTotals: {
      rows: true,
      columns: true,
    },
  };
  styleOptions = {
    rowsPerPage: 15,
    height: 550,
    width: 900,
    totalsColor: true,
    headersColor: true,
  };
}

Grand totals plus a subtotal row per Year, via PivotTableDataOptions.rows' includeSubTotals:

import { Component } from '@angular/core';
import * as DM from './sample-ecommerce';
import { measureFactory } from '@sisense/sdk-data';

@Component({
  selector: 'code-example',
  template: `
    `<csdk-pivot-table
      [dataSet]="DM.DataSource"
      [dataOptions]="dataOptions"
      [styleOptions]="styleOptions"
    >` `</csdk-pivot-table>` 
  `,
})
export class CodeExample {
  DM = DM;
  dataOptions = {
    rows: [
      {
        column: DM.Commerce.Date.Years,
        dateFormat: 'yyyy',
        name: 'Year',
        includeSubTotals: true,
      },
      DM.Commerce.Condition,
    ],
    columns: [DM.Commerce.AgeRange],
    values: [measureFactory.sum(DM.Commerce.Revenue, 'Total Revenue')],
    grandTotals: {
      rows: true,
      columns: true,
    },
  };
  styleOptions = {
    rowsPerPage: 15,
    height: 550,
    width: 900,
    totalsColor: true,
    headersColor: true,
  };
}

Configuration options can also be applied within the scope of a <SisenseContextProvider> to control the default behavior of PivotTable, by changing available settings within appConfig.chartConfig.tabular.*

Follow the link to AppConfig for more details on the available settings.