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

Video2

Video3

Video4

Getting started

Try volto-react-table-widget with Docker

1. Get the latest Docker images

   docker pull plone
   docker pull plone/volto

2. Start Plone backend

   docker run -d --name plone -p 8080:8080 -e SITE=Plone -e PROFILES="profile-plone.restapi:blocks" plone

3. Start Volto frontend

   docker run -it --rm -p 3000:3000 --link plone -e ADDONS="@eeacms/volto-react-table-widget" plone/volto

4. Go to http://localhost:3000

Add volto-react-table-widget to your Volto project

1. Make sure you have a Plone backend up-and-running at http://localhost:8080/Plone

2. 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

1. Install new add-ons and restart Volto:

   yarn
   yarn start

2. Go to http://localhost:3000

3. 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.

Funding

European Environment Agency (EU)