Questions tagged [mui-x]

Please direct any inquiries related to the MUI X library towards this tag. The library boasts a range of sophisticated React components such as a data grid and date/time pickers. Rest assured, MUI is actively involved in maintaining this project.

What is the designated location for installing the MUI X Pro license key?

I recently purchased a license for MUI X for my next app. Where should I place the following code snippet to set the license information? Should it be in the same location as the component that uses it, potentially exposing the key to client browsers? im ...

Tips on personalizing MUI X Data Grid Toolbar to exclusively display icons

`function EnhancedToolbar() { return ( <GridToolbarContainer> <GridToolbarIcon icon={<FilterListIcon />} /> <GridToolbarIcon icon={<ViewColumnIcon />} /> <GridToolbarIcon icon={<SettingsEthernetIc ...

Passing state between renderCell components in Material UI Data Grid can be achieved by utilizing props and lifting

Is there a way to dynamically adjust the menu items in one select component based on the selection made in another select component within a DataGrid? I'm struggling with passing the state of one select component to the other, especially when utilizing the ...

Having trouble viewing the StepContent in the MUI stepper component in a React application?

Title: Issue with Displaying React Stepper Components StepContent Description: I'm encountering a problem with displaying components in a React Stepper within my app. The Stepper includes three steps - "Dispatchs", "Orders", and "Tenders". Each step shou ...

Steps for inputting time as 00:00:00 in MUI's 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'm facing an issue with using DateTimePicker in my project. I am trying to enter time in the format Hour:Minute:Second, but currently, I can only input 00:00 for Ho ...

Looking for a method to incorporate an onclick function into a column for renderCell within the MUI Datagrid. Any suggestions?

I'm currently developing a react application and utilizing the MUI Datagrid to present some data. I have incorporated a rendercell to insert an edit icon which should trigger a pop-up modal when clicked. Below is the column setup. export const specificColu ...

The component `style` requires a callback function as a getter for its configuration, but `undefined` was received instead. Remember to always capitalize component names at the beginning

When working with the MUI library in React Native, I encountered an issue: ERROR Invariant Violation: View config getter callback for component style must be a function (received undefined). Make sure to start component names with a capital letter. I ha ...

Implement Material UI customization for the MUI X datepicker

I've been struggling to customize the date picker in MUI X by trying to remove the padding from the input field, but no matter what I do it doesn't seem to work. Am I missing something or does MUI X not support styling for this? import { styled } from '@ ...

What is the best way to customize the color of the <DatePicker /> component?

https://i.stack.imgur.com/JLtGz.png I am trying to customize the underline color of the DatePicker component. Below is my code snippet attempting to achieve this: import React from 'react' import PropTypes from 'prop-types' import { Da ...

I'm wondering, on a storybook, where is the best place to set my MUI X license key

Can you help with where to specify my license key in Storybook? I need guidance on where to set the license key in Storybook. According to MUI Docs, it should be done before React renders the first component and only once in the application. However, I ...

Enhance the appearance of TreeGrid nodes by customizing the icons according to the data within

Currently, I am working with the MUI DataGridPro component and my goal is to customize the icons of the TreeGrid nodes based on the data. This image illustrates what I hope to achieve: https://i.stack.imgur.com/nMxy9.png Despite consulting the official do ...

Acquire row data when checkbox is selected in MUI X Data Grid

Utilizing React MUI X DataGrid, I am fetching data from an API and displaying it. Check box selection is enabled, and I want to retrieve specific cell items from the selected row and store them in a list. For example, if I click on the checkbox for the 1s ...

Exploring Mui DatePicker v6: Customizing default icon appearance and position using slots

I'm looking for this specific image: https://i.stack.imgur.com/v4nCJ.png Instead of the current one at: https://i.stack.imgur.com/HC6AW.png Recently, the date picker (@mui/x-date-pickers 6.x) has been updated to use slots, but t ...

Tips for transferring row data to Toolbar using Material UI React with TypeScript

As I work on integrating actions after selecting items in a GridHeader, I came across a helpful tutorial that demonstrates how to combine these functionalities seamlessly: https://mui.com/x/react-data-grid/selection/#controlled-selection Moreover, for man ...

React Material-UI Data Grid. Server-side sorting mode not functioning properly and returning an empty array when trying to unsort

It appears that the current behavior (refer to this PR https://github.com/mui/mui-x/pull/7125/files) is intentional, but it has complicated my understanding and logic. When I use handleSortModelChange, it updates my state and triggers a function reloadDat ...

Ways to showcase the Item's name in the Material-UI Data Grid

Using the DataGrid component from Material UI React to showcase my data. This is how my database looks: https://i.stack.imgur.com/l4au3.png This is the code for my columns const columns = [ { field: 'user_id', headerName: 'User',flex: 1}, { ...

Is it possible to utilize a combination of spinning/locked columns, nested headers, and grouping rows in conjunction with MUI-X?

I am extremely intrigued by the mui-x pro license because I discovered that it offers a locked column, nested headers, and grouping row features. However, I have not come across any examples showing all three features together. Has anyone else experimented ...

Excessive space consumption by children in MUI Grid

I am facing an issue with rendering two large blocks of text side by side, which may contain new lines or no whitespace. I have been using Material UI's Grid, but the grids are not behaving as expected. To illustrate my problem, I have provided a small ex ...

Mastering the art of MUI V4: Implementing conditional row coloring

I've encountered an issue with my basic Material UI v4 datagrid. I'm attempting to change the color of any row that has an age of 16 to grey using color: 'grey'. However, I'm finding it challenging to implement this. The documentat ...

Using ReactJs Styled Components to Customize Font Weight in Table Cells

How can I customize the font weight for MUI Table Cell using React 18 and the latest styled-components? Although this code is changing the color correctly, it's not adjusting the font weight. const StyledTableCell = styled(TableCell)({ backgroundCo ...

Choosing the Perfect Title for Your MUI X Data Grid

I'm currently experimenting with the MUI X Data Grid React Component, which is licensed under MIT. Is there a way to include a title above the column headers but below the border of the Data Grid? I'd prefer simple centered text or even custom c ...

Set the GridToolbarQuickFilter text box to have an outlined style in Material UI v5

How can I customize the appearance of the GridToolbarQuickFilter textbox, such as outlining it? Ideally, I would like to accomplish this through theme.tsx, but I am open to any suggestions. https://i.stack.imgur.com/H1Ojj.png I have experimented with var ...

Is there a way to customize the timepicker pop-up so that it extends the entire width of the parent form control

<FormControl fullWidth> <LocalizationProvider dateAdapter={AdapterDayjs}> <TimePicker views={["hours", "minutes", "seconds"]} label={t("StrategyManager.Select_Time")} value={timer} ...