Inline editing in the Angular Material data table

angular datatable angular-material-5
Sundar picture Sundar · Apr 12, 2018 · Viewed 61.1k times · Source

Consider an example below. Is it possible to make the angular material data table with inline editing feature? Or making cells under specific columns as editable on load itself (see the image below where Email column fields are editable). If so could you share the sample code?

Angular Material data Table with dynamic rows

enter image description here

Answer

Hobbamok picture Hobbamok · Apr 10, 2019

Well this isn't clean inline editing, but - I'm looking for the same thing - this is close enough for my purposes:

https://stackblitz.com/edit/inline-edit-mat-table?file=app%2Fapp.component.html

[The idea is to have a small popup when you click on the cell]

My alternative Idea would be (though with more work) to replace all cells with Inputfields and bind them to the correct value, which would - for the user- have the exact desired use-case

Related questions

Angular Material data Table with dynamic rows

I am using Angular 5 and Angular Material data table for constuction of the data. I'm referring an example in the below site. In this consider I need to include the dynamic data to each row as in the screenshot where …

Read More
Can't bind to 'dataSource' since it isn't a known property of 'table'

I am new in angular 5 development. I am trying to develop a data table with angular material using the example provided here: "https://material.angular.io/components/table/examples". I am getting an error saying Can't bind to 'dataSource' since …

Read More
angular 4 with bootstrap 4 data-table

I need to use a table with angular 4 and bootstrap 4 but the bootstrap 4 official table is not looking too good. I found this git project: https://www.npmjs.com/package/angular-4-data-table-fix but can't find any documentation on how to …

Read More