[DataGrid] Implement CSV export

packages/grid/_modules_/grid/GridComponent.tsx

@@ -45,6 +45,7 @@ import { RootContainerRef } from './models/rootContainerRef';
 import { ApiContext } from './components/api-context';
 import { useFilter } from './hooks/features/filter/useFilter';
 import { useLocaleText } from './hooks/features/localeText/useLocaleText';
+import { useCsvExport } from './hooks/features/export';
 
 export const GridComponent = React.forwardRef<HTMLDivElement, GridComponentProps>(
   function GridComponent(props, ref) {
@@ -85,6 +86,7 @@ export const GridComponent = React.forwardRef<HTMLDivElement, GridComponentProps
     useVirtualRows(columnsHeaderRef, windowRef, renderingZoneRef, apiRef);
     useColumnReorder(apiRef);
     useColumnResize(columnsHeaderRef, apiRef);
+    useCsvExport(apiRef);
     usePagination(apiRef);
 
     const components = useComponents(props.components, props.componentsProps, apiRef);

packages/grid/_modules_/grid/components/icons/index.tsx

@@ -78,3 +78,8 @@ export const DragIcon = createSvgIcon(
   <path d="M11 18c0 1.1-.9 2-2 2s-2-.9-2-2 .9-2 2-2 2 .9 2 2zm-2-8c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm0-6c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm6 4c1.1 0 2-.9 2-2s-.9-2-2-2-2 .9-2 2 .9 2 2 2zm0 2c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm0 6c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2z" />,
   'Drag',
 );
+
+export const DownloadIcon = createSvgIcon(
+  <path d="M5,20h14v-2H5V20z M19,9h-4V3H9v6H5l7,7L19,9z" />,
+  'Download',
+);

packages/grid/_modules_/grid/components/toolbar/DensitySelector.tsx

@@ -65,7 +65,7 @@ export function DensitySelector() {
   };
 
   // Disable the button if the corresponding is disabled
-  if (options.disableColumnFilter) {
+  if (options.disableDensitySelector) {
     return null;
   }
 

packages/grid/_modules_/grid/components/toolbar/ExportSelector.tsx

@@ -0,0 +1,77 @@
+import * as React from 'react';
+import MenuList from '@material-ui/core/MenuList';
+import Button from '@material-ui/core/Button';
+import MenuItem from '@material-ui/core/MenuItem';
+import { ApiContext } from '../api-context';
+import { useGridSelector } from '../../hooks/features/core/useGridSelector';
+import { optionsSelector } from '../../hooks/utils/optionsSelector';
+import { GridMenu } from '../menu/GridMenu';
+import { ExportOption } from '../../models';
+
+export function ExportSelector() {
+  const apiRef = React.useContext(ApiContext);
+  const options = useGridSelector(apiRef, optionsSelector);
+  const [anchorEl, setAnchorEl] = React.useState(null);
+
+  const ExportIcon = apiRef!.current.components!.ExportIcon!;
+
+  const ExportOptions: Array<ExportOption> = [
+    {
+      label: 'CSV',
+      format: 'csv',
+    },
+  ];
+
+  const handleExportSelectorOpen = (event) => setAnchorEl(event.currentTarget);
+  const handleExportSelectorClose = () => setAnchorEl(null);
+  const handleExport = (format) => {
+    if (format === 'csv') {
+      apiRef!.current.exportDataAsCsv();
+    }
+
+    setAnchorEl(null);
+  };
+
+  const handleListKeyDown = (event: React.KeyboardEvent) => {
+    if (event.key === 'Tab' || event.key === 'Escape') {
+      event.preventDefault();
+      handleExportSelectorClose();
+    }
+  };
+
+  // Disable the button if the corresponding is disabled
+  if (options.disableCsvExport) {
+    return null;
+  }
+
+  const renderExportOptions: Array<React.ReactElement> = ExportOptions.map((option, index) => (
+    <MenuItem key={index} onClick={() => handleExport(option.format)}>
+      {option.label}
+    </MenuItem>
+  ));
+
+  return (
+    <React.Fragment>
+      <Button
+        color="primary"
+        size="small"
+        startIcon={<ExportIcon />}
+        onClick={handleExportSelectorOpen}
+        aria-label=""
+        aria-haspopup="true"
+      >
+        {'EXPORT'}
+      </Button>
+      <GridMenu
+        open={Boolean(anchorEl)}
+        target={anchorEl}
+        onClickAway={handleExportSelectorClose}
+        position="bottom-start"
+      >
+        <MenuList id="menu-list-grow" onKeyDown={handleListKeyDown}>
+          {renderExportOptions}
+        </MenuList>
+      </GridMenu>
+    </React.Fragment>
+  );
+}

packages/grid/_modules_/grid/components/toolbar/GridToolbar.tsx

@@ -7,6 +7,7 @@ import { GridToolbarContainer } from '../containers/GridToolbarContainer';
 import { ColumnsToolbarButton } from './ColumnsToolbarButton';
 import { DensitySelector } from './DensitySelector';
 import { FilterToolbarButton } from './FilterToolbarButton';
+import { ExportSelector } from './ExportSelector';
 
 export function GridToolbar() {
   const apiRef = useContext(ApiContext);
@@ -15,7 +16,8 @@ export function GridToolbar() {
   if (
     options.disableColumnFilter &&
     options.disableColumnSelector &&
-    options.disableDensitySelector
+    options.disableDensitySelector &&
+    options.disableCsvExport
   ) {
     return null;
   }
@@ -25,6 +27,7 @@ export function GridToolbar() {
       <ColumnsToolbarButton />
       <FilterToolbarButton />
       <DensitySelector />
+      <ExportSelector />
     </GridToolbarContainer>
   );
 }

packages/grid/_modules_/grid/components/toolbar/index.ts

@@ -1,4 +1,5 @@
 export * from './ColumnsToolbarButton';
 export * from './DensitySelector';
+export * from './ExportSelector';
 export * from './FilterToolbarButton';
 export * from './GridToolbar';

packages/grid/_modules_/grid/hooks/features/export/index.ts

@@ -0,0 +1 @@
+export * from './useCsvExport';

packages/grid/_modules_/grid/hooks/features/export/useCsvExport.tsx

@@ -0,0 +1,67 @@
+import * as React from 'react';
+import { ApiRef } from '../../../models/api/apiRef';
+import { useApiMethod } from '../../root/useApiMethod';
+import { useGridSelector } from '../core/useGridSelector';
+import { visibleColumnsSelector } from '../columns';
+import { visibleSortedRowsSelector } from '../filter';
+import { selectionStateSelector } from '../selection';
+import { Columns, CsvExportApi, RowId, RowModel } from '../../../models';
+import { useLogger } from '../../utils/useLogger';
+import { exportAs } from '../../../utils';
+
+export const useCsvExport = (apiRef: ApiRef): void => {
+  const logger = useLogger('useCsvExport');
+  const visibleColumns = useGridSelector(apiRef, visibleColumnsSelector);
+  const visibleSortedRows = useGridSelector(apiRef, visibleSortedRowsSelector);
+  const selection = useGridSelector(apiRef, selectionStateSelector);
+
+  const buildRow = (row: RowModel, columns: Columns) => {
+    const mappedRow: RowModel[] = [];
+    columns.forEach((column) => column.field !== '__check__' && mappedRow.push(row[column.field]));
+    return mappedRow;
+  };
+
+  const buildCSV = React.useCallback(
+    (columns: Columns, rows: RowModel[], selectedRows: Record<RowId, boolean>) => {
+      const selectedRowsIds = Object.keys(selectedRows);
+
+      if (selectedRowsIds.length) {
+        rows = rows.filter((row) => selectedRowsIds.includes(`${row.id}`));
+      }
+
+      const CSVHead = `${columns
+        .filter((column) => column.field !== '__check__')
+        .map((column) => column.headerName)
+        .toString()}\r\n`;
+      const CSVBody = rows
+        .reduce((soFar, row) => `${soFar}${buildRow(row, columns)}\r\n`, '')
+        .trim();
+      const csv = `${CSVHead}${CSVBody}`.trim();
+
+      return csv;
+    },
+    [],
+  );
+
+  const exportDataAsCsv = React.useCallback((): void => {
+    logger.debug(`Export data as CSV`);
+    const csv = buildCSV(visibleColumns, visibleSortedRows, selection);
+    const blob = new Blob([csv], { type: 'text/csv' });
+
+    exportAs(blob, 'csv', 'data');
+  }, [logger, visibleColumns, visibleSortedRows, selection, buildCSV]);
+
+  const getDataAsCsv = React.useCallback(() => {
+    logger.debug(`Get data as CSV`);
+    const csv = buildCSV(visibleColumns, visibleSortedRows, selection);
+
+    return csv;
+  }, [logger, visibleColumns, visibleSortedRows, selection, buildCSV]);
+
+  const csvExportApi: CsvExportApi = {
+    exportDataAsCsv,
+    getDataAsCsv,
+  };
+
+  useApiMethod(apiRef, csvExportApi, 'CsvExportApi');
+};

packages/grid/_modules_/grid/hooks/features/useComponents.tsx

@@ -38,6 +38,9 @@ export const useComponents = (
       DensityStandardIcon:
         (componentSlotsProp && componentSlotsProp.DensityStandardIcon) ||
         DEFAULT_SLOTS_COMPONENTS.DensityStandardIcon,
+      ExportIcon:
+        (componentSlotsProp && componentSlotsProp.ExportIcon) ||
+        DEFAULT_SLOTS_COMPONENTS.ExportIcon,
       OpenFilterButtonIcon:
         (componentSlotsProp && componentSlotsProp.OpenFilterButtonIcon) ||
         DEFAULT_SLOTS_COMPONENTS.OpenFilterButtonIcon,

packages/grid/_modules_/grid/models/api/csvExportApi.ts

@@ -0,0 +1,15 @@
+/**
+ * The csv export API interface that is available in the grid [[apiRef]].
+ */
+export interface CsvExportApi {
+  /**
+   * Export the grid data as CSV.
+   * @returns void
+   */
+  exportDataAsCsv: () => void;
+  /**
+   * Get the grid data as CSV.
+   * @returns
+   */
+  getDataAsCsv: () => any;
+}

packages/grid/_modules_/grid/models/api/gridApi.ts

@@ -15,12 +15,14 @@ import { CoreApi } from './coreApi';
 import { EventsApi } from './eventsApi';
 import { DensityApi } from './densityApi';
 import { LocaleTextApi } from './localeTextApi';
+import { CsvExportApi } from './csvExportApi';
 
 /**
  * The full grid API.
  */
 export type GridApi = CoreApi &
   ComponentsApi &
+  CsvExportApi &
   StateApi &
   DensityApi &
   EventsApi &

packages/grid/_modules_/grid/models/api/index.ts

@@ -2,6 +2,7 @@ export * from './apiRef';
 export * from './coreApi';
 export * from './columnApi';
 export * from './componentsApi';
+export * from './csvExportApi';
 export * from './densityApi';
 export * from './eventsApi';
 export * from './gridApi';

packages/grid/_modules_/grid/models/export.ts

@@ -0,0 +1,12 @@
+/**
+ * Available export formats. To be extended in future.
+ */
+export type ExportFormat = 'csv';
+
+/**
+ * Export option interface
+ */
+export interface ExportOption {
+  label: string;
+  format: ExportFormat;
+}

packages/grid/_modules_/grid/models/gridIconSlotsComponent.ts

@@ -44,4 +44,8 @@ export interface GridIconSlotsComponent {
    * Icon displayed on the comfortable density option in the toolbar.
    */
   DensityComfortableIcon?: React.ElementType;
+  /**
+   * Icon displayed on the open export button present in the toolbar by default
+   */
+  ExportIcon?: React.ElementType;
 }

packages/grid/_modules_/grid/models/gridOptions.tsx

@@ -82,6 +82,11 @@ export interface GridOptions {
    * @default false
    */
   disableDensitySelector?: boolean;
+  /**
+   * If `true`, csv export option is disabled.
+   * @default false
+   */
+  disableCsvExport?: boolean;
   /**
    * If `true`, reordering columns is disabled.
    * @default false

packages/grid/_modules_/grid/models/gridSlotsComponent.ts

@@ -14,6 +14,7 @@ import {
   TripleDotsVerticalIcon,
   ViewHeadlineIcon,
   ViewStreamIcon,
+  DownloadIcon,
 } from '../components/icons/index';
 import { LoadingOverlay } from '../components/LoadingOverlay';
 import { GridColumnMenu, GridColumnMenuProps } from '../components/menu/columnMenu/GridColumnMenu';
@@ -95,6 +96,7 @@ export const DEFAULT_SLOTS_ICONS: GridIconSlotsComponent = {
   DensityCompactIcon: ViewHeadlineIcon,
   DensityStandardIcon: TableRowsIcon,
   DensityComfortableIcon: ViewStreamIcon,
+  ExportIcon: DownloadIcon,
 };
 
 export const DEFAULT_SLOTS_COMPONENTS: ApiRefComponentsProperty = {

packages/grid/_modules_/grid/models/index.ts

@@ -17,3 +17,4 @@ export * from './gridIconSlotsComponent';
 export * from './gridSlotsComponent';
 export * from './gridSlotsComponentsProps';
 export * from './density';
+export * from './export';

packages/grid/_modules_/grid/utils/exportAs.ts

@@ -0,0 +1,23 @@
+export const exportAs = (blob: Blob, extension: string, filename: string): void => {
+  /* taken from react-csv */
+  if (navigator && navigator.msSaveOrOpenBlob) {
+    navigator.msSaveOrOpenBlob(blob, filename);
+  } else {
+    let dataURI = '';
+    // TODO: Handle more export cases in future
+    if (extension === 'csv') {
+      dataURI = `data:text/csv;charset=utf-8,${'csv'}`;
+    }
+
+    const URL = window.URL || window.webkitURL;
+    const downloadURI =
+      typeof URL.createObjectURL === 'undefined' ? dataURI : URL.createObjectURL(blob);
+
+    const link = document.createElement('a');
+    link.setAttribute('href', downloadURI);
+    link.setAttribute('download', filename);
+    document.body.appendChild(link);
+    link.click();
+    document.body.removeChild(link);
+  }
+};

packages/grid/_modules_/grid/utils/index.ts

@@ -7,3 +7,4 @@ export * from './mergeUtils';
 export * from './paramsUtils';
 export * from './getLocalization';
 export * from './material-ui-utils';
+export * from './exportAs';

packages/storybook/src/stories/grid-toolbar.stories.tsx

@@ -45,3 +45,19 @@ export const DensitySelectorComfortable = () => {
     </div>
   );
 };
+export const CsvExport = () => {
+  const data = useData(100, 50);
+
+  return (
+    <div style={{ height: 600 }}>
+      <XGrid
+        columns={data.columns}
+        rows={data.rows}
+        checkboxSelection
+        components={{
+          Toolbar: GridToolbar,
+        }}
+      />
+    </div>
+  );
+};