Home

Awesome

volto-react-table-widget

Releases

Pipeline Lines of Code Coverage Bugs Duplicated Lines (%)

Pipeline Lines of Code Coverage Bugs Duplicated Lines (%)

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:


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: [],
});  
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

Video1

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

  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)