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.