Grouping Feature

examples/Router/ExamplesGrid.js

@@ -54,7 +54,6 @@ class ExamplesGrid extends React.Component {
 
     const examplesSortedKeys = Object.keys(examplesSorted).filter((item) => {
       if (this.state.searchVal === '') return true;
-      console.dir(item);
       return item.toLowerCase().indexOf( this.state.searchVal.toLowerCase() ) !== -1 ? true : false;
     });
 

examples/examples.js

@@ -34,6 +34,7 @@ import CustomComponents from './custom-components';
 import InfiniteScrolling from './infinite-scrolling';
 import Themes from './themes';
 import LargeDataSet from './large-data-set';
+import Grouping from './grouping';
 
 /**
  * Here you can add any extra examples with the Card label as the key, and the component to render as the value
@@ -60,6 +61,7 @@ export default {
   'Draggable Columns': DraggableColumns,
   'Expandable Rows': ExpandableRows,
   'Fixed Header': FixedHeader,
+  'Grouping': Grouping,
   'Hide Columns Print': HideColumnsPrint,
   'Infinite Scrolling': InfiniteScrolling,
   'Large Data Set': LargeDataSet,

examples/grouping/index.js

@@ -0,0 +1,125 @@
+import React, { useState } from 'react';
+import ReactDOM from 'react-dom';
+import MUIDataTable from '../../src/';
+import InputLabel from '@material-ui/core/InputLabel';
+import MenuItem from '@material-ui/core/MenuItem';
+import FormHelperText from '@material-ui/core/FormHelperText';
+import FormControl from '@material-ui/core/FormControl';
+import Select from '@material-ui/core/Select';
+
+function Example() {
+  const [responsive, setResponsive] = useState('vertical');
+  const [tableBodyHeight, setTableBodyHeight] = useState('400px');
+  const [tableBodyMaxHeight, setTableBodyMaxHeight] = useState('');
+
+  const columns = [
+    {
+      name: 'name',
+      label: 'Name',
+      options: {
+        setCellHeaderProps: () => ({
+          style: {
+            width: '25%'
+          }
+        }),
+      }
+    }, 
+    {
+      name: 'title',
+      label: 'Title',
+      options: {
+        setCellHeaderProps: () => ({
+          style: {
+            width: '25%'
+          }
+        }),
+      }
+    }, 
+    {
+      name: 'location',
+      label: 'Location',
+      options: {
+        setCellHeaderProps: () => ({
+          style: {
+            width: '25%'
+          }
+        }),
+      }
+    }, 
+    {
+      name: 'gender',
+      label: 'Gender'
+    }
+  ];
+
+  const options = {
+    filter: true,
+    filterType: 'dropdown',
+    responsive,
+    pagination: false,
+    draggableColumns: {
+      enabled: true,
+    },
+    onTableChange: (action, state) => {
+      console.log(action);
+      //console.dir(state);
+    },
+    onGroupExpansionChange: (group, expanded) => {
+      console.dir(group);
+      console.dir(expanded);
+    },
+    grouping: {
+      columnIndexes: [1, 3],
+      expanded: {
+        "Business Consultant": {
+          open: true
+        }
+      }
+    }
+  };
+
+  const data = [
+    ['Gabby George', 'Business Analyst', 'Minneapolis', 'female'],
+    ['Aiden Lloyd', "Business Consultant", 'Dallas', 'male'],
+    ['Jaden Collins', 'Attorney', 'Santa Ana', 'male'],
+    ['Franky Rees', 'Business Analyst', 'St. Petersburg', 'male'],
+    ['Aaren Rose', null, 'Toledo', 'male'],
+    ['Johnny Jones', 'Business Analyst', 'St. Petersburg', 'male'],
+    ['Jimmy Johns', 'Business Analyst', 'Baltimore', 'male'],
+    ['Jack Jackson', 'Business Analyst', 'El Paso', 'male'],
+    ['Joe Jones', 'Computer Programmer', 'El Paso', 'male'],
+    ['Jacky Jackson', 'Business Consultant', 'Baltimore', 'female'],
+    ['Jo Jo', 'Software Developer', 'Washington DC', 'male'],
+    ['Donna Marie', 'Business Manager', 'Annapolis', 'female'],
+    ['Armin Tamzarian', 'Principal', 'Springfield', 'male'],
+    ['Gerald Strickland', 'Principal', 'Hill Valley', 'male'],
+    ['Doc Brown', 'Computer Programmer', 'Hill Valley', 'male'],
+    ['Angela Li', 'Principal', 'Lawndale', 'female'],
+    ['Jake Morgendorffer', 'Business Analyst', 'Lawndale', 'male'],
+  ];
+
+  return (
+    <React.Fragment>
+      <FormControl>
+        <InputLabel id="demo-simple-select-label">Responsive Option</InputLabel>
+        <Select
+          labelId="demo-simple-select-label"
+          id="demo-simple-select"
+          value={responsive}
+          style={{ width: '200px', marginBottom: '10px', marginRight: 10 }}
+          onChange={e => setResponsive(e.target.value)}>
+          <MenuItem value={'vertical'}>vertical</MenuItem>
+          <MenuItem value={'standard'}>standard</MenuItem>
+          <MenuItem value={'simple'}>simple</MenuItem>
+
+          <MenuItem value={'scroll'}>scroll (deprecated)</MenuItem>
+          <MenuItem value={'scrollMaxHeight'}>scrollMaxHeight (deprecated)</MenuItem>
+          <MenuItem value={'stacked'}>stacked (deprecated)</MenuItem>
+        </Select>
+      </FormControl>
+      <MUIDataTable title={'ACME Employee list'} data={data} columns={columns} options={options} />
+    </React.Fragment>
+  );
+}
+
+export default Example;

package.json

@@ -1,6 +1,6 @@
 {
   "name": "mui-datatables",
-  "version": "3.4.1",
+  "version": "3.5.0-beta.0",
   "description": "Datatables for React using Material-UI",
   "main": "dist/index.js",
   "files": [