Stack Overflow
Stack Overflow

Questions tagged [mui-datatable]

MUI-Datatables is a data tables component built on Material-UI. It comes with features like filtering, resizable + view/hide columns, search, export to CSV download, printing, selectable rows, expandable rows, pagination, and sorting.

Website

https://www.material-ui-datatables.com/

Github

https://github.com/gregnb/mui-datatables

Example code

import MUIDataTable from "mui-datatables";

const columns = ["Name", "Company", "City", "State"];

const data = [
 ["Joe James", "Test Corp", "Yonkers", "NY"],
 ["John Walsh", "Test Corp", "Hartford", "CT"],
 ["Bob Herm", "Test Corp", "Tampa", "FL"],
 ["James Houston", "Test Corp", "Dallas", "TX"],
];

const options = {
  filterType: 'checkbox',
};

<MUIDataTable
  title={"Employee List"}
  data={data}
  columns={columns}
  options={options}
/>

Demo

https://codesandbox.io/s/muidatatables-custom-toolbar-forked-j002q?file=/index.js

314 questions
6
votes
1 answer

How to accomplish customRender in React mui-Datatable

I want to customize the row hat data in mui-datatble in such a way that if I get Yes in the option, background color should be Red and if I say No, background color should be Blue. I am using mui-datatable first time. I am unable to use…
dhwanika chhabria
  • 61
  • 1
  • 1
  • 2
5
votes
1 answer

Styling specific column of the MUI DataGrid

I would like to center a IconButton that is inside a DataGrid tabe (all of them are MUI components). I've read the documentation and tried several things. In my last attempt I did this: GridComponent.js What I did here is assign 'like-grid-button'…
Adrià Pagès
  • 51
  • 1
  • 2
4
votes
0 answers

mui-x datagrid: how to make a custom singleSelect like 'country-column'

I'm looking for an example-code how to make a singleSelect with icons in the column and the select-options like in the Country-Column at the filterling-section-site on the datagrid. Here is a pic: Am I too stupid to use google or is it really hard…
user3606183
  • 157
  • 9
4
votes
1 answer

Is there any option available in DataGrid MUI to export columns with renderCell on a complex object?

I am exporting DataGrid @mui/x-data-grid table using CustomToolbar I have one of the columns as below { field: 'industry_type', headerName: 'Industry', renderCell: (params) => { const…
Pooja Shah
  • 63
  • 2
  • 6
4
votes
1 answer

MUI Datagrid display array of objects

I am using Redux to fetch data from my API and this is what my data looks like: The problem I am facing is a way to display the data from the array of objects named question. I am using render Cell to render data for rows currently, here is the…
Hameez Rizwan
  • 191
  • 7
4
votes
1 answer

MUI Data Grid horizontal scrolling (responsiveness) is not working

I created a Data Grid table with 10 columns. It looks great on big screens but when I squeeze it below 1380 px, I expect to see a horizontal bar scrolling but it looks terrible. I don't want to switch to another library and just need to fix this…
Oğuzhan Yıldırım
  • 146
  • 2
  • 12
4
votes
1 answer

Change cell value dynamically in MUI Data Grid

In my Data Grid I have 9 columns where you can see there are two columns named Rate and Transfer. I also have a column named Total where I want to show the multiplication result of Rate and Transfer with the change of Transfer cell's value. Note…
buzz
  • 896
  • 2
  • 10
  • 22
4
votes
3 answers

How to display image in a @mui/x-data-grid table?

I'm a react.js beginner. when I'm trying to add an image avatar to my MUI table, I got the following error. "TypeError: params.rows is undefined" I'll put my code below. import React from 'react' import "./userList.css" import { DataGrid } from…
Tharindu Thathsara
  • 51
  • 1
  • 4
4
votes
2 answers

Highlight rows in MUI-Datatables

I created a simple table using React.js and MUI-Datatables: import MUIDataTable from "mui-datatables"; const columns = ["Name", "Company", "City", "State"]; const data = [ ["Joe James", "Test Corp", "Yonkers", "NY"], ["John Walsh", "Test Corp",…
Klaus
  • 1,080
  • 2
  • 10
  • 27
4
votes
4 answers

Label text not updating in MUIDataTable ReactJS

I want to add multi language option in mui Datatables. I can change the translations but when I want to change language, I tried to give another object with the other translations (this object if I do console log I can see the changes) but the label…
Adrian Naranjo
  • 862
  • 6
  • 14
3
votes
2 answers

MUI DataGrid - Open GridColumnsPanel

In the MUI DataGrid, by clicking the options menu on any header column, you can access the column visibility panel. But I haven't found a way to display this panel from outside the Grid. The idea was to have a button that, when clicked, could…
Wallace Roversi
  • 33
  • 4
3
votes
1 answer

MUI DataGrid Error: 'props.pageSize' cannot exceed 100 in DataGrid. How to display all rows?

It's a simple question, but seems that this functionality is purposely blocker by MUI. How do I list 100+ row table in DataGrid without pagination? (not DataGridPro or DataGridPremium)
697
  • 321
  • 4
  • 16
3
votes
1 answer

How do I pass the text data from firestore inside the expandable row and get the document ID to be passed inside the setState?

In firestore, I have this fields title, createdDate, and text. How do I display the fields title and createdDate in the mui-datatable. The text would then be displayed inside the expanded row. How can I do this? This is what the data looks like if…
JS3
  • 1,623
  • 3
  • 23
  • 52
3
votes
2 answers

How can I prevent the onRowClick when an action button from custombodyrender is clicked?

I'm using a mui-datatable where the onRowClick will direct the user to another page. I also have custom action button in each row. However, If i'll click the custom action button, it will also trigger the onRowClick which will direct the user to…
JS3
  • 1,623
  • 3
  • 23
  • 52
3
votes
2 answers

How to add Image in muidatatables?

Note: Image is in the database named as "profileImage" I want to make image object that is dynamic as like other objects, whenever I add this code { label: "Image", name: "profileImage", } it simply display the image endpoint like 3704545668418.PNG…
Muneeb Ahmad
  • 35
  • 7
1
2 3
…
20 21