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

How to dynamically populate MUI ToggleButtonGroup?

I'm using MUI for my project which uses a number of ToggleButtonGroup components for navigation. As a reminder, this normally works like this:
bobby_belfast
  • 133
  • 13
0
votes
1 answer

MUI Autocomplete not updating selected value if its onChange changes state

In my react 18.2.0 I have the following structure for my code const [searchParams, setSearchParams] = useState({ shoes:false, hoodies:false }); const handleShoesDropDownChange = (e, v, setSearchParams) => { console.log('…
slevin
  • 4,166
  • 20
  • 69
  • 129
0
votes
0 answers

Use Slash to move foward between date boxes in mui x-date-pickers

I have an specific issue using the last version of https://mui.com/x/api/date-pickers/desktop-date-picker/ Mui x date pickers. @mui/x-date-pickers Need to have the same behavior of -> (arrow right key) for slash (/) key. I mean, If im entering 1…
Alan
  • 11
  • 1
0
votes
0 answers

Mui custom yearCalendar inner text

As I want to custom the inner text in Mui @mui/x-date-pickers": "^6.2.1",I found that the slots of the slots of MobileDatePicker only have the day name how can I specify the year calendar and render the 'Now' text instead of current year? I have…
0
votes
0 answers

MUI hideBackDrop={true} doesnt allow me to click outside of Drawer component to close it

I have a Drawer component that opens when I click an icon on the Map. Then the drawer menu opens and the backshadow drops on the map. When i click on the map with backshadow the drawer simply closes without problem. I want to remove the backshadow…
0
votes
3 answers

How to not sort a row while sorting in MUI X Data Grid

Question: Is there a way to not sort the "Total" row while Sorting? Thanks in advance
Lokkesh
  • 92
  • 8
0
votes
1 answer

React date picker range based on MUI-x Datepicker

I'm looking to build my custom date picker range component, based on two date picker component of @mui/x-date-pickers. I don't want to use this MUI-x-prop DatepickerRange, cause it cose money. I need the two calendar to be followed each other by…
0
votes
1 answer

How to sort by date and time in data grid MUI X

in MaterialUI X data grid i have a column of date in the format of DD/MM/YYYY HH:mm:ss and now (the defualt sort of the data grid) its sorting only by the date and the time of each day is messed up, wanted to know if there is a way to format so it…
0
votes
0 answers

Get sum of particular column of filtered rows only of material ui datagrid?

this is my code sandbox link https://codesandbox.io/s/filtered-rows-sum-rs5jz6?file=/src/App.js I have to implement the sum of "Amount" column when user choose the in-built filter.ex-if user choose "JLI" then I want sum of amount of JLI station…
Rajat
  • 37
  • 5
0
votes
1 answer

Default Year Value for MUI X datepicker

I have a request for one of my projects for my client to have a default year selected for the datepicker in MUI X. Is it possible to have the datepicker to default to lets say 2023/MM/DD where they can change the year but its by default selected to…
0
votes
0 answers

Datepicker MUI X

So I am trying to use Datepicker but I having a hard time changing the style of anything. I am trying to change the border-radius and size to be small from mui sizes.
0
votes
0 answers

MUI: validateDOMNesting(...):

cannot appear as a descendant of

and validateDOMNesting(...):

I have this react code - Note: Please verify the details before proceeding. Details Name:{name}
Dexter Ex
  • 3
  • 2
0
votes
1 answer

Can I use combination with spinning/locked column, nested header and grouping row together with MUI-X?

I am very interesting in buying the mui-x pro license cuz I found mui-x has locked column, nested headers and grouping row feature in its docs. However, there is not any example to show the combination of all three features together. Has anybody…
0
votes
1 answer

How to use the MUI X DataGrid API in a TypeScript application that is not fully React based

I need to use the MUI X DatGrid in a TypeScript web application that is not fully react based but sometimes only uses individual React components. The following example code shows a prototype on how to create a functional API. The idea is to use the…
doberkofler
  • 9,511
  • 18
  • 74
  • 126
0
votes
0 answers

Draggable column using React MUI X DataGrid

I am using DataGrid from React MUI X (Material UI). I am trying for draggable column in this DataGrid. Draggable columns are available in DataGridPro, but it is not allowed to use DataGridPro for me. Any suggestions how can we write custom code for…