Export to File

index

• Grid Options
• Column Definition & Options
• UI Sample

Description

You can Export to File in multiple formats, the following are supported

• Export to CSV format
• Export to Text file with a delimiter of your choice (Tab delimited is a good one to use)

Demo

Demo Page / Demo Component

Grid Menu (hamburger menu)

The Grid Menu already has the "Export to CSV" enabled by default, so you will see it automatically in your Grid Menu. You still have the options to show or hide the 2 types of export

• showExportCsvCommand true by default, so it's optional
• showExportTextDelimitedCommand false by default, so if you want it, you will need to enable it

Grid Options

You can set certain options for the entire grid, for example if you set exportWithFormatter it will evaluate the Formatter (when exist) output to export. The Grid Menu also has the "Export to CSV" enabled by default.

this.gridOptions = {
  // set at the grid option level, meaning all column will evaluate the Formatter (when it has a Formatter defined)
  exportWithFormatter: true,

  gridMenu: {
    showExportCsvCommand: true,           // true by default, so it's optional
    showExportTextDelimitedCommand: true  // false by default, so if you want it, you will need to enable it
  }
};

Column Definition and Options

Flags

Inside the column definition there are couple of flags you can set and also some behavior that should be aware of:

• you can set excludeFromExport flag, which as it's name suggest will skip that column from the export
• you can set exportWithFormatter flag (same as Grid Options but this flag defined in the Column Definition has higher priority).
  • So basically, if exportWithFormatter is set to True in the Grid Options, but is set to False in the Column Definition, then the result will be False and will not evalue it's Formatter.
• you can set exportCsvForceToKeepAsString flag, this one will wrap the cell value into double quotes and add an equal sign in the front, this is especially useful on a column that could be turned into an exponential number by Excel. For example, we could have "1E06" and without this flag will become (1.0E06) in Excel, unless we enable the flag which will become ="1E06" which will keep it as a string, also note that it will be shown as "1E06" but if you click on the cell value, you will see ="1E06"

Behaviors

• If you have a headerKey defined (for Translate (i18n)), it will use the translated value as the Header Title
• The file will automatically have the UTF-8 BOM encoding so that it works with Latin and even Unicode characters.

The UTF-8 BOM is a sequence of bytes (EF BB BF) that allows the reader to identify a file as being encoded in UTF-8.

this.columnDefinitions = [
  { id: 'id', name: 'ID', field: 'id', 
    excludeFromExport: true // skip the "id" column from the export
  },
  { id: 'title', name: 'Title', field: 'id', headerKey: 'TITLE' },
  { id: 'start', name: 'Start', field: 'start', 
    headerKey: 'START', 
    formatter: Formatters.dateIso // this formatter will be used for the export
  },
  { id: 'finish', name: 'Finish', field: 'start', 
    headerKey: 'FINISH', 
    formatter: Formatters.dateIso // this formatter will be used for the export
  },
  { id: 'completed', name: 'Completed', field: 'completed', headerKey: 'COMPLETED', 
    formatter: Formatters.checkmark,
    exportWithFormatter: false // this Formatter will not be evaluated
  }
];

this.gridOptions = {
  // set at the grid option level, meaning all column will evaluate the Formatter (when it has a Formatter defined)
  exportWithFormatter: true,
};

What we can see from the example, is that it will use all Formatters (when exist) on this grid, except for the last column "Completed" since that column has explicitly defined exportWithFormatter: false

UI Sample

The Export to File handles all characters well, from Latin, to Unicode, to even Unicorn emoji, it all works with all browsers (Chrome, Firefox, even IE11, I don't have access to other versions that that). Here's a demo