@chris-c-brine/mrt-csv-export 1.0.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/LICENSE +14 -0
- package/README.md +195 -0
- package/dist/favicon.svg +1 -0
- package/dist/icons.svg +24 -0
- package/dist/index.d.ts +1 -0
- package/dist/index.js +37 -0
- package/package.json +64 -0
package/LICENSE
ADDED
|
@@ -0,0 +1,14 @@
|
|
|
1
|
+
Attribution Assurance License
|
|
2
|
+
|
|
3
|
+
Copyright (c) 2026 Christopher Brine
|
|
4
|
+
|
|
5
|
+
Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
|
|
6
|
+
|
|
7
|
+
1. Redistributions of source code must retain the above copyright notice, this list of conditions and the following disclaimer.
|
|
8
|
+
2. Redistributions in binary form must reproduce the above copyright notice, this list of conditions and the following disclaimer in the documentation and/or other materials provided with the distribution.
|
|
9
|
+
3. The end-user documentation included with the redistribution, if any, must include the following acknowledgment:
|
|
10
|
+
"This product includes software developed by Christopher Brine (https://github.com/Chris-C-Brine/mrt-csv-export)"
|
|
11
|
+
Alternately, this acknowledgment may appear in the software itself, in the same form and location as other such third-party acknowledgments.
|
|
12
|
+
4. Except as contained in this notice, the name of Christopher Brine shall not be used in advertising or otherwise to promote the sale, use or other dealings in this Software without prior written authorization from Christopher Brine.
|
|
13
|
+
|
|
14
|
+
THE SOFTWARE IS PROVIDED "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
|
package/README.md
ADDED
|
@@ -0,0 +1,195 @@
|
|
|
1
|
+
# @Chris-C-Brine/mrt-csv-export
|
|
2
|
+
|
|
3
|
+
[](https://www.npmjs.com/package/@chris-c-brine/mrt-csv-export)
|
|
4
|
+
[](https://github.com/Chris-C-Brine/mrt-csv-export/blob/main/LICENSE)
|
|
5
|
+
|
|
6
|
+
# MRT CSV Export
|
|
7
|
+
|
|
8
|
+
A React hook for exporting Material React Table (MRT) data to CSV format using the `export-to-csv` library.
|
|
9
|
+
|
|
10
|
+
## Features
|
|
11
|
+
|
|
12
|
+
- Simple integration with Material React Table
|
|
13
|
+
- Respects MRT column definitions including `accessorFn`
|
|
14
|
+
- Export all rows or only selected rows
|
|
15
|
+
- Control the visibility of hidden columns in exports
|
|
16
|
+
- Configurable CSV export options
|
|
17
|
+
- TypeScript support
|
|
18
|
+
|
|
19
|
+
## Installation
|
|
20
|
+
|
|
21
|
+
```bash
|
|
22
|
+
npm install @chris-c-brine/mrt-csv-export
|
|
23
|
+
```
|
|
24
|
+
|
|
25
|
+
### Peer Dependencies
|
|
26
|
+
|
|
27
|
+
This package requires the following peer dependencies:
|
|
28
|
+
|
|
29
|
+
```bash
|
|
30
|
+
npm install react react-dom material-react-table export-to-csv @mui/material @emotion/react @emotion/styled
|
|
31
|
+
```
|
|
32
|
+
|
|
33
|
+
## Usage
|
|
34
|
+
|
|
35
|
+
### Complete Example with Toolbar Integration
|
|
36
|
+
|
|
37
|
+
The recommended way to use `useMrtCsvExport` is to create a separate component for your toolbar actions, which allows proper hook usage:
|
|
38
|
+
|
|
39
|
+
```tsx
|
|
40
|
+
// noinspection JSAnnotator
|
|
41
|
+
|
|
42
|
+
import {useMemo} from 'react'
|
|
43
|
+
import {MaterialReactTable, useMaterialReactTable, type MRT_ColumnDef} from 'material-react-table'
|
|
44
|
+
import {Box, Button, Chip} from '@mui/material'
|
|
45
|
+
import {Download} from '@mui/icons-material'
|
|
46
|
+
import {useMrtCsvExport} from '@chris-c-brine/mrt-csv-export'
|
|
47
|
+
|
|
48
|
+
type Tag = {
|
|
49
|
+
id: number
|
|
50
|
+
name: string
|
|
51
|
+
}
|
|
52
|
+
|
|
53
|
+
type Person = {
|
|
54
|
+
id: number
|
|
55
|
+
name: string
|
|
56
|
+
email: string
|
|
57
|
+
age: number
|
|
58
|
+
tags: Tag[]
|
|
59
|
+
}
|
|
60
|
+
|
|
61
|
+
// Extract toolbar to a component so we can use hooks
|
|
62
|
+
function TopToolbarActions({table}: { table: any }) {
|
|
63
|
+
const {exportToCsv} = useMrtCsvExport(table)
|
|
64
|
+
|
|
65
|
+
return (
|
|
66
|
+
<Box sx={{display: 'flex', gap: 1, flexWrap: 'wrap'}}>
|
|
67
|
+
<Button
|
|
68
|
+
startIcon={<Download/>}
|
|
69
|
+
variant="contained"
|
|
70
|
+
onClick={() => exportToCsv({filename: 'all-people'})}
|
|
71
|
+
>
|
|
72
|
+
Export All
|
|
73
|
+
</Button>
|
|
74
|
+
<Button
|
|
75
|
+
startIcon={<Download/>}
|
|
76
|
+
variant="outlined"
|
|
77
|
+
onClick={() => exportToCsv({filename: 'selected-people', onlySelected: true})}
|
|
78
|
+
disabled={!table.getIsSomeRowsSelected()}
|
|
79
|
+
>
|
|
80
|
+
Export Selected
|
|
81
|
+
</Button>
|
|
82
|
+
<Button
|
|
83
|
+
startIcon={<Download/>}
|
|
84
|
+
variant="outlined"
|
|
85
|
+
onClick={() => exportToCsv({filename: 'people-with-hidden', includeHiddenColumns: true})}
|
|
86
|
+
>
|
|
87
|
+
Export with Hidden
|
|
88
|
+
</Button>
|
|
89
|
+
</Box>
|
|
90
|
+
)
|
|
91
|
+
}
|
|
92
|
+
|
|
93
|
+
function MyTable() {
|
|
94
|
+
const data: Person[] = useMemo(
|
|
95
|
+
() => [
|
|
96
|
+
{
|
|
97
|
+
id: 1,
|
|
98
|
+
name: 'John Doe',
|
|
99
|
+
email: 'john@example.com',
|
|
100
|
+
age: 30,
|
|
101
|
+
tags: [
|
|
102
|
+
{id: 1, name: 'React'},
|
|
103
|
+
{id: 2, name: 'TypeScript'},
|
|
104
|
+
],
|
|
105
|
+
},
|
|
106
|
+
{
|
|
107
|
+
id: 2,
|
|
108
|
+
name: 'Jane Smith',
|
|
109
|
+
email: 'jane@example.com',
|
|
110
|
+
age: 25,
|
|
111
|
+
tags: [
|
|
112
|
+
{id: 3, name: 'Vue'},
|
|
113
|
+
{id: 4, name: 'JavaScript'},
|
|
114
|
+
],
|
|
115
|
+
},
|
|
116
|
+
],
|
|
117
|
+
[]
|
|
118
|
+
)
|
|
119
|
+
|
|
120
|
+
const columns = useMemo<MRT_ColumnDef<Person>[]>(
|
|
121
|
+
() => [
|
|
122
|
+
{accessorKey: 'id', header: 'ID'},
|
|
123
|
+
{accessorKey: 'name', header: 'Name'},
|
|
124
|
+
{accessorKey: 'email', header: 'Email'},
|
|
125
|
+
{accessorKey: 'age', header: 'Age'},
|
|
126
|
+
{
|
|
127
|
+
// Transform array of objects to comma-separated string for CSV
|
|
128
|
+
accessorFn: (row) => row.tags.map((t) => t.name).join(', '),
|
|
129
|
+
id: 'tags',
|
|
130
|
+
header: 'Tags',
|
|
131
|
+
// Custom Cell component for visual display
|
|
132
|
+
Cell: ({cell}) => (
|
|
133
|
+
<Box sx={{display: 'flex', gap: 0.5, flexWrap: 'wrap'}}>
|
|
134
|
+
{cell.row.original.tags.map((tag) => (
|
|
135
|
+
<Chip key={tag.id} label={tag.name} size="small" color="primary" variant="outlined"/>
|
|
136
|
+
))}
|
|
137
|
+
</Box>
|
|
138
|
+
),
|
|
139
|
+
},
|
|
140
|
+
],
|
|
141
|
+
[]
|
|
142
|
+
)
|
|
143
|
+
|
|
144
|
+
const table = useMaterialReactTable({
|
|
145
|
+
columns,
|
|
146
|
+
data,
|
|
147
|
+
enableRowSelection: true,
|
|
148
|
+
renderTopToolbarCustomActions: ({table}) => <TopToolbarActions table={table}/>,
|
|
149
|
+
})
|
|
150
|
+
|
|
151
|
+
return <MaterialReactTable table={table}/>
|
|
152
|
+
}
|
|
153
|
+
```
|
|
154
|
+
|
|
155
|
+
### Key Points
|
|
156
|
+
|
|
157
|
+
1. **Extract toolbar to a component**: Because hooks can't be called inside render prop functions, create a separate component like `TopToolbarActions`
|
|
158
|
+
2. **Use `accessorFn` for complex data**: When exporting arrays or objects, use `accessorFn` to transform them into CSV-friendly strings
|
|
159
|
+
3. **Separate display from export**: The `Cell` component handles visual display (e.g., styled chips), while `accessorFn` handles CSV export format
|
|
160
|
+
|
|
161
|
+
## Export Options
|
|
162
|
+
|
|
163
|
+
```tsx
|
|
164
|
+
exportToCsv({
|
|
165
|
+
filename: 'my-export', // Default: 'export'
|
|
166
|
+
onlySelected: true, // Export only selected rows
|
|
167
|
+
includeHiddenColumns: true, // Include hidden columns
|
|
168
|
+
fieldSeparator: ',', // Default: ','
|
|
169
|
+
quoteStrings: true, // Default: true
|
|
170
|
+
decimalSeparator: '.', // Default: '.'
|
|
171
|
+
showLabels: true, // Show column headers
|
|
172
|
+
fileExtension: 'csv', // Default: 'csv'
|
|
173
|
+
useBom: true, // UTF-8 BOM for Excel compatibility
|
|
174
|
+
})
|
|
175
|
+
```
|
|
176
|
+
|
|
177
|
+
## Development
|
|
178
|
+
|
|
179
|
+
```bash
|
|
180
|
+
# Install dependencies
|
|
181
|
+
npm install
|
|
182
|
+
|
|
183
|
+
# Run demo
|
|
184
|
+
npm run dev
|
|
185
|
+
|
|
186
|
+
# Build library
|
|
187
|
+
npm run build:lib
|
|
188
|
+
|
|
189
|
+
# Lint
|
|
190
|
+
npm run lint
|
|
191
|
+
```
|
|
192
|
+
|
|
193
|
+
## License
|
|
194
|
+
|
|
195
|
+
[AAL](LICENSE) © Christopher C. Brine
|
package/dist/favicon.svg
ADDED
|
@@ -0,0 +1 @@
|
|
|
1
|
+
<svg xmlns="http://www.w3.org/2000/svg" width="48" height="46" fill="none" viewBox="0 0 48 46"><path fill="#863bff" d="M25.946 44.938c-.664.845-2.021.375-2.021-.698V33.937a2.26 2.26 0 0 0-2.262-2.262H10.287c-.92 0-1.456-1.04-.92-1.788l7.48-10.471c1.07-1.497 0-3.578-1.842-3.578H1.237c-.92 0-1.456-1.04-.92-1.788L10.013.474c.214-.297.556-.474.92-.474h28.894c.92 0 1.456 1.04.92 1.788l-7.48 10.471c-1.07 1.498 0 3.579 1.842 3.579h11.377c.943 0 1.473 1.088.89 1.83L25.947 44.94z" style="fill:#863bff;fill:color(display-p3 .5252 .23 1);fill-opacity:1"/><mask id="a" width="48" height="46" x="0" y="0" maskUnits="userSpaceOnUse" style="mask-type:alpha"><path fill="#000" d="M25.842 44.938c-.664.844-2.021.375-2.021-.698V33.937a2.26 2.26 0 0 0-2.262-2.262H10.183c-.92 0-1.456-1.04-.92-1.788l7.48-10.471c1.07-1.498 0-3.579-1.842-3.579H1.133c-.92 0-1.456-1.04-.92-1.787L9.91.473c.214-.297.556-.474.92-.474h28.894c.92 0 1.456 1.04.92 1.788l-7.48 10.471c-1.07 1.498 0 3.578 1.842 3.578h11.377c.943 0 1.473 1.088.89 1.832L25.843 44.94z" style="fill:#000;fill-opacity:1"/></mask><g mask="url(#a)"><g filter="url(#b)"><ellipse cx="5.508" cy="14.704" fill="#ede6ff" rx="5.508" ry="14.704" style="fill:#ede6ff;fill:color(display-p3 .9275 .9033 1);fill-opacity:1" transform="matrix(.00324 1 1 -.00324 -4.47 31.516)"/></g><g filter="url(#c)"><ellipse cx="10.399" cy="29.851" fill="#ede6ff" rx="10.399" ry="29.851" style="fill:#ede6ff;fill:color(display-p3 .9275 .9033 1);fill-opacity:1" transform="matrix(.00324 1 1 -.00324 -39.328 7.883)"/></g><g filter="url(#d)"><ellipse cx="5.508" cy="30.487" fill="#7e14ff" rx="5.508" ry="30.487" style="fill:#7e14ff;fill:color(display-p3 .4922 .0767 1);fill-opacity:1" transform="rotate(89.814 -25.913 -14.639)scale(1 -1)"/></g><g filter="url(#e)"><ellipse cx="5.508" cy="30.599" fill="#7e14ff" rx="5.508" ry="30.599" style="fill:#7e14ff;fill:color(display-p3 .4922 .0767 1);fill-opacity:1" transform="rotate(89.814 -32.644 -3.334)scale(1 -1)"/></g><g filter="url(#f)"><ellipse cx="5.508" cy="30.599" fill="#7e14ff" rx="5.508" ry="30.599" style="fill:#7e14ff;fill:color(display-p3 .4922 .0767 1);fill-opacity:1" transform="matrix(.00324 1 1 -.00324 -34.34 30.47)"/></g><g filter="url(#g)"><ellipse cx="14.072" cy="22.078" fill="#ede6ff" rx="14.072" ry="22.078" style="fill:#ede6ff;fill:color(display-p3 .9275 .9033 1);fill-opacity:1" transform="rotate(93.35 24.506 48.493)scale(-1 1)"/></g><g filter="url(#h)"><ellipse cx="3.47" cy="21.501" fill="#7e14ff" rx="3.47" ry="21.501" style="fill:#7e14ff;fill:color(display-p3 .4922 .0767 1);fill-opacity:1" transform="rotate(89.009 28.708 47.59)scale(-1 1)"/></g><g filter="url(#i)"><ellipse cx="3.47" cy="21.501" fill="#7e14ff" rx="3.47" ry="21.501" style="fill:#7e14ff;fill:color(display-p3 .4922 .0767 1);fill-opacity:1" transform="rotate(89.009 28.708 47.59)scale(-1 1)"/></g><g filter="url(#j)"><ellipse cx=".387" cy="8.972" fill="#7e14ff" rx="4.407" ry="29.108" style="fill:#7e14ff;fill:color(display-p3 .4922 .0767 1);fill-opacity:1" transform="rotate(39.51 .387 8.972)"/></g><g filter="url(#k)"><ellipse cx="47.523" cy="-6.092" fill="#7e14ff" rx="4.407" ry="29.108" style="fill:#7e14ff;fill:color(display-p3 .4922 .0767 1);fill-opacity:1" transform="rotate(37.892 47.523 -6.092)"/></g><g filter="url(#l)"><ellipse cx="41.412" cy="6.333" fill="#47bfff" rx="5.971" ry="9.665" style="fill:#47bfff;fill:color(display-p3 .2799 .748 1);fill-opacity:1" transform="rotate(37.892 41.412 6.333)"/></g><g filter="url(#m)"><ellipse cx="-1.879" cy="38.332" fill="#7e14ff" rx="4.407" ry="29.108" style="fill:#7e14ff;fill:color(display-p3 .4922 .0767 1);fill-opacity:1" transform="rotate(37.892 -1.88 38.332)"/></g><g filter="url(#n)"><ellipse cx="-1.879" cy="38.332" fill="#7e14ff" rx="4.407" ry="29.108" style="fill:#7e14ff;fill:color(display-p3 .4922 .0767 1);fill-opacity:1" transform="rotate(37.892 -1.88 38.332)"/></g><g filter="url(#o)"><ellipse cx="35.651" cy="29.907" fill="#7e14ff" rx="4.407" ry="29.108" style="fill:#7e14ff;fill:color(display-p3 .4922 .0767 1);fill-opacity:1" transform="rotate(37.892 35.651 29.907)"/></g><g filter="url(#p)"><ellipse cx="38.418" cy="32.4" fill="#47bfff" rx="5.971" ry="15.297" style="fill:#47bfff;fill:color(display-p3 .2799 .748 1);fill-opacity:1" transform="rotate(37.892 38.418 32.4)"/></g></g><defs><filter id="b" width="60.045" height="41.654" x="-19.77" y="16.149" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feBlend in="SourceGraphic" in2="BackgroundImageFix" result="shape"/><feGaussianBlur result="effect1_foregroundBlur_2002_17158" stdDeviation="7.659"/></filter><filter id="c" width="90.34" height="51.437" x="-54.613" y="-7.533" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feBlend in="SourceGraphic" in2="BackgroundImageFix" result="shape"/><feGaussianBlur result="effect1_foregroundBlur_2002_17158" stdDeviation="7.659"/></filter><filter id="d" width="79.355" height="29.4" x="-49.64" y="2.03" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feBlend in="SourceGraphic" in2="BackgroundImageFix" result="shape"/><feGaussianBlur result="effect1_foregroundBlur_2002_17158" stdDeviation="4.596"/></filter><filter id="e" width="79.579" height="29.4" x="-45.045" y="20.029" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feBlend in="SourceGraphic" in2="BackgroundImageFix" result="shape"/><feGaussianBlur result="effect1_foregroundBlur_2002_17158" stdDeviation="4.596"/></filter><filter id="f" width="79.579" height="29.4" x="-43.513" y="21.178" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feBlend in="SourceGraphic" in2="BackgroundImageFix" result="shape"/><feGaussianBlur result="effect1_foregroundBlur_2002_17158" stdDeviation="4.596"/></filter><filter id="g" width="74.749" height="58.852" x="15.756" y="-17.901" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feBlend in="SourceGraphic" in2="BackgroundImageFix" result="shape"/><feGaussianBlur result="effect1_foregroundBlur_2002_17158" stdDeviation="7.659"/></filter><filter id="h" width="61.377" height="25.362" x="23.548" y="2.284" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feBlend in="SourceGraphic" in2="BackgroundImageFix" result="shape"/><feGaussianBlur result="effect1_foregroundBlur_2002_17158" stdDeviation="4.596"/></filter><filter id="i" width="61.377" height="25.362" x="23.548" y="2.284" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feBlend in="SourceGraphic" in2="BackgroundImageFix" result="shape"/><feGaussianBlur result="effect1_foregroundBlur_2002_17158" stdDeviation="4.596"/></filter><filter id="j" width="56.045" height="63.649" x="-27.636" y="-22.853" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feBlend in="SourceGraphic" in2="BackgroundImageFix" result="shape"/><feGaussianBlur result="effect1_foregroundBlur_2002_17158" stdDeviation="4.596"/></filter><filter id="k" width="54.814" height="64.646" x="20.116" y="-38.415" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feBlend in="SourceGraphic" in2="BackgroundImageFix" result="shape"/><feGaussianBlur result="effect1_foregroundBlur_2002_17158" stdDeviation="4.596"/></filter><filter id="l" width="33.541" height="35.313" x="24.641" y="-11.323" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feBlend in="SourceGraphic" in2="BackgroundImageFix" result="shape"/><feGaussianBlur result="effect1_foregroundBlur_2002_17158" stdDeviation="4.596"/></filter><filter id="m" width="54.814" height="64.646" x="-29.286" y="6.009" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feBlend in="SourceGraphic" in2="BackgroundImageFix" result="shape"/><feGaussianBlur result="effect1_foregroundBlur_2002_17158" stdDeviation="4.596"/></filter><filter id="n" width="54.814" height="64.646" x="-29.286" y="6.009" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feBlend in="SourceGraphic" in2="BackgroundImageFix" result="shape"/><feGaussianBlur result="effect1_foregroundBlur_2002_17158" stdDeviation="4.596"/></filter><filter id="o" width="54.814" height="64.646" x="8.244" y="-2.416" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feBlend in="SourceGraphic" in2="BackgroundImageFix" result="shape"/><feGaussianBlur result="effect1_foregroundBlur_2002_17158" stdDeviation="4.596"/></filter><filter id="p" width="39.409" height="43.623" x="18.713" y="10.588" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feBlend in="SourceGraphic" in2="BackgroundImageFix" result="shape"/><feGaussianBlur result="effect1_foregroundBlur_2002_17158" stdDeviation="4.596"/></filter></defs></svg>
|
package/dist/icons.svg
ADDED
|
@@ -0,0 +1,24 @@
|
|
|
1
|
+
<svg xmlns="http://www.w3.org/2000/svg">
|
|
2
|
+
<symbol id="bluesky-icon" viewBox="0 0 16 17">
|
|
3
|
+
<g clip-path="url(#bluesky-clip)"><path fill="#08060d" d="M7.75 7.735c-.693-1.348-2.58-3.86-4.334-5.097-1.68-1.187-2.32-.981-2.74-.79C.188 2.065.1 2.812.1 3.251s.241 3.602.398 4.13c.52 1.744 2.367 2.333 4.07 2.145-2.495.37-4.71 1.278-1.805 4.512 3.196 3.309 4.38-.71 4.987-2.746.608 2.036 1.307 5.91 4.93 2.746 2.72-2.746.747-4.143-1.747-4.512 1.702.189 3.55-.4 4.07-2.145.156-.528.397-3.691.397-4.13s-.088-1.186-.575-1.406c-.42-.19-1.06-.395-2.741.79-1.755 1.24-3.64 3.752-4.334 5.099"/></g>
|
|
4
|
+
<defs><clipPath id="bluesky-clip"><path fill="#fff" d="M.1.85h15.3v15.3H.1z"/></clipPath></defs>
|
|
5
|
+
</symbol>
|
|
6
|
+
<symbol id="discord-icon" viewBox="0 0 20 19">
|
|
7
|
+
<path fill="#08060d" d="M16.224 3.768a14.5 14.5 0 0 0-3.67-1.153c-.158.286-.343.67-.47.976a13.5 13.5 0 0 0-4.067 0c-.128-.306-.317-.69-.476-.976A14.4 14.4 0 0 0 3.868 3.77C1.546 7.28.916 10.703 1.231 14.077a14.7 14.7 0 0 0 4.5 2.306q.545-.748.965-1.587a9.5 9.5 0 0 1-1.518-.74q.191-.14.372-.293c2.927 1.369 6.107 1.369 8.999 0q.183.152.372.294-.723.437-1.52.74.418.838.963 1.588a14.6 14.6 0 0 0 4.504-2.308c.37-3.911-.63-7.302-2.644-10.309m-9.13 8.234c-.878 0-1.599-.82-1.599-1.82 0-.998.705-1.82 1.6-1.82.894 0 1.614.82 1.599 1.82.001 1-.705 1.82-1.6 1.82m5.91 0c-.878 0-1.599-.82-1.599-1.82 0-.998.705-1.82 1.6-1.82.893 0 1.614.82 1.599 1.82 0 1-.706 1.82-1.6 1.82"/>
|
|
8
|
+
</symbol>
|
|
9
|
+
<symbol id="documentation-icon" viewBox="0 0 21 20">
|
|
10
|
+
<path fill="none" stroke="#aa3bff" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.35" d="m15.5 13.333 1.533 1.322c.645.555.967.833.967 1.178s-.322.623-.967 1.179L15.5 18.333m-3.333-5-1.534 1.322c-.644.555-.966.833-.966 1.178s.322.623.966 1.179l1.534 1.321"/>
|
|
11
|
+
<path fill="none" stroke="#aa3bff" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.35" d="M17.167 10.836v-4.32c0-1.41 0-2.117-.224-2.68-.359-.906-1.118-1.621-2.08-1.96-.599-.21-1.349-.21-2.848-.21-2.623 0-3.935 0-4.983.369-1.684.591-3.013 1.842-3.641 3.428C3 6.449 3 7.684 3 10.154v2.122c0 2.558 0 3.838.706 4.726q.306.383.713.671c.76.536 1.79.64 3.581.66"/>
|
|
12
|
+
<path fill="none" stroke="#aa3bff" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.35" d="M3 10a2.78 2.78 0 0 1 2.778-2.778c.555 0 1.209.097 1.748-.047.48-.129.854-.503.982-.982.145-.54.048-1.194.048-1.749a2.78 2.78 0 0 1 2.777-2.777"/>
|
|
13
|
+
</symbol>
|
|
14
|
+
<symbol id="github-icon" viewBox="0 0 19 19">
|
|
15
|
+
<path fill="#08060d" fill-rule="evenodd" d="M9.356 1.85C5.05 1.85 1.57 5.356 1.57 9.694a7.84 7.84 0 0 0 5.324 7.44c.387.079.528-.168.528-.376 0-.182-.013-.805-.013-1.454-2.165.467-2.616-.935-2.616-.935-.349-.91-.864-1.143-.864-1.143-.71-.48.051-.48.051-.48.787.051 1.2.805 1.2.805.695 1.194 1.817.857 2.268.649.064-.507.27-.857.49-1.052-1.728-.182-3.545-.857-3.545-3.87 0-.857.31-1.558.8-2.104-.078-.195-.349-1 .077-2.078 0 0 .657-.208 2.14.805a7.5 7.5 0 0 1 1.946-.26c.657 0 1.328.092 1.946.26 1.483-1.013 2.14-.805 2.14-.805.426 1.078.155 1.883.078 2.078.502.546.799 1.247.799 2.104 0 3.013-1.818 3.675-3.558 3.87.284.247.528.714.528 1.454 0 1.052-.012 1.896-.012 2.156 0 .208.142.455.528.377a7.84 7.84 0 0 0 5.324-7.441c.013-4.338-3.48-7.844-7.773-7.844" clip-rule="evenodd"/>
|
|
16
|
+
</symbol>
|
|
17
|
+
<symbol id="social-icon" viewBox="0 0 20 20">
|
|
18
|
+
<path fill="none" stroke="#aa3bff" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.35" d="M12.5 6.667a4.167 4.167 0 1 0-8.334 0 4.167 4.167 0 0 0 8.334 0"/>
|
|
19
|
+
<path fill="none" stroke="#aa3bff" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.35" d="M2.5 16.667a5.833 5.833 0 0 1 8.75-5.053m3.837.474.513 1.035c.07.144.257.282.414.309l.93.155c.596.1.736.536.307.965l-.723.73a.64.64 0 0 0-.152.531l.207.903c.164.715-.213.991-.84.618l-.872-.52a.63.63 0 0 0-.577 0l-.872.52c-.624.373-1.003.094-.84-.618l.207-.903a.64.64 0 0 0-.152-.532l-.723-.729c-.426-.43-.289-.864.306-.964l.93-.156a.64.64 0 0 0 .412-.31l.513-1.034c.28-.562.735-.562 1.012 0"/>
|
|
20
|
+
</symbol>
|
|
21
|
+
<symbol id="x-icon" viewBox="0 0 19 19">
|
|
22
|
+
<path fill="#08060d" fill-rule="evenodd" d="M1.893 1.98c.052.072 1.245 1.769 2.653 3.77l2.892 4.114c.183.261.333.48.333.486s-.068.089-.152.183l-.522.593-.765.867-3.597 4.087c-.375.426-.734.834-.798.905a1 1 0 0 0-.118.148c0 .01.236.017.664.017h.663l.729-.83c.4-.457.796-.906.879-.999a692 692 0 0 0 1.794-2.038c.034-.037.301-.34.594-.675l.551-.624.345-.392a7 7 0 0 1 .34-.374c.006 0 .93 1.306 2.052 2.903l2.084 2.965.045.063h2.275c1.87 0 2.273-.003 2.266-.021-.008-.02-1.098-1.572-3.894-5.547-2.013-2.862-2.28-3.246-2.273-3.266.008-.019.282-.332 2.085-2.38l2-2.274 1.567-1.782c.022-.028-.016-.03-.65-.03h-.674l-.3.342a871 871 0 0 1-1.782 2.025c-.067.075-.405.458-.75.852a100 100 0 0 1-.803.91c-.148.172-.299.344-.99 1.127-.304.343-.32.358-.345.327-.015-.019-.904-1.282-1.976-2.808L6.365 1.85H1.8zm1.782.91 8.078 11.294c.772 1.08 1.413 1.973 1.425 1.984.016.017.241.02 1.05.017l1.03-.004-2.694-3.766L7.796 5.75 5.722 2.852l-1.039-.004-1.039-.004z" clip-rule="evenodd"/>
|
|
23
|
+
</symbol>
|
|
24
|
+
</svg>
|
package/dist/index.d.ts
ADDED
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export {}
|
package/dist/index.js
ADDED
|
@@ -0,0 +1,37 @@
|
|
|
1
|
+
import { useCallback as e } from "react";
|
|
2
|
+
import { download as t, generateCsv as n, mkConfig as r } from "export-to-csv";
|
|
3
|
+
//#region src/lib/useMrtCsvExport.ts
|
|
4
|
+
var i = (i) => ({ exportToCsv: e(({ filename: e = "export", fieldSeparator: a = ",", quoteStrings: o = !0, decimalSeparator: s = ".", showLabels: c = !0, fileExtension: l = "csv", useBom: u = !0, includeHiddenColumns: d = !1, onlySelected: f = !1 }) => {
|
|
5
|
+
let p = f ? i.getSelectedRowModel().rows : i.getPrePaginationRowModel().rows;
|
|
6
|
+
if (p.length === 0) {
|
|
7
|
+
console.warn("No rows to export");
|
|
8
|
+
return;
|
|
9
|
+
}
|
|
10
|
+
let m = (d ? i.getAllColumns() : i.getVisibleLeafColumns()).filter((e) => e.id !== "mrt-row-select" && e.id !== "mrt-row-actions");
|
|
11
|
+
if (m.length === 0) {
|
|
12
|
+
console.warn("No columns to export");
|
|
13
|
+
return;
|
|
14
|
+
}
|
|
15
|
+
let h = p.map((e) => {
|
|
16
|
+
let t = {};
|
|
17
|
+
return m.forEach((n) => {
|
|
18
|
+
let r = e.getValue(n.id), i = n.columnDef.header, a = typeof i == "string" ? i : n.id;
|
|
19
|
+
r == null || typeof r == "string" || typeof r == "number" || typeof r == "boolean" ? t[a] = r : t[a] = String(r);
|
|
20
|
+
}), t;
|
|
21
|
+
}), g = m.map((e) => {
|
|
22
|
+
let t = e.columnDef.header;
|
|
23
|
+
return typeof t == "string" ? t : e.id;
|
|
24
|
+
}), _ = r({
|
|
25
|
+
filename: e,
|
|
26
|
+
fieldSeparator: a,
|
|
27
|
+
quoteStrings: o,
|
|
28
|
+
decimalSeparator: s,
|
|
29
|
+
showColumnHeaders: c,
|
|
30
|
+
columnHeaders: c ? g : void 0,
|
|
31
|
+
fileExtension: l,
|
|
32
|
+
useBom: u
|
|
33
|
+
}), v = n(_)(h);
|
|
34
|
+
t(_)(v);
|
|
35
|
+
}, [i]) });
|
|
36
|
+
//#endregion
|
|
37
|
+
export { i as useMrtCsvExport };
|
package/package.json
ADDED
|
@@ -0,0 +1,64 @@
|
|
|
1
|
+
{
|
|
2
|
+
"name": "@chris-c-brine/mrt-csv-export",
|
|
3
|
+
"version": "1.0.1",
|
|
4
|
+
"description": "Material React Table integration with export-to-csv using Vite",
|
|
5
|
+
"type": "module",
|
|
6
|
+
"main": "./dist/index.js",
|
|
7
|
+
"module": "./dist/index.js",
|
|
8
|
+
"types": "./dist/index.d.ts",
|
|
9
|
+
"files": [
|
|
10
|
+
"dist"
|
|
11
|
+
],
|
|
12
|
+
"scripts": {
|
|
13
|
+
"dev": "vite --open",
|
|
14
|
+
"build": "tsc && vite build",
|
|
15
|
+
"build:lib": "tsc && vite build --mode library",
|
|
16
|
+
"lint": "eslint .",
|
|
17
|
+
"preview": "vite preview"
|
|
18
|
+
},
|
|
19
|
+
"keywords": [
|
|
20
|
+
"material-react-table",
|
|
21
|
+
"export-to-csv",
|
|
22
|
+
"csv export",
|
|
23
|
+
"react",
|
|
24
|
+
"typescript",
|
|
25
|
+
"vite"
|
|
26
|
+
],
|
|
27
|
+
"author": "Christopher Brine",
|
|
28
|
+
"license": "AAL",
|
|
29
|
+
"peerDependencies": {
|
|
30
|
+
"@emotion/react": ">=11.0.0",
|
|
31
|
+
"@emotion/styled": ">=11.0.0",
|
|
32
|
+
"@mui/material": ">=5.0.0",
|
|
33
|
+
"export-to-csv": ">=1.0.0",
|
|
34
|
+
"material-react-table": ">=3.0.0",
|
|
35
|
+
"react": ">=18.0.0",
|
|
36
|
+
"react-dom": ">=18.0.0"
|
|
37
|
+
},
|
|
38
|
+
"dependencies": {
|
|
39
|
+
"@emotion/react": ">=11.0.0",
|
|
40
|
+
"@emotion/styled": ">=11.0.0",
|
|
41
|
+
"@mui/icons-material": "^9.0.0",
|
|
42
|
+
"@mui/material": ">=5.0.0",
|
|
43
|
+
"export-to-csv": ">=1.0.0",
|
|
44
|
+
"material-react-table": ">=3.0.0",
|
|
45
|
+
"react": ">=18.0.0",
|
|
46
|
+
"react-dom": ">=18.0.0"
|
|
47
|
+
},
|
|
48
|
+
"devDependencies": {
|
|
49
|
+
"@eslint/js": "^10.0.1",
|
|
50
|
+
"@types/node": "^24.12.3",
|
|
51
|
+
"@types/react": "^19.2.14",
|
|
52
|
+
"@types/react-dom": "^19.2.3",
|
|
53
|
+
"@vitejs/plugin-react": "^6.0.1",
|
|
54
|
+
"eslint": "^10.3.0",
|
|
55
|
+
"eslint-plugin-react-hooks": "^7.1.1",
|
|
56
|
+
"eslint-plugin-react-refresh": "^0.5.2",
|
|
57
|
+
"globals": "^17.6.0",
|
|
58
|
+
"prettier": "^3.8.4",
|
|
59
|
+
"typescript": "~6.0.2",
|
|
60
|
+
"typescript-eslint": "^8.59.2",
|
|
61
|
+
"vite": "^8.0.12",
|
|
62
|
+
"vite-plugin-dts": "^4.5.0"
|
|
63
|
+
}
|
|
64
|
+
}
|