[DataGrid] Allow to add margin between rows

vitalist82 commented 3 years ago

When applying custom style to rows, e.g. specifying row height and margin-bottom to achieve extra space between rows, the last rows of the grid are not visible, because the parent container has a height that seems to be calculated without taking the extra margin into account.

[x] The issue is present in the latest release.
[x] I have searched the issues of this repository and believe that this is not a duplicate.

Current Behavior 😯

In the example on https://codesandbox.io/s/quizzical-meitner-cuff9 I styled the rows to have an extra green border after being selected and also 5px margin on the bottom so that the space between the rows is bigger. Without the disableExtendRowFullWidth attribute the right border isn't visible probably also because of the precalculated size of the parent containers. When using disableExtendRowFullWidth attribute, I am able to work around this issue with right border by specifying fixed size of the grid's parent element, but since I am trying to make the whole thing responsive, this isn't the best solution.

Expected Behavior 🤔

I would like to be able to customize the height, borders and spacing of rows without breaking the layout.

Steps to Reproduce 🕹

https://codesandbox.io/s/quizzical-meitner-cuff9

Steps:

Select a row or two
Scroll down to the end of the grid

Context 🔦

We're trying to adapt the component as close to the UI/UX requirements as possible.

Your Environment 🌎

`npx @material-ui/envinfo`

Browser used: Chrome.. System: OS: Windows 10 10.0.19043 Binaries: Node: 14.17.0 - C:\Program Files\nodejs\node.EXE Yarn: Not Found npm: 7.19.0 - C:\Program Files\nodejs\npm.CMD Browsers: Chrome: Not Found Edge: Spartan (44.19041.1023.0), Chromium (91.0.864.67)

Order id 💳

Still doing POC without having a license.

oliviertassinari commented 3 years ago

@vitalist82 Thanks for the bug reports. It gives us another interesting test case on how the current rendering logic is wrong. It's related to #1911

ErnestBrandi commented 2 years ago

I'm having the exact same issue. Spacing rows or modifying height do hide last rows as global table height is not taking this into account. Current workaround is to add borders to cells with the same color as the background...

carl-meyer-paxton commented 2 years ago

Hi, I am also busy trying to add some spacing between rows.

I am using @mui/x-data-grid": "^5.0.0-beta.3 and still need to use makeStyles to style the data grid (not using new emotion yet?)

I have applied the following styles:

const useStyles = makeStyles((theme: Theme) => ({
  root: {
    border: 'none',
    '& .paxton-table--row': {
      border: 'none',
      borderRadius: defaultBorderRadius,
      marginTop: theme.spacing(1),
      marginBottom: theme.spacing(1),
      backgroundColor: theme.palette.primary.main,
    },
    '& .paxton-table--cell': {
      border: 'none',
    },
  },
}));

    <DataGrid
      rows={data}
      columns={columns}
      pageSize={20}
      rowsPerPageOptions={[20]}
      disableSelectionOnClick
      onRowClick={(params: GridRowParams) => {
        localStorage.setItem('site', JSON.stringify(params.row));
        history.push(`site/${params.row.id}/app-users`);
      }}
      autoHeight
      className={classes.root}
      getRowClassName={() => 'paxton-table--row'}
    />

and when I look at the data table the last row gets cut off due to the extra margin in between rows:

if there is any way to add spacing between rows that does not cause this to happen please let us know 👍

ErnestBrandi commented 2 years ago

I actually found a solution to this problem. You have to :

disable autoHeight which is where bad computation comes from.
proceed to add (vertical) margin on the rows (styling & .MuiDataGrid-row)

then compute the height of the container yourself as follow


const ROW_HEIGHT = 52;
const ROW_MARGIN = 10;
const containerHeight = (tableRows.length + 1) * (ROW_HEIGHT + ROW_MARGIN);

const tableStyle = makeStyles(() => createStyles({ root: { height: containerHeight, "& .MuiDataGrid-renderingZone": { maxHeight: ${containerHeight}px !important, }, }, }) );


BONUS: If you want to set a border on your rows, then it will exceed container's width => hiding the right side of the border; then resize border as follow `width: "calc(100% - 1px) !important"` (1px being the width of the border).

m4theushw commented 2 years ago

Adding margin breaks the way we calculate how much space the rows will take. Using padding is recommended as it doesn't increase the row height. To have the hover effect, a pseudo-element (:before) could be used to emulate the background with padding.

I'm renaming this issue since I think we could support margins between rows at the virtualization level. We could add a getRowMargin prop and consider its value when allocating space.

carl-meyer-paxton commented 2 years ago

@m4theushw thanks, any way of achieving "spacing" between items in the datagrid and taking that into account in the height calculation would be useful for this usecase. In the meantime I have done the following to achieve the look my company is aiming for:

const useStyles = makeStyles((theme: Theme) => ({
  root: {
    border: 'none',
    // remove padding at beginning of column header container so that text is inline with column text
    '& .paxton-table--header': {
      '& .MuiDataGrid-columnHeaderTitleContainer': {
        padding: 0,
      },
      // set header font styling
      '& .MuiDataGrid-columnHeaderTitle': {
        fontWeight: 600,
        textTransform: 'uppercase',
        fontSize: '16px',
      },
    },
    // Datagrid Row Styling
    '& .paxton-table--row': {
      border: 'none',
      borderRadius: defaultBorderRadius,
      marginBottom: theme.spacing(2),
      backgroundColor: theme.palette.secondary.main,
    },
    // remove borders and separators
    '& .paxton-table--cell': {
      border: 'none',
    },
    '& .MuiDataGrid-iconSeparator': {
      display: 'none',
    },
    '& .MuiDataGrid-columnsContainer': {
      border: 'none',
    },
    // This is to fix the rows being cut off due to adding padding
    '& .MuiDataGrid-viewport': {
      maxHeight: 'unset !important',
    },
    '& .MuiDataGrid-renderingZone': {
      maxHeight: '670px !important', // <= manually setting the max height, but this is not responsive
    },
  },
}));

 <Box sx={{ height: '70vh' }}>
      {loading && <LinearProgress />}
      <DataGrid
        rows={state.sites}
        columns={columns}
        pageSize={pageSize}
        rowsPerPageOptions={[pageSize]}
        disableSelectionOnClick
        onRowClick={(params: GridRowParams) => {
          localStorage.setItem('site', JSON.stringify(params.row));
          history.push(`site/${params.row.id}/app-users`);
        }}
        rowHeight={50}
        className={classes.root} // set class so that we can apply styling from makeStyles
        getRowClassName={() => 'paxton-table--row'} // set row styling
      />
    </Box>

matthieudesprez commented 2 years ago

I faced the same issue and managed to preserve autoHeight while playing with the padding-bottom + box-sizing

const useStyles = (nbRows: number) =>
  makeStyles((theme: Theme) =>
    createStyles({
      root: {
        '& .MuiDataGrid-virtualScrollerContent': {
          paddingBottom: nbRows * 2, // to compensate space between rows
          boxSizing: 'content-box',
        },
        '&.MuiDataGrid-root .MuiDataGrid-row': {
          backgroundColor: 'rgba(0, 0, 255, 0.20)',
          borderRadius: '2px',
          marginTop: '2px',
        },
        '&.MuiDataGrid-root .MuiDataGrid-columnHeaders': {
          marginBottom: '2px',
          border: 0,
          backgroundColor: 'rgba(255, 0, 255, 0.20)',
        },
      },
    })
  );

export default function Demo() {
  const { data } = useDemoData({
    dataSet: 'Commodity',
    rowLength: 10,
    maxColumns: 6,
  });

  const classes = useStyles(data.rows.length)();

  return (
    <div>
      <DataGrid autoHeight className={classes.root} {...data} />
    </div>
  );
}

https://stackblitz.com/edit/react-irn3jd?file=demo.tsx

m4theushw commented 2 years ago

We're adding support for custom margin/border between rows in #3848. We would love a feedback on this feature.

Here's the docs: https://deploy-preview-3848--material-ui-x.netlify.app/components/data-grid/rows/#row-spacing

ErnestBrandi commented 2 years ago

Sweet news ! For now what I can see is a problem with the dark theme (rows are full white and get proper styling on hover).

mui / mui-x