{"id":13568265,"url":"https://github.com/eea/volto-react-table-widget","last_synced_at":"2025-04-11T06:52:36.285Z","repository":{"id":38456719,"uuid":"466789146","full_name":"eea/volto-react-table-widget","owner":"eea","description":null,"archived":false,"fork":false,"pushed_at":"2023-11-17T18:09:43.000Z","size":65,"stargazers_count":7,"open_issues_count":0,"forks_count":1,"subscribers_count":4,"default_branch":"master","last_synced_at":"2025-04-02T00:07:22.547Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/eea.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":"LICENSE.md","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null}},"created_at":"2022-03-06T16:14:54.000Z","updated_at":"2022-12-22T15:05:17.000Z","dependencies_parsed_at":"2023-01-30T01:00:23.322Z","dependency_job_id":"845eef00-828b-425b-9e9e-f3076c0bb4bb","html_url":"https://github.com/eea/volto-react-table-widget","commit_stats":{"total_commits":40,"total_committers":5,"mean_commits":8.0,"dds":0.375,"last_synced_commit":"5d83464612e13bd1178fd0023af2a21e8d32df3f"},"previous_names":[],"tags_count":4,"template":false,"template_full_name":"eea/volto-addon-template","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/eea%2Fvolto-react-table-widget","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/eea%2Fvolto-react-table-widget/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/eea%2Fvolto-react-table-widget/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/eea%2Fvolto-react-table-widget/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/eea","download_url":"https://codeload.github.com/eea/volto-react-table-widget/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248358548,"owners_count":21090401,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2024-08-01T14:00:22.361Z","updated_at":"2025-04-11T06:52:36.264Z","avatar_url":"https://github.com/eea.png","language":"JavaScript","funding_links":[],"categories":["Add-ons"],"sub_categories":["Widgets"],"readme":"# volto-react-table-widget\n\n[![Releases](https://img.shields.io/github/v/release/eea/volto-react-table-widget)](https://github.com/eea/volto-react-table-widget/releases)\n\n[![Pipeline](https://ci.eionet.europa.eu/buildStatus/icon?job=volto-addons%2Fvolto-react-table-widget%2Fmaster\u0026subject=master)](https://ci.eionet.europa.eu/view/Github/job/volto-addons/job/volto-react-table-widget/job/master/display/redirect)\n[![Lines of Code](https://sonarqube.eea.europa.eu/api/project_badges/measure?project=volto-react-table-widget-master\u0026metric=ncloc)](https://sonarqube.eea.europa.eu/dashboard?id=volto-react-table-widget-master)\n[![Coverage](https://sonarqube.eea.europa.eu/api/project_badges/measure?project=volto-react-table-widget-master\u0026metric=coverage)](https://sonarqube.eea.europa.eu/dashboard?id=volto-react-table-widget-master)\n[![Bugs](https://sonarqube.eea.europa.eu/api/project_badges/measure?project=volto-react-table-widget-master\u0026metric=bugs)](https://sonarqube.eea.europa.eu/dashboard?id=volto-react-table-widget-master)\n[![Duplicated Lines (%)](https://sonarqube.eea.europa.eu/api/project_badges/measure?project=volto-react-table-widget-master\u0026metric=duplicated_lines_density)](https://sonarqube.eea.europa.eu/dashboard?id=volto-react-table-widget-master)\n\n[![Pipeline](https://ci.eionet.europa.eu/buildStatus/icon?job=volto-addons%2Fvolto-react-table-widget%2Fdevelop\u0026subject=develop)](https://ci.eionet.europa.eu/view/Github/job/volto-addons/job/volto-react-table-widget/job/develop/display/redirect)\n[![Lines of Code](https://sonarqube.eea.europa.eu/api/project_badges/measure?project=volto-react-table-widget-develop\u0026metric=ncloc)](https://sonarqube.eea.europa.eu/dashboard?id=volto-react-table-widget-develop)\n[![Coverage](https://sonarqube.eea.europa.eu/api/project_badges/measure?project=volto-react-table-widget-develop\u0026metric=coverage)](https://sonarqube.eea.europa.eu/dashboard?id=volto-react-table-widget-develop)\n[![Bugs](https://sonarqube.eea.europa.eu/api/project_badges/measure?project=volto-react-table-widget-develop\u0026metric=bugs)](https://sonarqube.eea.europa.eu/dashboard?id=volto-react-table-widget-develop)\n[![Duplicated Lines (%)](https://sonarqube.eea.europa.eu/api/project_badges/measure?project=volto-react-table-widget-develop\u0026metric=duplicated_lines_density)](https://sonarqube.eea.europa.eu/dashboard?id=volto-react-table-widget-develop)\n\n[Volto](https://github.com/plone/volto) add-on to provide a [react-table](https://react-table.tanstack.com/) based widget for Volto to use it with fields with a large set of values.\n\nThe widget can be used like Volto's [ObjectListWidget](https://docs.voltocms.com/storybook/?path=/story/widgets-object-list-json--default\u0026globals=measureEnabled:false), but it's more performant when you have a large set of values.\n\nIt also provides a CSV import and export functionality using the powerwful [react-papaparse](https://www.npmjs.com/package/react-papaparse) library.\n\n## How to use it\n\nThis widget have to be configured like Volto's ObjectListWidget:\n\n- You need to define a schema which will be used to create the table headings. Example:\n\n```jsx\n\nconst ItemSchema = () =\u003e ({\n  title: 'Downloadable File',\n  properties: {\n    title: {\n      title: 'Title',\n      description: 'Enter the title of this file.',\n      type: 'string',\n    },\n    file: {\n      title: 'File name',\n      description: 'Enter the file name.',\n      type: 'string',\n    },\n    area: {\n      title: 'Area of interest',\n      description: 'Enter the area of this file.',\n      type: 'string',\n    },\n    year: {\n      title: 'Year',\n      description: 'Enter the year of this file.',\n      type: 'number',\n      minimum: 1900,\n    },\n    version: {\n      title: 'Version',\n      description: 'Enter the version of this file.',\n      type: 'string',\n    },\n    resolution: {\n      title: 'Resolution',\n      description: 'Enter the resolution of this file. Ex.: 100m',\n      type: 'string',\n    },\n    type: {\n      title: 'Type',\n      description: 'Enter the file type of this file. Ex.: Raster or Vector',\n      choices: [\n        ['Raster', 'Raster'],\n        ['Vector', 'Vector'],\n      ],\n    },\n    format: {\n      title: 'Format',\n      description: 'Enter the format of this file.',\n      type: 'string',\n    },\n    size: {\n      title: 'Size',\n      description: 'Enter the size of this file. Ex.: 3.5 GB',\n      type: 'string',\n    },\n    path: {\n      title: 'Path',\n      description: 'Enter the absolute path of this file in the storage',\n      type: 'string',\n    },\n    source: {\n      title: 'Source',\n      description: 'Enter the source of this file (this is an internal).',\n      choices: [\n        ['EEA', 'EEA'],\n        ['HOTSPOTS', 'HOTSPOTS'],\n      ],\n    },\n  },\n  fieldsets: [\n    {\n      id: 'default',\n      title: 'File',\n      fields: [\n        'title',\n        'file',\n        'area',\n        'year',\n        'version',\n        'resolution',\n        'type',\n        'format',\n        'size',\n        'path',\n        'source',\n      ],\n    },\n  ],\n  required: [],\n});  \n```\n\n- You need to configure your content type's schema to use it.\n\n```jsx\nimport React from 'react';\nimport { ReactTableWidget } from '@eeacms/volto-react-table-widget';\n\nconst DownloadableFilesTableWidget = (props) =\u003e {\n  return (\n    \u003cReactTableWidget\n      schema={ItemSchema()}\n      {...props}\n      csvexport={true}\n      csvimport={true}\n      value={props.value?.items || props.default?.items || []}\n      onChange={(id, value) =\u003e props.onChange(id, { items: value })}\n    /\u003e\n  );\n};\n\nexport default DownloadableFilesTableWidget;\n```\n\nYou can enable/disable the CSV import and export passing the relevant parameter to the widget.\n\n## Features\n\n![Video1](https://github.com/erral/volto-react-table-widget-talk/blob/main/public/1-fast.mp4)\n\n[Video2](https://github.com/erral/volto-react-table-widget-talk/blob/main/public/2-fast.mp4)\n\n[Video3](https://github.com/erral/volto-react-table-widget-talk/blob/main/public/3-fast.mp4)\n\n[Video4](https://github.com/erral/volto-react-table-widget-talk/blob/main/public/4-fast.mp4)\n\n\n## Getting started\n\n### Try volto-react-table-widget with Docker\n\n1. Get the latest Docker images\n\n   ```\n   docker pull plone\n   docker pull plone/volto\n   ```\n\n1. Start Plone backend\n\n   ```\n   docker run -d --name plone -p 8080:8080 -e SITE=Plone -e PROFILES=\"profile-plone.restapi:blocks\" plone\n   ```\n\n1. Start Volto frontend\n\n   ```\n   docker run -it --rm -p 3000:3000 --link plone -e ADDONS=\"@eeacms/volto-react-table-widget\" plone/volto\n   ```\n\n1. Go to http://localhost:3000\n\n### Add volto-react-table-widget to your Volto project\n\n1. Make sure you have a [Plone backend](https://plone.org/download) up-and-running at http://localhost:8080/Plone\n\n1. Start Volto frontend\n\n- If you already have a volto project, just update `package.json`:\n\n  ```JSON\n  \"addons\": [\n      \"@eeacms/volto-react-table-widget\"\n  ],\n\n  \"dependencies\": {\n      \"@eeacms/volto-react-table-widget\": \"^1.0.0\"\n  }\n  ```\n\n- If not, create one:\n\n  ```\n  npm install -g yo @plone/generator-volto\n  yo @plone/volto my-volto-project --addon @eeacms/volto-react-table-widget\n  cd my-volto-project\n  ```\n\n1. Install new add-ons and restart Volto:\n\n   ```\n   yarn\n   yarn start\n   ```\n\n1. Go to http://localhost:3000\n\n1. Happy editing!\n\n## Release\n\nSee [RELEASE.md](https://github.com/eea/volto-react-table-widget/blob/master/RELEASE.md).\n\n## How to contribute\n\nSee [DEVELOP.md](https://github.com/eea/volto-react-table-widget/blob/master/DEVELOP.md).\n\n## Copyright and license\n\nThe Initial Owner of the Original Code is European Environment Agency (EEA).\nAll Rights Reserved.\n\nSee [LICENSE.md](https://github.com/eea/volto-react-table-widget/blob/master/LICENSE.md) for details.\n\n## Funding\n\n[European Environment Agency (EU)](http://eea.europa.eu)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Feea%2Fvolto-react-table-widget","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Feea%2Fvolto-react-table-widget","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Feea%2Fvolto-react-table-widget/lists"}