CSV Export

Export grid data to a downloadable CSV file using the exportToCsv utility from core. It respects column visibility and applies valueFormatter so the exported values match what the user sees.

Live Demo

Click 'Export to CSV' to download the data

Live

Try it in your framework

The demo above uses Radix UI for styling. To see this feature with your framework's design system (Fluent UI, Material UI, Vuetify, PrimeNG, etc.), click "Open in online demo" below the demo.

Quick Example

React

import { exportToCsv } from '@alaarab/ogrid-react-radix';

function ExportButton({ data, columns }: { data: Row[]; columns: IColumnDef<Row>[] }) {
  const handleExport = () => {
    exportToCsv(
      data,
      columns.map((col) => ({ columnId: col.columnId, name: col.name })),
      (item, columnId) => {
        const col = columns.find((c) => c.columnId === columnId);
        if (!col) return '';
        const value = col.valueGetter ? col.valueGetter(item) : (item as Record<string, unknown>)[columnId];
        return col.valueFormatter ? col.valueFormatter(value, item) : String(value ?? '');
      },
      'my-data.csv'
    );
  };

  return <button onClick={handleExport}>Export to CSV</button>;
}

Switching UI libraries

The OGrid component has the same props across all React UI packages. To switch, just change the import:

• Radix (lightweight, default): from '@alaarab/ogrid-react-radix'
• Fluent UI (Microsoft 365 / SPFx): from '@alaarab/ogrid-react-fluent' - wrap in <FluentProvider>
• Material UI (MUI v7): from '@alaarab/ogrid-react-material' - wrap in <ThemeProvider>

Angular

import { Component } from '@angular/core';
import { exportToCsv, type IColumnDef } from '@alaarab/ogrid-angular-material';

@Component({
  standalone: true,
  template: `<button (click)="handleExport()">Export to CSV</button>`
})
export class ExportButtonComponent {
  data: Row[] = [];
  columns: IColumnDef<Row>[] = [];

  handleExport() {
    exportToCsv(
      this.data,
      this.columns.map((col) => ({ columnId: col.columnId, name: col.name })),
      (item: Row, columnId: string) => {
        const col = this.columns.find((c) => c.columnId === columnId);
        if (!col) return '';
        const value = col.valueGetter ? col.valueGetter(item) : (item as Record<string, unknown>)[columnId];
        return col.valueFormatter ? col.valueFormatter(value as unknown, item) : String(value ?? '');
      },
      'my-data.csv'
    );
  }
}

Switching UI libraries

Same component API across Angular packages. To switch, just change the import:

• Radix (CDK): from '@alaarab/ogrid-angular-radix' (default, lightweight)
• Angular Material: from '@alaarab/ogrid-angular-material'
• PrimeNG: from '@alaarab/ogrid-angular-primeng'

All components are standalone - no NgModule required.

Vue

<script setup lang="ts">
import { exportToCsv, type IColumnDef } from '@alaarab/ogrid-vue-vuetify';

const props = defineProps<{ data: Row[]; columns: IColumnDef<Row>[] }>();

function handleExport() {
  exportToCsv(
    props.data,
    props.columns.map((col) => ({ columnId: col.columnId, name: col.name })),
    (item, columnId) => {
      const col = props.columns.find((c) => c.columnId === columnId);
      if (!col) return '';
      const value = col.valueGetter ? col.valueGetter(item) : (item as Record<string, unknown>)[columnId];
      return col.valueFormatter ? col.valueFormatter(value, item) : String(value ?? '');
    },
    'my-data.csv'
  );
}
</script>

<template>
  <button @click="handleExport">Export to CSV</button>
</template>

Switching UI libraries

Same component API across Vue packages. To switch, just change the import:

• Radix (Headless UI): from '@alaarab/ogrid-vue-radix' (default, lightweight)
• Vuetify: from '@alaarab/ogrid-vue-vuetify' - wrap in <v-app> for theming
• PrimeVue: from '@alaarab/ogrid-vue-primevue'

Vanilla JS

import { OGrid, exportToCsv } from '@alaarab/ogrid-js';
import '@alaarab/ogrid-js/styles';

const grid = new OGrid(document.getElementById('grid'), {
  columns: columns,
  data: data,
  getRowId: (r) => r.id,
});

// Export to CSV
document.getElementById('export-btn').addEventListener('click', () => {
  exportToCsv(
    data,
    columns.map((col) => ({ columnId: col.columnId, name: col.name })),
    (item, columnId) => {
      const col = columns.find((c) => c.columnId === columnId);
      if (!col) return '';
      const value = item[columnId];
      return col.valueFormatter ? col.valueFormatter(value, item) : String(value ?? '');
    },
    'my-data.csv'
  );
});

How It Works

The exportToCsv Function

exportToCsv<T>(
  items: T[],
  columns: CsvColumn[],
  getValue: (item: T, columnId: string) => string,
  filename?: string
): void

Parameter	Type	Description
items	T[]	The row data to export
columns	CsvColumn[]	Array of { columnId, name } defining which columns to include and their header names
getValue	(item, columnId) => string	Function to extract the display value for each cell
filename	string (optional)	Download filename (default: 'export.csv')

The function:

1. Builds a CSV header row from columns[].name.
2. Iterates over each item and calls getValue for each column.
3. Escapes values containing commas, quotes, or newlines.
4. Triggers a browser download with the specified filename.

Context Menu Integration

When cellSelection is enabled (the default), the context menu does not include a dedicated "Export to CSV" item. Use the exportToCsv utility directly from a toolbar button or custom UI element.

Exporting Visible Columns Only

Filter the columns array to only include visible columns before passing to exportToCsv.

const visibleCols = columns.filter((col) => visibleColumns.has(col.columnId));

exportToCsv(
  data,
  visibleCols.map((col) => ({ columnId: col.columnId, name: col.name })),
  getValue,
  'filtered-export.csv'
);

Formatted Values

Use valueFormatter in your getValue function so exported data matches the display. For example, a currency column that shows "$1,234.56" in the grid will export that same string.

const getValue = (item: Row, columnId: string) => {
  const col = columns.find((c) => c.columnId === columnId)!;
  const raw = col.valueGetter ? col.valueGetter(item) : (item as any)[columnId];
  return col.valueFormatter ? col.valueFormatter(raw, item) : String(raw ?? '');
};

Props Reference

Type	Field	Description
CsvColumn	columnId	Column identifier
CsvColumn	name	Header label in the CSV

Related

• Context Menu -- clipboard operations for quick copy/paste
• Grid API -- access current data and column state programmatically
• Column Chooser -- determines which columns are visible for export