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 />
{ field: 'comment', headerName: 'Comment', minWidth: 400, flex: 1, align: 'center', headerAlign: 'center', sortable: false, }, ]} autoHeight />
3 Replies
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:
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:
----------------------<@760427134384209950> kapa.ai is still learning and improving, please let us know how it did by reacting below
xenial-black•7d ago
but If I want vertical?