Skip to content
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
5 changes: 5 additions & 0 deletions demos/aurelia/src/examples/slickgrid/example55.ts
Original file line number Diff line number Diff line change
Expand Up @@ -48,6 +48,11 @@ export class Example55 {
enableTextSelectionOnCells: true,
enableVariableRowHeight: true,
externalResources: [new ExcelExportService()],
excelExportOptions: {
// export variable row height will also be reflected in the export
// but it can be disabled by setting `includeVariableRowHeight` to false
// includeVariableRowHeight: false, // export all rows at default height
},
rowHeight: 40,
gridHeight: 560,
gridWidth: 1080,
Expand Down
5 changes: 5 additions & 0 deletions demos/aurelia/src/examples/slickgrid/example56.ts
Original file line number Diff line number Diff line change
Expand Up @@ -62,6 +62,11 @@ export class Example56 {
enableTextSelectionOnCells: true,
enableVariableRowHeight: true,
externalResources: [new ExcelExportService()],
excelExportOptions: {
// export variable row height will also be reflected in the export
// but it can be disabled by setting `includeVariableRowHeight` to false
// includeVariableRowHeight: false, // export all rows at default height
},
rowHeight: 40,
frozenRow: 2,
gridHeight: 560,
Expand Down
5 changes: 5 additions & 0 deletions demos/react/src/examples/slickgrid/Example55.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -46,6 +46,11 @@ const Example55: React.FC = () => {
enableTextSelectionOnCells: true,
enableVariableRowHeight: true,
externalResources: [new ExcelExportService()],
excelExportOptions: {
// export variable row height will also be reflected in the export
// but it can be disabled by setting `includeVariableRowHeight` to false
// includeVariableRowHeight: false, // export all rows at default height
},
rowHeight: 40,
gridHeight: 560,
gridWidth: 1080,
Expand Down
5 changes: 5 additions & 0 deletions demos/react/src/examples/slickgrid/Example56.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -61,6 +61,11 @@ const Example56: React.FC = () => {
enableTextSelectionOnCells: true,
enableVariableRowHeight: true,
externalResources: [new ExcelExportService()],
excelExportOptions: {
// export variable row height will also be reflected in the export
// but it can be disabled by setting `includeVariableRowHeight` to false
// includeVariableRowHeight: false, // export all rows at default height
},
rowHeight: 40,
frozenRow: 2,
gridHeight: 560,
Expand Down
5 changes: 5 additions & 0 deletions demos/vanilla/src/examples/example44.ts
Original file line number Diff line number Diff line change
Expand Up @@ -53,6 +53,11 @@ export default class Example44 {
enableTextSelectionOnCells: true,
enableVariableRowHeight: true,
externalResources: [new ExcelExportService()],
excelExportOptions: {
// export variable row height will also be reflected in the export
// but it can be disabled by setting `includeVariableRowHeight` to false
// includeVariableRowHeight: false, // export all rows at default height
},
rowHeight: 40,
gridHeight: 560,
gridWidth: 1080,
Expand Down
5 changes: 5 additions & 0 deletions demos/vanilla/src/examples/example45.ts
Original file line number Diff line number Diff line change
Expand Up @@ -68,6 +68,11 @@ export default class Example45 {
enableTextSelectionOnCells: true,
enableVariableRowHeight: true,
externalResources: [new ExcelExportService()],
excelExportOptions: {
// export variable row height will also be reflected in the export
// but it can be disabled by setting `includeVariableRowHeight` to false
// includeVariableRowHeight: false, // export all rows at default height
},
rowHeight: 40,
frozenRow: 2,
gridHeight: 560,
Expand Down
5 changes: 5 additions & 0 deletions demos/vue/src/components/Example55.vue
Original file line number Diff line number Diff line change
Expand Up @@ -45,6 +45,11 @@ function defineGrid() {
enableTextSelectionOnCells: true,
enableVariableRowHeight: true,
externalResources: [new ExcelExportService()],
excelExportOptions: {
// export variable row height will also be reflected in the export
// but it can be disabled by setting `includeVariableRowHeight` to false
// includeVariableRowHeight: false, // export all rows at default height
},
rowHeight: 40,
gridHeight: 560,
gridWidth: 1080,
Expand Down
5 changes: 5 additions & 0 deletions demos/vue/src/components/Example56.vue
Original file line number Diff line number Diff line change
Expand Up @@ -60,6 +60,11 @@ function defineGrid() {
enableVariableRowHeight: true,
rowHeight: 40,
externalResources: [new ExcelExportService()],
excelExportOptions: {
// export variable row height will also be reflected in the export
// but it can be disabled by setting `includeVariableRowHeight` to false
// includeVariableRowHeight: false, // export all rows at default height
},
frozenRow: 2,
gridHeight: 560,
gridWidth: 1080,
Expand Down
12 changes: 12 additions & 0 deletions docs/grid-functionalities/export-to-excel.md
Original file line number Diff line number Diff line change
Expand Up @@ -9,6 +9,7 @@
- [Provide Custom Header Title](#provide-a-custom-header-title)
- [Export from Button Click](#export-from-a-button-click-event)
- [Show Loading Process Spinner](#show-loading-process-spinner)
- [Variable Row Height](#variable-row-height)
- [Large Dataset Performance](#large-dataset-performance)
- [UI Sample](#ui-sample)

Expand Down Expand Up @@ -250,6 +251,17 @@ export class MyExample() {
}
```

### Variable Row Height
When `enableVariableRowHeight: true` is set in your grid options, Excel export automatically reflects each row's individual pixel height, converted to Excel points (px × 0.75). This is enabled by default whenever variable row height is active.

To opt out, set `includeVariableRowHeight: false` in your `excelExportOptions`:

```ts
excelExportOptions: {
includeVariableRowHeight: false, // export all rows at default height
}
```

### Large Dataset Performance
For large datasets and formatter-heavy exports, you can improve responsiveness by enabling the DataView formatted cache.

Expand Down
12 changes: 12 additions & 0 deletions docs/grid-functionalities/export-to-pdf.md
Original file line number Diff line number Diff line change
Expand Up @@ -8,6 +8,7 @@
- [AutoTable Options Callback](#autotable-options-callback)
- [Export from Button Click](#export-from-a-button-click-event)
- [Show Loading Process Spinner](#show-loading-process-spinner)
- [Variable Row Height](#variable-row-height)
- [Large Dataset Performance](#large-dataset-performance)
- [UI Sample](#ui-sample)

Expand Down Expand Up @@ -222,6 +223,17 @@ export class MyExample {
}
```

### Variable Row Height
When `enableVariableRowHeight: true` is set in your grid options, PDF export automatically reflects each row's individual pixel height, converted to PDF points (px × 0.75). When using `jspdf-autotable`, `minCellHeight` is set per cell; the manual fallback uses the per-row height directly.

To opt out, set `includeVariableRowHeight: false` in your `pdfExportOptions`:

```ts
pdfExportOptions: {
includeVariableRowHeight: false, // export all rows at default height
}
```

### Large Dataset Performance
For large datasets and formatter-heavy exports, you can improve responsiveness by enabling the DataView formatted cache.

Expand Down
21 changes: 21 additions & 0 deletions docs/grid-functionalities/variable-row-height.md
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,7 @@
- [Using rowHeightProvider](#using-rowheightprovider)
- [Using Item Metadata Height Fallback](#using-item-metadata-height-fallback)
- [Runtime Updates](#runtime-updates)
- [Export Integration](#export-integration)

### Introduction
By default, SlickGrid uses the grid option `rowHeight` for every row. Variable row height is opt-in and only active when `enableVariableRowHeight` grid option is set to `true`.
Expand Down Expand Up @@ -74,3 +75,23 @@ this.sgb?.slickGrid?.invalidateRowHeights?.();
```

Use `invalidateRowHeights()` after any change that can alter computed row height.

### Export Integration
When `enableVariableRowHeight: true`, both Excel and PDF exports automatically reflect the per-row heights.

- **Excel**: row heights are written via `setRowInstructions`, converting pixels to points (px × 0.75).
- **PDF**: when using `jspdf-autotable`, `minCellHeight` is set per cell; the manual fallback uses the per-row height directly.

Set `includeVariableRowHeight: false` in `excelExportOptions` or `pdfExportOptions` to skip row height export and use uniform row heights instead:

```ts
const gridOptions: GridOption = {
enableVariableRowHeight: true,
excelExportOptions: {
includeVariableRowHeight: false, // skip variable heights in Excel export
},
pdfExportOptions: {
includeVariableRowHeight: false, // skip variable heights in PDF export
},
};
```
Original file line number Diff line number Diff line change
Expand Up @@ -9,6 +9,7 @@
- [Provide Custom Header Title](#provide-a-custom-header-title)
- [Export from Button Click](#export-from-a-button-click-event)
- [Show Loading Process Spinner](#show-loading-process-spinner)
- [Variable Row Height](#variable-row-height)
- [Large Dataset Performance](#large-dataset-performance)
- [UI Sample](#ui-sample)

Expand Down Expand Up @@ -257,7 +258,19 @@ export class MyComponent() implements OnInit {
}
```

### Variable Row Height
When `enableVariableRowHeight: true`, the Excel export automatically reflects per-row heights, converting pixel heights to Excel points (px × 0.75). Set `includeVariableRowHeight: false` in `excelExportOptions` to skip this and use uniform row heights:

```ts
gridOptions = {
enableVariableRowHeight: true,
excelExportOptions: {
includeVariableRowHeight: false, // export all rows at default height
},
};
```

### Large Dataset Performance
For a combined sorting + export strategy, see [Large Dataset Performance Guide](../developer-guides/large-dataset-performance.md).

```ts
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -8,6 +8,7 @@
- [AutoTable Options Callback](#autotable-options-callback)
- [Export from Button Click](#export-from-button-click)
- [Show Loading Process Spinner](#show-loading-process-spinner)
- [Variable Row Height](#variable-row-height)
- [Large Dataset Performance](#large-dataset-performance)
- [UI Sample](#ui-sample)

Expand Down Expand Up @@ -223,7 +224,19 @@ export class MyExample {
}
```

### Variable Row Height
When `enableVariableRowHeight: true`, the PDF export automatically reflects per-row heights (px × 0.75 → pt). With `jspdf-autotable`, `minCellHeight` is set per row; the manual fallback uses the per-row height directly. Set `includeVariableRowHeight: false` in `pdfExportOptions` to skip this:

```ts
gridOptions = {
enableVariableRowHeight: true,
pdfExportOptions: {
includeVariableRowHeight: false, // export all rows at default height
},
};
```

### Large Dataset Performance
For a combined sorting + export strategy, see [Large Dataset Performance Guide](../developer-guides/large-dataset-performance.md).

```ts
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,7 @@
- [Using rowHeightProvider](#using-rowheightprovider)
- [Using Item Metadata Height Fallback](#using-item-metadata-height-fallback)
- [Runtime Updates](#runtime-updates)
- [Export Integration](#export-integration)

### Introduction
By default, SlickGrid uses the grid option `rowHeight` for every row. Variable row height is opt-in and only active when `enableVariableRowHeight` grid option is set to `true`.
Expand Down Expand Up @@ -71,3 +72,23 @@ this.angularGrid?.slickGrid?.invalidateRowHeights?.();
```

> Use `(onAngularGridCreated)` event in your view template to get a reference to `this.angularGrid?.slickGrid` (see [Grid and DataView events](../events/grid-dataview-events.md) for more info)

### Export Integration
When `enableVariableRowHeight: true`, both Excel and PDF exports automatically reflect the per-row heights.

- **Excel**: row heights are written via `setRowInstructions`, converting pixels to points (px × 0.75).
- **PDF**: when using `jspdf-autotable`, `minCellHeight` is set per cell; the manual fallback uses the per-row height directly.

Set `includeVariableRowHeight: false` in `excelExportOptions` or `pdfExportOptions` to skip row height export and use uniform row heights instead:

```ts
gridOptions: GridOption = {
enableVariableRowHeight: true,
excelExportOptions: {
includeVariableRowHeight: false, // skip variable heights in Excel export
},
pdfExportOptions: {
includeVariableRowHeight: false, // skip variable heights in PDF export
},
};
```
Original file line number Diff line number Diff line change
Expand Up @@ -51,6 +51,11 @@ export class Example55Component implements OnInit {
enableTextSelectionOnCells: true,
enableVariableRowHeight: true,
externalResources: [new ExcelExportService()],
excelExportOptions: {
// export variable row height will also be reflected in the export
// but it can be disabled by setting `includeVariableRowHeight` to false
// includeVariableRowHeight: false, // export all rows at default height
},
rowHeight: 40,
gridHeight: 560,
gridWidth: 1080,
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -65,6 +65,11 @@ export class Example56Component implements OnInit {
enableTextSelectionOnCells: true,
enableVariableRowHeight: true,
externalResources: [new ExcelExportService()],
excelExportOptions: {
// export variable row height will also be reflected in the export
// but it can be disabled by setting `includeVariableRowHeight` to false
// includeVariableRowHeight: false, // export all rows at default height
},
rowHeight: 40,
frozenRow: 2,
gridHeight: 560,
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -9,6 +9,7 @@
- [Provide Custom Header Title](#provide-a-custom-header-title)
- [Export from Button Click](#export-from-a-button-click-event)
- [Show Loading Process Spinner](#show-loading-process-spinner)
- [Variable Row Height](#variable-row-height)
- [Large Dataset Performance](#large-dataset-performance)
- [UI Sample](#ui-sample)

Expand Down Expand Up @@ -245,7 +246,19 @@ If you have lots of data, you might want to show a spinner telling the user that
</aurelia-slickgrid>
```

### Variable Row Height
When `enableVariableRowHeight: true`, the Excel export automatically reflects per-row heights, converting pixel heights to Excel points (px × 0.75). Set `includeVariableRowHeight: false` in `excelExportOptions` to skip this and use uniform row heights:

```ts
gridOptions = {
enableVariableRowHeight: true,
excelExportOptions: {
includeVariableRowHeight: false, // export all rows at default height
},
};
```

### Large Dataset Performance
For a combined sorting + export strategy, see [Large Dataset Performance Guide](../developer-guides/large-dataset-performance.md).

```ts
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -8,6 +8,7 @@
- [AutoTable Options Callback](#autotable-options-callback)
- [Export from Button Click](#export-from-button-click)
- [Show Loading Process Spinner](#show-loading-process-spinner)
- [Variable Row Height](#variable-row-height)
- [Large Dataset Performance](#large-dataset-performance)
- [UI Sample](#ui-sample)

Expand Down Expand Up @@ -223,7 +224,19 @@ export class MyExample {
}
```

### Variable Row Height
When `enableVariableRowHeight: true`, the PDF export automatically reflects per-row heights (px × 0.75 → pt). With `jspdf-autotable`, `minCellHeight` is set per row; the manual fallback uses the per-row height directly. Set `includeVariableRowHeight: false` in `pdfExportOptions` to skip this:

```ts
gridOptions = {
enableVariableRowHeight: true,
pdfExportOptions: {
includeVariableRowHeight: false, // export all rows at default height
},
};
```

### Large Dataset Performance
For a combined sorting + export strategy, see [Large Dataset Performance Guide](../developer-guides/large-dataset-performance.md).

```ts
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,7 @@
- [Using rowHeightProvider](#using-rowheightprovider)
- [Using Item Metadata Height Fallback](#using-item-metadata-height-fallback)
- [Runtime Updates](#runtime-updates)
- [Export Integration](#export-integration)

### Introduction
By default, SlickGrid uses the grid option `rowHeight` for every row. Variable row height is opt-in and only active when `enableVariableRowHeight` grid option is set to `true`.
Expand Down Expand Up @@ -70,4 +71,24 @@ After any change that impacts row height, call:
this.aureliaGrid?.slickGrid?.invalidateRowHeights?.();
```

> Use `on-aurelia-grid-created.trigger` event in your view template to get a reference to `this.aureliaGrid?.slickGrid` (see [Grid and DataView events](../events/grid-dataview-events.md) for more info)
> Use `on-aurelia-grid-created.trigger` event in your view template to get a reference to `this.aureliaGrid?.slickGrid` (see [Grid and DataView events](../events/grid-dataview-events.md) for more info)

### Export Integration
When `enableVariableRowHeight: true`, both Excel and PDF exports automatically reflect the per-row heights.

- **Excel**: row heights are written via `setRowInstructions`, converting pixels to points (px × 0.75).
- **PDF**: when using `jspdf-autotable`, `minCellHeight` is set per cell; the manual fallback uses the per-row height directly.

Set `includeVariableRowHeight: false` in `excelExportOptions` or `pdfExportOptions` to skip row height export and use uniform row heights instead:

```ts
gridOptions: GridOption = {
enableVariableRowHeight: true,
excelExportOptions: {
includeVariableRowHeight: false, // skip variable heights in Excel export
},
pdfExportOptions: {
includeVariableRowHeight: false, // skip variable heights in PDF export
},
};
```
Loading
Loading