CODEWITHSUNDEEP
reactjsmaterial-ui
נוריאל ארונוב
נוריאל ארונוב

Reputation: 11

mui DataGrid scroll bar doesn't work on columnHeader

When I scroll the scroll bar left/right only the rows in the body move, but the header row stays as it is.

screenshot: img

code:

<DataGrid
  className={classes.root}
  components={{
    Toolbar: CustomToolbar,
    NoRowsOverlay: CustomNoRowsOverlay,
    LoadingOverlay: CustomLoadingOverlay,
  }}
  loading={data.length === 0}
  rows={rows}
  columns={columns}
  autoHeight
  hideFooter
  disableSelectionOnClick
  localeText={customLocaleText}
  disableColumnMenu 
/>

This is my custom style for the DataGrid

const defaultTheme = createMuiTheme();
export const useStyles = makeStyles(
  (theme) => ({
    root: {
      border: 0,
      
      "& .MuiDataGrid-iconSeparator": {
        display: "none",
      },
      "& .MuiDataGrid-columnHeader, .MuiDataGrid-cell": {
        borderRight: "1px solid #f0f0f0",
        backgroundColor: "#e6e9ef",
      },
      "& .MuiDataGrid-columnsContainer, .MuiDataGrid-cell": {
        borderBottom: "1px solid #f0f0f0",
        backgroundColor: "#f4f4f5",
      },
      "& .MuiDataGrid-cell--editable": {
        backgroundColor: "#fff",
      },
      "& .Mui-error": {
        backgroundColor: "#ffe6e6",
        color: "#ff4343",
      },
    },
  }),
  { defaultTheme }
);

Material-UI Data Grid demo - https://material-ui.com/components/data-grid/#mit-version

Upvotes: 1

Views: 3811

Answers (3)

Hossein Azizdokht
Hossein Azizdokht

Reputation: 1015

As we know this is a bug in Right To Left direction component on Material-UI side, i tried resolve it by this trick.

I need to say that i cant use useRef, cause have not access to that class of MUI Datagrid that named MuiDataGrid-virtualScroller

  1. Set ltr direction to parent of Datagrid
  2. Reverse the order of the columns
  3. install jquery by npm i jquery
  4. import jquery in grid page by import $ from 'jquery'
  5. Write the useEffect below

  useEffect(() => {
    setTimeout(() => {
      let myDivElement = $('.MuiDataGrid-virtualScroller');
      myDivElement.scrollLeft(myDivElement.width());
    }, 100);
  }, []);

Upvotes: 0

alireza tafreshi
alireza tafreshi

Reputation: 42

This is a bug, but you can set direction: ltr to MuiDataGrid-root div, and give transform: rotateY(180deg) style to the MuiDataGrid-root class, and then again add transform: rotateY(180deg) to the internal elements (title, content, etc.) classes for reverse the opposite!

like this:

.MuiDataGrid-root.MuiDataGrid-root--densityStandard {
  direction: ltr !important;
  transform: rotateY(180deg);

  .MuiButtonBase-root.MuiButton-root.MuiButton-text.MuiButton-textPrimary {
    transform: rotateY(180deg);
    color: #141414 !important;
  }

  .MuiDataGrid-columnHeaderTitle {
    transform: rotateY(180deg);
  }

  .MuiDataGrid-cellContent {
    transform: rotateY(180deg);
  }

  .MuiDataGrid-footerContainer {
    transform: rotateY(180deg);
  }

  .MuiButton-startIcon.MuiButton-iconSizeSmall {
    margin-left: -2px !important;
    margin-right: 8px !important;
  }
}

Upvotes: 0

Ali Mirmohammad
Ali Mirmohammad

Reputation: 63

I have the same exact problem. It took me hours of struggling to figure it out.

This is actually a bug on Material-UI side. The problem occurs when you use the DataGrid component in a right-to-left layout or container.

The MUI examples are all in English which is LTR, and that's why it works fine on the documentation. However, for RTL languages such as Arabic, Persian, Hebrew, etc this problem arises.

I have created an issue for the corresponding repo on GitHub. Also I created this code sandbox example which shows the problem. If you change the dir attribute of the container div to 'ltr' the problem disappears.

Upvotes: 4

Related Questions