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.

Demo

<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);
    }
</style>