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
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
1 answer

Highlight the days in MUI StaticDatePicker Calender

I'm trying implement MUI StaticDatePicker to my react website. What I want is to highlight several days in the calendar using blue circle or a badge. I tried various methods achieve this but I couldn't get the highlighted dates output in the…
Isuru Akalanka
  • 109
  • 1
  • 7
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

undefined does not match field "name": string of type Identifier when running @mui/x-codemod v6.0.0/preset-safe

I'm attempting to migrate from v5 to v6 for mui-x and I'm getting the following on 27 files when I run npx @mui/x-codemod v6.0.0/preset-safe .: Error: undefined does not match field "name": string of type Identifier at addParam…
dcutting
  • 41
  • 3
2
votes
2 answers

MUI X Date Pickers Pro not working with Joy UI

MUI X Date Pickers Pro is currently not working with Joy UI. Undefined property errors appear. Link to live example: https://codesandbox.io/s/mui-joy-mui-x-date-pickers-pro-not-working-vmzlvy?file=/src/App.tsx Example: …
judehall
  • 884
  • 12
  • 27
2
votes
1 answer

Create DateRangePicker using two MUI X DatePicker

I'm trying to build a DateRangePicker using MUI RangePickers, but I don't know how to use one only calendar to select the start date and the end date. This is what I tried: https://codesandbox.io/s/competent-wescoff-759vfm?file=/src/App.tsx I'm not…
Renaud is Not Bill Gates
  • 1,684
  • 34
  • 105
  • 191
2
votes
1 answer

How to pass row data to Toolbar in Material UI React typescript

Since I want to add the action after selection in GridHeader, I am following the tutorial to try to put them…
HappyKoala
  • 191
  • 1
  • 11
2
votes
2 answers

Cannot correctly edit time in MUI X TimePicker with date-fns (AdapterDateFns) Localizationprovider

I am using MUI Time picker with date-fns adapter () to add / edit time. When time picker is empty, entering new time works correctly. However, when editing an existing time entry, it is impossible…
Swapnil Luktuke
  • 10,385
  • 2
  • 35
  • 58
2
votes
1 answer

How can I get the Material-UI DataGrid valueGetter to read data from a distinct object in an array?

I am developing a React Admin Page for Woocommerce. I want to retrieve the 'option' value from a specific object (product attribute with name = "Farbe") to display in a MUI DataGrid. I think that valueGetter would be the right approach, but can't…
netbird
  • 53
  • 1
  • 5
2
votes
3 answers

The parent DOM element of the data grid has an empty height

import React from 'react' import { DataGrid } from '@mui/x-data-grid' import Box from '@mui/material/Box' export default function ManageAdmins() { const columns = [ { field: 'no.', headerName: 'no.' }, { field: 'id', headerName: 'id' }, …
Normal
  • 1,616
  • 15
  • 39
2
votes
1 answer

readOnly MobileDatePicker doesn't work in Material UI v5

The readOnly flag for MUI MobileDatePicker doesn't work. The API has no effect on onClick functionality. The only workaround is to use disabled flag. However, we use both readOnly and disabled functionalities for different uses cases. Any help…
Yash
  • 31
  • 1
  • 5
2
votes
1 answer

Is there a way to change the toolbar button name in DataGrid?

I have made a custom toolbar function CustomToolbar() { return ( …
Filip Radojičić
  • 23
  • 1
  • 3
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

MUI DataGrid Expand and Collapse All nodes programmatically with ReactJS

How can I make all rows expand/collapse programmatically in MUI ReactJS DataGrid? What have I tried? I used prop defaultGroupingExpansionDepth based on MUI documentation: export const EXPAND_ALL = -1; export const COLLAPSE_ALL = 0; ... const…
Shubham A.
  • 2,446
  • 4
  • 36
  • 68
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
2
3
…
9 10