https://github.com/r48n34/mantine-import-table
Parse and check your input xlsx / csv file with Zod Scheme By Mantine UI
https://github.com/r48n34/mantine-import-table
csv mantine-ui react xlsx
Last synced: 9 months ago
JSON representation
Parse and check your input xlsx / csv file with Zod Scheme By Mantine UI
- Host: GitHub
- URL: https://github.com/r48n34/mantine-import-table
- Owner: r48n34
- License: mit
- Created: 2025-05-15T05:29:14.000Z (11 months ago)
- Default Branch: main
- Last Pushed: 2025-05-28T02:43:37.000Z (10 months ago)
- Last Synced: 2025-06-06T04:08:20.964Z (10 months ago)
- Topics: csv, mantine-ui, react, xlsx
- Language: TypeScript
- Homepage: https://mantine-import-table.vercel.app
- Size: 209 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# mantine-import-table
Parse and check your input xlsx / csv file with Zod Scheme By MantineUI.
Works for mantine 7 / 8.
> Warning
> Still in testing, please do not use in productions.
### Features
- Zod Types friendly & support `z.object()` scheme import
- Accept xlsx / csv file input
- Mantine UI base
- Ease of use error reminder
### Setup / Install
Make sure you have installed `zod` and `@mantine/core` items and `@mantine/dropzone` before using this packages.
If Not:
```bash
yarn add @mantine/core @mantine/hooks @mantine/dropzone zod
```
And Follow the guide with https://mantine.dev/getting-started/
Install packages
```bash
yarn add mantine-import-table
```
### Quickstart
```jsx
import { MantineImportTable } from "mantine-import-table";
// Make sure you have installed @mantine/dropzone
import '@mantine/dropzone/styles.css';
import { z } from "zod"
const testScheme = z.object({
"Name": z.string().min(1),
"Student ID": z.number().min(0).max(100),
"Good": z.enum(["Yes", "No"])
})
export type TestScheme = z.infer;
export default function MainPage() {
const [ data, setData ] = useState([]);
return (
setData(v)}
/>
)
}
```
#### Props for ``
- Require Props
| Name | Require | Type | Description |
| -------------------- | ------- | ------------------------------ | --------------------------------------------------------- |
| zodScheme | Yes | z.object({}) | Your z.object() scheme |
| successCb | Yes | (data: z.output[]) => void | return your z.object().parse Array after a success input |
Samples:
```tsx
import { MantineImportTable } from "mantine-import-table";
import { Container } from "@mantine/core";
import { z } from "zod"
const testScheme = z.object({
"Name": z.string().min(1),
"Student ID": z.number().min(0).max(100),
"Good": z.enum(["Yes", "No"])
})
export type TestScheme = z.infer;
export default function MainPage() {
const [ data, setData ] = useState([]);
return (
setData(v)}
/>
)
}
```
- Optional Props
| Name | Require | Type | Default | Description |
| -------------------- | ------- | -------------------------------------- | -------------- | -------------------------------------------------------- |
| info | No | InfoColumnsInput[] | [] | Info Array For additional informations |
| onReject | No | (fileRejections: FileRejection[]) => void | N/A | Return Reject input files |
| maxFileSize | No | number | 10 * 1024 ** 2 | Max xlsx / csv file size in bytes |
| showDownloadTemplate | No | boolean | true | Display download generated header xlsx template button |
#### Params for `info`: `InfoColumnsInput`
| Name | Require | Type | Default | Description |
| ----------- | ------- | ---------------- | --------- | --------------------------------------------------------- |
| key | Yes | string | N/A | Key that match with your Zod Scheme Key (e.g. User ID ) |
| type | Yes | string | N/A | Remind User what data should be included in the xlsx (Not Functional, just for display only) |
| description | No | string / string | "" | Explain more about the cols header (e.g. Record user id ) |
| examples | No | string | "" | Data examples explains (e.g. Yes | No ) |
Samples:
```tsx
import { MantineImportTable } from "mantine-import-table";
import { Container } from "@mantine/core";
import { z } from "zod"
const testScheme = z.object({
"Name": z.string().min(1),
"Student ID": z.number().min(0).max(100),
"Good": z.enum(["Yes", "No"])
})
export type TestScheme = z.infer;
export default function MainPage() {
const [ data, setData ] = useState([]);
return (
console.log(v)}
info={[
{
key: "Name",
type: "string",
description: "Enter Student Name",
examples: "Peter Wong",
},
{
key: "Student ID",
type: `number`,
description: "Enter Student ID",
examples: "12",
},
{
key: "Good",
type: `["Yes", "No"]`,
description: "Determine is good student",
}
]}
maxFileSize={1024 ** 2 * 15}
showDownloadTemplate={false}
/>
)
}
```
### License
MIT