Resizeable columns doesn't work well if columns are crowded

resizableColumns: true
This setting works fine if there is space available between columns. However, if the table is packed with columns, you cannot resize a column.

## Expected Behavior
I would expect that the default behavior would be to allow resize of columns like an Excel spreadsheet column resize works. When the column is expanded in Excel, the page width get wider to accommodate the wider column while keeping the other column widths the same.

## Current Behavior
Your column resize is constrained by how much the neighboring columns can shrink down. The page width is not allowed to change.

## Steps to Reproduce (for bugs)
Using your #resizable-columns demo.

1. Move each column resize bar as far as they will go to the right.
2. Notice that in this state, only the far left counter column resize bar can be used to resize the columns.
3. This happens because the page width does not expand as needed.
4. Notice that Excel columns always allow you to resize.
5. The problem for me is that our Data Table has a lot of columns and there is very little room to resize. However, our user's are fine with scrolling the page to the left and right if the page grows bigger than the screen width.

## Your Environment

| Tech | Version |
|--------------|---------|
| Material-UI | 4.10.0 |
| MUI-datatables | 3.2 |
| React | 16.10.2 |
| browser | chrome 84.0 |

Start with the resizable-columns demo described in the issue and reproduce the failure after moving each resize bar as far right as possible. Trace how column resizing handles crowded columns and page width, then verify that expanding a column can widen the page while preserving the other column widths and allowing horizontal scrolling.

Written by the indexing model from the issue text.