Create README.md

README.md

@@ -20,9 +20,137 @@ The widget can be used like Volto's [ObjectListWidget](https://docs.voltocms.com
 
 It also provides a CSV import and export functionality using the powerwful [react-papaparse](https://www.npmjs.com/package/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:
+
+```jsx
+
+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.
+
+```jsx
+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
 
-Demo GIF
+![Video1](https://github.com/erral/volto-react-table-widget-talk/blob/main/public/1-fast.mp4)
+
+[Video2](https://github.com/erral/volto-react-table-widget-talk/blob/main/public/2-fast.mp4)
+
+[Video3](https://github.com/erral/volto-react-table-widget-talk/blob/main/public/3-fast.mp4)
+
+[Video4](https://github.com/erral/volto-react-table-widget-talk/blob/main/public/4-fast.mp4)
+
 
 ## Getting started