Questions tagged [material-table]

material-table is a npm package that based on reactjs and material-ui.

material-table is a npm package that based on reactjs and material-ui. You can access its source code and documentation from github or its website.

731 questions
20
votes
5 answers

Material-table TypeError: Cannot add property tableData, object is not extensible

I'm using meterial-table with React. I'm trying to assign data from an array coming from an api like this Where columns and rows are api data. But I'm getting this error: TypeError: Cannot…
J. Doe 2018
  • 313
  • 3
  • 8
15
votes
3 answers

Action Icons appearing as plain text

I am using material-table (https://material-table.com/#/) for a react project and I have imported the icons that I need to use, but inside the action bar the actions are appearing as plain text, and not as the Material Icon. import React, {…
eesteban
  • 316
  • 4
  • 10
13
votes
1 answer

How to change name and Icon of Action Column in Material-Table React

I'm using Material Table and I need change the Action column name but this column is automatic generated because I'm using editable function from material table.
Daniel Obara
  • 267
  • 1
  • 3
  • 13
12
votes
1 answer

MUI: The `fade` color utility was renamed to `alpha` to better describe its functionality. (material-table)

I am using material-table (npm latest v1.69.3) with MUI v5.0.6 since I need a editable table. I got this msg in my console. It says import alpha but since fade is used in material-table which is a npm package I don't know what to do here. What I…
12
votes
5 answers

React material-table is not displaying table icons

I have a project where I have to use a table. I am using material-table. But I can't seem to get it to look right. The icons that are needed for the table are not showing and instead I get some placeholder texts. Here is the code I am using to show…
Stephen
  • 913
  • 3
  • 24
  • 50
11
votes
2 answers

React material table automatic page size

I am using React + Material Table. Questions I have Is there a way to dynamically set pageSize based on the available space on the page? If there is no API to do so - how to better approach this problem from component design perspective? What am I…
9
votes
3 answers

Material UI material-table TablePagination issue. (React)

I am using material-table. The TablePagination is not working. It throws an error in console. I tried installing the package as per the documentation. https://material-table.com/#/docs/install npm install material-table --save npm install…
Monish N
  • 330
  • 1
  • 6
  • 15
9
votes
6 answers

Material-table: How change width of the columns?

I'm using the Material Table library that is officially recommended by Google Material UI as a data table library and having troubles with configuring the width of columns. Column width property is working until our content fits the cell:…
Karen
  • 1,249
  • 4
  • 23
  • 46
9
votes
3 answers

Search not working with React material-table using remote data

I'm using the material-table module here [1] with remote data from a web service. I've included the search parameter, but it's not working and there are no error messages in the console. Here is the code: import React from 'react'; import ReactDOM…
tw1742
  • 1,424
  • 4
  • 18
  • 37
9
votes
1 answer

Any Example for custom pagination in material-table and reactjs

Any Example for custom pagination? material-table and reactjs. I want to pass from and to page size to the server and need to hide the first and last button from paging
STha
  • 99
  • 1
  • 1
  • 4
9
votes
3 answers

Add dynamically info to lookup property in material-table component

Im trying to add data dynamically to lookup property in Material-Table component, and I'm seeing issues. The lookup is an object, and its definition you can find here in the first example…
Orestes
  • 637
  • 1
  • 4
  • 19
8
votes
5 answers

How do I make React js Material-UI table responsive as well as make it have equal column spacing?

I'm using MaterialTable from material-ui but there are two problems I'm having. 1. How do I make my columns equally spaced since, after the first two columns, there is a huge & unnecessary space to the 3rd column. 2. This particular table is not…
Shadow Walker
  • 979
  • 5
  • 27
  • 51
8
votes
1 answer

Material-Table React. How to make the table Title and Header sticky

Is it possible to make the table title, search field, global actions icons and column headers in the Material-Table sticky? I've tried adding headerStyle to options and that has no effect (anyway that would only affect column headers and not the…
RIck
  • 431
  • 1
  • 4
  • 9
8
votes
4 answers

How to override MuiPaper-root style in material-table

I'm using the material-table (https://material-table.com/). My issue is that I want to change the table border-radius and table shadow, apparently, this option does not exist using 'option feature' But when I inspect the table I could modify radius…
Mostafa Abdellaoui
  • 355
  • 1
  • 6
  • 15
8
votes
1 answer

ReactJS - How could I wrap the cell text in MaterialTable when typing in data for a new row?

Question: Is it possible to wrap text when typing in abnormally long names in MaterialTable? An issue I'm having with the Material Table is when typing in a very long name, for example "LONG NAME LONG NAME LONG NAME LONG NAME" the line continues,…
user9454269
1
2 3
48 49