Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/benwinding/react-admin-import-csv
A csv file import button for react-admin
https://github.com/benwinding/react-admin-import-csv
bulkimport csv react react-admin
Last synced: 6 days ago
JSON representation
A csv file import button for react-admin
- Host: GitHub
- URL: https://github.com/benwinding/react-admin-import-csv
- Owner: benwinding
- License: mit
- Created: 2020-03-28T12:49:39.000Z (almost 5 years ago)
- Default Branch: master
- Last Pushed: 2024-02-01T04:49:11.000Z (about 1 year ago)
- Last Synced: 2024-10-10T23:34:08.352Z (4 months ago)
- Topics: bulkimport, csv, react, react-admin
- Language: TypeScript
- Homepage: https://benwinding.github.io/react-admin-import-csv
- Size: 29.1 MB
- Stars: 135
- Watchers: 3
- Forks: 46
- Open Issues: 5
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# react-admin-import-csv
[](https://www.npmjs.com/package/react-admin-import-csv)
[](https://www.npmjs.com/package/react-admin-import-csv)
[](https://github.com/benwinding/react-admin-import-csv/blob/master/LICENSE)
[](https://github.com/benwinding/react-admin-import-csv)
[](./coverage/coverage-summary.json)
CSV import button for the [react-admin](https://github.com/marmelab/react-admin) framework.
## Usage
Simply import the button into a toolbar, like so:
### Basic Import Action Only
```js
import {
Datagrid,
List,
TextField,
RichTextField,
TopToolbar,
} from "react-admin";
import { ImportButton } from "react-admin-import-csv";
import { CreateButton } from "ra-ui-materialui";
const ListActions = (props) => {
const { className, basePath } = props;
return (
);
};
export const PostList = (props) => (
} actions={}>
...
);
```
### Export/Import Actions
```js
import {
Datagrid,
List,
TextField,
RichTextField,
TopToolbar,
} from "react-admin";
import { ImportButton } from "react-admin-import-csv";
import { CreateButton, ExportButton } from "ra-ui-materialui";
const ListActions = (props) => {
const {
className,
basePath,
total,
resource,
currentSort,
filterValues,
exporter,
} = props;
return (
);
};
export const PostList = (props) => (
} actions={}>
...
);
```
## Configuration Options
```typescript
// All configuration options are optional
const config: ImportConfig = {
// Enable logging
logging?: boolean;
// Disable the attempt to use "createMany", will instead just use "create" calls
disableCreateMany?: boolean,
// Disable the attempt to use "updateMany", will instead just use "update" calls
disableUpdateMany?: boolean,
// Disable the attempt to use "getMany", will instead just use "getSingle" calls
disableGetMany?: boolean,
// Disable "import new" button
disableImportNew?: boolean;
// Disable "import overwrite" button
disableImportOverwrite?: boolean;
// A function to translate the CSV rows on import
preCommitCallback?: (action: "create" | "overwrite", values: any[]) => Promise;
// A function to handle row errors after import
postCommitCallback?: (error: any) => void;
// Transform rows before anything is sent to dataprovider
transformRows?: (csvRows: any[]) => Promise;
// Async function to Validate a row, reject the promise if it's not valid
validateRow?: (csvRowItem: any) => Promise;
// Any option from the "papaparse" library
parseConfig?: {
// For all options see: https://www.papaparse.com/docs#config
}
}
```
## Handle `id` fields which might be numbers
Use the `paparse` configuration option [`dynamicTyping`](https://www.papaparse.com/docs)
```js
const importOptions = {
parseConfig?: {
// For all options see: https://www.papaparse.com/docs#config
dynamicTyping: true
}
}
```
## Reducing Requests (`.createMany()` and `.updateMany()`)
Your dataprovider will need to implement the `.createMany()` method in order to reduce requests to your backend. If it doesn't exist, it will fallback to calling `.create()` on all items, as shown below (same goes for `.update()`):
| Name | Special Method | Fallback Method |
| ----------------- | ------------------ | --------------- |
| Creating from CSV | .createMany() | .create() |
| Updating from CSV | .updateManyArray() | .update() |
| Checking which exist | .getMany() | .getSingle() |
*Note: You can disable this feature setting `disableCreateMany: true` or `disableUpdateMany: true` in the configuration.*
### Interfaces
The dataprovider should accept these param interfaces for the bulk create/update methods.
```typescript
export interface UpdateManyArrayParams {
ids: Identifier[];
data: any[];
}
export interface CreateManyParams {
data: any[];
}
```
### Example Implementation
Here's a quick example of how to implement `.createMany()` and `.updateMany()` in your dataprovider:
``` js
// Must be react-admin 3.x
const dataProviderWrapped = {
...dataProvider, // <- Your data provider
createMany: async (resource, params) => {
const items = params.data;
// Handle create many here
},
updateMany: async (resource, params) => {
const items = params.data;
const idsToUpdate = params.ids;
// Handle update many here
}
}
// Pass into to other parts of the system as normal
return (
(messages[locale] ? messages[locale] : messages.en),
locale
);
// declare prop in Admin component
```
[More information on this setup here](https://marmelab.com/react-admin/Translation.html)
# Development
If you'd like to develop on `react-admin-import-csv` do the following.
## Local install
- `git clone https://github.com/benwinding/react-admin-import-csv/`
- `cd react-admin-import-csv`
- `yarn`
## Tests
- `yarn test # in root folder`
## Run demo
Open another terminal
- `yarn build-watch`
Open another terminal and goto the `demo` folder
- `yarn start`