Configuring Data Import

Summary

AdapTable provides 2 file handlers - CSV and JSON - for Data Import
These can be supplemented or replaced by custom file handlers provided by developers

Custom File Handlers

AdapTable ships with 2 File Handlers for Data Import: CSV and JSON.

However developers can provide custom file handlers where required.

Note

These can either override an AdapTable-shipped file handler, or handle a different file type

This is done via the fileHandlers property in Data Import Options.

fileHandlers

DataImportFileHandler

Custom File Handlers to use for Data Import

DataImportFileHandler

Allows to developers to provide custom File Handlers for Data Import where the shipped File Handlers are insufficient.

The custom File Handler can either:

replace one of the File Handlers provided by AdapTable (CSV or JSON)
handle a different type of File

The DataImportFileHandler is defined as follows:

Property	Description
fileExtension	Name of File Extension
handleFile	Async function which handles the import returning a Data Record

The handleFile property returns the data in the form of Record<string, any>

The File Handlers are typically just referenced in Data Import Options:

dataImportOptions: {
  fileHandlers: [csvFileHandler],
},

and defined elsewhere:

const csvFileHandler: DataImportFileHandler<Record<string, any>> = {
  fileExtension: '.csv',
  handleFile: (file: File) => {
    return new Promise((resolve, reject) => {
      const reader = new FileReader();
      reader.onload = event => {
        const content = event.target?.result as string;
        resolve(parseCSV(content));
      };
      reader.readAsText(file);
    });
  },
};

export const parseCSV = (content: string): Record<string, unknown>[] => {
  const SEPARATOR = '|';
  const lines = content.split('\n');
  const headers = lines[0].split(SEPARATOR);
  const data = [];

  if (lines.length <= 1) {
    return [];
  }

  for (let i = 1; i < lines.length; i++) {
    const values = lines[i].split(SEPARATOR);
    if (values.length === headers.length) {
      const item: Record<string, unknown> = {};
      for (let j = 0; j < headers.length; j++) {
        const value = values[j];

        // Any string that looks like a number it is converted to number
        item[headers[j]] =
          value === '' || isNaN(Number(value)) ? value : Number(value);
      }
      data.push(item);
    }
  }
  return data;
};

Data Import - Custom CSV File Handler

Fork Fork

This example overrides the CSV file handler provided by AdapTable with a custom file handler, that parses CSV using a different (|) delimiter
Download the updateframeworks-pipe.csv file, and then upload it in the Data Import wizard, and it will be parsed by the custom file handler
We have added Flashing Cells to the grid (and increased duration to 3 seconds) so you can see the changes to the first 2 rows

import {
  AdaptableOptions,
  DataImportFileHandler,
} from '@adaptabletools/adaptable';
import {WebFramework} from './rowData';

/**
 * Custom parser that uses | for separator
 */
export const parseCSV = (content: string): Record<string, unknown>[] => {
  const SEPARATOR = '|';
  const lines = content.split('\n');
  const headers = lines[0].split(SEPARATOR);
  const data = [];

  if (lines.length <= 1) {
    return [];
  }

  for (let i = 1; i < lines.length; i++) {
    const values = lines[i].split(SEPARATOR);
    if (values.length === headers.length) {
      const item: Record<string, unknown> = {};
      for (let j = 0; j < headers.length; j++) {
        const value = values[j];

        // Any string that looks like a number is converted to number
        // Note: this converts 00012345 to 12345 or a value with potential scientific notation to a number
        item[headers[j]] =
          value === '' || isNaN(Number(value)) ? value : Number(value);
      }
      data.push(item);
    }
  }
  return data;
};

// Custom CSV File Handler
const csvFileHandler: DataImportFileHandler<Record<string, any>> = {
  fileExtension: '.csv',
  handleFile: (file: File) => {
    return new Promise((resolve, reject) => {
      const reader = new FileReader();
      reader.onload = event => {
        const content = event.target?.result as string;
        resolve(parseCSV(content));
      };
      reader.readAsText(file);
    });
  },
};

export const adaptableOptions: AdaptableOptions<WebFramework> = {
  primaryKey: 'id',
  adaptableId: 'Custom CSV File Handler',
  dataImportOptions: {
    fileHandlers: [csvFileHandler],
  },
  initialState: {
    Dashboard: {
      ModuleButtons: ['DataImport'],
    },
    FlashingCell: {
      FlashingCellDefinitions: [
        {
          Name: 'Flashing_Cell_Any_Change',
          Scope: {
            All: true,
          },
          Rule: {
            BooleanExpression: 'ANY_CHANGE()',
          },
          FlashDuration: 3000,
        },
      ],
    },
    Theme: {CurrentTheme: 'dark'},
    Layout: {
      CurrentLayout: 'Standard Layout',
      Layouts: [
        {
          Name: 'Standard Layout',
          TableColumns: [
            'name',
            'github_stars',
            'language',
            'license',
            'github_watchers',
            'has_projects',
          ],
          AutoSizeColumns: true,
        },
      ],
    },
  },
};

PreviousImporting NextTechnical Reference

Framework: