Stack Overflow
Stack Overflow

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
6
votes
3 answers

Material-Table: styling is overiding all custom and Material UI styling and icons not rendering

I'm trying to use Material-Table component - it's perfect for a table that I'm buildling (add, edit, delete and search rows). I've installed and used it as a child component of a page - everything works but... STYLING: all custom and built-in…
ckyc
  • 61
  • 1
  • 1
  • 2
5
votes
2 answers

How can I change the color of material-table icons of onRowAdd, onRowUpdate, onRowDelete?

I tried to the material-table the library for basic crud operation. By using onRowAdd, onRowUpdate, onRowDelete, I get the icons for the same but I would like to know that how can I change the color of each of these three icons? You can see my table…
user9824674
  • 493
  • 1
  • 14
  • 28
5
votes
2 answers

Material-table: Is it possible to open detailsPanel by default?

I'm trying to create a subtable of the main React Material-Table. Everything is working properly as it should work, details panel (subtable) is showing on toggle icon press. Are there any ways to show it opened by default? I mean to remove the…
Karen
  • 1,249
  • 4
  • 23
  • 46
5
votes
1 answer

StickyHeader in Material-Table React

I was looking at this example, and the question I have is for a sticky header. Example: https://material-table.com/#/docs/features/fixed-columns I was trying to figure out to see if I can get the header that has Name up to BirthPlace to be stick, so…
Mark A Avila
  • 157
  • 2
  • 12
5
votes
1 answer

How to get ReactJS Material-table search results count

I am using Material-table (https://material-table.com/#/) for my project. I've been trying to figure out if there is a way to retrieve the search-result count when either filter or search actions are used. I've looked through all the examples and…
jlrivera81
  • 163
  • 1
  • 12
5
votes
2 answers

Changing the style of "Actions" in material-table react

I have been using material-table in one of my projects. While I am able to change the style ( font-size, color) of the user defined columns, I am not able to do so for the "Actions" column. I am specially interested in changing the font-size. Same…
Deep
  • 528
  • 3
  • 12
  • 27
5
votes
1 answer

How can I make the edit-mode field type of one material-table column dependent upon the value of another column, without affecting other rows?

Summary I need the input field that appears when the user is in edit mode to be different depending on the value of a different column for that row. E.g. if the user is in edit mode and Column X has value A, then Column Y should be a text entry…
daviegravee
  • 171
  • 2
  • 12
5
votes
2 answers

React Material Table action button markup overriding for multiple actions

Action overriding feature allows me to override button but it overrides all the action buttons. For example, if I have two action buttons for edit and delete and I use the Action overriding, both of my buttons get overridden with that same custom…
Zihad Ul Islam
  • 697
  • 2
  • 8
  • 17
5
votes
2 answers

Highlight in a row when the mouse is over a row in material-table

Which component i must use, to obtain a highlight in a row when the mouse is over a row, using the material-table component? I dint find any property or which component override to obtain that. Thanks in advace for your time Best Regards Here is the…
Orestes
  • 637
  • 1
  • 4
  • 19
4
votes
1 answer

Assignments to the 'data' variable from inside React Hook useEffect will be lost after each render

There is a complete warning message: Assignments to the 'data' variable from inside React Hook useEffect will be lost after each render. To preserve the value over time, store it in a useRef Hook and keep the mutable value in the '.current'…
Humail Saleem
  • 112
  • 1
  • 10
4
votes
1 answer

React Material Table pageSize is not updated dynamically

I am trying to paginate material table data using TablePagination. The pageSize property is initially defined as a state variable and updated based on selected pageSizeOptions. But the page size is not updated. It always remains the initial value…
VinayGowda
  • 155
  • 2
  • 12
4
votes
1 answer

Material-UI: How can I change TablePagination caption that tells how many rows shown?

I want to change the string of the word "of" to another word, I tried to do so through node_modules but it didn't work. Here is my code:
mostafa elbanna
  • 195
  • 2
  • 3
  • 9
4
votes
3 answers

ReactJS: How to change placeholder font size of Material Ui Autocomplete?

I want to change the placeholder fontsize of Material Ui Autocomplet. Is there any way?
theWanderer
  • 576
  • 2
  • 10
  • 30
4
votes
2 answers

ReactJs: Material-UI table - changing padding

For this fullstack app I moved into the original devs seem to have implemented some component to create the tables for the app's webpage Problem is the padding on all the cells is quite large. Opening the rendered page in chrome and using chrome…
CaptainObv
  • 360
  • 1
  • 4
  • 15
4
votes
1 answer

ReactJS: How to Disable toolbar from material table but not add functionality

I want to remove toolbar, as it is creating a blank space between table and button. But as i set toolbar:false, it also disable my add new row functionality. What is the way to disable toolbar but not add functionality?
theWanderer
  • 576
  • 2
  • 10
  • 30
1 2
3
…
48 49