Last active
December 22, 2020 15:58
-
-
Save YonathanMeguira/3799448806bc722c11db074ee71afe59 to your computer and use it in GitHub Desktop.
agrid-export-api-for-humans
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
// in your component or wherever your grid options are defined | |
// reference to the grid element | |
@ViewChild(DatoGridControllerComponent, { static: true }) gridController: DatoGridControllerComponent; | |
gridOptions: DatoGridOptions = { | |
…gridOptions, | |
onSelectionChanged: () => this.onSelectionChange(), | |
onRowDoubleClicked: ({ data }: RowDoubleClickedEvent) => this.editUser(data), | |
exportGrid: () => this.exportGrid(), // ==> callback for the export | |
}; | |
private exportGrid() { | |
const options = getExportOptions(); | |
// reference to the grid in the DOM | |
this.gridController.gridOptions.api.exportDataAsExcel(options); | |
} | |
// in your service | |
getExportOptions() { | |
return { | |
fileName: 'myFile', | |
sheetName: 'list', | |
allColumns: true, | |
// what columns do you want to export, usefull if you only want to export specific columns and not all columns | |
columnsKeys: ['prop1', 'prop2' ...], | |
// here the magic happens | |
processCellCallback: function ({ column, value }) { | |
// in the column object you can access the name of the column to do more specific formatting | |
if (value) { | |
if (typeof value === 'boolean') { | |
// great, we can now export User disabled / Enabled instead of true / false | |
return value ? 'Enabled' : 'Disabled' | |
} else { | |
return value; | |
} | |
} | |
} | |
}; | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment