0
# Configuration Types
1

2
Complete type definitions for pivot table configuration, styling, and data structure requirements with support for cross-filtering and interactive behaviors.
3

4
## Capabilities
5

6
### Core Configuration Types
7

8
Primary interfaces that define pivot table configuration and behavior.
9

10
```typescript { .api }
11
/**
12
 * Complete form data type for pivot table configuration
13
 * Combines base query form data with pivot table specific styles and customization
14
 */
15
export type PivotTableQueryFormData = QueryFormData & PivotTableStylesProps & PivotTableCustomizeProps;
16

17
/**
18
 * Props interface for the PivotTableChart component
19
 * Extends configuration with actual data to be displayed
20
 */
21
export type PivotTableProps = PivotTableStylesProps & PivotTableCustomizeProps & {
22
  /** Array of data records to be pivoted and displayed */
23
  data: DataRecord[];
24
};
25
```
26

27
### Style Configuration
28

29
Interface defining visual styling and layout properties for the pivot table.
30

31
```typescript { .api }
32
export interface PivotTableStylesProps {
33
  /** Height of the pivot table container in pixels */
34
  height: number;
35
  /** Width of the pivot table container (pixels or CSS string) */
36
  width: number | string;
37
  /** Margin around the pivot table in pixels */
38
  margin: number;
39
}
40
```
41

42
### Customization Configuration
43

44
Comprehensive interface for pivot table behavior and display customization.
45

46
```typescript { .api }
47
interface PivotTableCustomizeProps {
48
  /** Columns to group by in rows */
49
  groupbyRows: QueryFormColumn[];
50
  /** Columns to group by in columns */
51
  groupbyColumns: QueryFormColumn[];
52
  /** Metrics to aggregate and display */
53
  metrics: QueryFormMetric[];
54
  /** Table rendering method identifier */
55
  tableRenderer: string;
56
  /** Column ordering preference */
57
  colOrder: string;
58
  /** Row ordering preference */
59
  rowOrder: string;
60
  /** Aggregation function name */
61
  aggregateFunction: string;
62
  /** Whether to transpose the pivot table */
63
  transposePivot: boolean;
64
  /** Whether to combine multiple metrics */
65
  combineMetric: boolean;
66
  /** Row subtotal positioning */
67
  rowSubtotalPosition: boolean;
68
  /** Column subtotal positioning */
69
  colSubtotalPosition: boolean;
70
  /** Whether to show column totals */
71
  colTotals: boolean;
72
  /** Whether to show row totals */
73
  rowTotals: boolean;
74
  /** Value formatting string */
75
  valueFormat: string;
76
  /** Date formatting string for temporal columns */
77
  dateFormat: string;
78
  /** Conditional formatting rules for metrics */
79
  conditionalFormatting: JsonObject;
80
  /** Data mask callback for cross-filtering */
81
  setDataMask: SetDataMaskHook;
82
  /** Whether to emit cross filters */
83
  emitCrossFilters?: boolean;
84
  /** Currently selected filter values */
85
  selectedFilters?: SelectedFiltersType;
86
  /** Verbose name mapping for display labels */
87
  verboseMap: JsonObject;
88
  /** Column-specific formatting configuration */
89
  columnFormats: JsonObject;
90
  /** Metrics layout preference (rows vs columns) */
91
  metricsLayout?: MetricsLayoutEnum;
92
  /** Color formatting rules for metrics */
93
  metricColorFormatters: ColorFormatters;
94
  /** Date formatting functions by column */
95
  dateFormatters: Record<string, DateFormatter | undefined>;
96
  /** Legacy ordering configuration */
97
  legacy_order_by: QueryFormMetric[] | QueryFormMetric | null;
98
  /** Descending order flag */
99
  order_desc: boolean;
100
  /** Context menu handler for right-click interactions */
101
  onContextMenu?: (
102
    clientX: number,
103
    clientY: number,
104
    filters?: BinaryQueryObjectFilterClause[],
105
  ) => void;
106
  /** Time grain for temporal data aggregation */
107
  timeGrainSqla?: TimeGranularity;
108
}
109
```
110

111
### Metrics Layout Enumeration
112

113
Defines how metrics are positioned within the pivot table structure.
114

115
```typescript { .api }
116
export enum MetricsLayoutEnum {
117
  /** Display metrics as separate rows */
118
  ROWS = 'ROWS',
119
  /** Display metrics as separate columns */
120
  COLUMNS = 'COLUMNS'
121
}
122
```
123

124
### Data and Filter Types
125

126
Type definitions for handling data and filtering functionality.
127

128
```typescript { .api }
129
/** Type for individual data record values */
130
export type DataRecordValue = string | number | boolean | null | undefined;
131

132
/** Type for complete data records */
133
export type DataRecord = Record<string, DataRecordValue>;
134

135
/** Type for filter values by column */
136
export type FilterType = Record<string, DataRecordValue>;
137

138
/** Type for selected filter values (multiple values per column) */
139
export type SelectedFiltersType = Record<string, DataRecordValue[]>;
140
```
141

142
### Formatting Types
143

144
Types for handling date, number, and custom formatting in the pivot table.
145

146
```typescript { .api }
147
/**
148
 * Date formatter type supporting multiple formatting approaches
149
 * Can be a time formatter, number formatter, or custom function
150
 */
151
export type DateFormatter =
152
  | TimeFormatter
153
  | NumberFormatter
154
  | ((value: DataRecordValue) => string);
155
```
156

157
### Query Form Types
158

159
Types imported from Superset core for query configuration.
160

161
```typescript { .api }
162
/** Column specification for queries */
163
export type QueryFormColumn = string | AdhocColumn;
164

165
/** Metric specification for queries */
166
export type QueryFormMetric = string | AdhocMetric;
167

168
/** Time granularity options */
169
export type TimeGranularity = string;
170

171
/** JSON object type for flexible configuration */
172
export type JsonObject = Record<string, any>;
173

174
/** Data mask hook for cross-filtering */
175
export type SetDataMaskHook = (dataMask: DataMask) => void;
176

177
/** Color formatters for metric values */
178
export type ColorFormatters = Record<string, ColorFormatter>;
179

180
/** Binary filter clause for query filtering */
181
interface BinaryQueryObjectFilterClause {
182
  col: string;
183
  op: string;
184
  val: DataRecordValue | DataRecordValue[];
185
}
186
```
187

188
**Usage Example:**
189

190
```typescript
191
import { PivotTableQueryFormData, MetricsLayoutEnum } from "@superset-ui/plugin-chart-pivot-table";
192

193
const formData: PivotTableQueryFormData = {
194
  // Base query configuration
195
  datasource: '1__table',
196
  viz_type: 'pivot_table_v2',
197
  
198
  // Style configuration
199
  height: 400,
200
  width: 600,
201
  margin: 20,
202
  
203
  // Pivot configuration
204
  groupbyRows: ['region', 'category'],
205
  groupbyColumns: ['year'],
206
  metrics: ['sales', 'profit'],
207
  aggregateFunction: 'Sum',
208
  metricsLayout: MetricsLayoutEnum.COLUMNS,
209
  colTotals: true,
210
  rowTotals: true,
211
  transposePivot: false,
212
  
213
  // Formatting and display
214
  valueFormat: '.2f',
215
  verboseMap: {
216
    'region': 'Sales Region',
217
    'category': 'Product Category'
218
  },
219
  columnFormats: {},
220
  metricColorFormatters: {},
221
  dateFormatters: {},
222
  
223
  // Interactive features
224
  emitCrossFilters: true,
225
  setDataMask: (mask) => console.log('Filter applied:', mask)
226
};
227
```