beamworks / react-csv-importer

Uploader + CSV parser + raw file preview + UI for custom user column mapping, all in one
https://www.npmjs.com/package/react-csv-importer
MIT License
231 stars 95 forks source link

Allow to customise SOURCES_PAGE_SIZE #72

Closed sara-jegorova closed 1 year ago

sara-jegorova commented 2 years ago

Currently fields step is not very mobile-friendly, mostly because 5 items is too much for a small screen: Screenshot 2022-03-22 at 14 31 04

It would be great to be able to customise SOURCES_PAGE_SIZE from https://github.com/beamworks/react-csv-importer/blob/master/src/components/fields-step/ColumnDragSourceArea.tsx#L13 , or better yet, change it based on screen width.

unframework commented 2 years ago

Excellent point - actually I am planning a whole different mobile-friendly UI replacement option for this step. Might get a quick fix for this out first though, thanks!

unframework commented 1 year ago

Released a quick fix in v0.8.0: there is now a setting called displayColumnPageSize that controls the above. It is set to 5 by default, smaller values might look better on mobile screens.

Similarly, a new setting called displayFieldRowSize controls the drag-drop destination field row display; the default is 4. I added a storybook example for these.

I still plan to come up with a proper mobile-friendly UI for v1, but for now this will do hopefully. Thanks again for the suggestion!