[data grid] right row border is not visible

[yehudamakarov]

The problem in depth

general info

see previous issues, but I cannot find a reliable answer.

• 4200

• 7956

• 8790

my use case is rows that are spaced and with a round border. the right side of these bordered rows will be hidden.

The goal:

The outcome:

---

what you can try and how it falls short

• you can add width: 'calc(100% - 2px)', to the row but it doesn't work at random screen widths with flex
  • if you use flex for the columns, there is some pseudo cell added on some screen widths (mentioned above)
  • this again hides the border (and the outline if the cell is selected)
• you can try to add a right border to the last cell of a row
• etc.

  either way...

• eventually the pseudo cell shows up
• is there any way around this?

thanks

Your environment

`npx @mui/envinfo`

``` npx @mui/envinfo System: OS: macOS 14.2.1 Binaries: Node: 20.9.0 - /usr/local/bin/node npm: 10.1.0 - /usr/local/bin/npm pnpm: Not Found Browsers: Chrome: 122.0.6261.94 Edge: Not Found Safari: 17.2.1 npmPackages: @emotion/react: 11.11.1 => 11.11.1 @emotion/styled: 11.11.0 => 11.11.0 @mui/base: 5.0.0-beta.24 @mui/core-downloads-tracker: 5.14.19 @mui/icons-material: ^5.14.18 => 5.14.18 @mui/lab: ^5.0.0-alpha.153 => 5.0.0-alpha.153 @mui/material: ^5.14.18 => 5.14.19 @mui/private-theming: 5.14.19 @mui/styled-engine: 5.14.19 @mui/system: 5.14.19 @mui/types: 7.2.10 @mui/utils: 5.14.19 @mui/x-data-grid: ^6.19.4 => 6.19.4 @mui/x-data-grid-generator: ^6.18.3 => 6.18.3 @mui/x-data-grid-premium: ^6.19.4 => 6.19.4 @mui/x-data-grid-pro: 6.19.4 @mui/x-date-pickers: ^6.18.2 => 6.19.0 @mui/x-date-pickers-pro: ^6.19.0 => 6.19.0 @mui/x-license-pro: 6.10.2 @types/react: 18.2.33 => 18.2.33 react: 18.2.0 => 18.2.0 react-dom: 18.2.0 => 18.2.0 typescript: 5.2.2 => 5.2.2 ```

Search keywords: border row right visible Order ID: 83930

[michelengelen]

Hey @yehudamakarov could you try and replicate this in a codesandbox for us? A grid with demo data should be good, but please make sure that the styles from your implementation are applied. Thanks!

There are some resources on how to do that here: Support - Bug reproduction.

[michelengelen]

I did play around with it a bit and here is what I came up with so far: Borderradius on rows

Looks as if the calc is working even with flex on the rows.

One thing that is still missing is the selected outline. That still seems a bit off. @romgrk any idea how to fix that?

[yehudamakarov]

@michelengelen in your example, if you add 'border': 0, to the table styles you will see how on the right side, the rows don't have a border - and that is a working example for the problem (i believe)

[romgrk]

Does this work for you? https://stackblitz.com/edit/borderradius-rows-6pf44u?file=Demo.tsx

[yehudamakarov]

@romgrk that example looks like it was working really well. i will try to use that example on my end, and update here. would love to have less to maintain in terms of css though, 🤔

[romgrk]

I realize that the CSS is not pretty, however I don't think we'd be modifying the grid for this feature. The layout calculations require pixel accuracy to layout the elements (rows & cells) at their correct locations, and we only consider borders in specific locations: between rows, and between cells. Including borders that can span around rows would add a lot of custom logic. The ::before trick is by far the most maintainable approach to get the design you want.

[yehudamakarov]

I totally hear and love how there’s something that seems robust here. We can abstract this away in one place and use it as a base table somehow.

Thanks, Yehuda On Mar 13, 2024 at 1:31 AM -0400, Rom Grk @.***>, wrote:

I realize that the CSS is not pretty, however I don't think we'd be modifying the grid for this feature. The layout calculations require pixel accuracy to layout the elements (rows & cells) at their correct locations, and we only consider borders in specific locations: between rows, and between cells. Including borders that can span around rows would add a lot of custom logic. The ::before trick is by far the most maintainable approach to get the design you want. — Reply to this email directly, view it on GitHub, or unsubscribe. You are receiving this because you were mentioned.Message ID: @.***>

[github-actions[bot]]

:warning: This issue has been closed. If you have a similar problem, please open a new issue and provide details about your specific problem. If you can provide additional information related to this topic that could help future readers, please feel free to leave a comment.

How did we do @yehudamakarov? Your experience with our support team matters to us. If you have a moment, please share your thoughts through our brief survey.

[yehudamakarov]

just leaving for reference:

Does this work for you? https://stackblitz.com/edit/borderradius-rows-6pf44u?file=Demo.tsx

import * as React from 'react';
import { DataGrid, gridClasses } from '@mui/x-data-grid';
import { useDemoData } from '@mui/x-data-grid-generator';

const VISIBLE_FIELDS = ['name', 'country', 'isAdmin'];

export default function BasicExampleDataGrid() {
  const { data } = useDemoData({
    dataSet: 'Employee',
    visibleFields: VISIBLE_FIELDS,
    rowLength: 100,
  });

  const columns = React.useMemo(
    () => data.columns.map((column) => ({ ...column, flex: 1 })),
    [data]
  );

  return (
    <div style={{ height: 400, width: '100%' }}>
      <DataGrid
        {...data}
        columns={columns}
        sx={{
          border: 0,
          '--custom-padding': '12px',
          [`& .${gridClasses.virtualScrollerRenderZone}`]: {
            paddingTop: 'var(--custom-padding)',
            paddingBottom: 'var(--custom-padding)',
            gap: 'var(--custom-padding)',
          },
          [`& .${gridClasses.row}`]: {
            position: 'relative',
          },
          [`& .${gridClasses.row}::before`]: {
            position: 'absolute',
            content: '" "',
            height: '100%',
            border: '1px solid #e0e0e0',
            borderRadius: '4px',
            width: 'calc(100% - 22px)',
          },
          [`& .${gridClasses.cell}`]: {
            border: 'none',
          },
        }}
      />
    </div>
  );
}