@eeacms/volto-react-table-widget v0.1.3
volto-react-table-widget
Volto add-on to provide a react-table based widget for Volto to use it with fields with a large set of values.
The widget can be used like Volto's ObjectListWidget, but it's more performant when you have a large set of values.
It also provides a CSV import and export functionality using the powerwful react-papaparse library.
How to use it
This widget have to be configured like Volto's ObjectListWidget:
- You need to define a schema which will be used to create the table headings. Example:
const ItemSchema = () => ({
title: 'Downloadable File',
properties: {
title: {
title: 'Title',
description: 'Enter the title of this file.',
type: 'string',
},
file: {
title: 'File name',
description: 'Enter the file name.',
type: 'string',
},
area: {
title: 'Area of interest',
description: 'Enter the area of this file.',
type: 'string',
},
year: {
title: 'Year',
description: 'Enter the year of this file.',
type: 'number',
minimum: 1900,
},
version: {
title: 'Version',
description: 'Enter the version of this file.',
type: 'string',
},
resolution: {
title: 'Resolution',
description: 'Enter the resolution of this file. Ex.: 100m',
type: 'string',
},
type: {
title: 'Type',
description: 'Enter the file type of this file. Ex.: Raster or Vector',
choices: [
['Raster', 'Raster'],
['Vector', 'Vector'],
],
},
format: {
title: 'Format',
description: 'Enter the format of this file.',
type: 'string',
},
size: {
title: 'Size',
description: 'Enter the size of this file. Ex.: 3.5 GB',
type: 'string',
},
path: {
title: 'Path',
description: 'Enter the absolute path of this file in the storage',
type: 'string',
},
source: {
title: 'Source',
description: 'Enter the source of this file (this is an internal).',
choices: [
['EEA', 'EEA'],
['HOTSPOTS', 'HOTSPOTS'],
],
},
},
fieldsets: [
{
id: 'default',
title: 'File',
fields: [
'title',
'file',
'area',
'year',
'version',
'resolution',
'type',
'format',
'size',
'path',
'source',
],
},
],
required: [],
});
- You need to configure your content type's schema to use it.
import React from 'react';
import { ReactTableWidget } from '@eeacms/volto-react-table-widget';
const DownloadableFilesTableWidget = (props) => {
return (
<ReactTableWidget
schema={ItemSchema()}
{...props}
csvexport={true}
csvimport={true}
value={props.value?.items || props.default?.items || []}
onChange={(id, value) => props.onChange(id, { items: value })}
/>
);
};
export default DownloadableFilesTableWidget;
You can enable/disable the CSV import and export passing the relevant parameter to the widget.
Features
Getting started
Try volto-react-table-widget with Docker
Get the latest Docker images
docker pull plone docker pull plone/volto
Start Plone backend
docker run -d --name plone -p 8080:8080 -e SITE=Plone -e PROFILES="profile-plone.restapi:blocks" plone
Start Volto frontend
docker run -it --rm -p 3000:3000 --link plone -e ADDONS="@eeacms/volto-react-table-widget" plone/volto
Go to http://localhost:3000
Add volto-react-table-widget to your Volto project
Make sure you have a Plone backend up-and-running at http://localhost:8080/Plone
Start Volto frontend
If you already have a volto project, just update
package.json
:"addons": [ "@eeacms/volto-react-table-widget" ], "dependencies": { "@eeacms/volto-react-table-widget": "^1.0.0" }
If not, create one:
npm install -g yo @plone/generator-volto yo @plone/volto my-volto-project --addon @eeacms/volto-react-table-widget cd my-volto-project
Install new add-ons and restart Volto:
yarn yarn start
Go to http://localhost:3000
Happy editing!
Release
See RELEASE.md.
How to contribute
See DEVELOP.md.
Copyright and license
The Initial Owner of the Original Code is European Environment Agency (EEA). All Rights Reserved.
See LICENSE.md for details.