-
-
Notifications
You must be signed in to change notification settings - Fork 14
/
CSVButton.tsx
78 lines (67 loc) · 1.68 KB
/
CSVButton.tsx
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
import { SubmitButton } from '../form/SubmitButton'
interface CSVColumn<T> {
title: string
value: keyof T
}
const downloadCSV = (content: string, filename: string): void => {
const blob = new Blob([content], { type: 'text/csv;charset=utf-8;' })
const url = URL.createObjectURL(blob)
const pom = document.createElement('a')
pom.href = url
pom.setAttribute('download', filename)
pom.click()
}
const createCSVString = (values: Array<string>): string => {
return values.join('\r\n')
}
function mapValuesToString<DataType>(
data: Array<DataType>,
columns: Array<CSVColumn<DataType>>
): Array<string> {
const result = [columns.map(({ title }) => `"${title}"`).join(',')]
data.forEach((row) => {
result.push(
columns
.map(({ value }) => {
const hasValue = row[value]
if (hasValue !== undefined && hasValue !== null) {
return `"${hasValue.toString()}"`
} else {
return '""'
}
})
.join(',')
)
})
return result
}
function createCSVFromData<T>(
data: Array<T>,
columns: Array<CSVColumn<T>>,
title: string
) {
const stringValues = mapValuesToString(data, columns)
const csvString = createCSVString(stringValues)
downloadCSV(csvString, title)
}
export interface CSVProps<DataType> {
filename: string
data: Array<DataType>
columns: Array<CSVColumn<DataType>>
}
export default function CSVButton<DataType>({
filename,
data,
columns
}: CSVProps<DataType>) {
const handleDownload = () => {
createCSVFromData(data, columns, filename)
}
return (
<SubmitButton
type="button"
title="Download as .csv"
onClick={handleDownload}
/>
)
}