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
0
votes
0 answers

MUI DataGrid - onSortModelChange - fires before new sorting has propagated

When I access the apiRef onSortModelChange, my function gets called correctly. However, within that function, if I use something like gridSortedRowIdsSelector(apiRef) I get the order of the rows BEFORE the new sorting propagated (i.e., I get the…
Michael Seltenreich
  • 3,013
  • 2
  • 29
  • 55
0
votes
0 answers

How can I expand new textarea in new row in MUI X Data Grid?

const EditableCell = ({ value, onEditSave }) => { const [isEditing, setIsEditing] = useState(false); const [editedDescription, setEditedDescription] = useState(value); const handleEditClick = () => { setIsEditing(true); }; …
0
votes
0 answers

How to provide auto-complete option for pre-defined filter values when using MUI data grid filter

I'm new to the react and MUI community. I'm working on a dashboard using react and MUI where Im displaying records from database. I have added a MUI Data grid filter to enable user to search for a specific record by selecting the column name in the…
0
votes
2 answers

How to render image in the MUI X Data Grid?

I'm trying to insert image to table field but it's only displaying url. I used renderCell to inject image component but doesn't works. The problem is same as from this question but the solution provided didn't work. I have all the answers provided…
charlie2
  • 150
  • 2
  • 10
0
votes
0 answers

How can i feature detect in case MUI components break?

Some of my components are breaking if its a really old browser (built in browser from a QR scanning app). And i would like to feature detect it. So components that break are the Slider Component and the Switch Component. How could I feature detect…
0
votes
1 answer

How can I have two calendars in the `DatePicker` component of MUI?

the component from MUI, accept a props named calendars that accept number of calendars that showing inside component popup, like this: like it that had "3" value as its calendars props: but DatePicker component hasn't that and…
0
votes
1 answer

React + MUI templates + Form

I'm starting with react. I would like the value returned from 'handleClickLoadPIX' to be filled as the value of field 'pj_pix_key'. I tried to use value={pj_pix_key} on the
Diego
  • 31
  • 3
0
votes
0 answers

How to mock MUI5 Pro license key in Jest tests for React components

I'm currently integrating MUI v5 Pro components into my React library and then import those library components into my host app. I have set up the MUI license key in the .env file of both the library and the host app, and I'm importing the necessary…
ikonuk
  • 575
  • 8
  • 19
0
votes
0 answers

How to dynamically hide selective Column headers in MUI Grid

I have a MUI table grid with checkbox enabled. Upon certain selection I would like to hide column headers and overlay it with another set of buttons. But I would like to keep the select all checkbox visible to users. Currently in my datagrid config…
Nupur
  • 153
  • 3
  • 5
  • 11
0
votes
0 answers

MUI Tabs How to Snap Tab on scrolling

I use Tabs and Tab from mui https://mui.com/material-ui/react-tabs/ I have this kind of code -> ... I want to snap the next tab on the left after scrolling. I can’t find something in…
Cyberwulf
  • 1
  • 1
0
votes
0 answers

How to configure MUI X's DateRangePicker to select weekly ranges?

I'm using the DateRangePicker component from MUI X in my React application. I want to configure it such that users can only select date ranges that represent a full week (i.e., from Monday to Sunday). Here's the basic setup I have: import {…
Mir Stephen
  • 1,758
  • 4
  • 23
  • 54
0
votes
0 answers

Customize print export fileName in mui x-data-grid

I am using MUI x-data-grid to show a table and export it. When export as print, I need the save-as window to show a custom name. I have tried doing the below:
Chamila Wijayarathna
  • 1,815
  • 5
  • 30
  • 54
0
votes
1 answer

Display Masked Text in Material UI Multiline TextField and Retrieve Unmasked Text

I'm utilizing the Material UI TextField component to create a multiline (text area) input for messages. My objective is to present a masked version of the text within the GUI while retaining the unmasked text value. This way, users perceive a masked…
Dawid
  • 477
  • 3
  • 14
0
votes
1 answer

Error while using the mui icons in my react app

Issue with MUI Icons in React App I'm encountering an error while trying to use MUI icons in my React app. The error occurs specifically after adding the SearchIcon component from MUI icons. Please help me resolve this. The error is encountered only…
Sana
  • 1
0
votes
0 answers

Change mui-x TimeClock component css style

how can I change the blue color of the MUI TimeClock component indicator to any other color? enter image description here import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider'; import { AdapterDayjs } from…