Questions tagged [mui-x-data-grid]
At the moment, there is no advice provided for utilizing this tag … but stay tuned!
My data grid component, DataGridPro, has the following parameters: <DataGridPro apiRef={apiRef} density="comfortable" autoHeight headerHeight={75} getRowId={(row) => row.domain_id} loading={ta ...
I have been trying to dynamically create a table with rows and columns based on an array. While my rest request is functioning properly, I am facing challenges when attempting to switch from a hard-coded example to a dynamic approach using loops or mapping ...
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 ...
Trying to implement a MUI DataGrid within a Flexbox layout that fills the remaining space precisely can be quite challenging. Imagine a setup like this: --------------------------- | Header | --------------------------- | Table Header ...
Is there a way to ensure that the filter button is always visible in each column header, regardless of whether a filter is applied or not? I attempted to accomplish this using the sx prop in the following manner: <DataGrid sx={{ '.MuiDataGrid- ...
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 ...
After three days of working on this, I feel like I'm going in circles. My current task involves fetching data from two API sources (json files) using the useEffect hook and storing them in an array. This array contains a large number of products and associ ...
As someone new to React, I recently embarked on my journey by creating a test project utilizing MUI Table, and so far it's been a success: https://i.stack.imgur.com/clb4p.png However, I am now looking to incorporate pagination and sortable columns when p ...
In my current project, we initially implemented the MUI X DataGrid but later switched to DataGridPro due to business requirements. Recently, we upgraded our plan from Pro to Premium which has caused some unexpected issues in our existing code. I am using " ...
With the MUI Data Grid, users have the ability to click on a cell to bring it into focus, navigate through cells using keyboard arrows, and manually set the focused cell. One thing that I'm struggling with is determining which cell is currently in fo ...
This snippet pertains to the Material UI Datagrid component. In order to prevent users from moving to the next page while the API is still loading, I need to disable the Go to next page button. <DataGrid autoHeight getRowHeight={getRow ...
Looking to enhance user experience, I aim to display a filter bar when my Datagrid component is generated. Upon creation, users should immediately see the Datagrid with the filter option visible (as though the filtering button has been clicked). https://i ...
Seeking assistance regarding updating data in the DataGrid component from the @mui/x-data-grid module within a React application. Specifically, I am facing challenges in refreshing the table after retrieving data from an API using react-query. Despite succ ...
Is there a solution to hide the checkbox column in my MUI X DataGrid only when the table is being printed by the user? I have attempted to hide the checkbox, but it also disappeared from the table itself. Here's a screenshot showing the table in printing ...
Currently, I am in the process of developing data tables for an application using Material UI's data grids. The community version has been sufficient for my needs so far, and I have not felt the need to upgrade to the pro or premium versions yet. Upon upd ...
In my React project (version 18.2.0), I'm utilizing the MUI datagrid from the community edition version 5.17.22. My goal is to adjust how the datagrid renders rows and columns specifically for mobile devices. To better illustrate my point, I have included ...
One challenge I am facing is rendering the row numbers in a table so that they remain static even when columns are sorted or filtered. I attempted to use the getRowIndexRelativeToVisibleRows method of the grid API, but unfortunately, it does not work as ex ...
Check out my codeSandbox link here: https://codesandbox.io/s/making-sum-of-column-in-datagrid-mui-zjzfq6?file=/demo.js I've noticed that when I sort by ascending, the subtotal, total, and tax rows move up, but when I sort by descending, they move down. Ho ...
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 ...
My goal is to make a selected row move up and down on arrow clicks, and in order to achieve this, I need to retrieve rows from the MUI DataGrid. I am using the useGridApiRef hook to do so, ensuring that the rows are filtered and sorted accordingly to match ...
One method of integrating Checkbox or TextField is by utilizing renderCell, which successfully displays the Checkboxes: https://i.stack.imgur.com/IyNRC.png However, I am unsure about how to individually control the Checkbox/TextField for each row. For in ...
Currently, I am in the process of developing an application using MUI which involves a MUI datagrid containing user details like phone numbers and email addresses. One issue that I am encountering is the ability to implement actions that would open the ema ...
Adding a checkbox selection to a MUI DataGrid is made simple with the checkboxSelection attribute and monitoring selection changes with onSelectionChange: <DataGrid columns={columns} rows={rows} pageSize={10} checkboxSelection onSelectionChang ...
Incorporating the MUI data grid has been seamless. By simply adding the checkboxSelection attribute to the data grid, checkboxes have been effortlessly implemented for row selection. <DataGridPro sortingOrder={['asc', 'des ...
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 ...
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 ...
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 ...
Software Version: "@mui/x-data-grid": "^6.2.1" I have a script that generates columns for the DataGrid as shown below (only including relevant code) if (prop === "date" || prop === "dateModified" || prop === "n ...
`function EnhancedToolbar() { return ( <GridToolbarContainer> <GridToolbarIcon icon={<FilterListIcon />} /> <GridToolbarIcon icon={<ViewColumnIcon />} /> <GridToolbarIcon icon={<SettingsEthernetIc ...