or run

npx @tessl/cli init
Log in

Version

Tile

Overview

Evals

Files

docs

charts-visualization.mddata-processing.mdfiltering-search.mdimport-export.mdindex.mdrow-operations.mdselection-interaction.mdui-components.md
tile.json

import-export.mddocs/

Import and Export

Comprehensive data import/export capabilities including Excel export with multi-sheet support, CSV export/import, and clipboard operations for data interchange.

Capabilities

Excel Export

Export grid data to Excel format with support for multiple sheets, custom formatting, and styling.

/**
 * Export grid data as Excel file
 */
function exportDataAsExcel(params?: ExcelExportParams): void;

/**
 * Get Excel data as Blob without triggering download
 */
function getDataAsExcel(params?: ExcelExportParams): Blob | string | undefined;

/**
 * Export multiple grids/datasets to a single Excel file with multiple sheets
 */
function exportMultipleSheetsAsExcel(params: ExcelExportMultipleSheetParams): void;

/**
 * Get multiple sheets as Excel Blob
 */
function getMultipleSheetsAsExcel(params: ExcelExportMultipleSheetParams): Blob | undefined;

/**
 * Excel export parameters for single sheet
 */
interface ExcelExportParams {
  /** Filename for the export */
  fileName?: string;
  /** Sheet name */
  sheetName?: string;
  /** Author metadata */
  author?: string;
  /** Custom column width */
  columnWidth?: number | ((params: ExcelColumnWidthCallbackParams) => number);
  /** Custom row height */
  rowHeight?: number | ((params: ExcelRowHeightCallbackParams) => number);
  /** Custom header row height */
  headerRowHeight?: number;
  /** Custom group header row height */
  groupRowHeight?: number;
  /** Only export selected rows */
  onlySelected?: boolean;
  /** Only export selected columns */
  onlySelectedAllPages?: boolean;
  /** Skip column headers */
  skipColumnHeaders?: boolean;
  /** Skip column group headers */
  skipColumnGroupHeaders?: boolean;
  /** Skip pinned top rows */
  skipPinnedTop?: boolean;
  /** Skip pinned bottom rows */
  skipPinnedBottom?: boolean;
  /** Include column groups in export */
  includeColumnGroupHeaders?: boolean;
  /** Process header callback */
  processHeaderCallback?: (params: ProcessHeaderCallbackParams) => string;
  /** Process cell callback for custom formatting */
  processCellCallback?: (params: ProcessCellCallbackParams) => string;
  /** Process row group callback */
  processRowGroupCallback?: (params: ProcessRowGroupCallbackParams) => string;
  /** Custom styles for cells */
  customHeader?: ExcelStyle[];
  /** Custom styles for data cells */
  customFooter?: ExcelStyle[];
  /** Excel cell styles */
  excelStyles?: ExcelStyle[];
}

/**
 * Multi-sheet Excel export parameters
 */
interface ExcelExportMultipleSheetParams {
  /** Array of sheet data */
  data: ExcelSheetData[];
  /** Filename for the export */
  fileName?: string;
  /** Author metadata */
  author?: string;
}

/**
 * Individual sheet data for multi-sheet export
 */
interface ExcelSheetData {
  /** Name of the sheet */
  sheetName: string;
  /** Excel export parameters for this sheet */
  params: ExcelExportParams;
}

Usage Example:

import { ExcelExportModule } from "ag-grid-enterprise";

const gridOptions: GridOptions = {
  modules: [ExcelExportModule],
  
  // Enable Excel export in context menu
  getContextMenuItems: (params) => [
    "export",
    "excelExport",
    "csvExport"
  ]
};

// Basic Excel export
gridApi.exportDataAsExcel({
  fileName: "my-data.xlsx",
  sheetName: "Sales Data",
  author: "Sales Team"
});

// Advanced Excel export with custom formatting
gridApi.exportDataAsExcel({
  fileName: "formatted-data.xlsx",
  columnWidth: (params) => {
    return params.column.getColId() === "description" ? 200 : 100;
  },
  processCellCallback: (params) => {
    // Format currency cells
    if (params.column.getColId() === "price") {
      return `$${params.value.toFixed(2)}`;
    }
    return params.value;
  },
  excelStyles: [
    {
      id: "header",
      interior: {
        color: "#4472C4",
        pattern: "Solid"
      },
      font: {
        color: "white",
        bold: true
      }
    }
  ]
});

// Multi-sheet export
const multiSheetData: ExcelSheetData[] = [
  {
    sheetName: "Sales Data",
    params: {
      onlySelected: false,
      processCellCallback: (params) => params.value
    }
  },
  {
    sheetName: "Summary",
    params: {
      skipColumnHeaders: false,
      fileName: "multi-sheet-export.xlsx"
    }
  }
];

gridApi.exportMultipleSheetsAsExcel({
  data: multiSheetData,
  fileName: "quarterly-report.xlsx",
  author: "Finance Department"
});

CSV Export/Import

Standard CSV export and import functionality with customizable formatting options.

/**
 * Export grid data as CSV
 */
function exportDataAsCsv(params?: CsvExportParams): void;

/**
 * Get CSV data as string
 */
function getDataAsCsv(params?: CsvExportParams): string;

/**
 * CSV export parameters
 */
interface CsvExportParams {
  /** Filename for the export */
  fileName?: string;
  /** Column separator character */
  columnSeparator?: string;
  /** Custom column width */
  columnWidth?: number;
  /** Only export selected rows */
  onlySelected?: boolean;
  /** Only export selected columns */
  onlySelectedAllPages?: boolean;
  /** Skip column headers */
  skipColumnHeaders?: boolean;
  /** Skip column group headers */
  skipColumnGroupHeaders?: boolean;
  /** Skip pinned rows */
  skipPinnedTop?: boolean;
  /** Skip pinned bottom rows */
  skipPinnedBottom?: boolean;
  /** Process header callback */
  processHeaderCallback?: (params: ProcessHeaderCallbackParams) => string;
  /** Process cell callback */
  processCellCallback?: (params: ProcessCellCallbackParams) => string;
  /** Process row group callback */
  processRowGroupCallback?: (params: ProcessRowGroupCallbackParams) => string;
  /** Suppress quotes around values */
  suppressQuotes?: boolean;
}

Usage Example:

// Basic CSV export
gridApi.exportDataAsCsv({
  fileName: "data.csv",
  columnSeparator: ","
});

// Custom CSV export
gridApi.exportDataAsCsv({
  fileName: "custom-data.csv",
  onlySelected: true,
  processCellCallback: (params) => {
    // Custom formatting for specific columns
    if (params.column.getColId() === "date") {
      return new Date(params.value).toLocaleDateString();
    }
    return params.value;
  },
  suppressQuotes: false
});

// Get CSV data as string for custom handling
const csvData = gridApi.getDataAsCsv({
  columnSeparator: ";",
  skipColumnHeaders: false
});

// Send to server or process further
fetch("/api/save-csv", {
  method: "POST",
  headers: { "Content-Type": "text/csv" },
  body: csvData
});

Clipboard Operations

Enhanced clipboard functionality for copying and pasting data to/from external applications.

/**
 * Copy selected rows/cells to clipboard
 */
function copySelectedRowsToClipboard(includeHeaders?: boolean): void;

/**
 * Copy selected ranges to clipboard  
 */
function copySelectedRangeToClipboard(includeHeaders?: boolean): void;

/**
 * Copy range down - fill selected range with first cell value
 */
function copyRangeDown(): void;

/**
 * Paste from clipboard
 */
function pasteFromClipboard(): void;

/**
 * Clipboard API parameters
 */
interface ClipboardParams {
  /** Include column headers in copy */
  includeHeaders?: boolean;
  /** Column separator for clipboard data */
  columnSeparator?: string;
  /** Row separator for clipboard data */
  rowSeparator?: string;
  /** Process cell callback for formatting */
  processCellCallback?: (params: ProcessCellCallbackParams) => string;
  /** Process header callback */
  processHeaderCallback?: (params: ProcessHeaderCallbackParams) => string;
}

Usage Example:

import { ClipboardModule } from "ag-grid-enterprise";

const gridOptions: GridOptions = {
  modules: [ClipboardModule],
  
  // Enable clipboard operations
  enableRangeSelection: true,
  
  // Customize clipboard behavior
  processCellForClipboard: (params) => {
    // Custom formatting when copying to clipboard
    if (params.column.getColId() === "price") {
      return `$${params.value.toFixed(2)}`;
    }
    return params.value;
  },
  
  processHeaderForClipboard: (params) => {
    // Custom header formatting
    return params.column.getDisplayName().toUpperCase();
  },
  
  processCellFromClipboard: (params) => {
    // Custom processing when pasting from clipboard
    if (params.column.getColId() === "price") {
      // Remove currency symbol
      return parseFloat(params.value.replace("$", ""));
    }
    return params.value;
  }
};

// Programmatic clipboard operations

// Copy selected rows including headers
gridApi.copySelectedRowsToClipboard(true);

// Copy selected range
gridApi.copySelectedRangeToClipboard(false);

// Fill down operation
gridApi.copyRangeDown();

// Handle keyboard shortcuts
document.addEventListener("keydown", (event) => {
  if (event.ctrlKey || event.metaKey) {
    switch (event.key) {
      case "c":
        gridApi.copySelectedRangeToClipboard(true);
        break;
      case "v":
        gridApi.pasteFromClipboard();
        break;
    }
  }
});

Print Export

Export grid data for printing with layout and formatting options.

/**
 * Print the grid
 */
function print(): void;

/**
 * Print parameters
 */
interface PrintParams {
  /** Only print selected rows */
  onlySelected?: boolean;
  /** Skip column headers */
  skipColumnHeaders?: boolean;
  /** Skip column group headers */  
  skipColumnGroupHeaders?: boolean;
  /** Skip pinned rows */
  skipPinnedTop?: boolean;
  /** Skip pinned bottom rows */
  skipPinnedBottom?: boolean;
}

Usage Example:

// Basic print
gridApi.print();

// Custom print with parameters (if supported by grid version)
// Print only selected data without headers
const printParams: PrintParams = {
  onlySelected: true,
  skipColumnHeaders: true
};

Types

// Excel style configuration
interface ExcelStyle {
  /** Style ID */
  id: string;
  /** Interior styling */
  interior?: {
    color?: string;
    pattern?: "Solid" | "Gray75" | "Gray50" | "Gray25" | "Gray125" | "Gray0625";
  };
  /** Font styling */
  font?: {
    color?: string;
    fontName?: string;
    size?: number;
    bold?: boolean;
    italic?: boolean;
    underline?: "Single" | "Double";
  };
  /** Border styling */
  borders?: {
    borderBottom?: ExcelBorder;
    borderTop?: ExcelBorder;
    borderLeft?: ExcelBorder;
    borderRight?: ExcelBorder;
  };
  /** Alignment options */
  alignment?: {
    horizontal?: "Left" | "Center" | "Right";
    vertical?: "Top" | "Center" | "Bottom";
    indent?: number;
    readingOrder?: "LeftToRight" | "RightToLeft";
    rotate?: number;
    shrinkToFit?: boolean;
    verticalText?: boolean;
    wrapText?: boolean;
  };
  /** Data type */
  dataType?: "String" | "Number" | "Boolean" | "DateTime" | "Error";
  /** Number format */
  numberFormat?: {
    format: string;
  };
}

interface ExcelBorder {
  color?: string;
  lineStyle?: "Continuous" | "Dash" | "Dot" | "DashDot" | "DashDotDot" | "SlantDashDot" | "Double";
  weight?: 1 | 2 | 3;
}

// Callback parameter interfaces
interface ProcessCellCallbackParams {
  value: any;
  node: RowNode;
  column: Column;
  api: GridApi;
  columnApi: ColumnApi;
  context: any;
  type: string;
}

interface ProcessHeaderCallbackParams {
  column: Column;
  api: GridApi;
  columnApi: ColumnApi;
  context: any;
}

interface ProcessRowGroupCallbackParams {
  value: any;
  node: RowNode;
  api: GridApi;
  columnApi: ColumnApi;
  context: any;
}

// Width/height callback parameters
interface ExcelColumnWidthCallbackParams {
  column: Column;
  api: GridApi;
  columnApi: ColumnApi;
  context: any;
}

interface ExcelRowHeightCallbackParams {
  node: RowNode;
  api: GridApi;
  columnApi: ColumnApi;
  context: any;
}