Interactive Pivot table examples
DHTMLX Pivot turns raw data into interactive pivot tables with drag-and-drop configuration, multiple aggregation methods, and framework support. Browse the examples below to see it in action - each one runs live in your browser. For API docs and guides, see the official documentation.
Play with the toggles above to see Pivot's core features in action. Then dive into the examples - each one covers a specific scenario like dark styling, large-data performance, import and export, or framework integration, with editable code you can adapt.
Getting started
Set up and configure DHTMLX Pivot from scratch:
- Initialization - create a pivot table with fields, data, and aggregation config
- Localization - switch the interface language at runtime (English, German, Chinese)
- Toggle configuration panel - show or hide the drag-and-drop field panel
- Readonly mode - lock the pivot structure for display-only scenarios
Columns
Control column layout, widths, and headers:
- Auto-width columns - columns resize automatically based on content
- Custom column widths - set specific pixel widths for individual columns
- Frozen columns - keep row label columns fixed while scrolling horizontally
- Custom frozen columns - dynamically calculate which columns to freeze
- Collapsible columns - expand and collapse column groups interactively
- Vertical header text - rotate header labels to fit more columns in view
Rows and tree mode
Row grouping, tree hierarchy, sorting, and totals:
- Tree mode - display grouped rows as an expandable tree hierarchy
- Expand and collapse all - programmatically open or close all tree nodes at once
- Clean rows - hide duplicate values in row columns for cleaner grouping
- Sorting rows - toggle ascending and descending sort on row fields
- Row and header height - adjust pixel height for data rows, headers, and footers
- Grand totals - add summary rows and columns with grand total values
Styling and appearance
Themes, conditional formatting, and cell customization:
- Custom CSS styling - create a dark theme by overriding CSS custom properties
- Custom CSS for cells - apply CSS classes to individual cells based on field or value
- Alternate row color - alternate row background colors for better readability
- Conditional cell marks - highlight cells dynamically based on value conditions
- Styling total column - apply distinct styling to the grand total column
- Custom HTML in cells - render flag icons, star ratings, and status arrows inside cells
- Text templates for cells - format cell values and header labels with template functions
Data and filtering
Data loading, multiple datasets, and filtering:
- Different datasets - switch between multiple data sources at runtime
- Dataset with aliases - map coded field values to human-readable labels
- External filter - filter pivot data using a search input outside the component
- Data limits - cap the number of displayed rows and columns
- Large dataset performance - benchmark rendering with 50K to 1 million rows
Calculations and formatting
Custom aggregation logic and value formatting:
- Custom math methods - define custom aggregation functions beyond the built-in set
- Custom predicates - create custom grouping logic for dates, ranges, and categories
- Date format - set and dynamically switch date display formats
- Defining fields formats - configure currency prefixes, decimal precision, and date patterns
Export and import
Load and export pivot data:
- Load data from JSON and CSV - import data from external JSON arrays or CSV files
- Export to XLSX and CSV - save pivot output to styled spreadsheet formats
Framework integration
Use DHTMLX Pivot in popular JavaScript frameworks:
- React integration - integrate Pivot with React using hooks and lifecycle management
- Angular integration - use Pivot as an Angular component with proper initialization
- Vue integration - add Pivot to a Vue.js application with reactive data binding
- Svelte integration - embed Pivot in a Svelte project with minimal boilerplate