Files

Active Table can import/export files for the following formats: csv, xls, xlsx, ods, txt. Whilst csv is supported natively and will work right out of the box, the other formats are not and require the xlsx module in your project.

How To

Active Table recognises this module via the window element as window.XLSX. Here are some simple ways to enable it on your project:

• Import from a dependancy
  If you are using a dependancy manager such as npm, you can import the module and assign it to window.XLSX:

  import * as xlsx from "xlsx";
  
  window.XLSX = xlsx;
• Dynamic import from a dependancy
  If you are using a dependancy manager such as npm, you can dynamically import the module and assign it to window.XLSX:

  import("xlsx").then((module) => {
    window.XLSX = module;
  });
• Dynamic import from a CDN
  If you are using a dependancy manager such as npm, you can dynamically import the module from a CDN URL and assign it to window.XLSX:
  

  import("https://cdn.sheetjs.com/xlsx-0.19.3/package/dist/xlsx.full.min.js").then((module) => {
    window.XLSX = module;
  });
• Script from a CDN
  You can add a script tag to your markup or create one via javascript. The window.XLSX property will be populated automatically:

  <script src="https://cdn.sheetjs.com/xlsx-0.19.3/package/dist/xlsx.full.min.js"></script>
  
  const script = document.createElement("script");
  script.src = "https://cdn.sheetjs.com/xlsx-0.19.3/package/dist/xlsx.full.min.js";
  document.body.appendChild(script);
• Script from within the project
  You can manually download the module file from the URL above, and add it as a script tag. The window.XLSX property will be populated automatically:

  <script src="xlsx.min.js"></script>
  
  const script = document.createElement("script");
  script.src = "xlsx.min.js";
  document.body.appendChild(script);

If you are using TypeScript, add this to the file where the module is used:

import * as xlsx from 'xlsx';

declare global {
  interface Window {
    XLSX: typeof xlsx;
  }
}

Examples

React project that uses a package bundler - should work similarly for other Frameworks:

Click for Live Example

VanillaJS approach with no bundler (this can also be used as fallback if above doesn't work):

Click for Live Example

Why

The decision to have developers download external dependancies was not easily made and there were multiple reasons that lead us down this path.
The xlsx module's post-compression file size is similar to Active Table itself, which ruled out the idea of bundling it together as it would effectively double its size.
We then spent some time experimenting with dynamic imports which seemed promising, but unfortunatelly we hit a roadblock that had no simple way of overcoming; Active Table itself is an injectable component that exists as part of a parent project which can use any type of a bundler to compile it. This is where dynamic imports become problematic as they are not supported by all bundlers and in many cases need extra configuration to work.
Therefore, to make the lives of our developers as simple as possible; for use cases that do not need the extra functionality - Active Table can be installed without any extra work, for use cases that do - we leave the decision of how to implement xlsx in their hands to alllow them to tailor the approach for their project.

Troubleshooting

If you are experiencing issues for importing/exporting files, please see github issues or create a new issue ticket and we will look into it as soon as possible.