773 questions
-1
votes
1
answer
18
views
Highlight search query (QuickFilter) results in MUI DataGrid
When a search is being performed in MUI's DataGrid component, how can the search term (ie. QuickFilter) be used to highlight the matching texts within the rows of the grid? (similar to search ...
0
votes
0
answers
55
views
How can I read all data from a mui x-data-grid control (free edition)?
I have a simple use case. I want to read all values from the data grid via an event handler (e.g. onCellEditStop). Does anyone know if it's possible to do so with the free (not the pro) edition? And ...
0
votes
0
answers
36
views
Mui Data Grid v8 header button not filtering grid
version
my code is using v8.13.1 of mui/x-data-grid with typescript
Scenario/Outcome
I am trying to have both an inline button with each row that will filter the frontend table and call the api to ...
0
votes
1
answer
57
views
DataGrid UL in column only renders first LI
I have a MUI data grid that renders a UL element for a column, like this:
renderCell: (params) => {
return <ul>
<li>
...
1
vote
1
answer
120
views
The parent DOM element of the datagrid has an empty height [duplicate]
After I recently upgraded my MUI X packages. I see the following error:
MUI X: useResizeContainer - The parent DOM element of the Data Grid has an empty height.
Please make sure that this element has ...
0
votes
0
answers
94
views
Adding NEW rows to a mui-x-data-grid-premium
I have a <DataGridPremium> component and I've read the docs on copying and pasting. There appears to be no way to create new rows in a table from the clipboard.
I understand I can use ...
0
votes
0
answers
44
views
How to always keep specific values (e.g. "untouched") at the bottom when sorting a column in MUI DataGrid?
I'm using MUI X's DataGrid in a React project and I want to sort a time column that contains either a date string (e.g., "24 September 2024, 10:48 am") or the literal string "untouched&...
0
votes
0
answers
75
views
How to set global DataGrid header background color?
Whats the best approach to set the background color of the DataGrid component in react from mui?
I tried to set it in my customised theme like this:
MuiDataGrid: {
styleOverrides: {
...
0
votes
1
answer
64
views
Styling datepicker textArea
I was trying to style the textArea of datePicker, how ever I can apply styling to calendar drop down but failed to apply styles to textArea. The code I used is
<DatePicker
label="...
0
votes
1
answer
213
views
How to change MUI-X default Datagrid scrollbar styles? How can I customize it?
I'm using MUI-X datagrid in my application. The default scrollbar looks bad and I don't see any way to customize it. I saw a few threads in github and tried the code below but that doesn't seem to ...
0
votes
0
answers
24
views
Can you forward type argument to styled MUI DataGrid component?
I'm working on extracting some styled MUI DataGrid components which are defined in multiple places into a single place, and am running into an issue with the type argument.
Using a default ...
2
votes
1
answer
130
views
MUI DataGrid. Rows preselection
I'm working with NextJS and React.
Trying to get the MUI DataGrid to work. I can show data on my page, but I would like to preselect a few rows in the grid.
I have the following example page:
// app/...
0
votes
1
answer
87
views
How to position checkbox column in the middle of MUI X Data Grid?
I'm using MUI X Data Grid (Material-UI) and trying to position the checkbox selection column in the middle of my grid. Currently, even though I define the checkbox column in my column definitions ...
0
votes
1
answer
482
views
How to use MUI DataGrid to select multiple selected rows correctly
What I want to achieve
I have a MUI DataGrid (Version: 8.6.1) to display a list of projects. Each project has its own ID. I want to let the user select multiple projects, then let him hit a button so ...
0
votes
1
answer
87
views
How to make each MUI TextField input take full width (one per line) in a React form?
I'm working on a form using Material UI and React. I structured my form using a layout, and each input is wrapped inside a so they should take up the full width.
However, the inputs appear centered ...