How we can use "grouping" feature, already installed mui-datatables.

How we can use "grouping" feature, already installed mui-datatables, as currently "grouping" feature is in beta version.

`import React, { useState } from 'react';
import ReactDOM from 'react-dom';
import MUIDataTable from "mui-datatables";
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);
},
grouping: {
columnIndexes: [1, 3]
}
};

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 (


Responsive Option
setResponsive(e.target.value)}>
vertical
standard
simple

scroll (deprecated)
scrollMaxHeight (deprecated)
stacked (deprecated)




);
}

export default Example;
`

grouping is not working in this case.

Start with the provided Example component and reproduce the options.grouping configuration using columnIndexes [1, 3]. Inspect the table's grouping entry point and verify the behavior with the supplied data; the work is done when the reported grouping behavior is either working or its failure is documented with a concrete result.

Written by the indexing model from the issue text.