Feature/issue 1063 responsive options and table height

[gabrielliwerant]

Closes #1075, #1063 and continues by adding two new options for responsive cases:

• scrollFullHeightFullWidth
• stackedFullWidth

Both use absolute position on the paper container element to allow window width to be surrounded by the container to fix visual breakage with overflowing widths, but also allow fixed header options to operate.

Height was decoupled in the code, but not created as a separate option as height will only be supported by certain responsive modes, which is likely to create confusion. Overriding styles allows altering height values, so this functionality exists regardless, but the decoupling will make it easier to modify the API in the future if there's a good way to do so.

[coveralls]

Coverage decreased (-0.6%) to 75.868% when pulling 2b113b6 on feature/issue-1063-responsive-options-and-table-height into 12b2d2b on master.

[maxkarkowski]

seem like that it is still an issue that scrollFullHeight has no overflow.
setting: responsive: 'scrollFullHeight' as any,
<div className="vpp-order-list" data-testid="vppTable"> <MUIDataTable title={<Title onRefresh={handleRefresh} />} data={rows} columns={TableColumns} options={TableSettings} ></MUIDataTable> </div>

using mui-datatables@^2.14.0

[gabrielliwerant]

@maxkarkowski If you have an overflowing width, then you'd probably want to use scrollFullHeightFullWidth. The reason there's a new option for that instead of modifying the old one is that they don't quite work the same way, so they will lead to different appearances in different situations, and scrollFullHeight might be the best option for someone who doesn't have width issues because the table is small (hence, it makes sense to have both).

[maxkarkowski]

@gabrielliwerant thanks for the hint. i tried scrollFullHeightFullWidth but came across another issue as described here. #1075 (comment)

so both settings won't really fit for large tables

[gabrielliwerant]

@maxkarkowski The table is not guaranteed to display properly on the inside of a grid. The responsive options assume that the table is directly affected by the window dimensions. This may be something you have to experiment with by overriding styles on your end.

[AndrewBenzSW]

I'm curious why the hard coded 499px for scrollMaxHeight moved from the style to the element itself. We'd overridden the style value to good success but when we upgraded to the newest version, the override no longer worked since styled on the element is more specific than class styles, so the override no longer worked.

I was able to work around it by override with "!important" so it's not a huge deal. I just feel icky using that :P

Thanks!