ratty-blush•3mo ago

Add scroll to DataGrid Cell

I need to add horizontal scroll for one cell in my code <DataGrid {...{ ...dataGridProps, hideFooterPagination: true, disableColumnMenu: true, }} rows={[...func(tableData)]} rowCount={6} columns={[
{ field: 'comment', headerName: 'Comment', minWidth: 400, flex: 1, align: 'center', headerAlign: 'center', sortable: false, }, ]} autoHeight />

3 Replies

kapa.ai•3mo ago

Hi @Evgeny Kutovoy. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- To add horizontal scrolling to a specific cell in a DataGrid, you can use the renderCell property to customize the cell's content and apply the necessary CSS styles to enable scrolling. Below is an example of how you can achieve this:

import React from "react";
import { DataGrid } from "@mui/x-data-grid";

const columns = [
  {
    field: 'comment',
    headerName: 'Comment',
    minWidth: 400,
    flex: 1,
    align: 'center',
    headerAlign: 'center',
    sortable: false,
    renderCell: (params) => (
      <div style={{ overflowX: 'auto', whiteSpace: 'nowrap' }}>
        {params.value}
      </div>
    ),
  },
];

const rows = [
  // Your row data here
];

const MyDataGrid = ({ dataGridProps, tableData }) => (
  <DataGrid
    {...{
      ...dataGridProps,
      hideFooterPagination: true,
      disableColumnMenu: true,
    }}
    rows={[...func(tableData)]}
    rowCount={6}
    columns={columns}
    autoHeight
  />
);

export default MyDataGrid;

import React from "react";
import { DataGrid } from "@mui/x-data-grid";

const columns = [
  {
    field: 'comment',
    headerName: 'Comment',
    minWidth: 400,
    flex: 1,
    align: 'center',
    headerAlign: 'center',
    sortable: false,
    renderCell: (params) => (
      <div style={{ overflowX: 'auto', whiteSpace: 'nowrap' }}>
        {params.value}
      </div>
    ),
  },
];

const rows = [
  // Your row data here
];

const MyDataGrid = ({ dataGridProps, tableData }) => (
  <DataGrid
    {...{
      ...dataGridProps,
      hideFooterPagination: true,
      disableColumnMenu: true,
    }}
    rows={[...func(tableData)]}
    rowCount={6}
    columns={columns}
    autoHeight
  />
);

export default MyDataGrid;

In this example, the renderCell property is used to wrap the cell content in a div with overflowX: 'auto' and whiteSpace: 'nowrap' styles. This ensures that the content within the cell will scroll horizontally if it overflows. For more information on customizing cells in DataGrid, you can refer to the official documentation (https://refine.dev/blog/mui-datagrid-refine/#controlled-sorting). ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•3mo ago

<@760427134384209950> kapa.ai is still learning and improving, please let us know how it did by reacting below

ratty-blushOP•3mo ago

but If I want vertical?