react-use-exceljs

A thin wrapper around the exceljs package that uses file-saver for generating excel files.

Usage

1import { useExcelJS } from "react-use-exceljs"
2
3const data = [
4  { id: 1, name: "Jane Doe", dob: new Date(1984, 6, 7) },
5  { id: 2, name: "John Doe", dob: new Date(1965, 1, 7) },
6]
7
8function App() {
9  const excel = useExcelJS({
10    filename: "testing.xlsx",
11    worksheets: [
12      {
13        name: "Sheet 1",
14        columns: [
15          {
16            header: "Id",
17            key: "id",
18            width: 10,
19          },
20          {
21            header: "Name",
22            key: "name",
23            width: 32,
24          },
25          {
26            header: "D.O.B.",
27            key: "dob",
28            width: 200,
29          },
30        ],
31      },
32    ],
33  })
34
35  const onClick = () => {
36    excel.download(data)
37  }
38  
39  return (
40    <div>
41      <button onClick={onClick}>Download</button>
42    </div>
43  )
44}

Worksheets can use different sets of data if download() is passed a Record<SheetName, Array<any>>.

1const people = [
2  { id: 1, name: "Jane Doe", dob: new Date(1984, 6, 7) },
3  { id: 2, name: "John Doe", dob: new Date(1965, 1, 7) },
4]
5
6const cities = [
7  { city: 'Dallas' },
8  { city: 'New York' },
9  { city: 'Miami' },
10]
11
12function App() {
13  const excel = useExcelJS({
14    filename: "testing.xlsx",
15    worksheets: [
16      {
17        name: "People",
18        columns: [
19          {
20            header: "Id",
21            key: "id",
22            width: 10,
23          },
24          {
25            header: "Name",
26            key: "name",
27            width: 32,
28          },
29          {
30            header: "D.O.B.",
31            key: "dob",
32            width: 200,
33          },
34        ],
35      },
36      {
37        name: "Cities",
38        columns: [
39          {
40            header: "City",
41            key: "city",
42          },
43        ],
44      },
45    ],
46  })
47
48  const onClick = () => {
49    excel.download({ People: people, Cities: cities })
50  }
51  
52  return (
53    <div>
54      <button onClick={onClick}>Download</button>
55    </div>
56  )
57}

You can pass an intercept function that will provide the generated workbook for you to modify before it is downloaded.

1const excel = useExcelJS({
2  filename: "testing.xlsx",
3  intercept: (workbook) => {
4    workbook.getWorksheet("Sheet 1").getColumn("id").fill = {
5      type: "pattern",
6      pattern: "solid",
7      fgColor: { argb: "55e6ed" },
8    }
9  },
10  worksheets: [
11    {
12      name: "Sheet 1",
13      columns: [
14        {
15          header: "Id",
16          key: "id",
17          width: 10,
18        },
19      ],
20    },
21  ],
22})

You can also use the non-hook function version which the useExcelJS uses internally.

1import { downloadExcelJS } from 'react-use-exceljs'
2
3const onClick = () => {
4  downloadExcelJS({
5    filename: "testing.xlsx",
6    data: [
7      {id: 1},
8      {id: 2}
9    ],
10    worksheets: [
11      {
12        name: "Sheet 1",
13        columns: [
14          {
15            header: "Id",
16            key: "id",
17            width: 10,
18          },
19        ],
20      },
21    ],
22  }) 
23}

Optimization

The file-saver and the rather large exceljs packages are lazily loaded on initiation of an excel download.