CSV export button

packages/semantic-ui/src/components/DataTable.js

@@ -633,6 +633,7 @@ DataTable.defaultProps = {
   buttons: [],
   count: 0,
   className: '',
+  csvExportButton: undefined,
   expandableRows: false,
   expandPanel: undefined,
   filters: undefined,

packages/semantic-ui/src/components/List.js

@@ -79,6 +79,16 @@ type Props = {
    */
   className?: string,
 
+  /**
+   * If provided, a CSV export button will be rendered in the list header.
+   */
+  csvExportButton?: {
+    basic: boolean,
+    color: string,
+    location: string,
+    onClick?: () => void
+  },
+
   /**
    * If provided, a "delete all" button will be rendered in the list header.
    */
@@ -208,6 +218,7 @@ type State = {
 };
 
 const BUTTON_KEY_ADD = 'add';
+const BUTTON_KEY_CSV_EXPORT = 'csv-export';
 const BUTTON_KEY_DELETE_ALL = 'delete-all';
 
 /**
@@ -229,6 +240,7 @@ const useList = (WrappedComponent: ComponentType<any>) => (
       },
       buttons: [],
       className: '',
+      csvExportButton: undefined,
       filters: undefined,
       modal: undefined,
       page: 1,
@@ -269,6 +281,7 @@ const useList = (WrappedComponent: ComponentType<any>) => (
 
       const {
         addButton = {},
+        csvExportButton = {},
         deleteButton = {},
         modal,
         selectable
@@ -288,6 +301,13 @@ const useList = (WrappedComponent: ComponentType<any>) => (
         });
       }
 
+      // Add the CSV export button to the list if the csvExport prop is passed
+      if (csvExportButton.location === location && !selectable) {
+        buttons.push({
+          render: this.renderCsvExportButton.bind(this)
+        });
+      }
+
       // Resolve the array of other buttons
       buttons.push(..._.filter(this.props.buttons, (button) => {
         let include = false;
@@ -331,6 +351,43 @@ const useList = (WrappedComponent: ComponentType<any>) => (
       this.setState({ selectedItem: copy, modalEdit: true });
     }
 
+    /**
+     * Generates and downloads a CSV file containing all
+     * the data in the table.
+     *
+     * @param items
+     */
+    onCsvExportButton() {
+      const visibleColumns = _.filter(this.props.columns, (col) => !col.hidden);
+
+      let csv = `${_.map(visibleColumns, (col) => `"${col.label}"`).join(',')}\n`;
+
+      _.each(this.props.items, (item) => {
+        csv = csv.concat(`${visibleColumns.map((col) => {
+          if (col.resolve) {
+            return `"${col.resolve(item)}"`;
+          }
+
+          if (item[col.name]) {
+            return `"${item[col.name]}"`;
+          }
+
+          return '';
+        }).join(',')}\n`);
+      });
+
+      const element = document.createElement('a');
+      element.setAttribute('href', `data:text/plain;charset=utf-8,${encodeURIComponent(csv)}`);
+      element.setAttribute('download', `${this.props.collectionName || 'table'}.csv`);
+
+      element.style.display = 'none';
+      document.body.appendChild(element);
+
+      element.click();
+
+      document.body.removeChild(element);
+    }
+
     /**
      * Deletes the currently selected item and clears the state.
      *
@@ -533,6 +590,29 @@ const useList = (WrappedComponent: ComponentType<any>) => (
       );
     }
 
+    /**
+   * Renders the CSV export button.
+   *
+   * @returns {null|*}
+   */
+    renderCsvExportButton() {
+      if (!this.props.csvExportButton) {
+        return null;
+      }
+
+      return (
+        <Button
+          basic={this.props.csvExportButton.basic}
+          color={this.props.csvExportButton.color}
+          key={BUTTON_KEY_CSV_EXPORT}
+          onClick={this.onCsvExportButton.bind(this)}
+        >
+          <Icon name='download' />
+          { i18n.t('List.buttons.csvExport') }
+        </Button>
+      );
+    }
+
     /**
      * Renders the delete all button.
      *

packages/semantic-ui/src/i18n/en.json

@@ -233,6 +233,7 @@
   "List": {
     "buttons": {
       "add": "Add",
+      "csvExport": "CSV Export",
       "deleteAll": "Delete all"
     },
     "deleteAllContent": "Are you sure you want to remove all records? This action cannot be undone.",

packages/storybook/src/semantic-ui/DataTable.stories.js

@@ -233,6 +233,27 @@ export const Pagination = useDragDrop(() => (
   />
 ));
 
+export const CsvExport = useDragDrop(() => (
+  <DataTable
+    actions={actions}
+    buttons={[
+      {
+        render: () => <Button key='1'>Test</Button>
+      },
+    ]}
+    columns={columns}
+    csvExportButton={{
+      color: 'blue',
+      location: 'bottom'
+    }}
+    items={items}
+    onColumnClick={action('column-click')}
+    onCopy={action('copy')}
+    onDelete={action('delete')}
+    onSave={action('save')}
+  />
+));
+
 export const CustomDeleteModal = useDragDrop(() => (
   <DataTable
     actions={actions}

packages/storybook/src/semantic-ui/ListTable.stories.js

@@ -152,6 +152,26 @@ export const Count = useDragDrop(() => {
   );
 });
 
+export const CsvExport = useDragDrop(() => (
+  <ListTable
+    actions={actions}
+    collectionName='items'
+    columns={columns}
+    csvExportButton={{
+      color: 'blue',
+      location: 'bottom'
+    }}
+    onCopy={action('copy')}
+    onLoad={(params) => Api.onLoad(_.extend(params, {
+      items,
+      perPage: number('Per page', 10)
+    }))}
+    onDelete={action('delete')}
+    onSave={action('save')}
+    searchable={boolean('Searchable', true)}
+  />
+));
+
 export const CustomizableColumns = useDragDrop(() => (
   <ListTable
     actions={actions}