Pivot Table CSS API Reference

Necessary CSS files:

To visualize Smart.PivotTable on a page, one of the following style sheets has to be referenced:

  • smart.default.css - contains the CSS for all Smart custom elements;
  • smart.pivottable.css - contains only the CSS necessary for Smart.PivotTable. Useful if this will be the only Smart element used on the page.

All Common CSS variables:

    Specific CSS variables for Pivot Table styling:

    • --smart-table-default-width: Smart.Table/Smart.PivotTable default width
    • --smart-table-default-height: Smart.Table/Smart.PivotTable default height
    • --smart-table-header-footer-height: Smart.Table height of header and footer
    • --smart-table-column-header-height: Smart.Table/Smart.PivotTable height of column header
    • --smart-table-row-height: Smart.Table/Smart.PivotTable height of rows
    • --smart-table-cell-padding: Smart.Table/Smart.PivotTable cell padding
    • --smart-table-indent: Smart.Table/Smart.PivotTable hierarchical cell indent
    • --smart-table-arrow-size: Smart.Table/Smart.PivotTable arrow size
    • --smart-table-arrow-margin: Smart.Table/Smart.PivotTable arrow margin
    • --smart-pivot-table-cell-width: Smart.PivotTable cell width
    • --smart-pivot-table-secondary-group-width: Smart.PivotTable row group width
    • --smart-pivot-panel-width: Smart.PivotTable designer (smartPivotPanel) width
    • --smart-pivot-panel-default-height: Standalone smartPivotPanel default height
    • --smart-pivot-panel-tab-item-height: Smart.PivotTable designer (smartPivotPanel) tab item height
    • --smart-pivot-panel-padding: Smart.PivotTable designer (smartPivotPanel) padding

    The following CSS selectors can be used to style Kanban:

    • smart-pivot-table - the element itself. Can be used to set width and height for the whole element.
      • .smart-container - a container that holds the inner structure of the element. Normally, it shoudn't be used for styling.
        • .smart-pivot-table-main-container - the main part of the Pivot Table, containing the table itself.
          • .smart-table-container - the table itself, a standard HTML table element that can be styled as such.
            • thead - the table's header
              • tr - header rows
                • th - header cells
                  • .total-arrow - arrow for expanding/collapsing total columns.
                • .smart-pivot-table-grouping-header - header cells of the group column
                • .smart-pivot-table-total-header - header cells of row total columns
            • tbody - the table's body
              • tr - data rows
                • td - data cells
                • .tree-cell - "parent" row cells that have an arrow for expanding/collapsing the row.
                  • .hierarchy-arrow - an arrow for expanding/collapsing the row.
            • tfoot - the table's footer
              • tr.grand-total - Grand Total row
                • td - Grand Total cells
          • .smart-pivot-table-toolbar - the Pivot Table's toolbar.
            • .smart-pivot-table-row-group-breadcrumb - smart-breadcrumb custom element controlling row group columns.
            • .smart-pivot-table-pivot-breadcrumb - smart-breadcrumb custom element controlling pivot columns.
            • .smart-table-toolbar-button.conditional-formatting - button that opens the Conditional Formatting dialog.
              • .smart-table-window.conditional-formatting - Conditional Formatting dialog
                • smart-formatting-panel - custom element that sets up and applies the Pivot Table's conditional formatting.
            • .smart-table-toolbar-button.fields - button that opens the Fields dialog.
              • .smart-table-window.conditional-formatting - Fields dialog
                • smart-pivot-panel - custom element that controls column roles and Pivot Table filtering (Pivot Table's designer).
          • .smart-pivot-table-designer-container - container for the Pivot Table's designer.
            • smart-pivot-panel - custom element that controls column roles and Pivot Table filtering (Pivot Table's designer).
          • .jqx-table-window.drill-down - Details (drill-down) dialog.
            • .drill-down-details - contains details of drilled-down cell.
            • jqx-table - a jqx-table custom element displaying all original records aggregated in the double-clicked cell that opened the Details dialog.


    <style type="text/css">
        .smart-pivot-table {
            --smart-table-row-height: 35px;
            --smart-pivot-table-cell-width: 150px;
            height: 400px;
        .smart-pivot-table .smart-pivot-table-grouping-header,
        .smart-pivot-table td[data-field="group"] {
            background-color: rgb(245, 245, 245);
        .smart-pivot-table tbody td[data-field="group"] {
            border-right: 1px solid var(--smart-border);
        .smart-pivot-table tr.grand-total td {
            background-color: var(--smart-primary);
            color: var(--smart-primary-color);