I am currently working with a MUI datatable where the properties are set as below: data={serialsList || []} columns={columns} options={{ ...muiDataTableCommonOptions(), download: false, expa ...
I'm currently using mui-datatables in my app and have customized the table toolbar to include additional buttons. However, I've encountered an issue where adding a second button causes it to be displayed below the first one, despite there being enough spac ...
Is it possible to override a specific component with a parent reference, such as the search input text on a datatable? Currently, I am overriding the entire input in order to achieve this. overrides:{ mycomponentselector: { MuiPaper: { ...
I have dates that are formatted using moment.js, for example ("Sat, Feb 22, 2020 12:55 PM") I retrieve them from firestore, and they appear to come in correctly as I first sort them in descending order. forms.sort(function(left, right) { return moment.u ...
Looking to implement multi-language support in MUI Datatables. I have been able to modify the translations, but when attempting to change languages by providing a different object with new translations (verified using console log), the label texts do not u ...
I have created a Data Grid table with 10 columns. It displays perfectly on large screens, but when the screen size is reduced below 1380 px, instead of having a smooth horizontal scroll bar, it looks messy. Instead of changing to a different library, I am ...
Completely new to React and Material-UI. I'm attempting to modify the color of table rows when hovering over them with the mouse. I have tried various solutions from different posts but none have worked for me. (e.g. Root, cell, and tableRow) The x ...
I previously utilized the pattern attribute for input fields in pure HTML, but now I no longer have any input fields. What should be my next steps? Can you provide me with a reference in the MUI documentation? https://i.stack.imgur.com/ ...
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 ...
I'm currently facing an issue where I need to set the name of a column in MUI Datatables using an object key. Specifically, I want to set one of the column names with the first element of children.childName so that it displays a list of child names, but on ...
I'm currently working on adjusting the functionality of the openFilePreviewDialog(id) action so that it properly returns the id associated with its corresponding row. Issue: The problem I am encountering is that instead of retrieving id=7, it is returning ...
In the Data Grid, there are 9 columns including "Rate" and "Transfer". There is also a column labeled "Total" which should display the multiplication result of "Rate" and "Transfer", adjusting with any changes made to the "Transfer" cell value. The "Transf ...
const data = { name:"test1", fclPrice:100, lclPrice:null, total:"50" } and here are the two columns: const Datatable = [ { Header: 'Name', accessor: 'name' }, { Header: 'Price', ac ...
// ** React Component and Library Imports import { useEffect, useState } from 'react' import Box, { BoxProps } from '@mui/material/Box' import Button from '@mui/material/Button' import Drawer from '@mui/material/Drawer' import FormControl from '@mui/materi ...
I am currently working on a Next.js project where I am using Material UI to create tables and fetching data from MongoDB. However, I am facing an issue in adding edit and delete buttons to the action column in the table. Below is how the current table loo ...
I need help creating a dynamic cellRender function in a datagrid that will remove a number counter component from a row when its checkbox is checked. Is it possible to achieve this using params? If not, what alternative approaches could I take? const colu ...
I'm facing a challenge in adding a button to the rows of my Material UI DataGrid component. Here is my DataGrid component setup: <DataGrid rows={adminStorage} columns={columns} autoPageSize getRowId={(logistics) => logistics._id } ...
I'm currently working on a table that pulls data from an API and presents it in either an MUI table or Material table. I would like to have different action buttons displayed for each row - for example, in the first row, the button should read "connec ...
I'm currently developing an Admin panel using React-Admin, but I've encountered some difficulties with customizing the table grid and other components. Specifically, I'm looking to adjust the padding of the MuiTableCell element. Here's how it looks at the ...
Is there a method to conditionally style a MUI datagrid cell with a 'boolean' type? Check out this sandbox from the documentation featuring a checkbox column with boolean type: https://codesandbox.io/s/1ckfjp?file=/demo.tsx:1771-1855 const columns: GridCo ...
After transitioning my tables to Mui-datagrid on Material UI 5, I encountered a unique challenge with an array of objects. Specifically, I aim to implement a phone number filter in this column, but the numbers are stored within object lists. phone: [ { ...
Check out the default UI from MUI-Datatables v4.3.0 here: https://i.stack.imgur.com/rbHgD.png I want to create a style similar to this: https://i.stack.imgur.com/AUHqC.png Just so you know, I am using the following packages: "@mui/material": &q ...
Currently utilizing a MUI datagrid for email field validation, the revert functionality works successfully but only triggers upon pressing the escape key. To achieve this behavior, I made modifications to the MUI validation example provided, where a toolti ...
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 am facing an issue with sorting in a column that represents an object. Although I can display the desired value, the sorting functionality does not seem to work for that particular column. Here is an example to provide better clarity: const [data, set ...
My goal is to center an IconButton within a DataGrid table, all of which are MUI components. Despite reading the documentation and trying various methods, I haven't achieved the desired result yet. In my latest attempt, I implemented the following: GridCo ...
Is it possible to include an option to display all rows alongside the current options of 10, 15, and 100? I've been unable to locate this feature in the documentation: Check out the Codesandbox example: https://codesandbox.io/s/muidatatables-custom-toolba ...
Is there a way to configure the DataGridPro filter pop-up so that it hides after filtering and loading the results? ...
I have integrated Redux into my project to retrieve data from the API, and this is a snapshot of the data structure: https://i.stack.imgur.com/jMjUF.png My current challenge lies in finding an effective way to display the information stored within the 'q ...
In my next js app, I am utilizing MUIDatatable with server-side pagination. The issue I am facing is that even though the data is correctly returned by the API for each page change, it only displays on the first page. When I try to navigate to the next pag ...