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
2
votes
1 answer

Material Table Search doesn't work for custom column

Folks, I have a mat table with a custom column as "Items" , this can have multiple values. I can render it as comma separated values however for better look and feel , I am rendering each item as chip. Now the issue is mat table default search…
H K
  • 77
  • 1
  • 8
2
votes
1 answer

Material Table Add Row position

When we click Add Row in material table , the "new edit row" appears at the bottom of the table. This is an issue when you have more rows per page, user has to scroll every time to add anything. I want "Edit Row" to appear at top instead of…
H K
  • 77
  • 1
  • 8
2
votes
1 answer

Set value in custom editComponent in material-table

currently I'm working on material-table and I have build custom component to render in editComponent, but I'm unable to set value in the particular column. suppose I have column: import AutoCompleteSample from './Autocomplete'; Const columns =…
Sushant Rad
  • 249
  • 2
  • 10
2
votes
0 answers

About console error "Not implemented: HTMLCanvasElement.prototype.getContext (without installing the canvas npm package)" in Jest

I have problems about Jest. This error happens when I execute "Table.test.js". So I searched this error and found this post unit test raises error because of .getContext() is not implemented And then I imported "jest-canvas-mock" and add "jest" in…
2
votes
3 answers

Angular Material Table Sorting with reactive formarray

I am trying to implement sorting / filtering on angular material table with formArray as input data source. StackBlits code link dataSource = new MatTableDataSource([]);
2
votes
1 answer

Material-Table would not add row

Fairly new to JS, React. Trying to use Material-table with a add row button. Add row would not add the row. One refreshing the rows are reset. I'm pretty sure I'm doing something wrong with setting/ updating the state. export default function…
Neo
  • 1,181
  • 11
  • 22
2
votes
2 answers

How to change the position of a free action icon in react material-table

I want to place a freeAction button in material-table at top-left. Here is the the illustration of what I want. I know it's something like component-overriding. But unable to do that and can't find any example.
DevLoverUmar
  • 11,809
  • 11
  • 68
  • 98
2
votes
1 answer

ReactJS - Image is not shown in a custom column of Material-Table

I'm working on material-table to render a custom column with images just like this example in the official docs. But there is a little problem. The example online image from githubusercontent.com is working perfectly fine but if I give the path of a…
DevLoverUmar
  • 11,809
  • 11
  • 68
  • 98
2
votes
2 answers

Material Table Get and Set Filter Values

How can I get and set the filter values programmatically using material-table? I want users to be able to save filter configurations as reports and recall them as needed.
Alex Mckay
  • 3,463
  • 16
  • 27
2
votes
1 answer

Add Icons to project Material Table error

I`m try to do this https://github.com/mbrn/material-table but I get error. I think there is a problem because I use TSX not JSX? do you know how to fix? No overload matches this call. Overload 1 of 2, '(props: { component: ElementType; } & {…
Rafał Developer
  • 2,135
  • 9
  • 40
  • 72
2
votes
1 answer

Update a single material-table row that is originally sourced from remote data

I have a React material-table. I want one of the columns to be my custom component, where the user can assign a scheduled date to the row. The table currently gets data remotely. When the component is used and a date is…
steve
  • 2,488
  • 5
  • 26
  • 39
2
votes
0 answers

React Material-Table custom pagination not allowing to override default rowsPerPage value

I am using React Material-Table. To implement server-side rendering, I have overridden the pagination component of as below:- Pagination: props => (
Akash jain
  • 189
  • 1
  • 8
2
votes
1 answer

Add custom add-button in material-table

Currently I have a simple material-table like this:
Mattia
  • 5,909
  • 3
  • 26
  • 41
2
votes
2 answers

mat-paginator width is not aligned with mat-table

I am using angular material for my table. In my code some time data will exceed monitor size so a horizontal scroll bar will appear. In that case my paginator is not aligned with table as like below I want to align both mat-table and mat-paginator…
2
votes
1 answer

Material-Table with React: how to use star rating in the cell?

I would like to style my cell's rating into star by using Material-Table, like the original Material-UI provided: https://material-ui.com/components/rating/ Is it possible to use in Material-Table? I cannot find document related to this...just for…
Neuro Astro
  • 83
  • 2
  • 12