Demo

Source code

1
import { defineCustomElements } from '@revolist/revogrid/loader';
2
import {
3
  SummaryChartHeaderPlugin,
4
  ColumnGroupPanelPlugin,
5
  TooltipPlugin,
6
  CellValidatePlugin,
7
  EventManagerPlugin,
8
  ExportExcelPlugin,
9
  AdvanceFilterPlugin,
10
  RowSelectPlugin,
11
  type ExportExcelEvent,
12
} from '@revolist/revogrid-pro';
13
import { currentTheme } from '../composables/useRandomData';
14
import { parseFilterExpression, syncFiltersToTextInput } from '../filter-showcase/parse.filters';
15
import { ECOMMERCE_COLUMNS, ECOMMERCE_COLUMNS_TYPES } from '../sys-data/ecommerce.columns';
16

17
defineCustomElements();
18

19
const { isDark } = currentTheme();
20

21
export function load(parentSelector: string, data: any[]) {
22
  const container = document.createElement('div');
23
  container.innerHTML = `
24
    <div class="flex justify-between gap-8">
25
      <div class="mb-4 grow">
26
        <div class="flex gap-2">
27
          <textarea
28
            id="filterExpression"
29
            rows="1"
30
            class="p-4 text-sm border rounded-lg shadow-sm focus:ring focus:ring-blue-200 focus:outline-none focus:border-blue-400 placeholder-gray-400"
31
            style="width: 100%"
32
            placeholder='Enter filters (e.g., Gender eq "female")'
33
          ></textarea>
34
          <button
35
            id="filterButton"
36
            class="self-start rounded-md bg-slate-800 mb-2 py-1.5 px-3 border border-transparent text-center text-sm text-white transition-all shadow-sm hover:shadow focus:bg-slate-700 focus:shadow-none active:bg-slate-700 hover:bg-slate-700 active:shadow-none disabled:pointer-events-none disabled:opacity-50 disabled:shadow-none"
37
          >
38
            Filter
39
          </button>
40
        </div>
41
      </div>
42
      <div>
43
        <button
44
          id="exportButton"
45
          class="rounded-md bg-green-800 mb-2 py-1.5 px-3 border border-transparent text-center text-sm text-white transition-all shadow-sm hover:shadow focus:bg-slate-700 focus:shadow-none active:bg-slate-700 hover:bg-slate-700 active:shadow-none disabled:pointer-events-none disabled:opacity-50 disabled:shadow-none"
46
        >
47
          Export to Excel
48
        </button>
49
      </div>
50
    </div>
51
    <revo-grid
52
      class="border rounded-lg"
53
      range
54
      id="grid"
55
      style="min-height: 500px;"
56
      resize
57
      hide-attribution
58
    ></revo-grid>
59
  `;
60

61
  const parent = document.querySelector(parentSelector);
62
  if (parent) {
63
    parent.appendChild(container);
64
  }
65

66
  const grid = container.querySelector<HTMLRevoGridElement>('#grid');
67
  const textarea = container.querySelector<HTMLTextAreaElement>('#filterExpression');
68
  const filterButton = container.querySelector<HTMLButtonElement>('#filterButton');
69
  const exportButton = container.querySelector<HTMLButtonElement>('#exportButton');
70

71
  if (grid && textarea && filterButton && exportButton) {
72
    grid.range = true;
73
    grid.theme = isDark() ? 'darkCompact' : 'compact';
74
    grid.hideAttribution = true;
75
    grid.resize = true;
76

77
    grid.columns = [...ECOMMERCE_COLUMNS];
78
    grid.columnTypes = { ...ECOMMERCE_COLUMNS_TYPES };
79
    grid.plugins = [
80
      RowSelectPlugin,
81
      EventManagerPlugin,
82
      TooltipPlugin,
83
      ColumnGroupPanelPlugin,
84
      SummaryChartHeaderPlugin,
85
      CellValidatePlugin,
86
      AdvanceFilterPlugin,
87
      ExportExcelPlugin,
88
    ];
89
    grid.source = data;
90
    grid.filter = {};
91

92
    filterButton.addEventListener('click', () => {
93
      const filterExpression = textarea.value;
94
      const parsedFilters = parseFilterExpression(filterExpression);
95
      grid.filter = {
96
        multiFilterItems: parsedFilters,
97
      };
98
    });
99

100
    exportButton.addEventListener('click', async () => {
101
      const plugins = await grid.getPlugins();
102
      const exportPlugin = plugins.find(
103
        (plugin) => plugin instanceof ExportExcelPlugin
104
      ) as ExportExcelPlugin;
105
      const exportConfig: ExportExcelEvent = { sheetName: 'ecommerce.xlsx' };
106
      exportPlugin?.export(exportConfig);
107
    });
108

109
    grid.addEventListener('afterfilterapply', (e: CustomEvent) => {
110
      const syncedFilter = syncFiltersToTextInput(e);
111
      if (textarea) {
112
        textarea.value = syncedFilter;
113
      }
114
    });
115
  }
116
}

1
<template>
2
  <div class="flex justify-between gap-8">
3
    <div>
4
      <button
5
        class="rounded-md bg-green-800 mb-2 py-1.5 px-3 border border-transparent text-center text-sm text-white transition-all shadow-sm hover:shadow focus:bg-slate-700 focus:shadow-none active:bg-slate-700 hover:bg-slate-700 active:shadow-none disabled:pointer-events-none disabled:opacity-50 disabled:shadow-none"
6
        @click="exportToExcel"
7
      >
8
        Export to Excel
9
      </button>
10
      <span class="text-sm px-2 py-0.5">
11
        Selected Rows: <strong class="bg-gray-200 text-gray-700 px-2 py-0.5 rounded"
12
        >{{ selectedRowsCount }}/{{ allRowsCount }}</strong
13
      >
14
      </span>
15
    </div>
16
  </div>
17
  <RevoGrid
18
    class="border rounded-lg overflow-hidden"
19
    range
20
    ref="grid"
21
    :theme="isDark ? 'darkCompact' : 'compact'"
22
    :columns="columns"
23
    :source="rows"
24
    :plugins="plugins"
25
    :column-types="columnTypes"
26
    :filter="filter"
27
    style="min-height: 500px"
28
    resize
29
    hide-attribution
30
    @rowselected="handleRowSelected"
31
  />
32
</template>
33

34
<script setup lang="ts">
35
import { currentThemeVue } from '../composables/useRandomData';
36
import RevoGrid, {
37
  BasePlugin,
38
  type ColumnFilterConfig,
39
  type ColumnGrouping,
40
  type ColumnRegular,
41
} from '@revolist/vue3-datagrid';
42
import {
43
  type ExportExcelEvent,
44
  SummaryChartHeaderPlugin,
45
  ColumnGroupPanelPlugin,
46
  TooltipPlugin,
47
  CellValidatePlugin,
48
  EventManagerPlugin,
49
  ExportExcelPlugin,
50
  AdvanceFilterPlugin,
51
  RowSelectPlugin,
52
  CellFlashPlugin,
53
} from '@revolist/revogrid-pro';
54
import {
55
  ECOMMERCE_COLUMNS,
56
  ECOMMERCE_COLUMNS_TYPES,
57
} from '../sys-data/ecommerce.columns';
58
import { ref, watch } from 'vue';
59

60
const props = defineProps({
61
  rows: {
62
    type: Array<any>,
63
    default: () => [],
64
  },
65
});
66

67
const grid = ref<{ $el: HTMLRevoGridElement } | null>(null);
68
const columnTypes = ref({ ...ECOMMERCE_COLUMNS_TYPES });
69

70
// prop same as name in fields
71
const columns = ref<(ColumnRegular | ColumnGrouping)[]>([...ECOMMERCE_COLUMNS]);
72

73
const { isDark } = currentThemeVue();
74
const plugins = [
75
  RowSelectPlugin,
76
  EventManagerPlugin,
77
  TooltipPlugin,
78
  ColumnGroupPanelPlugin,
79
  SummaryChartHeaderPlugin,
80
  CellValidatePlugin,
81
  AdvanceFilterPlugin,
82
  ExportExcelPlugin,
83
  CellFlashPlugin,
84
] as any as (typeof BasePlugin)[];
85

86
const exportConfig: ExportExcelEvent = { sheetName: 'ecommerce.xlsx' };
87

88
const exportToExcel = async () => {
89
  if (grid.value) {
90
    const plugins = await grid.value.$el.getPlugins();
91
    const exportPlugin = plugins.find(
92
      (plugin) => plugin instanceof ExportExcelPlugin,
93
    ) as ExportExcelPlugin;
94
    exportPlugin?.export(exportConfig);
95
  }
96
};
97

98
const filter = ref<ColumnFilterConfig>({
99
  multiFilterItems: {},
100
});
101

102
const selectedRowsCount = ref(0);
103
const allRowsCount = ref(0);
104
watch(props.rows, () => {
105
  allRowsCount.value = props.rows.length;
106
}, { immediate: true });
107
const handleRowSelected = (
108
  event: CustomEvent<HTMLRevoGridElementEventMap['rowselected']>,
109
) => {
110
  selectedRowsCount.value = event.detail.count;
111
  allRowsCount.value = event.detail.allRowsCount;
112
};
113
</script>

1
import React, { useState, useMemo, useRef } from 'react';
2
import {
3
  RevoGrid,
4
  type DataType,
5
  type ColumnRegular,
6
  type ColumnGrouping,
7
  type ColumnFilterConfig,
8
  BasePlugin,
9
} from '@revolist/react-datagrid';
10
import {
11
  ExportExcelEvent,
12
  SummaryChartHeaderPlugin,
13
  ColumnGroupPanelPlugin,
14
  TooltipPlugin,
15
  CellValidatePlugin,
16
  EventManagerPlugin,
17
  ExportExcelPlugin,
18
  AdvanceFilterPlugin,
19
  RowSelectPlugin,
20
} from '@revolist/revogrid-pro';
21
import { useRandomData, currentTheme } from '../composables/useRandomData';
22
import { ECOMMERCE_COLUMNS, ECOMMERCE_COLUMNS_TYPES } from '../sys-data/ecommerce.columns';
23
import {
24
  parseFilterExpression,
25
  syncFiltersToTextInput,
26
} from '../filter-showcase/parse.filters';
27

28
interface ECommerceProps {
29
  rows?: DataType[];
30
  fields?: string[];
31
}
32

33
function ECommerce({ rows = [], fields = [] }: ECommerceProps) {
34
  const gridRef = useRef<HTMLRevoGridElement>(null);
35
  const [filterExpression, setFilterExpression] = useState('');
36
  const [filter, setFilter] = useState<ColumnFilterConfig>({
37
    multiFilterItems: {},
38
  });
39

40
  const { isDark } = currentTheme();
41
  const { createRandomData } = useRandomData();
42

43
  const theme = isDark() ? 'darkCompact' : 'compact';
44

45
  const columns: (ColumnRegular | ColumnGrouping)[] = useMemo(
46
    () => [...ECOMMERCE_COLUMNS],
47
    [],
48
  );
49

50
  const columnTypes = useMemo(() => ({ ...ECOMMERCE_COLUMNS_TYPES }), []);
51

52
  const plugins = useMemo(
53
    () => [
54
      RowSelectPlugin,
55
      EventManagerPlugin,
56
      TooltipPlugin,
57
      ColumnGroupPanelPlugin,
58
      SummaryChartHeaderPlugin,
59
      CellValidatePlugin,
60
      AdvanceFilterPlugin,
61
      ExportExcelPlugin,
62
    ],
63
    [],
64
  ) as any as (typeof BasePlugin)[];
65

66
  const exportConfig: ExportExcelEvent = { sheetName: 'ecommerce.xlsx' };
67

68
  const exportToExcel = async () => {
69
    const grid = gridRef.current;
70
    if (grid) {
71
      const plugins = await grid.getPlugins();
72
      const exportPlugin = plugins.find(
73
        (plugin) => plugin instanceof ExportExcelPlugin,
74
      ) as ExportExcelPlugin;
75
      exportPlugin?.export(exportConfig);
76
    }
77
  };
78

79
  const applyTextFilters = () => {
80
    const parsedFilters = parseFilterExpression(filterExpression);
81
    setFilter({
82
      multiFilterItems: parsedFilters,
83
    });
84
  };
85

86
  const sync = (e: CustomEvent) => {
87
    setFilterExpression(syncFiltersToTextInput(e));
88
  };
89

90
  return (
91
    <div>
92
      <div className="flex justify-between gap-8">
93
        <div className="mb-4 grow">
94
          <div className="flex gap-2">
95
            <textarea
96
              id="filterExpression"
97
              rows={1}
98
              className={`p-4 text-sm border rounded-lg shadow-sm focus:ring focus:ring-blue-200 focus:outline-none focus:border-blue-400 placeholder-gray-400 ${
99
                isDark()
100
                  ? 'bg-gray-800 border-gray-600'
101
                  : 'bg-white border-gray-300'
102
              }`}
103
              style={{ width: '100%' }}
104
              placeholder='Enter filters (e.g., Gender eq "female")'
105
              value={filterExpression}
106
              onChange={(e) => setFilterExpression(e.target.value)}
107
            />
108
            <button
109
              className="self-start rounded-md bg-slate-800 mb-2 py-1.5 px-3 border border-transparent text-center text-sm text-white transition-all shadow-sm hover:shadow focus:bg-slate-700 focus:shadow-none active:bg-slate-700 hover:bg-slate-700 active:shadow-none disabled:pointer-events-none disabled:opacity-50 disabled:shadow-none"
110
              onClick={applyTextFilters}
111
            >
112
              Filter
113
            </button>
114
          </div>
115
        </div>
116
        <div>
117
          <button
118
            className="rounded-md bg-green-800 mb-2 py-1.5 px-3 border border-transparent text-center text-sm text-white transition-all shadow-sm hover:shadow focus:bg-slate-700 focus:shadow-none active:bg-slate-700 hover:bg-slate-700 active:shadow-none disabled:pointer-events-none disabled:opacity-50 disabled:shadow-none"
119
            onClick={exportToExcel}
120
          >
121
            Export to Excel
122
          </button>
123
        </div>
124
      </div>
125
      <RevoGrid
126
        className="border rounded-lg"
127
        range
128
        ref={gridRef}
129
        columns={columns}
130
        source={rows.length > 0 ? rows : createRandomData(100)}
131
        plugins={plugins}
132
        columnTypes={columnTypes}
133
        filter={filter}
134
        style={{ minHeight: '500px' }}
135
        resize
136
        hide-attribution
137
        theme={theme}
138
        // @ts-ignore
139
        onAfterfilterapply={sync}
140
      />
141
    </div>
142
  );
143
}
144

145
export default ECommerce;

1
import { Component, ViewEncapsulation, Input, ViewChild, ElementRef } from '@angular/core';
2
import {
3
  type ColumnFilterConfig,
4
  type ColumnRegular,
5
  type ColumnGrouping,
6
  RevoGrid,
7
} from '@revolist/angular-datagrid';
8
import {
9
  SummaryChartHeaderPlugin,
10
  ColumnGroupPanelPlugin,
11
  TooltipPlugin,
12
  CellValidatePlugin,
13
  EventManagerPlugin,
14
  ExportExcelPlugin,
15
  type ExportExcelEvent,
16
  AdvanceFilterPlugin,
17
  RowSelectPlugin,
18
} from '@revolist/revogrid-pro';
19
import { currentTheme } from '../composables/useRandomData';
20
import { parseFilterExpression, syncFiltersToTextInput } from '../filter-showcase/parse.filters';
21
import { ECOMMERCE_COLUMNS, ECOMMERCE_COLUMNS_TYPES } from '../sys-data/ecommerce.columns';
22

23
@Component({
24
  selector: 'ecommerce-grid',
25
  standalone: true,
26
  imports: [RevoGrid],
27
  template: `
28
    <div class="flex justify-between gap-8">
29
      <div class="mb-4 grow">
30
        <div class="flex gap-2">
31
          <textarea
32
            id="filterExpression"
33
            rows="1"
34
            [ngClass]="{
35
              'bg-white border-gray-300': !isDark(),
36
              'bg-gray-800 border-gray-600': isDark()
37
            }"
38
            class="p-4 text-sm border rounded-lg shadow-sm focus:ring focus:ring-blue-200 focus:outline-none focus:border-blue-400 placeholder-gray-400"
39
            style="width: 100%"
40
            placeholder='Enter filters (e.g., Gender eq "female")'
41
            [(ngModel)]="filterExpression"
42
          ></textarea>
43
          <button
44
            class="self-start rounded-md bg-slate-800 mb-2 py-1.5 px-3 border border-transparent text-center text-sm text-white transition-all shadow-sm hover:shadow focus:bg-slate-700 focus:shadow-none active:bg-slate-700 hover:bg-slate-700 active:shadow-none disabled:pointer-events-none disabled:opacity-50 disabled:shadow-none"
45
            (click)="applyTextFilters()"
46
          >
47
            Filter
48
          </button>
49
        </div>
50
      </div>
51
      <div>
52
        <button
53
          class="rounded-md bg-green-800 mb-2 py-1.5 px-3 border border-transparent text-center text-sm text-white transition-all shadow-sm hover:shadow focus:bg-slate-700 focus:shadow-none active:bg-slate-700 hover:bg-slate-700 active:shadow-none disabled:pointer-events-none disabled:opacity-50 disabled:shadow-none"
54
          (click)="exportToExcel()"
55
        >
56
          Export to Excel
57
        </button>
58
      </div>
59
    </div>
60
    <revo-grid
61
      #gridRef
62
      class="border rounded-lg"
63
      [range]="true"
64
      [theme]="theme"
65
      [columns]="columns"
66
      [source]="rows"
67
      [plugins]="plugins"
68
      [columnTypes]="columnTypes"
69
      [filter]="filter"
70
      style="min-height: 500px;"
71
      [resize]="true"
72
      [hideAttribution]="true"
73
      (afterfilterapply)="sync($event)"
74
    ></revo-grid>
75
  `,
76
  encapsulation: ViewEncapsulation.None,
77
})
78
export class ECommerceGridComponent {
79
  @Input() rows: any[] = [];
80
  @Input() fields: string[] = [];
81

82
  @ViewChild('gridRef', { static: true }) gridRef!: ElementRef<HTMLRevoGridElement>;
83

84
  columnTypes = { ...ECOMMERCE_COLUMNS_TYPES };
85
  columns: (ColumnRegular | ColumnGrouping)[] = [...ECOMMERCE_COLUMNS];
86

87
  theme = currentTheme().isDark() ? 'darkCompact' : 'compact';
88
  filterExpression = ''; // Stores the user-entered filter expression
89

90
  filter: ColumnFilterConfig = {
91
    multiFilterItems: {},
92
  };
93

94
  plugins = [
95
    RowSelectPlugin,
96
    EventManagerPlugin,
97
    TooltipPlugin,
98
    ColumnGroupPanelPlugin,
99
    SummaryChartHeaderPlugin,
100
    CellValidatePlugin,
101
    AdvanceFilterPlugin,
102
    ExportExcelPlugin,
103
  ];
104

105
  exportConfig: ExportExcelEvent = { sheetName: 'ecommerce.xlsx' };
106

107
  async exportToExcel() {
108
    const plugins = await this.gridRef.nativeElement.getPlugins();
109
    const exportPlugin = plugins.find(
110
      (plugin) => plugin instanceof ExportExcelPlugin
111
    ) as ExportExcelPlugin;
112
    exportPlugin?.export(this.exportConfig);
113
  }
114

115
  applyTextFilters() {
116
    const parsedFilters = parseFilterExpression(this.filterExpression);
117
    this.filter = {
118
      multiFilterItems: parsedFilters,
119
    };
120
  }
121

122
  sync(event: CustomEvent) {
123
    this.filterExpression = syncFiltersToTextInput(event);
124
  }
125
}

1
import type { ColumnGrouping, ColumnRegular, HyperFunc, VNode } from '@revolist/revogrid';
2

3
import NumberColumnType from '@revolist/revogrid-column-numeral';
4
import SelectColumnType from '@revolist/revogrid-column-select';
5

6
import {
7
  changeRenderer,
8
  columnTypeRenderer,
9
  ratingStarRenderer,
10
  thumbsRenderer,
11
  validationRenderer,
12
  barChartRenderer,
13
  pieChartRenderer,
14
  summaryHeaderRenderer,
15
  summaryAggregateRenderer,
16
  validateRange,
17
  validateBoolean,
18
  validateInteger,
19
  cellFlashArrowTemplate,
20
} from '@revolist/revogrid-pro';
21

22
export const ECOMMERCE_COLUMNS_TYPES = {
23
  integer: new NumberColumnType(),
24
  percent: new NumberColumnType('0.00%'),
25
  currency: new NumberColumnType('$0,0.00'),
26
  select: new SelectColumnType(),
27
};
28

29
export const ECOMMERCE_COLUMNS: (ColumnRegular | ColumnGrouping)[] = [
30
  {
31
    name: 'Personal',
32
    children: [
33
      {
34
        prop: '_checkbox',
35
        rowSelect: true,
36
        readonly: true,
37
        filter: false,
38
        size: 60,
39
      },
40
      {
41
        name: 'ID',
42
        prop: 'Customer ID',
43
        size: 90,
44
        columnTemplate: columnTypeRenderer,
45
        columnType: 'id',
46
        readonly: true,
47
      },
48
      {
49
        name: 'Image',
50
        prop: 'avatar',
51
        size: 100,
52
        filter: false,
53
        columnTemplate: columnTypeRenderer,
54
        columnType: 'integer',
55
        cellTemplate: (h: HyperFunc<VNode>, props: any) => {
56
          return h('img', {
57
            style: {
58
              width: '21px',
59
              height: '21px',
60
              borderRadius: '50%',
61
              objectFit: 'cover',
62
              verticalAlign: 'middle',
63
            },
64
            src: `https://randomuser.me/api/portraits/${props.model.Gender === 'Male' ? 'men' : 'women'}/${props.rowIndex % 50}.jpg`,
65
          });
66
        },
67
      },
68
      {
69
        name: 'Gender',
70
        prop: 'Gender',
71
        columnType: 'select',
72
        source: ['Male', 'Female'],
73
        filter: ['string', 'selection'],
74
        columnTemplate: columnTypeRenderer,
75
        summaryVNode: (h: HyperFunc<VNode>, summary: any) => {
76
          const keys = Object.keys(summary)
77
            .sort()
78
            .filter((name) => name);
79
          return pieChartRenderer(h, {
80
            value: keys.map((name) => ({
81
              name,
82
              value: summary[name],
83
              color: name === 'Male' ? '#008620' : '#ffc107',
84
            })),
85
          });
86
        },
87
      },
88
      {
89
        name: 'Lifetime Value',
90
        prop: 'Lifetime Value',
91
        size: 180,
92

93
        summaryVNode: (h: HyperFunc<VNode>, summary: any) => {
94
          const keys = Object.keys(summary);
95
          return barChartRenderer(h, {
96
            value: keys.map((k) => summary[k]),
97
            column: { position: 'top' },
98
          });
99
        },
100
        columnTemplate: columnTypeRenderer,
101
        columnType: 'integer',
102
        filter: ['number'],
103
        validate: (v: any) => validateInteger(v),
104
      },
105
      {
106
        name: 'Age',
107
        prop: 'Age',
108
        columnType: 'integer',
109
        size: 150,
110
        filter: ['number', 'slider'],
111
        columnTemplate: columnTypeRenderer,
112
        summaryVNode(h: HyperFunc<VNode>, summary: any) {
113
          const keys = Object.keys(summary).sort();
114
          return barChartRenderer(h, {
115
            value: keys.map((k) => summary[k]),
116
            column: { position: 'top' },
117
          });
118
        },
119
        validate: (v: any) => validateRange(v, 20, 100),
120
        validationTooltip: (v: any) => {
121
          return v < 20
122
            ? `Age must be greater than ${20}, you entered ${v}`
123
            : v > 100
124
            ? `Age must be less than ${100}, you entered ${v}`
125
            : undefined;
126
        },
127
        flash: () => true,
128
        cellTemplate: cellFlashArrowTemplate(),
129
      },
130
      {
131
        name: 'City',
132
        prop: 'City',
133
        filter: ['selection'],
134
        size: 180,
135
        columnTemplate: columnTypeRenderer,
136
        summaryVNode: (h: HyperFunc<VNode>, summary: any) =>
137
          summaryHeaderRenderer(h, summary, { maxItems: 2 }),
138
        columnType: 'string',
139
      },
140
      {
141
        name: 'Membership Type',
142
        prop: 'Membership Type',
143
        columnTemplate: columnTypeRenderer,
144
        summaryVNode: (h: HyperFunc<VNode>, summary: any) =>
145
          summaryHeaderRenderer(h, summary, { maxItems: 2 }),
146
        columnType: 'select',
147
        filter: ['selection'],
148
        size: 200,
149
        source: ['Gold', 'Silver', 'Bronze'],
150
      },
151
    ],
152
  },
153
  {
154
    name: 'Spending',
155
    children: [
156
      {
157
        name: 'Average Rating',
158
        prop: 'Average Rating',
159
        size: 150,
160
        columnTemplate: columnTypeRenderer,
161
        summaryVNode: (h: HyperFunc<VNode>, summary: any) => {
162
          const keys = Object.keys(summary).sort();
163
          return barChartRenderer(h, {
164
            value: keys.map((k) => summary[k]),
165
            column: { position: 'top' },
166
          });
167
        },
168
        filter: ['number'],
169
        columnType: 'integer',
170
        cellTemplate: ratingStarRenderer,
171
        invalidProperties: () => ({
172
          style: { backgroundColor: 'var(--sl-color-red-low)' },
173
        }),
174
        softValidation: true,
175
        validationTooltip: (v: any) => {
176
          return v < 4 ? `Average rating is less than ${4} (${v})` : undefined;
177
        },
178
        validate: (v: any) => validateRange(v, 4, 5),
179
      },
180
      {
181
        name: 'Discount',
182
        prop: 'Discount Applied',
183
        size: 120,
184
        columnType: 'boolean',
185
        cellTemplate: thumbsRenderer,
186
        columnTemplate: columnTypeRenderer,
187
        summaryVNode: (h: HyperFunc<VNode>, summary: any) => {
188
          const keys = Object.keys(summary).filter((name) => name);
189
          return pieChartRenderer(h, {
190
            value: keys.map((name) => ({
191
              name,
192
              value: summary[name],
193
            })),
194
          });
195
        },
196
        validate: (v: any) => validateBoolean(v),
197
      },
198
      {
199
        name: 'Spend Change (%)',
200
        prop: 'Spend Change (%)',
201
        size: 200,
202
        columnType: 'percent',
203
        filter: ['number'],
204
        columnTemplate: columnTypeRenderer,
205
        cellParser: (model: any, column: any) =>
206
          parseFloat(model[column.prop])?.toFixed(2),
207
        cellTemplate: changeRenderer,
208
        summaryVNode: (h: HyperFunc<VNode>, summary: any) =>
209
          summaryAggregateRenderer(h, summary, { showAvg: true }),
210
      },
211
      {
212
        name: 'Total Spend',
213
        prop: 'Total Spend',
214
        size: 150,
215
        columnType: 'currency',
216
        filter: ['number'],
217
        columnTemplate: columnTypeRenderer,
218
        summaryVNode: (h: HyperFunc<VNode>, summary: any) =>
219
          summaryAggregateRenderer(h, summary, { showSum: true }),
220
        flash: () => true,
221
        cellTemplate: cellFlashArrowTemplate(),
222
      },
223
    ],
224
  },
225
];