Improve this doc

The importer feature allows data to be imported into the grid in csv or json format. The importer can use the native grid menu, or can accept a file from a custom file picker implemented by the user.

The importer imports files in json or csv format, with the ability to be extended to other file formats if demand exists.

Documentation for the importer feature is provided in the api documentation, in particular:

For json format files the received elements are assumed to match the column.field attributes in your columnDefs, and are loaded into the provided entity.

For csv files the data is mapped to the columnDefs, with columns in the heading row in the csv needing to match either the column.name or column.displayName. Optionally you can provide a custom function that maps headings to column.name, and this will be used instead, you could use this to implement a custom "column picker" type routine. If you are using internationalisation on the headers (say, via adding a cellHeaderFilter), then you can also optionally pass a filter function into the importerHeaderFilterCallback routine. This routine will be called on the displayName to try to match the translated text, if you provide this routine it must return an immediate translation, not a promise - so if using angular-translate you need to use $translate.instant.

Optionally you can provide a custom function that maps the data within each entity as it is imported, refer the documentation for importerObjectCallback.

To use the importer you need to include the ui-grid-importer directive on your grid, and you must provide a gridOptions.importerDataAddCallback function that adds the created objects into your data array. You also need to have installed the csv-js library, bower install --savedev csv-js. You can configure the csv-js library through use of globals, for example CSV.DETECT_TYPES = false;, refer to the {https://github.com/gkindel/CSV-JS csv-js documentation} for more information.

The options and API for importer can be found at ui.grid.importer.

The importer adds menu items to the grid menu, to use the native UI you need to enable the grid menu using the gridOption enableGridMenu. You can turn the menu items off by setting importerShowMenu: false.

For better performance with the following example, you can choose to load the ui-grid.core.js and specific feature files instead: 

  <script src="/release/ui-grid.core.min.js"></script>
  <script src="/release/ui-grid.importer.min.js"></script>

Example

In this example we use the native grid menu to import a file. You need to provide a file from your file system to use the tutorial, you can copy either import.json or import.csv as a test file.

The grid will start empty, and will auto-populate the column defs and data once the file has been imported (in many uses you would define the column defs up front, this example illustrates that doing so is not mandatory).

Source




















Demo



import.json:

[{"Name":"John Smith","Gender":"male","Company":"TestIcon"},{"Name":"Jane Doe","Gender":"female","Company":"FastTruck"}]



import.csv

"Name","Gender","Company"
"John Smith","male","TestIcon"
"Jane Doe","female","FastTrucks"