[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.

• [data grid] Last column doesn't have a right border #4200
• [data grid] Row doesn't have a right border #7956
• [data grid] Excessive cell in the Grid Pro #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]

⚠️ 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>
  );
}