search

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/
3.79k stars 1.12k forks source link

[data grid] pinned columns have hanging borders #12847

Closed layerok closed 2 weeks ago

layerok commented 2 weeks ago

Steps to reproduce

Link to live example: https://codesandbox.io/p/sandbox/happy-beaver-khy7nd?file=%2Fsrc%2FDemo.tsx%3A51%2C51

Steps:

  1. Look a the data grid

Current behavior

pinned columns have hanging borders

Expected behavior

pinned columns have no hanging borders

Context

When there are less rows than the table can fit we can see that pinned columns have borders that are just hanging in the air. Personally I think the data grid without hanging borders looks cleaner.

Hanging borders

image

No hanging borders

image

Workaround

<DataGrid sx={{
    [`& .MuiDataGrid-filler--pinnedLeft`]: {
      borderRight: "none",
    },
    [`& .MuiDataGrid-filler--pinnedRight`]: {
      borderLeft: "none",
    },
}}/>

Your environment

No response

Search keywords: pinned columns borders Order ID: 74777

romgrk commented 2 weeks ago

The workaround you're using is the correct way to customize the styling to fit your needs, I don't think there's anything for us to do here.

layerok commented 2 weeks ago

Got it, I thought it was a bug. If it is not then I'll use the workaround. Thank you.

github-actions[bot] commented 2 weeks ago

:warning: This issue has been closed. If you have a similar problem but not exactly the same, please open a new issue. Now, if you have additional information related to this issue or things that could help future readers, feel free to leave a comment.

@layerok: How did we do? Your experience with our support team matters to us. If you have a moment, please share your thoughts in this short Support Satisfaction survey.