Export to CSV

Export your grid’s raw data to the CSV format, as a downloadable file, a blob, or a string. Customize your export using Handsontable’s configuration options.

Prerequisites

You configured Handsontable in your project.
You registered the ExportFile plugin (the examples use registerAllModules()).

Examples

Mind that CSV exports contain only raw data, and don’t include formulas, styling, or formatting information.

Examples 1-3 use hidden rows and hidden columns with indicators turned on. The indicators show where hidden data exists in the grid, and each example explains whether the export includes or skips that hidden data.

Export to file

This example exports all rows and columns, including hidden ones, by setting both exportHiddenRows and exportHiddenColumns to true.

1
import { useRef } from 'react';
2
import { HotTable } from '@handsontable/react-wrapper';
3
import { registerAllModules } from 'handsontable/registry';
4
// register Handsontable's modules
5
registerAllModules();
6
const ExampleComponent = () => {
7
    const hotRef = useRef(null);
8
    const buttonClickCallback = () => {
9
        const hot = hotRef.current?.hotInstance;
10
        const exportPlugin = hot?.getPlugin('exportFile');
11
        exportPlugin?.downloadFile('csv', {
12
            bom: false,
13
            columnDelimiter: ',',
14
            colHeaders: false,
15
            exportHiddenColumns: true,
16
            exportHiddenRows: true,
17
            fileExtension: 'csv',
18
            filename: 'Handsontable-CSV-file_[YYYY]-[MM]-[DD]',
19
            mimeType: 'text/csv',
20
            rowDelimiter: '\r\n',
21
            rowHeaders: true,
22
        });
23
    };
24
    return (<>
25
      <div className="example-controls-container">
26
        <div className="controls">
27
          <button id="export-file" onClick={() => buttonClickCallback()}>
28
            Download CSV
29
          </button>
30
        </div>
31
      </div>
32
      <HotTable ref={hotRef} data={[
33
            ['Spring Launch', 'Email', 'North America', '1240', '4.2%', '$12000', 'Q1 2025'],
34
            ['Partner Webinar', 'Paid Search', 'EMEA', '860', '6.1%', '$9400', 'Q1 2025'],
35
            ['Summer Upsell', 'Social', 'APAC', '1520', '3.7%', '$13800', 'Q2 2025'],
36
            ['Product Video', 'Email', 'North America', '980', '5.4%', '$8600', 'Q2 2025'],
37
            ['Back-to-School', 'Display', 'LATAM', '1110', '4.8%', '$10100', 'Q3 2025'],
38
            ['Holiday Teaser', 'Affiliate', 'EMEA', '1340', '5.9%', '$12700', 'Q4 2025'],
39
            ['Loyalty Drive', 'SMS', 'APAC', '790', '7.3%', '$6200', 'Q4 2025'],
40
        ]} colHeaders={true} rowHeaders={true} hiddenRows={{ rows: [1, 3, 5], indicators: true }} hiddenColumns={{ columns: [1, 3, 5], indicators: true }} height="auto" autoWrapRow={true} autoWrapCol={true} licenseKey="non-commercial-and-evaluation"/>
41
    </>);
42
};
43
export default ExampleComponent;

1
import { useRef } from 'react';
2
import { HotTable, HotTableRef } from '@handsontable/react-wrapper';
3
import { registerAllModules } from 'handsontable/registry';
4

5
// register Handsontable's modules
6
registerAllModules();
7

8
const ExampleComponent = () => {
9
  const hotRef = useRef<HotTableRef>(null);
10

11
  const buttonClickCallback = () => {
12
    const hot = hotRef.current?.hotInstance;
13
    const exportPlugin = hot?.getPlugin('exportFile');
14

15
    exportPlugin?.downloadFile('csv', {
16
      bom: false,
17
      columnDelimiter: ',',
18
      colHeaders: false,
19
      exportHiddenColumns: true,
20
      exportHiddenRows: true,
21
      fileExtension: 'csv',
22
      filename: 'Handsontable-CSV-file_[YYYY]-[MM]-[DD]',
23
      mimeType: 'text/csv',
24
      rowDelimiter: '\r\n',
25
      rowHeaders: true,
26
    });
27
  };
28

29
  return (
30
    <>
31
      <div className="example-controls-container">
32
        <div className="controls">
33
          <button id="export-file" onClick={() => buttonClickCallback()}>
34
            Download CSV
35
          </button>
36
        </div>
37
      </div>
38
      <HotTable
39
        ref={hotRef}
40
        data={[
41
          ['Spring Launch', 'Email', 'North America', '1240', '4.2%', '$12000', 'Q1 2025'],
42
          ['Partner Webinar', 'Paid Search', 'EMEA', '860', '6.1%', '$9400', 'Q1 2025'],
43
          ['Summer Upsell', 'Social', 'APAC', '1520', '3.7%', '$13800', 'Q2 2025'],
44
          ['Product Video', 'Email', 'North America', '980', '5.4%', '$8600', 'Q2 2025'],
45
          ['Back-to-School', 'Display', 'LATAM', '1110', '4.8%', '$10100', 'Q3 2025'],
46
          ['Holiday Teaser', 'Affiliate', 'EMEA', '1340', '5.9%', '$12700', 'Q4 2025'],
47
          ['Loyalty Drive', 'SMS', 'APAC', '790', '7.3%', '$6200', 'Q4 2025'],
48
        ]}
49
        colHeaders={true}
50
        rowHeaders={true}
51
        hiddenRows={{ rows: [1, 3, 5], indicators: true }}
52
        hiddenColumns={{ columns: [1, 3, 5], indicators: true }}
53
        height="auto"
54
        autoWrapRow={true}
55
        autoWrapCol={true}
56
        licenseKey="non-commercial-and-evaluation"
57
      />
58
    </>
59
  );
60
};
61

62
export default ExampleComponent;

Export as a JavaScript Blob object

Open a console in browser developer tools to see the result for the below example. This example keeps hidden indicators in the grid, but exports only visible rows and columns by setting exportHiddenRows and exportHiddenColumns to false.

1
import { useRef } from 'react';
2
import { HotTable } from '@handsontable/react-wrapper';
3
import { registerAllModules } from 'handsontable/registry';
4
// register Handsontable's modules
5
registerAllModules();
6
const ExampleComponent = () => {
7
    const hotRef = useRef(null);
8
    const buttonClickCallback = () => {
9
        const hot = hotRef.current?.hotInstance;
10
        const exportPlugin = hot?.getPlugin('exportFile');
11
        const exportedBlob = exportPlugin?.exportAsBlob('csv', {
12
            bom: false,
13
            columnDelimiter: ',',
14
            colHeaders: false,
15
            exportHiddenColumns: false,
16
            exportHiddenRows: false,
17
            mimeType: 'text/csv',
18
            rowDelimiter: '\r\n',
19
            rowHeaders: true,
20
        });
21
        console.log(exportedBlob);
22
    };
23
    return (<>
24
      <div className="example-controls-container">
25
        <div className="controls">
26
          <button id="export-blob" onClick={() => buttonClickCallback()}>
27
            Export as a Blob
28
          </button>
29
        </div>
30
      </div>
31
      <HotTable ref={hotRef} data={[
32
            ['Spring Launch', 'Email', 'North America', '1240', '4.2%', '$12000', 'Q1 2025'],
33
            ['Partner Webinar', 'Paid Search', 'EMEA', '860', '6.1%', '$9400', 'Q1 2025'],
34
            ['Summer Upsell', 'Social', 'APAC', '1520', '3.7%', '$13800', 'Q2 2025'],
35
            ['Product Video', 'Email', 'North America', '980', '5.4%', '$8600', 'Q2 2025'],
36
            ['Back-to-School', 'Display', 'LATAM', '1110', '4.8%', '$10100', 'Q3 2025'],
37
            ['Holiday Teaser', 'Affiliate', 'EMEA', '1340', '5.9%', '$12700', 'Q4 2025'],
38
            ['Loyalty Drive', 'SMS', 'APAC', '790', '7.3%', '$6200', 'Q4 2025'],
39
        ]} colHeaders={true} rowHeaders={true} hiddenRows={{ rows: [1, 3, 5], indicators: true }} hiddenColumns={{ columns: [1, 3, 5], indicators: true }} height="auto" autoWrapRow={true} autoWrapCol={true} licenseKey="non-commercial-and-evaluation"/>
40
    </>);
41
};
42
export default ExampleComponent;

1
import { useRef } from 'react';
2
import { HotTable, HotTableRef } from '@handsontable/react-wrapper';
3
import { registerAllModules } from 'handsontable/registry';
4

5
// register Handsontable's modules
6
registerAllModules();
7

8
const ExampleComponent = () => {
9
  const hotRef = useRef<HotTableRef>(null);
10

11
  const buttonClickCallback = () => {
12
    const hot = hotRef.current?.hotInstance;
13
    const exportPlugin = hot?.getPlugin('exportFile');
14
    const exportedBlob = exportPlugin?.exportAsBlob('csv', {
15
      bom: false,
16
      columnDelimiter: ',',
17
      colHeaders: false,
18
      exportHiddenColumns: false,
19
      exportHiddenRows: false,
20
      mimeType: 'text/csv',
21
      rowDelimiter: '\r\n',
22
      rowHeaders: true,
23
    });
24

25
    console.log(exportedBlob);
26
  };
27

28
  return (
29
    <>
30
      <div className="example-controls-container">
31
        <div className="controls">
32
          <button id="export-blob" onClick={() => buttonClickCallback()}>
33
            Export as a Blob
34
          </button>
35
        </div>
36
      </div>
37
      <HotTable
38
        ref={hotRef}
39
        data={[
40
          ['Spring Launch', 'Email', 'North America', '1240', '4.2%', '$12000', 'Q1 2025'],
41
          ['Partner Webinar', 'Paid Search', 'EMEA', '860', '6.1%', '$9400', 'Q1 2025'],
42
          ['Summer Upsell', 'Social', 'APAC', '1520', '3.7%', '$13800', 'Q2 2025'],
43
          ['Product Video', 'Email', 'North America', '980', '5.4%', '$8600', 'Q2 2025'],
44
          ['Back-to-School', 'Display', 'LATAM', '1110', '4.8%', '$10100', 'Q3 2025'],
45
          ['Holiday Teaser', 'Affiliate', 'EMEA', '1340', '5.9%', '$12700', 'Q4 2025'],
46
          ['Loyalty Drive', 'SMS', 'APAC', '790', '7.3%', '$6200', 'Q4 2025'],
47
        ]}
48
        colHeaders={true}
49
        rowHeaders={true}
50
        hiddenRows={{ rows: [1, 3, 5], indicators: true }}
51
        hiddenColumns={{ columns: [1, 3, 5], indicators: true }}
52
        height="auto"
53
        autoWrapRow={true}
54
        autoWrapCol={true}
55
        licenseKey="non-commercial-and-evaluation"
56
      />
57
    </>
58
  );
59
};
60

61
export default ExampleComponent;

Export as a string

Open a console in browser developer tools to see the result for the below example. Like the Blob example, this export uses only visible data and skips hidden rows and columns.

1
import { useRef } from 'react';
2
import { HotTable } from '@handsontable/react-wrapper';
3
import { registerAllModules } from 'handsontable/registry';
4
// register Handsontable's modules
5
registerAllModules();
6
const ExampleComponent = () => {
7
    const hotRef = useRef(null);
8
    const buttonClickCallback = () => {
9
        const hot = hotRef.current?.hotInstance;
10
        const exportPlugin = hot?.getPlugin('exportFile');
11
        const exportedString = exportPlugin?.exportAsString('csv', {
12
            bom: false,
13
            columnDelimiter: ',',
14
            colHeaders: false,
15
            exportHiddenColumns: false,
16
            exportHiddenRows: false,
17
            rowDelimiter: '\r\n',
18
            rowHeaders: true,
19
        });
20
        console.log(exportedString);
21
    };
22
    return (<>
23
      <div className="example-controls-container">
24
        <div className="controls">
25
          <button id="export-string" onClick={() => buttonClickCallback()}>
26
            Export as a string
27
          </button>
28
        </div>
29
      </div>
30
      <HotTable ref={hotRef} data={[
31
            ['Spring Launch', 'Email', 'North America', '1240', '4.2%', '$12000', 'Q1 2025'],
32
            ['Partner Webinar', 'Paid Search', 'EMEA', '860', '6.1%', '$9400', 'Q1 2025'],
33
            ['Summer Upsell', 'Social', 'APAC', '1520', '3.7%', '$13800', 'Q2 2025'],
34
            ['Product Video', 'Email', 'North America', '980', '5.4%', '$8600', 'Q2 2025'],
35
            ['Back-to-School', 'Display', 'LATAM', '1110', '4.8%', '$10100', 'Q3 2025'],
36
            ['Holiday Teaser', 'Affiliate', 'EMEA', '1340', '5.9%', '$12700', 'Q4 2025'],
37
            ['Loyalty Drive', 'SMS', 'APAC', '790', '7.3%', '$6200', 'Q4 2025'],
38
        ]} colHeaders={true} rowHeaders={true} hiddenRows={{ rows: [1, 3, 5], indicators: true }} hiddenColumns={{ columns: [1, 3, 5], indicators: true }} height="auto" autoWrapRow={true} autoWrapCol={true} licenseKey="non-commercial-and-evaluation"/>
39
    </>);
40
};
41
export default ExampleComponent;

1
import { useRef } from 'react';
2
import { HotTable, HotTableRef } from '@handsontable/react-wrapper';
3
import { registerAllModules } from 'handsontable/registry';
4

5
// register Handsontable's modules
6
registerAllModules();
7

8
const ExampleComponent = () => {
9
  const hotRef = useRef<HotTableRef>(null);
10

11
  const buttonClickCallback = () => {
12
    const hot = hotRef.current?.hotInstance;
13
    const exportPlugin = hot?.getPlugin('exportFile');
14
    const exportedString = exportPlugin?.exportAsString('csv', {
15
      bom: false,
16
      columnDelimiter: ',',
17
      colHeaders: false,
18
      exportHiddenColumns: false,
19
      exportHiddenRows: false,
20
      rowDelimiter: '\r\n',
21
      rowHeaders: true,
22
    });
23

24
    console.log(exportedString);
25
  };
26

27
  return (
28
    <>
29
      <div className="example-controls-container">
30
        <div className="controls">
31
          <button id="export-string" onClick={() => buttonClickCallback()}>
32
            Export as a string
33
          </button>
34
        </div>
35
      </div>
36
      <HotTable
37
        ref={hotRef}
38
        data={[
39
          ['Spring Launch', 'Email', 'North America', '1240', '4.2%', '$12000', 'Q1 2025'],
40
          ['Partner Webinar', 'Paid Search', 'EMEA', '860', '6.1%', '$9400', 'Q1 2025'],
41
          ['Summer Upsell', 'Social', 'APAC', '1520', '3.7%', '$13800', 'Q2 2025'],
42
          ['Product Video', 'Email', 'North America', '980', '5.4%', '$8600', 'Q2 2025'],
43
          ['Back-to-School', 'Display', 'LATAM', '1110', '4.8%', '$10100', 'Q3 2025'],
44
          ['Holiday Teaser', 'Affiliate', 'EMEA', '1340', '5.9%', '$12700', 'Q4 2025'],
45
          ['Loyalty Drive', 'SMS', 'APAC', '790', '7.3%', '$6200', 'Q4 2025'],
46
        ]}
47
        colHeaders={true}
48
        rowHeaders={true}
49
        hiddenRows={{ rows: [1, 3, 5], indicators: true }}
50
        hiddenColumns={{ columns: [1, 3, 5], indicators: true }}
51
        height="auto"
52
        autoWrapRow={true}
53
        autoWrapCol={true}
54
        licenseKey="non-commercial-and-evaluation"
55
      />
56
    </>
57
  );
58
};
59

60
export default ExampleComponent;

Prevent CSV Injection attack

“CSV Injection, also known as Formula Injection, occurs when websites embed untrusted input inside CSV files. When a spreadsheet program such as Microsoft Excel or LibreOffice Calc is used to open a CSV, any cells starting with = will be interpreted by the software as a formula.” (from OWASP website)

To prevent this attack, set the sanitizeValues option when exporting your data in CSV format.

1
import { useRef } from 'react';
2
import { HotTable } from '@handsontable/react-wrapper';
3
import { registerAllModules } from 'handsontable/registry';
4
// register Handsontable's modules
5
registerAllModules();
6
const ExampleComponent = () => {
7
    const hotRef = useRef(null);
8
    const downloadWithNoSanitizationCallback = () => {
9
        const hot = hotRef.current?.hotInstance;
10
        const exportPlugin = hot?.getPlugin('exportFile');
11
        exportPlugin?.downloadFile('csv', {
12
            bom: false,
13
            columnDelimiter: ',',
14
            colHeaders: false,
15
            exportHiddenColumns: true,
16
            exportHiddenRows: true,
17
            fileExtension: 'csv',
18
            filename: 'Handsontable-CSV-file_[YYYY]-[MM]-[DD]',
19
            mimeType: 'text/csv',
20
            rowDelimiter: '\r\n',
21
        });
22
    };
23
    const downloadWithRecommendedSanitizationCallback = () => {
24
        const hot = hotRef.current?.hotInstance;
25
        const exportPlugin = hot?.getPlugin('exportFile');
26
        exportPlugin?.downloadFile('csv', {
27
            bom: false,
28
            columnDelimiter: ',',
29
            colHeaders: false,
30
            exportHiddenColumns: true,
31
            exportHiddenRows: true,
32
            fileExtension: 'csv',
33
            filename: 'Handsontable-CSV-file_[YYYY]-[MM]-[DD]',
34
            mimeType: 'text/csv',
35
            rowDelimiter: '\r\n',
36
            sanitizeValues: true,
37
        });
38
    };
39
    const downloadWithRegexpSanitizationCallback = () => {
40
        const hot = hotRef.current?.hotInstance;
41
        const exportPlugin = hot?.getPlugin('exportFile');
42
        exportPlugin?.downloadFile('csv', {
43
            bom: false,
44
            columnDelimiter: ',',
45
            colHeaders: false,
46
            exportHiddenColumns: true,
47
            exportHiddenRows: true,
48
            fileExtension: 'csv',
49
            filename: 'Handsontable-CSV-file_[YYYY]-[MM]-[DD]',
50
            mimeType: 'text/csv',
51
            rowDelimiter: '\r\n',
52
            sanitizeValues: /WEBSERVICE|CMD|HYPERLINK|^\+/,
53
        });
54
    };
55
    const downloadWithFunctionSanitizationCallback = () => {
56
        const hot = hotRef.current?.hotInstance;
57
        const exportPlugin = hot?.getPlugin('exportFile');
58
        exportPlugin?.downloadFile('csv', {
59
            bom: false,
60
            columnDelimiter: ',',
61
            colHeaders: false,
62
            exportHiddenColumns: true,
63
            exportHiddenRows: true,
64
            fileExtension: 'csv',
65
            filename: 'Handsontable-CSV-file_[YYYY]-[MM]-[DD]',
66
            mimeType: 'text/csv',
67
            rowDelimiter: '\r\n',
68
            sanitizeValues: (value) => {
69
                return /WEBSERVICE|CMD|HYPERLINK|^\+/.test(value) ? 'REMOVED SUSPICIOUS CELL CONTENT' : value;
70
            },
71
        });
72
    };
73
    return (<>
74
      <div className="example-controls-container">
75
        <div className="controls">
76
          <button onClick={() => downloadWithNoSanitizationCallback()}>Download CSV with no sanitization</button>
77
          <button onClick={() => downloadWithRecommendedSanitizationCallback()}>
78
            Download CSV with recommended sanitization
79
          </button>
80
          <button onClick={() => downloadWithRegexpSanitizationCallback()}>
81
            Download CSV with sanitization using a regexp
82
          </button>
83
          <button onClick={() => downloadWithFunctionSanitizationCallback()}>
84
            Download CSV with sanitization using a function
85
          </button>
86
        </div>
87
      </div>
88
      <HotTable ref={hotRef} data={[
89
            ['https://api.acme-inventory.com/live-stock', '=WEBSERVICE("https://api.acme-inventory.com/live-stock")'],
90
            ['https://status.vertex-logistics.com/feed', '=WEBSERVICE("https://status.vertex-logistics.com/feed")'],
91
            ['http://malicious.example/payload.exe', '=CMD("| calc.exe")'],
92
            ['https://news.example.com/q2-briefing', '=HYPERLINK("http://malicious.example","Open report")'],
93
            ['https://cdn.example.com/daily.csv', '+SUM(1,1)'],
94
        ]} colHeaders={true} rowHeaders={true} height="auto" autoWrapRow={true} autoWrapCol={true} licenseKey="non-commercial-and-evaluation"/>
95
    </>);
96
};
97
export default ExampleComponent;

1
import { useRef } from 'react';
2
import { HotTable, HotTableRef } from '@handsontable/react-wrapper';
3
import { registerAllModules } from 'handsontable/registry';
4

5
// register Handsontable's modules
6
registerAllModules();
7

8
const ExampleComponent = () => {
9
  const hotRef = useRef<HotTableRef>(null);
10

11
  const downloadWithNoSanitizationCallback = () => {
12
    const hot = hotRef.current?.hotInstance;
13
    const exportPlugin = hot?.getPlugin('exportFile');
14

15
    exportPlugin?.downloadFile('csv', {
16
      bom: false,
17
      columnDelimiter: ',',
18
      colHeaders: false,
19
      exportHiddenColumns: true,
20
      exportHiddenRows: true,
21
      fileExtension: 'csv',
22
      filename: 'Handsontable-CSV-file_[YYYY]-[MM]-[DD]',
23
      mimeType: 'text/csv',
24
      rowDelimiter: '\r\n',
25
    });
26
  };
27

28
  const downloadWithRecommendedSanitizationCallback = () => {
29
    const hot = hotRef.current?.hotInstance;
30
    const exportPlugin = hot?.getPlugin('exportFile');
31

32
    exportPlugin?.downloadFile('csv', {
33
      bom: false,
34
      columnDelimiter: ',',
35
      colHeaders: false,
36
      exportHiddenColumns: true,
37
      exportHiddenRows: true,
38
      fileExtension: 'csv',
39
      filename: 'Handsontable-CSV-file_[YYYY]-[MM]-[DD]',
40
      mimeType: 'text/csv',
41
      rowDelimiter: '\r\n',
42
      sanitizeValues: true,
43
    });
44
  };
45

46
  const downloadWithRegexpSanitizationCallback = () => {
47
    const hot = hotRef.current?.hotInstance;
48
    const exportPlugin = hot?.getPlugin('exportFile');
49

50
    exportPlugin?.downloadFile('csv', {
51
      bom: false,
52
      columnDelimiter: ',',
53
      colHeaders: false,
54
      exportHiddenColumns: true,
55
      exportHiddenRows: true,
56
      fileExtension: 'csv',
57
      filename: 'Handsontable-CSV-file_[YYYY]-[MM]-[DD]',
58
      mimeType: 'text/csv',
59
      rowDelimiter: '\r\n',
60
      sanitizeValues: /WEBSERVICE|CMD|HYPERLINK|^\+/,
61
    });
62
  };
63

64
  const downloadWithFunctionSanitizationCallback = () => {
65
    const hot = hotRef.current?.hotInstance;
66
    const exportPlugin = hot?.getPlugin('exportFile');
67

68
    exportPlugin?.downloadFile('csv', {
69
      bom: false,
70
      columnDelimiter: ',',
71
      colHeaders: false,
72
      exportHiddenColumns: true,
73
      exportHiddenRows: true,
74
      fileExtension: 'csv',
75
      filename: 'Handsontable-CSV-file_[YYYY]-[MM]-[DD]',
76
      mimeType: 'text/csv',
77
      rowDelimiter: '\r\n',
78
      sanitizeValues: (value) => {
79
        return /WEBSERVICE|CMD|HYPERLINK|^\+/.test(value) ? 'REMOVED SUSPICIOUS CELL CONTENT' : value;
80
      },
81
    });
82
  };
83

84
  return (
85
    <>
86
      <div className="example-controls-container">
87
        <div className="controls">
88
          <button onClick={() => downloadWithNoSanitizationCallback()}>Download CSV with no sanitization</button>
89
          <button onClick={() => downloadWithRecommendedSanitizationCallback()}>
90
            Download CSV with recommended sanitization
91
          </button>
92
          <button onClick={() => downloadWithRegexpSanitizationCallback()}>
93
            Download CSV with sanitization using a regexp
94
          </button>
95
          <button onClick={() => downloadWithFunctionSanitizationCallback()}>
96
            Download CSV with sanitization using a function
97
          </button>
98
        </div>
99
      </div>
100
      <HotTable
101
        ref={hotRef}
102
        data={[
103
          ['https://api.acme-inventory.com/live-stock', '=WEBSERVICE("https://api.acme-inventory.com/live-stock")'],
104
          ['https://status.vertex-logistics.com/feed', '=WEBSERVICE("https://status.vertex-logistics.com/feed")'],
105
          ['http://malicious.example/payload.exe', '=CMD("| calc.exe")'],
106
          ['https://news.example.com/q2-briefing', '=HYPERLINK("http://malicious.example","Open report")'],
107
          ['https://cdn.example.com/daily.csv', '+SUM(1,1)'],
108
        ]}
109
        colHeaders={true}
110
        rowHeaders={true}
111
        height="auto"
112
        autoWrapRow={true}
113
        autoWrapCol={true}
114
        licenseKey="non-commercial-and-evaluation"
115
      />
116
    </>
117
  );
118
};
119

120
export default ExampleComponent;

Result

After completing this guide, you can export grid data as a downloadable CSV file, a JavaScript Blob, or a string. You can customize delimiters, ranges, headers, and value sanitization through the export configuration.

Available methods

The plugin exposes the following methods to export data.

downloadFile(format, options) - generates a downloadable file directly in the browser. Synchronous; supports text-based formats only (e.g. CSV). For XLSX, use downloadFileAsync.
downloadFileAsync(format, options) - generates a downloadable file and returns a Promise. Supports all formats including XLSX.
exportAsBlob(format, options) - allows you to export a JavaScript Blob object.
exportAsString(format, options) - allows you to export data as a string. Supports text-based formats only (e.g. CSV).

Each method takes two parameters. The first, format, is required. The second, options, is an optional object that overrides or extends the default export configuration. The table below lists all supported options for CSV export.

Available options in the export configuration

Property	Type / Default	Description
`bom`	`Boolean`, default `true`	Prepend output with BOM (UTF-8). Browser uses EF BB BF.
`colHeaders`	`Boolean`, default `false`	Include column headers. Does not support the NestedHeaders plugin.
`columnDelimiter`	`String`, default `','`	Column delimiter.
`exportHiddenColumns`	`Boolean`, default `false`	Include hidden columns.
`exportHiddenRows`	`Boolean`, default `false`	Include hidden rows.
`fileExtension`	`String`, default `'csv'`	File extension. Used by `downloadFile()`.
`filename`	`String`, default `'Handsontable [YYYY]-[MM]-[DD]'`	File name. Placeholders `[YYYY]`, `[MM]`, `[DD]` are replaced with the current date. Used by `downloadFile()`.
`mimeType`	`String`, default `'text/csv'`	MIME type. Used by `downloadFile()` and `exportAsBlob()`.
`range`	`Array`, default `[]`	Cell range to export: `[startRow, startColumn, endRow, endColumn]` (visual indexes).
`rowDelimiter`	`String`, default `'\r\n'`	Row delimiter.
`rowHeaders`	`Boolean`, default `false`	Include row headers.
`sanitizeValues`	`Boolean` \| `RegExp` \| `Function`, default `false`	Value sanitization. `true` = OWASP CSV injection rules; `RegExp` = escape matching values; `Function` = replace with return value.

Handsontable 15.3.0: CSV sanitization, accessibility updates, and 30+ fixes

Plugins

ExportFile