Allow user to customize the hardcoded wrapper Component.

[ensemblebd]

Allow user to customize the hardcoded wrapper Component. Without this, user has no control over the overflow wrapper, and thus cannot implement custom scroll systems, or drag systems, etc.

ie:

	...

	return (
		<MUIDataTable
			data={props.data.Entries}
			columns={columns}
			options={mui_table_options}
			components={{
				ReactiveWrapper: DragScrollable,
			}}
		/>
	);
}

const DragScrollable = (props) => {
	const classes = useStyles();
	const ref= React.useRef(null); 
	const { events } = useDraggable(ref); // https://www.npmjs.com/package/react-use-draggable-scroll

	const {style, className} = props; // these are fed from MuiDataTable

	return (
		<div 
			ref={ref} 
			{...events} 
			className={cx(classes.dragContainer, className, classes.scrollHide)} 
			style={{width: 'calc(100% - 9px)', height: 'calc(100% - 9px)', ...style}}
		/>
	);
};

For me this was of particular interest so as to implement https://www.npmjs.com/package/react-custom-scrollbars-2 and https://www.npmjs.com/package/react-use-draggable-scroll. Now when I set tableBodyHeight, the browser default scroll isn't used, rather my own system. But this could of course be used for any number of purposes.