mui / mui-x

MUI X: Build complex and data-rich applications using a growing list of advanced React components, like the Data Grid, Date and Time Pickers, Charts, and more!
https://mui.com/x/
4.04k stars 1.24k forks source link

Upgraded to Premium, but table design changed. #8293

Open ziruzavar opened 1 year ago

ziruzavar commented 1 year ago

Order ID or Support key 💳 (optional)

61925

Duplicates

Latest version

The problem in depth 🔍

This problem happend when I upgraded from DataGrid to DataGridPremium. When I changed to DataGridPremium the whole table design changed and now it looks like this: image There are no lines between columns and rows, I couldn't find anybody else to have had the same issue. I tried updating and downgrading versions, but nothing happend.

This is my code: <DataGridPremium rows={rows} columns={columns} sortModel={sortModel} onSortModelChange={(model) => setSortModel(model)} rowThreshold={0} getDetailPanelHeight={getDetailPanelHeight} getDetailPanelContent={getDetailPanelContent} components={{ Toolbar: GridToolbar, }} pagination={true} />

Your environment 🌎

`npx @mui/envinfo` ``` I have tested with both Chrome and Edge. npmPackages: @emotion/react: ^11.10.5 => 11.10.5 @emotion/styled: ^11.10.5 => 11.10.5 @mui/base: 5.0.0-alpha.106 @mui/core: ^5.0.0-alpha.54 => 5.0.0-alpha.54 @mui/core-downloads-tracker: 5.10.15 @mui/icons-material: ^5.10.15 => 5.10.15 @mui/lab: ^5.0.0-alpha.60 => 5.0.0-alpha.108 @mui/material: ^5.10.15 => 5.10.15 @mui/private-theming: 5.10.15 @mui/styled-engine: 5.10.14 @mui/styles: ^5.1.1 => 5.10.14 @mui/system: 5.10.15 @mui/types: 7.2.1 @mui/utils: 5.11.13 @mui/x-data-grid: 5.17.26 @mui/x-data-grid-premium: ^5.17.26 => 5.17.26 @mui/x-data-grid-pro: 5.17.26 @mui/x-date-pickers: ^5.0.8 => 5.0.8 @mui/x-license-pro: ^6.0.1 => 6.0.1 @types/react: 17.0.52 react: ^17.0.2 => 17.0.2 react-dom: ^17.0.2 => 17.0.2 styled-components: 5.3.6 typescript: 4.9.5
m4theushw commented 1 year ago

Could you provide a CodeSandbox with a minimal reproduction? Internally, the DataGridPremium uses the same styling foundation from the MIT DataGrid. The style shouldn't change during upgrade.

ziruzavar commented 1 year ago

I can't reproduce it anywhere else. I believe it's something related to the version of the modules and the upgrade when I got the key. Before I got the key, I used the premium version in order to set the filters locally and after I purchased the premium, the "missing X key" dissapeared, but the whole table UI stayed the same. I managed to find a workaround with custom CSS.