Встроенное редактирование в таблице данных Angular Material

Ну, это не чистое встроенное редактирование, но - я ищу то же самое - это достаточно близко для моих целей:

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

[Идея состоит в том, чтобы при нажатии на ячейку отображалось небольшое всплывающее окно]

Моей альтернативной идеей было бы (хотя и с большей работой) заменить все ячейки поля ввода и привязать их к правильному значению, которое для пользователя имело бы точный желаемый вариант использования.

На самом деле это открытая проблема в Angular Material: Таблица: добавление встроенного редактирования для входных данных. К сожалению, в настоящее время это не реализовано, но вы можете найти некоторые идеи для решения в комментариях к этой проблеме.

Раздел «Редактирование встроенного текста» в разделе Таблицы данных > Поведение в материале. Руководство по дизайну показывает, как это должно выглядеть.

похоже, подходит: редактируемые столбцы, нумерация страниц, всплывающее подтверждение и поиск в таблице редактируемые:

как компонент: https://www.npmjs.com/package/angular-inline-editable-table

как источник: https://github.com/RatneshChauhan/springboot-angular-crud

В последних версиях Angular Material 11 | 10

Вы можете вызвать метод .renderRows() после обновления данных строки

addRowData(row_obj){
   var d = new Date();
   this.dataSource.push({
     id:d.getTime(),
     name:row_obj.name
   });
   this.table.renderRows();
 }

 deleteRowData(row_obj){
    this.dataSource = this.dataSource.filter((value,key)=>{
      return value.id != row_obj.id;
    });
 }

Учебное пособие по исходному коду ссылка

Можно использовать [(ngModel)] для редактирования полей.

Вот фрагмент кода:

<mat-table #table [dataSource]="dataSource">

    <!-- Name Column -->
    <ng-container matColumnDef="name">
        <mat-header-cell *matHeaderCellDef> Name </mat-header-cell>
        <mat-cell *matCellDef="let element">
            <mat-form-field floatLabel="never">
                <input matInput placeholder="Name" 
                   [value]="element.name" [(ngModel)]="element.name">
            </mat-form-field>
        </mat-cell>
    </ng-container>

Вот пример этого в https://stackblitz.com/edit/angular-mat-table-inline-editing?file=app%2Ftable-editing-example.html Автору спасибо, я просто добавляю это для полноты

Я создал встроенное редактирование в таблице данных Angular Material с фильтром и нумерацией страниц.

Следующую функциональность я добавил в мат-таблицу с примером FormArray:

1. Фильтр
2. Перейти на определенную страницу.
3. встроенное редактирование в таблице данных материала.
4. Добавьте новую строку.
5. Отредактируйте существующую строку.
6. Удалить строку.

Вот пример для этого Mat-table-inline-editing-project-Link