Stack Overflow
Stack Overflow

Questions tagged [mui-x]

This tag should be used for questions regarding the MUI X library: a collection of advanced React components including a data grid and date and time pickers. This project is maintained by MUI.

Related tags

  • for questions that are React-related.
  • for questions that are MUI X Data Grid related.
  • for questions that are MUI X Date Pickers related.
  • for questions that are Material UI related, another open-source UI library by MUI.
  • for questions that are Joy UI related, another open-source UI library by MUI.
  • for questions that are Base UI related, another open-source UI library by MUI.
136 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: I have added into the columns variable 'actions' column where the…
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
20
votes
3 answers

Month and Year picker in Material UI React

Is there any way to implement a month Picker and year picker using Material UI. In month view the output should be like only month and the year only Eg:- 2020-09
Sindujan Nirmalan
  • 470
  • 1
  • 8
  • 18
17
votes
1 answer

How to change the icon in MUI X DatePicker?

I can't add my icon to the component. https://codesandbox.io/s/materialuipickers-material-demo-forked-soctc
kadadov
  • 173
  • 1
  • 1
  • 5
13
votes
3 answers

Material UI: How to change DatePicker text and calendar icon color?

I am trying to change the MUI X DatePicker (with Material UI) date text and calendar icon color. I tried to change it passing style to InputProps, but it worked only for removing border. Rather than that, nothing changes, I tried to apply style to…
FD3
  • 1,462
  • 6
  • 24
  • 47
12
votes
5 answers

How can i hide a column in MUI X data grid?

I don't wanna show the id field of my table. I use "@mui/x-data-grid": "^5.6.1" version. Here is my code: import * as React from 'react'; import { DataGrid } from '@mui/x-data-grid'; const columns = [ { field: 'id', headerName: 'ID', width:…
Burak Algur
  • 326
  • 1
  • 2
  • 10
7
votes
2 answers

How to get overall error status on Material UI DataGrid?

I am using Material UI DataGrid component to render EXCEL file. Each Excel file has several column Names and have specific types. For example: const columns = [ { "field": "uwgroup", "headerName": "Group", "minWidth":…
Suresh KUMAR Mukhiya
  • 598
  • 7
  • 24
6
votes
1 answer

How do I override icons in Material UI DataGrid?

We need to customize most of the icons used in the DataGrid from Material UI. Reading the very limited docs, we cannot figure out how to do that. The documentation talks about slots (but with no explanation on how to use those). There is a icons…
Eric Liprandi
  • 5,324
  • 2
  • 49
  • 68
5
votes
3 answers

MUI X DatePicker formatting and setting default value issue

I am having a bit of an issue, and I've had not much luck finding a solution to it. The MUI X DatePicker (with Material UI) seems to have a format that it has as a default, for displaying the dates as Fri Oct dd yyyy HH:MM:SS GMT+HHMM (name of…
Vlad SD
  • 169
  • 1
  • 1
  • 11
5
votes
3 answers

Material-UI Table/XGrid - How to set a different color for each cell

The styling for cell tables in material-ui is fine when you have a limited known amount of options but I'm struggling when is not known in advance. To simplify, the idea is setting the background color for each cell based on the table cell values…
ic3
  • 7,917
  • 14
  • 67
  • 115
4
votes
1 answer

Runtime error when using `mui-x-date-pickers` and `mui-x-data-grid`

I'm upgrading to MUI5. TS compiling passed but I got tons of console errors: Module not found: Can't resolve '@mui/material/unstable_composeClasses' and ./node_modules/@mui/lab/node_modules/@mui/x-date-pickers/CalendarPicker/calendarPickerClasses.js…
DrXCheng
  • 3,992
  • 11
  • 49
  • 72
3
votes
1 answer

How to change MUI X Data Grid cell orientation to be row-level instead of column-level?

I am working on implementing the MUI X Data Grid component for my table-based UI. However, I have a specific requirement where I need the table cells to be associated with the row level, rather than the traditional column-level association. By…
Md Abdul Halim Rafi
  • 1,810
  • 1
  • 17
  • 25
3
votes
1 answer

Material UI v5 DateTimePicker (controlled) onClose trigger input focus

Try use 2 DateTimePicker as siblings, but when click on second (DateTimePicker still opened) - open other DateTimePicker, but focus still on first input. Help, please. https://codesandbox.io/s/wandering-architecture-hbbs2r?file=/src/Mui.js I need…
dmkg
  • 31
  • 1
3
votes
1 answer

How to pass state between renderCell components in Material UI Data Grid

How can I change the MenuItems of one Select when another Select component changes using DataGrid? I need to be able to pass the state of one Select component to the other, but I'm not sure how when using renderCell. For example, let's say I have…
Simon1
  • 445
  • 4
  • 12
3
votes
1 answer

How to enter time as 00:00:00 in MUI X DateTimePicker

React:18.2.0 mui/material: 5.10.5 date-fns: 2.29.3 date-io/date-fns: 2.16.0 formik: 2.2.9 I want to use DateTimePicker in my project. i want enter time this format: Hour:Minute:second but Currently, I can only enter 00:00 Hour:Minute. how can fix…
m.mohammadi
  • 53
  • 7
1
2 3
…
9 10