Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[DataGridPremium] Add excel export #3802

Closed
wants to merge 21 commits into from
Closed

[DataGridPremium] Add excel export #3802

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
21 commits
Select commit Hold shift + click to select a range
0f57f82
add exceljs
alexfauquette Jan 31, 2022
6495245
full export excel pipeline
alexfauquette Jan 31, 2022
105f32e
add l10n
alexfauquette Jan 31, 2022
e57ca68
proptypes
alexfauquette Jan 31, 2022
9866b05
fix not required experimentalFeatures
alexfauquette Jan 31, 2022
f37de8b
docs:api
alexfauquette Jan 31, 2022
93543c9
do not import from package
alexfauquette Jan 31, 2022
9609e5c
add demo example
alexfauquette Feb 1, 2022
938954f
Merge remote-tracking branch 'upstream/master' into excel-export
alexfauquette Feb 1, 2022
8ff3275
reflect the column type in excel
alexfauquette Feb 1, 2022
8478344
add row hierarchy support
alexfauquette Feb 1, 2022
9af8806
exportDataAsExcel can be undefined
alexfauquette Feb 2, 2022
1279bb5
Merge remote-tracking branch 'upstream/master' into excel-export
alexfauquette Feb 2, 2022
caaa7f9
Merge remote-tracking branch 'upstream/master' into excel-export
alexfauquette Feb 3, 2022
321a40e
remove WIP logos
alexfauquette Feb 3, 2022
f81f54c
merge code for comon behavior between excel and csv
alexfauquette Feb 3, 2022
861de16
add tree datastructure to the doc
alexfauquette Feb 3, 2022
aac9f99
setup API documentation for excel export
alexfauquette Feb 3, 2022
f01e3cd
l10n
alexfauquette Feb 3, 2022
40e1fd7
customize sheet outside of the data
alexfauquette Feb 4, 2022
f12d3ef
type the demo
alexfauquette Feb 4, 2022
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
4 changes: 4 additions & 0 deletions docs/data/pages.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -42,6 +42,10 @@ const pages = [
pathname: '/x/api/data-grid/grid-print-export-options',
title: 'GridPrintExportOptions',
},
{
pathname: '/x/api/data-grid/grid-excel-export-options',
title: 'GridExcelExportOptions',
},
],
},
],
Expand Down
2 changes: 1 addition & 1 deletion docs/pages/api-docs/data-grid/data-grid-pro.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -58,7 +58,7 @@
"experimentalFeatures": {
"type": {
"name": "shape",
"description": "{ preventCommitWhileValidating?: bool, rowGrouping?: bool }"
"description": "{ excelExport?: bool, preventCommitWhileValidating?: bool, rowGrouping?: bool }"
}
},
"filterMode": {
Expand Down
2 changes: 2 additions & 0 deletions docs/pages/api-docs/data-grid/grid-api.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -18,6 +18,7 @@ import { GridApi } from '@mui/x-data-grid-pro';
| <span class="prop-name">commitRowChange</span> | <span class="prop-type">(id: GridRowId, event?: MuiBaseEvent) =&gt; boolean \| Promise&lt;boolean&gt;</span> | Updates the row at the given id with the values stored in the edit row model. |
| <span class="prop-name">deleteFilterItem</span> | <span class="prop-type">(item: GridFilterItem) =&gt; void</span> | Deletes a [GridFilterItem](/api/data-grid/grid-filter-item/). |
| <span class="prop-name">exportDataAsCsv</span> | <span class="prop-type">(options?: GridCsvExportOptions) =&gt; void</span> | Downloads and exports a CSV of the grid's data. |
| <span class="prop-name">exportDataAsExcel</span> | <span class="prop-type">(options?: GridExcelExportOptions) =&gt; void</span> | Downloads and exports a excel of the grid's data. |
| <span class="prop-name">exportDataAsPrint</span> | <span class="prop-type">(options?: GridPrintExportOptions) =&gt; void</span> | Print the grid's data. |
| <span class="prop-name">exportState</span> | <span class="prop-type">() =&gt; GridInitialState</span> | Generates a serializable object containing the exportable parts of the DataGrid state.<br />These values can then be passed to the `initialState` prop or injected using the `restoreState` method. |
| <span class="prop-name">forceUpdate</span> | <span class="prop-type">() =&gt; void</span> | Forces the grid to rerender. It's often used after a state update. |
Expand All @@ -34,6 +35,7 @@ import { GridApi } from '@mui/x-data-grid-pro';
| <span class="prop-name">getColumnPosition</span> | <span class="prop-type">(field: string) =&gt; number</span> | Returns the left-position of a column relative to the inner border of the grid. |
| <span class="prop-name">getColumnsMeta</span> | <span class="prop-type">() =&gt; GridColumnsMeta</span> | Returns the GridColumnsMeta for each column. |
| <span class="prop-name">getDataAsCsv</span> | <span class="prop-type">(options?: GridCsvExportOptions) =&gt; string</span> | Returns the grid data as a CSV string.<br />This method is used internally by `exportDataAsCsv`. |
| <span class="prop-name">getDataAsExcel</span> | <span class="prop-type">(options?: GridExcelExportOptions) =&gt; Promise&lt;Workbook&gt;</span> | Returns the grid data as an exceljs workbook.<br />This method is used internally by `exportDataAsExcel`. |
| <span class="prop-name">getEditRowsModel</span> | <span class="prop-type">() =&gt; GridEditRowsModel</span> | Gets the edit rows model of the grid. |
| <span class="prop-name">getLocaleText</span> | <span class="prop-type">&lt;T extends GridTranslationKeys&gt;(key: T) =&gt; GridLocaleText[T]</span> | Returns the translation for the `key`. |
| <span class="prop-name">getPinnedColumns</span> | <span class="prop-type">() =&gt; GridPinnedColumns</span> | Returns which columns are pinned. |
Expand Down
18 changes: 9 additions & 9 deletions docs/pages/api-docs/data-grid/grid-csv-export-options.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,12 +12,12 @@ import { GridCsvExportOptions } from '@mui/x-data-grid';

## Properties

| Name | Type | Default | Description |
| :------------------------------------------------------------------------------------------------ | :-------------------------------------------------------------------------------------- | :------------------------------------------------- | :----------------------------------------------------------------------------------------------------------------------------------------------- |
| <span class="prop-name optional">allColumns<sup><abbr title="optional">?</abbr></sup></span> | <span class="prop-type">boolean</span> | <span class="prop-default">false</span> | If `true`, the hidden columns will also be exported. |
| <span class="prop-name optional">delimiter<sup><abbr title="optional">?</abbr></sup></span> | <span class="prop-type">string</span> | <span class="prop-default">','</span> | The character used to separate fields. |
| <span class="prop-name optional">fields<sup><abbr title="optional">?</abbr></sup></span> | <span class="prop-type">string[]</span> | | The columns exported.<br />This should only be used if you want to restrict the columns exports. |
| <span class="prop-name optional">fileName<sup><abbr title="optional">?</abbr></sup></span> | <span class="prop-type">string</span> | <span class="prop-default">`document.title`</span> | The string used as the file name. |
| <span class="prop-name optional">getRowsToExport<sup><abbr title="optional">?</abbr></sup></span> | <span class="prop-type">(params: GridCsvGetRowsToExportParams) =&gt; GridRowId[]</span> | | Function that returns the id of the rows to export on the order they should be exported. |
| <span class="prop-name optional">includeHeaders<sup><abbr title="optional">?</abbr></sup></span> | <span class="prop-type">boolean</span> | <span class="prop-default">true</span> | If `true`, the first row of the CSV will include the headers of the grid. |
| <span class="prop-name optional">utf8WithBom<sup><abbr title="optional">?</abbr></sup></span> | <span class="prop-type">boolean</span> | <span class="prop-default">false</span> | If `true`, the UTF-8 Byte Order Mark (BOM) prefixes the exported file.<br />This can allow Excel to automatically detect file encoding as UTF-8. |
| Name | Type | Default | Description |
| :------------------------------------------------------------------------------------------------ | :----------------------------------------------------------------------------------- | :------------------------------------------------- | :----------------------------------------------------------------------------------------------------------------------------------------------- |
| <span class="prop-name optional">allColumns<sup><abbr title="optional">?</abbr></sup></span> | <span class="prop-type">boolean</span> | <span class="prop-default">false</span> | If `true`, the hidden columns will also be exported. |
| <span class="prop-name optional">delimiter<sup><abbr title="optional">?</abbr></sup></span> | <span class="prop-type">string</span> | <span class="prop-default">','</span> | The character used to separate fields. |
| <span class="prop-name optional">fields<sup><abbr title="optional">?</abbr></sup></span> | <span class="prop-type">string[]</span> | | The columns exported.<br />This should only be used if you want to restrict the columns exports. |
| <span class="prop-name optional">fileName<sup><abbr title="optional">?</abbr></sup></span> | <span class="prop-type">string</span> | <span class="prop-default">`document.title`</span> | The string used as the file name. |
| <span class="prop-name optional">getRowsToExport<sup><abbr title="optional">?</abbr></sup></span> | <span class="prop-type">(params: GridGetRowsToExportParams) =&gt; GridRowId[]</span> | | Function that returns the id of the rows to export on the order they should be exported. |
| <span class="prop-name optional">includeHeaders<sup><abbr title="optional">?</abbr></sup></span> | <span class="prop-type">boolean</span> | <span class="prop-default">true</span> | If `true`, the first row of the file will include the headers of the grid. |
| <span class="prop-name optional">utf8WithBom<sup><abbr title="optional">?</abbr></sup></span> | <span class="prop-type">boolean</span> | <span class="prop-default">false</span> | If `true`, the UTF-8 Byte Order Mark (BOM) prefixes the exported file.<br />This can allow Excel to automatically detect file encoding as UTF-8. |
16 changes: 16 additions & 0 deletions docs/pages/api-docs/data-grid/grid-excel-export-api.json
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,16 @@
{
"name": "GridExcelExportApi",
"description": "The excel export API interface that is available in the grid apiRef.",
"properties": [
{
"name": "exportDataAsExcel",
"description": "Downloads and exports a excel of the grid&#39;s data.",
"type": "(options?: GridExcelExportOptions) => void"
},
{
"name": "getDataAsExcel",
"description": "Returns the grid data as an exceljs workbook.\nThis method is used internally by <code>exportDataAsExcel</code>.",
"type": "(options?: GridExcelExportOptions) => Promise<Workbook>"
}
]
}
7 changes: 7 additions & 0 deletions docs/pages/api-docs/data-grid/grid-excel-export-options.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,7 @@
import * as React from 'react';
import MarkdownDocs from '@mui/monorepo/docs/src/modules/components/MarkdownDocs';
import { demos, docs, demoComponents } from './grid-excel-export-options.md?@mui/markdown';

export default function Page() {
return <MarkdownDocs demos={demos} docs={docs} demoComponents={demoComponents} />;
}
23 changes: 23 additions & 0 deletions docs/pages/api-docs/data-grid/grid-excel-export-options.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,23 @@
# GridExcelExportOptions Interface

<p class="description">The options to apply on the Excel export.</p>

## Import

```js
import { GridExcelExportOptions } from '@mui/x-data-grid-pro';
// or
import { GridExcelExportOptions } from '@mui/x-data-grid';
```

## Properties

| Name | Type | Default | Description |
| :--------------------------------------------------------------------------------------------------- | :----------------------------------------------------------------------------------------------- | :------------------------------------------------- | :----------------------------------------------------------------------------------------------- |
| <span class="prop-name optional">allColumns<sup><abbr title="optional">?</abbr></sup></span> | <span class="prop-type">boolean</span> | <span class="prop-default">false</span> | If `true`, the hidden columns will also be exported. |
| <span class="prop-name optional">exceljsPostprocess<sup><abbr title="optional">?</abbr></sup></span> | <span class="prop-type">(processInput: GridExceljsProcessInput) =&gt; Promise&lt;void&gt;</span> | | |
| <span class="prop-name optional">exceljsPreprocess<sup><abbr title="optional">?</abbr></sup></span> | <span class="prop-type">(processInput: GridExceljsProcessInput) =&gt; Promise&lt;void&gt;</span> | | |
| <span class="prop-name optional">fields<sup><abbr title="optional">?</abbr></sup></span> | <span class="prop-type">string[]</span> | | The columns exported.<br />This should only be used if you want to restrict the columns exports. |
| <span class="prop-name optional">fileName<sup><abbr title="optional">?</abbr></sup></span> | <span class="prop-type">string</span> | <span class="prop-default">`document.title`</span> | The string used as the file name. |
| <span class="prop-name optional">getRowsToExport<sup><abbr title="optional">?</abbr></sup></span> | <span class="prop-type">(params: GridGetRowsToExportParams) =&gt; GridRowId[]</span> | | Function that returns the id of the rows to export on the order they should be exported. |
| <span class="prop-name optional">includeHeaders<sup><abbr title="optional">?</abbr></sup></span> | <span class="prop-type">boolean</span> | <span class="prop-default">true</span> | If `true`, the first row of the file will include the headers of the grid. |
1 change: 1 addition & 0 deletions docs/pages/api-docs/data-grid/index.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -15,6 +15,7 @@
- [GridRowParams](/api/data-grid/grid-row-params/)
- [GridCsvExportOptions](/api/data-grid/grid-csv-export-options/)
- [GridPrintExportOptions](/api/data-grid/grid-print-export-options/)
- [GridExcelExportOptions](/api/data-grid/grid-excel-export-options/)

## Events

Expand Down
2 changes: 2 additions & 0 deletions docs/scripts/api/buildInterfacesDocumentation.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -46,6 +46,7 @@ const INTERFACES_WITH_DEDICATED_PAGES = [
'GridRowGroupingApi',
'GridColumnPinningApi',
'GridPrintExportApi',
'GridExcelExportApi',
'GridDisableVirtualizationApi',

// Params
Expand All @@ -56,6 +57,7 @@ const INTERFACES_WITH_DEDICATED_PAGES = [
'GridColDef',
'GridCsvExportOptions',
'GridPrintExportOptions',
'GridExcelExportOptions',

// Filters
'GridFilterModel',
Expand Down
1 change: 1 addition & 0 deletions docs/src/pages.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -62,6 +62,7 @@ dataGridComponentAPI.children = [
{ pathname: '/api-docs/data-grid/grid-row-params', title: 'GridRowParams' },
{ pathname: '/api-docs/data-grid/grid-csv-export-options', title: 'GridCSVExportOptions' },
{ pathname: '/api-docs/data-grid/grid-print-export-options', title: 'GridPrintExportOptions' },
{ pathname: '/api-docs/data-grid/grid-excel-export-options', title: 'GridExcelExportOptions' },
{ pathname: '/api-docs/data-grid/grid-filter-model', title: 'GridFilterModel' },
{ pathname: '/api-docs/data-grid/grid-filter-item', title: 'GridFilterItem' },
{ pathname: '/api-docs/data-grid/grid-filter-operator', title: 'GridFilterOperator' },
Expand Down
Loading