[DataGrid] Implement CSV export

docs/pages/api-docs/data-grid.md

@@ -25,6 +25,7 @@ import { DataGrid } from '@material-ui/data-grid';
 | <span class="prop-name">density</span> | <span class="prop-type">Density</span> | standard | Sets the density of the grid. |
 | <span class="prop-name">disableColumnMenu</span> | <span class="prop-type">boolean</span> | false | If `true`, the column menu is disabled. |
 | <span class="prop-name">disableColumnSelector</span> | <span class="prop-type">boolean</span> | false | If `true`, the column selector is disabled. |
+| <span class="prop-name">disableCsvExport</span> | <span class="prop-type">boolean</span> | false | If `true`, the CSV export option in the export selector is disabled. |
 | <span class="prop-name">disableExtendRowFullWidth</span> | <span class="prop-type">boolean</span> | false | If `true`, rows will not be extended to fill the full width of the grid container. |
 | <span class="prop-name">disableSelectionOnClick</span> | <span class="prop-type">boolean</span> | false | If `true`, the selection on click on a row or cell is disabled. |
 | <span class="prop-name">error</span> | <span class="prop-type">any</span> |   | An error that will turn the grid into its error state and display the error component. |
@@ -99,6 +100,7 @@ Api of the `components` props of type `GridSlotsComponent`
 | <span class="prop-name">DensityCompactIcon</span> | <span class="prop-type">React.ElementType </span> | <span class="prop-type">ViewHeadlineIcon</span> | Icon displayed on the compact density option in the toolbar. |
 | <span class="prop-name">DensityStandardIcon</span> | <span class="prop-type">React.ElementType </span> | <span class="prop-type">TableRowsIcon</span> | Icon displayed on the standard density option in the toolbar. |
 | <span class="prop-name">DensityComfortableIcon</span> | <span class="prop-type">React.ElementType </span> | <span class="prop-type">ViewStreamIcon</span> | Icon displayed on the comfortable density option in the toolbar. |
+| <span class="prop-name">ExportIcon</span> | <span class="prop-type">React.ElementType </span> | <span class="prop-type">SaveAltIcon</span> | Icon displayed on the export button in the toolbar. |
 | <span class="prop-name">OpenFilterButtonIcon</span> | <span class="prop-type">React.ElementType </span> | <span class="prop-type">FilterListIcon</span> | Icon displayed on the open filter button present in the toolbar by default. |
 
 ## CSS

docs/pages/api-docs/x-grid.md

@@ -27,6 +27,7 @@ import { XGrid } from '@material-ui/x-grid';
 | <span class="prop-name">disableColumnMenu</span> | <span class="prop-type">boolean</span> | false | If `true`, the column menu is disabled. |
 | <span class="prop-name">disableColumnSelector</span> | <span class="prop-type">boolean</span> | false | If `true`, the column selector is disabled. |
 | <span class="prop-name">disableColumnResize</span> | <span class="prop-type">boolean</span> | false | If `true`, resizing columns is disabled. |
+| <span class="prop-name">disableCsvExport</span> | <span class="prop-type">boolean</span> | false | If `true`, the CSV export option in the export selector is disabled. |
 | <span class="prop-name">disableExtendRowFullWidth</span> | <span class="prop-type">boolean</span> | false | If `true`, rows will not be extended to fill the full width of the grid container. |
 | <span class="prop-name">disableMultipleColumnsSorting</span> | <span class="prop-type">boolean</span> | false | If `true`, sorting with multiple columns is disabled. |
 | <span class="prop-name">disableMultipleSelection</span> | <span class="prop-type">boolean</span> | false | If `true`, multiple selection using the CTRL or CMD key is disabled. |
@@ -104,6 +105,7 @@ Api of the `components` props of type `GridSlotsComponent`
 | <span class="prop-name">DensityCompactIcon</span> | <span class="prop-type">React.ElementType </span> | <span class="prop-type">ViewHeadlineIcon</span> | Icon displayed on the compact density option in the toolbar. |
 | <span class="prop-name">DensityStandardIcon</span> | <span class="prop-type">React.ElementType </span> | <span class="prop-type">TableRowsIcon</span> | Icon displayed on the standard density option in the toolbar. |
 | <span class="prop-name">DensityComfortableIcon</span> | <span class="prop-type">React.ElementType </span> | <span class="prop-type">ViewStreamIcon</span> | Icon displayed on the comfortable density option in the toolbar. |
+| <span class="prop-name">ExportIcon</span> | <span class="prop-type">React.ElementType </span> | <span class="prop-type">SaveAltIcon</span> | Icon displayed on the export button in the toolbar. |
 | <span class="prop-name">OpenFilterButtonIcon</span> | <span class="prop-type">React.ElementType </span> | <span class="prop-type">FilterListIcon</span> | Icon displayed on the open filter button present in the toolbar by default. |
 
 ## CSS

docs/src/pages.js

@@ -34,7 +34,7 @@ datagrid.children =
         { pathname: '/components/data-grid/selection' },
         { pathname: '/components/data-grid/editing', title: '🚧 Editing' },
         { pathname: '/components/data-grid/rendering' },
-        { pathname: '/components/data-grid/export', title: '🚧 Export & Import' },
+        { pathname: '/components/data-grid/export', title: 'Export & Import' },
         { pathname: '/components/data-grid/localization', title: 'Localization' },
         { pathname: '/components/data-grid/group-pivot', title: '🚧 Group & Pivot' },
         { pathname: '/components/data-grid/accessibility' },
@@ -53,7 +53,7 @@ datagrid.children =
         { pathname: '/components/data-grid/selection' },
         { pathname: '/components/data-grid/editing', title: '🚧 Editing' },
         { pathname: '/components/data-grid/rendering' },
-        { pathname: '/components/data-grid/export', title: '🚧 Export & Import' },
+        { pathname: '/components/data-grid/export', title: 'Export & Import' },
         { pathname: '/components/data-grid/localization', title: 'Localization' },
         { pathname: '/components/data-grid/group-pivot', title: '🚧 Group & Pivot' },
         { pathname: '/components/data-grid/accessibility' },

docs/src/pages/components/data-grid/export/ExportSelectorGrid.js

@@ -0,0 +1,34 @@
+import * as React from 'react';
+import {
+  DataGrid,
+  GridToolbarContainer,
+  GridToolbarExport,
+} from '@material-ui/data-grid';
+import { useDemoData } from '@material-ui/x-grid-data-generator';
+
+function CustomToolbar() {
+  return (
+    <GridToolbarContainer>
+      <GridToolbarExport />
+    </GridToolbarContainer>
+  );
+}
+
+export default function ExportSelectorGrid() {
+  const { data } = useDemoData({
+    dataSet: 'Commodity',
+    rowLength: 4,
+    maxColumns: 6,
+  });
+
+  return (
+    <div style={{ height: 300, width: '100%' }}>
+      <DataGrid
+        {...data}
+        components={{
+          Toolbar: CustomToolbar,
+        }}
+      />
+    </div>
+  );
+}

docs/src/pages/components/data-grid/export/ExportSelectorGrid.tsx

@@ -0,0 +1,34 @@
+import * as React from 'react';
+import {
+  DataGrid,
+  GridToolbarContainer,
+  GridToolbarExport,
+} from '@material-ui/data-grid';
+import { useDemoData } from '@material-ui/x-grid-data-generator';
+
+function CustomToolbar() {
+  return (
+    <GridToolbarContainer>
+      <GridToolbarExport />
+    </GridToolbarContainer>
+  );
+}
+
+export default function ExportSelectorGrid() {
+  const { data } = useDemoData({
+    dataSet: 'Commodity',
+    rowLength: 4,
+    maxColumns: 6,
+  });
+
+  return (
+    <div style={{ height: 300, width: '100%' }}>
+      <DataGrid
+        {...data}
+        components={{
+          Toolbar: CustomToolbar,
+        }}
+      />
+    </div>
+  );
+}

docs/src/pages/components/data-grid/export/export.md

@@ -7,13 +7,15 @@ components: DataGrid, XGrid
 
 <p class="description">Easily export the rows in various file formats such as CSV, Excel, or PDF.</p>
 
-## 🚧 CSV export
+## CSV export
 
-> ⚠️ This feature isn't implemented yet. It's coming.
->
-> 👍 Upvote [issue #197](https://github.com/mui-org/material-ui-x/issues/197) if you want to see it land faster.
+You are able to export the displayed data to CSV with an API call, or using the grid UI.
+
+To enable the CSV export you need to compose a toolbar containing the `GridToolbarExport` component, and apply it using the `Toolbar` key in the grid `components` prop.
+
+{{"demo": "pages/components/data-grid/export/ExportSelectorGrid.js", "bg": "inline"}}
 
-You will be able to export the displayed data to CSV with an API call, or using the grid UI.
+To hide the CSV export add the `disableCsvExport` prop to the data grid.
 
 ## 🚧 Print
 

docs/src/pages/components/data-grid/getting-started/getting-started.md

@@ -154,7 +154,7 @@ The following table summarizes the features available in the community `DataGrid
 | [Row edition](/components/data-grid/editing/#row-editing)                               |    🚧     |              🚧               |                  🚧                   |
 | [Cell editing](/components/data-grid/editing/#cell-editing)                             |    🚧     |              🚧               |                  🚧                   |
 | **Import & export**                                                                     |           |                               |                                       |
-| [CSV export](/components/data-grid/export/#csv-export)                                  |    🚧     |              🚧               |                  🚧                   |
+| [CSV export](/components/data-grid/export/#csv-export)                                  |    ✅     |              ✅               |                  ✅                   |
 | [Print](/components/data-grid/export/#print)                                            |    🚧     |              🚧               |                  🚧                   |
 | [Excel export](/components/data-grid/export/#excel-export)                              |    ❌     |              ❌               |                  🚧                   |
 | [Clipboard](/components/data-grid/export/#clipboard)                                    |    ❌     |              🚧               |                  🚧                   |

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 SaveAltIcon = createSvgIcon(
+  <path d="M19 12v7H5v-7H3v7c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2v-7h-2zm-6 .67l2.59-2.58L17 11.5l-5 5-5-5 1.41-1.41L11 12.67V3h2z" />,
+  'SaveAlt',
+);

packages/grid/_modules_/grid/components/menu/GridMenu.tsx

@@ -22,7 +22,7 @@ type MenuPosition =
 export interface MenuProps extends Omit<PopperProps, 'onKeyDown'> {
   open: boolean;
   target: React.ReactNode;
-  onClickAway: (event: React.MouseEvent<Document, MouseEvent>) => void;
+  onClickAway: (event?: React.MouseEvent<Document, MouseEvent>) => void;
   position?: MenuPosition;
 }
 
@@ -39,6 +39,18 @@ export const GridMenu: React.FC<MenuProps> = ({
   position,
   ...other
 }) => {
+  const targetRef = React.useRef(target);
+  const openRef = React.useRef(open);
+
+  React.useEffect(() => {
+    if (openRef.current && targetRef.current) {
+      (targetRef.current as HTMLElement).focus();
+    }
+
+    openRef.current = open;
+    targetRef.current = target;
+  }, [open, target]);
+
   return (
     <Popper open={open} anchorEl={target as any} transition placement={position} {...other}>
       {({ TransitionProps, placement }) => (

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

@@ -88,7 +88,8 @@ export function DensitySelector() {
         startIcon={getSelectedDensityIcon()}
         onClick={handleDensitySelectorOpen}
         aria-label={apiRef!.current.getLocaleText('toolbarDensityLabel')}
-        aria-haspopup="true"
+        aria-expanded={anchorEl ? 'true' : undefined}
+        aria-haspopup="listbox"
       >
         {apiRef!.current.getLocaleText('toolbarDensity')}
       </Button>
@@ -98,7 +99,7 @@ export function DensitySelector() {
         onClickAway={handleDensitySelectorClose}
         position="bottom-start"
       >
-        <MenuList id="menu-list-grow" onKeyDown={handleListKeyDown}>
+        <MenuList role="listbox" onKeyDown={handleListKeyDown} autoFocusItem={Boolean(anchorEl)}>
           {renderDensityOptions}
         </MenuList>
       </GridMenu>

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 { GridToolbarExport } from './GridToolbarExport';
 
 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 />
+      <GridToolbarExport />
     </GridToolbarContainer>
   );
 }

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

@@ -0,0 +1,76 @@
+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 GridToolbarExport() {
+  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: apiRef!.current.getLocaleText('toolbarExportCSV'),
+      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-expanded={Boolean(anchorEl)}
+        aria-haspopup="true"
+      >
+        {apiRef!.current.getLocaleText('toolbarExport')}
+      </Button>
+      <GridMenu
+        open={Boolean(anchorEl)}
+        target={anchorEl}
+        onClickAway={handleExportSelectorClose}
+        position="bottom-start"
+      >
+        <MenuList onKeyDown={handleListKeyDown} autoFocusItem={Boolean(anchorEl)}>
+          {renderExportOptions}
+        </MenuList>
+      </GridMenu>
+    </React.Fragment>
+  );
+}

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

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

packages/grid/_modules_/grid/constants/localeTextConstants.ts

@@ -24,6 +24,11 @@ export const DEFAULT_LOCALE_TEXT: LocaleText = {
   toolbarFiltersTooltipShow: 'Show Filters',
   toolbarFiltersTooltipActive: (count) => `${count} active filter(s)`,
 
+  // Export selector toolbar button text
+  toolbarExport: 'Export',
+  toolbarExportLabel: 'Export',
+  toolbarExportCSV: 'Download as CSV',
+
   // Columns panel text
   columnsPanelTextFieldLabel: 'Find column',
   columnsPanelTextFieldPlaceholder: 'Column title',

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

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