Questions tagged [mui-x-data-grid]
170 questions
40
votes
5 answers
How to add a button to every row in MUI X DataGrid
I can't add a button into every row of MUI X DataGrid.
I have an MUI X DataGrid which I render like this:
Ni Tai
- 499
- 1
- 7
- 13
27
votes
3 answers
Get row item on checkbox Selection in MUI X Data Grid
I'm getting Data from API and displaying it using React MUI X DataGrid.
I have enabled check box selection and I want to get the specific cell items of the selected row and save them in a list.
For Example in the image below, if I click on the…
Maryam
- 357
- 1
- 5
- 16
5
votes
2 answers
React MUI DataGrid align column data and header with type "number"
I'm using MUI in my react project. When I set the type of a column to type: "number" the column header and data align to the right. I reproduced the issue at the simple example from MUI documentation: codesandbox
The third column age has type:…
Hleb Shypula
- 158
- 1
- 2
- 12
5
votes
3 answers
Can I initialize the checkbox selection in MUI DataGrid?
In a MUI DataGrid it is super easy to add a checkbox selection via the checkboxSelection attribute and listen to selection changes via onSelectionChange:
Michael
- 4,722
- 6
- 37
- 58
2
votes
1 answer
Is there a way to pass an onclick function through the MUI Datagrid into a column for renderCell?
I am working on a react app and I am using the MUI Datagrid to display some data. I have used a rendercell to add an edit icon which I would like to open a pop up modal.
Below is the column.
export const someColumn = [
{
field: "price",
…
Sky Lurk
- 417
- 1
- 3
- 13
2
votes
2 answers
How to update the @mui/x-data-grid table when data fetches
I have a question in terms of how data is updated in the DataGrid component from the @mui/x-data-grid module in React if anyone has experience with that Material UI library for displaying data in a table. The issue that I am having is in reference…
Simeon Ikudabo
- 2,152
- 1
- 10
- 27
2
votes
2 answers
Mui DataGrid with issues displaying items on the second page and forward
When retrieving data with specified item amounts and offsets, a display issue occurs on the second page and subsequent pages.
For instance, on the first page, the data correctly shows the first 10 items. However, when using pagination to access the…
Grazielle Carvalho
- 423
- 1
- 3
- 11
2
votes
0 answers
I'm using MUI X datagrid and I want the header to be on the left, not on the top
I have a data grid table, it occurs in the 1st row header as it should.In the table I want, the headers will be in my 1st column.
Technologies I use React and Material Ui
I don't have a sample code right now
This is the table I have right now:
I…
emir alp aksungur
- 21
- 4
2
votes
1 answer
Make GridToolbarQuickFilter textbox outlined (Material UI v5)
Is there a way to make the GridToolbarQuickFilter textbox outlined? Preferably from theme.tsx but any suggestions are welcome.
I have tried different ways of doing it like modifying classes in theme.tsx but nothing changes the way it looks.
elafito
- 33
- 4
2
votes
1 answer
Using MUI DataGrid, tab navigation across cells does not work with `renderCell` When in row edit mode
When using renderEditCell in a column's definition, once the row is in edit mode, I face these two issues:
None of the cells gets the focus
Using the tab key on that cell has no effect: it should move to the next cell
If I comment out the…
Andrea Sciamanna
- 1,404
- 1
- 15
- 30
2
votes
1 answer
How to Change Export Label in MUI Datagrid
Here's what current MUI Datagrid Export Label look likes.
I want to be able to change the label Download as CSV to something like Export to CSV etc
I've searched the Docs and issues on the github repo, i was unable to find how to progmatically…
jsdev
- 672
- 6
- 14
2
votes
1 answer
How to disable Material UI DataGrid go to next page button while loading the API
This code is regarding Material UI Datagrid
I need to disable the Go to next page button while loading the API
Sameer Kulkarni
- 71
- 8
1
vote
0 answers
Extend GridColDef for MUI DataGrid
I'm trying to extend MUI Data Grid column definition to include an additional parameter "multiline".
I have look here: Custom column types and here: [data grid] Add column type to view and edit long text but neither addresses my specific question…
Michael Seltenreich
- 3,013
- 2
- 29
- 55
1
vote
1 answer
DataGridPro Modify TreeGrid node icon based on data
I am using MUI DataGridPro and I want to modify TreeGrid node icon based on data. This is what I want:
But from what I have studied from documentation and from what I have tried, I am only able to show static set of folders using…
Shubham A.
- 2,446
- 4
- 36
- 68
1
vote
2 answers
Datagrid - Format total count 100003 to 1M+ in Material UI with Reactjs?
I'm implementing Datagrid in Mui with reactjs. I have 1M data.
So I'm currently showing 100000 in total count.
Is there any way to show total count as 1M+ or 1000+ or any other shorthand ways to display a large number?
Please find the attached image…
Ashwanth Madhav
- 1,084
- 1
- 9
- 21