@carbon/ibm-security/es/components/DataTable/TableToolbarDownload.js

Carbon for Cloud & Cognitive IBM Security UI components

/**
 * @file Table toolbar button for downloading table data as CSV
 * @copyright IBM Security 2019 - 2021
 */

import { Download16 } from '@carbon/icons-react';
import { ExportToCsv } from 'export-to-csv';
import PropTypes from 'prop-types';
import React from 'react';
import IconButton from '../IconButton';
var options = {
  fieldSeparator: ',',
  quoteStrings: '"',
  decimalSeparator: '.',
  showLabels: true,
  useTextFile: false,
  useBom: true
};
var TableToolbarDownload = function TableToolbarDownload(_ref) {
  var headers = _ref.headers,
    rows = _ref.rows,
    title = _ref.title,
    filename = _ref.filename,
    label = _ref.label;
  var csvRows = rows.map(function (row) {
    var newRow = {};
    headers.forEach(function (_ref2) {
      var key = _ref2.key;
      newRow[key] = row[key] ? row[key] : '';
    });
    return newRow;
  });
  if (title) {
    options.showTitle = true;
    options.title = title;
  }
  options.filename = filename;
  options.headers = headers.map(function (_ref3) {
    var header = _ref3.header;
    return header;
  });
  var csvExporter = new ExportToCsv(options);
  return /*#__PURE__*/React.createElement(IconButton, {
    size: "lg",
    renderIcon: Download16,
    label: label,
    onClick: function onClick() {
      if (rows.length > 0 && headers.length > 0) {
        csvExporter.generateCsv(csvRows);
      }
    }
  });
};
TableToolbarDownload.propTypes = {
  /** @type {string} the filename used for the generated CSV file */
  filename: PropTypes.string,
  /**
   * @type {Record<string, any>}
   * The `headers` prop represents the order in which the headers should
   * appear in the table. We expect an array of objects to be passed in, where
   * `key` is the name of the key in a row object, and `header` is the name of
   * the header.
   */
  headers: PropTypes.arrayOf(PropTypes.shape({
    key: PropTypes.string.isRequired,
    header: PropTypes.string.isRequired
  })).isRequired,
  /** @type {string} the aria-label for the button */
  label: PropTypes.string,
  /**
   * @type {Record<string, any>}
   * The `rows` prop is where you provide us with a list of all the rows that
   * you want to render in the table. The only hard requirement is that this
   * is an array of objects, and that each object has a unique `id` field
   * available on it.
   */
  rows: PropTypes.arrayOf(PropTypes.shape({
    id: PropTypes.string.isRequired
  })).isRequired,
  /** @type {string} the title used for the generated CSV table */
  title: PropTypes.string
};
TableToolbarDownload.defaultProps = {
  title: '',
  filename: 'DataTable',
  label: 'Download'
};
export default TableToolbarDownload;