Export Plugin

The Export plugin lets users download grid data as CSV, JSON, or other formats with a single click or API call. Great for reporting, data backup, or letting users work with data in Excel.

Installation

import '@toolbox-web/grid/features/export';

Basic Usage

Enable the feature and call exportCsv() or exportJson() when you’re ready to download. You can also combine it with the selection feature to export only selected rows.

Vanilla JS

import { queryGrid } from '@toolbox-web/grid';

const grid = queryGrid('tbw-grid');
grid.gridConfig = {
  columns: [
    { field: 'name', header: 'Name' },
    { field: 'email', header: 'Email' },
    { field: 'department', header: 'Department' }
  ],
  features: {
    export: {
      fileName: 'employees',
      includeHeaders: true,
    },
  },
};

// Trigger export via button click
document.getElementById('export-btn').addEventListener('click', () => {
  const plugin = grid.getPluginByName('export');
  plugin.exportCsv();
});

React

import '@toolbox-web/grid-react/features/export';
import { DataGrid, useGrid } from '@toolbox-web/grid-react';

function EmployeeGrid({ data }) {
  const { ref, element } = useGrid();

  const handleExport = () => {
    element?.getPluginByName('export')?.exportCsv();
  };

  return (
    <>
      <button onClick={handleExport}>Export CSV</button>
      <DataGrid
        ref={ref}
        rows={data}
        columns={[
          { field: 'name', header: 'Name' },
          { field: 'email', header: 'Email' },
          { field: 'department', header: 'Department' },
        ]}
        export={{ fileName: 'employees', includeHeaders: true }}
      />
    </>
  );
}

Vue

<script setup>
import '@toolbox-web/grid-vue/features/export';
import { TbwGrid, TbwGridColumn } from '@toolbox-web/grid-vue';
import { ref } from 'vue';

const data = [
  { name: 'Alice', email: 'alice@example.com', department: 'Engineering' },
  { name: 'Bob', email: 'bob@example.com', department: 'Marketing' },
];

const gridRef = ref(null);

const handleExport = () => {
  gridRef.value?.element?.getPluginByName('export')?.exportCsv();
};
</script>

<template>
  <div>
    <button @click="handleExport">Export CSV</button>
    <TbwGrid ref="gridRef" :rows="data" :export="{ fileName: 'employees', includeHeaders: true }">

      <TbwGridColumn field="name" header="Name" />
      <TbwGridColumn field="email" header="Email" />
      <TbwGridColumn field="department" header="Department" />
    </TbwGrid>
  </div>
</template>

Angular

// Feature import - enables the [exportFeature] input
import '@toolbox-web/grid-angular/features/export';

import { Component, viewChild, ElementRef } from '@angular/core';
import { Grid } from '@toolbox-web/grid-angular';
import type { ColumnConfig, GridElement } from '@toolbox-web/grid';

@Component({
  selector: 'app-data-grid',
  imports: [Grid],
  template: `
    <button (click)="handleExport()">Export CSV</button>
    <tbw-grid
      #grid
      [rows]="rows"
      [columns]="columns"
      [exportFeature]="{ fileName: 'employees', includeHeaders: true }"
      style="height: 400px; display: block;">
    </tbw-grid>
  `,
})
export class DataGridComponent {
  gridRef = viewChild<ElementRef<GridElement>>('grid');
  rows = [];

  columns: ColumnConfig[] = [
    { field: 'name', header: 'Name' },
    { field: 'email', header: 'Email' },
    { field: 'department', header: 'Department' },
  ];

  handleExport() {
    const plugin = this.gridRef()?.nativeElement.getPluginByName('export');
    plugin?.exportCsv();
  }
}

Demos

Default Export

EXPORT

Include headers Include column headers in export

Visible only Export only visible columns

Selected only Export only selected rows

Export CSV Export Excel Export JSON

Show source

Export all visible data to CSV. Toggle “Selected only” and select some rows to export just those.

Configuration Options

Option	Type	Default	Description
fileName	string	'export'	Base filename (without extension)
includeHeaders	boolean	true	Include column headers in export
onlyVisible	boolean	true	Export only visible columns
onlySelected	boolean	false	Export only selected rows (requires SelectionPlugin)

Programmatic API

The ExportPlugin provides methods for exporting data with fine-grained control over which columns and rows to include. Like the ClipboardPlugin, it accepts columns and rowIndices parameters so you can export exactly the data you need.

Basic Export

const exportPlugin = grid.getPluginByName('export');

// Export all visible data to CSV
exportPlugin.exportCsv();

// Export to Excel XML
exportPlugin.exportExcel();

// Export to JSON
exportPlugin.exportJson();

Export with Column/Row Control (ExportParams)

const exportPlugin = grid.getPluginByName('export');

// Export specific columns
exportPlugin.exportCsv({
  columns: ['name', 'email', 'department'],
  fileName: 'contacts',
  includeHeaders: true,
});

// Export specific rows
exportPlugin.exportCsv({
  rowIndices: [0, 3, 7],
  fileName: 'selected-employees',
});

// Export specific columns from specific rows
exportPlugin.exportExcel({
  columns: ['name', 'salary'],
  rowIndices: [0, 1, 2],
  fileName: 'salary-report',
});

ExportParams Reference

Option	Type	Default	Description
fileName	string	config value	File name (without extension)
columns	string[]	-	Specific column fields to export
rowIndices	number[]	-	Specific row indices to export
includeHeaders	boolean	config value	Include column headers in export
processCell	(value, field, row) => any	-	Custom cell value processor
processHeader	(header, field) => string	-	Custom header processor

Events

Export CSV Export JSON

Event Log: Clear

Event	Detail	Description
export-complete	{ format, fileName, rowCount, columnCount }	Fired after an export completes

See Also

• Clipboard — Copy cells to clipboard
• Print — Print the grid