irossimoline/angular4-material-table

Angular 4 table based on @angular/cdk table structure, to allow row insertion, edition, validation and deletion.

angular4-material-table's Issues

Which function to call for sending a put request to my server?

Please help!!
I was wondering which method to call or rather how do i send a put request which is implemented in BookService as a method called updateBook() which accept an array
I have tried to a demo on your existing demo here I keep getting error when trying to access datasourceSubject you see the error in the console of the demo.

// Stable Material table implementation.
export class BooksTableComponent implements onInit {
   dataSource: TableDataSource<Book>;
@Output() bookListChange = new EventEmitter<Book[]>();
   displayedColumns = ['title', 'author', 'publisher', 'publishedDate', 'isbn', 'price', 'actionsColumn'];

   constructor(private bookService: BookService, private bookValidator: ValidatorService) {}

   ngOnInit() {
     this.bookService.getBooks().subscribe(
       (data) => {
         this.dataSource = new TableDataSource<Book>(data, Book, this.bookValidator);
       }
     );
this.dataSource.datasourceSubject.subscribe(
      (data) => {
        this.bookListChange.emit(data);
        console.log(data);
      }
   }
 }

Conflict with rendere 3 in node_modules

I'm getting error when I run my project. Currently my angular version is 7.

ERROR in node_modules/@angular/core/src/render3/ng_dev_mode.d.ts(9,11): error TS2451: Cannot redeclare block-scoped variable 'ngDevMode'.
n
ode_modules/angular4-material-table/node_modules/@angular/core/src/render3/ng_dev_mode.d.ts(9,11): error TS2451: Cannot redeclare block-scoped variable 'ngDevMode'.

However after I deleting node_modules folder inside angular4-material-table folder which is in project's node_module, I could run without problem.

Adding documentation or the source code demonstrating the approach.

Is the source code for this package public?

There're very few examples of extending cdk table.So far I'm aware of only two such packages viz this one and the other is terminus ui so I think it would be great if this repo provides some sort of technical details or code as to how you guys approached it.

Repository License

The license for the published package on npmjs.com is MIT. Can you make the license on the github repository match that license? Thanks.

Can't bind to 'formControl' since it isn't a known property of 'input'.

Hello sir,

I try to implement your code in my project but getting errors like this , Can you please help to solve this problem . Thank you

Can't bind to 'formControl' since it isn't a known property of 'input'. ("
<mat-cell *matCellDef="let row">

<input [ERROR ->][formControl]="row.validator.controls['name']" [readonly]="!row.editing" placeholder="Name" [(ngModel"): ng:///AppModule/FormGenerationComponent.html@5:23
Can't bind to 'ngModel' since it isn't a known property of 'input'. (" <input [formControl]="row.validator.controls['name']" [readonly]="!row.editing" placeholder="Name" [ERROR ->][(ngModel)]="row.currentData.name" matInput>


"): ng:///AppModule/FormGenerationComponent.html@5:115
Can't bind to 'formControl' since it isn't a known property of 'input'. ("
<input [ERROR ->][formControl]="row.validator.controls['age']" type="number" placeholder="Age" [(ngModel)]="row.curren"): ng:///AppModule/FormGenerationComponent.html@13:23
Can't bind to 'ngModel' since it isn't a known property of 'input'. (" <input [formControl]="row.validator.controls['age']" type="number" placeholder="Age" [ERROR ->][(ngModel)]="row.currentData.age" matInput>


"): ng:///AppModule/FormGenerationComponent.html@13:101
No provider for NgControl ("
<mat-cell *matCellDef="let row">

[ERROR ->]<input [formControl]="row.validator.controls['name']" [readonly]="!row.editing" placeholder="Name" [("): ng:///AppModule/FormGenerationComponent.html@5:16
No provider for NgControl ("
[ERROR ->]<input [formControl]="row.validator.controls['age']" type="number" placeholder="Age" [(ngModel)]="row"): ng:///AppModule/FormGenerationComponent.html@13:16

how to remove dots border

Hello Dear,

how to remove dots border from cell?

how to use dropdown list

Hello Dear,

Could you give use a simple example how to use dropdown list

error TS2416: Property 'connect' in type 'TableDataSource<T>' is not assignable to the same property in base type 'DataSource<TableElement<T>>'.

Hello

I get this error when I try to implement locally your example and I suppose it's because Angular 8 is not backward compatible with Angular 4.

What is this error about?
Can you help me fix it?

Additional details:

• Angular 8
• @angular/[email protected]
• [email protected]
• @angular/[email protected]
• [email protected]
• @angular/[email protected]
• [email protected]

npm install --save @angular/material @angular/cdk
npm install --save @angular/flex-layout
npm install --save hammerjs
npm install --save angular4-material-table
npm install --save rxjs

move to Angular 5?

now that Angular 5 is released?

How to create a method in component of row.confirmEditCreate()

.html
<button *ngIf="row.editing" mat-icon-button color="primary" focusable="false" (click)="row.confirmEditCreate()">

.component.ts
how can i call this method
confirmEditCreate(){
//It gives an error
}
By calling this method i will save data in to the database.

@irossimoline Please help

Warning message Ngmodel is getting deprecated

It seems that ngmodel will be removed on Angular7.
I tried to change the code to in order to support the new practices regarding FormGroup and FormControl. But the lines appear always in edit mode.

This is the snippet I have used:
<input matInput formControlName="row.validator.controls['name']" [readonly]="!row.editing" placeholder="Name" [value]="row.currentData.name">

Any thoughts about this?

Thanks!

Date picker edit field doesn't fit in the cell

Hi

I have a table where the editor shown is dependent on a type setting in another column
The issue i'm having is the cell doesn't fit in the calendar button for a calendar popup editor
I'm sure there is a simple css solution to this but I'm no css expert

(image of date editor active, you can see the calendar button which normally is at the end of the field is wrapped to a second row)

p-autocomplete shows focus on second tab click

Am using tabIndex to focus on tab press but on first press it's not focusing after 2nd click it shows focus. How can I focus that on one click????

Extending TableDataSource

Hi,
First of all thanks for this great library, i have been using a normal material dataTable which uses an extended DataSource to make http requests (It's actually a socket but let's say http :) )
i have tried to use your component instead but it seems it can't conform exactly like a normal DataSource. I have made the connect and disconnect function with same structure as yours but still TsLint and angular-cli throws error on it.

Here is the error it throws on angular-cli:

Cannot redeclare block-scoped variable 'ngDevMode'.
node_modules/angular4-material-table/node_modules/@angular/core/src/render3/ng_dev_mode.d.ts(9,11): error TS2451: Cannot redeclare block-scoped variable 'ngDevMode'.
node_modules/angular4-material-table/node_modules/rxjs/internal/symbol/observable.d.ts(4,18): error TS2687: All declarations of 'observable' must have identical modifiers.
src/app/_shared/custom-data-source.ts(19,5): error TS2416: Property 'connect' in type 'CustomDataSource' is not assignable to the same property in base type 'TableDataSource<any>'.
  Type '() => Observable<TableElement<any>[]>' is not assignable to type '() => Observable<TableElement<any>[]>'. Two different types with this name exist, but they are unrelated.
    Type 'Observable<TableElement<any>[]>' is not assignable to type 'Observable<TableElement<any>[]>'. Two different types with this name exist, but they are unrelated.
      Types of property 'source' are incompatible.
        Type 'Observable<any>' is not assignable to type 'Observable<any>'. Two different types with this name exist, but they are unrelated.
          Types of property 'operator' are incompatible.
            Type 'Operator<any, any>' is not assignable to type 'Operator<any, any>'. Two different types with this name exist, but they are unrelated.
              Types of property 'call' are incompatible.
                Type '(subscriber: Subscriber<any>, source: any) => TeardownLogic' is not assignable to type '(subscriber: Subscriber<any>, source: any) => TeardownLogic'. Two different types with this name exist, but they are unrelated.
                  Types of parameters 'subscriber' and 'subscriber' are incompatible.
                    Type 'Subscriber<any>' is not assignable to type 'Subscriber<any>'. Two different types with this name exist, but they are unrelated.
                      Property 'isStopped' is protected but type 'Subscriber<T>' is not a class derived from 'Subscriber<T>'.

here is my datasource class extended from your TableDataSource:

export class CustomDataSource implements TableDataSource<any> {

    private rowsObject = new BehaviorSubject<any[]>([]);
    private loadingSubject = new BehaviorSubject<boolean>(false);
    private countSubject = new BehaviorSubject<number>(0);

    public loading$ = this.loadingSubject.asObservable();
    public count$ = this.countSubject.asObservable();

    constructor(private socketSerivce: SocketService) {}

    connect(): Observable<TableElement<any>[]> {
        return this.rowsObject.asObservable();
    }

    disconnect(): void {
        this.rowsObject.complete();
        this.loadingSubject.complete();
    }

    getRows(tableName, filers, sort, page, pageSize, fullTextFields, fullTextValue) {

        this.loadingSubject.next(true);

        this.socketSerivce.getRows(tableName, filers, sort, page, pageSize, fullTextFields, fullTextValue).pipe(
            catchError(() => of([])),
            finalize(() => {})
        )
        .subscribe(lessons => {
            this.loadingSubject.next(false);
            this.rowsObject.next(lessons);
            if (lessons.length > 0) {
                this.countSubject.next(lessons[0].count);
            }
        });
    }
}

Expandable row to display a child table

In efforts to use the material table to fit my needs I am wondering if there's any possibility of inserting a an expansion panel containing a mat-table inside of another mat-table or mat-cell (Parent-Child situation). I've been trying to get it to work but nothing outside of the data-bound form control shows up (the panel does not show at all.) Was the cdk-table or material-table design meant to be that flexible?

How to use this code with reactive forms and form Arrays ?

Hello,
I loved the code, it will be really helpful if you can guide me on how to implement this kind of table with reactive forms and FormArray.
let's say that the below method is responsible for creating the form

createForm(){
 this.entryForm = this.formBuilder.group({
        date: ['', [Validators.required]],
        notes: [''],
        items: this.initItems()
      
      });
}

I need to manage the Items through an editable table, at the beginning the table must have two empty rows:

 initItems(){
    var formArray = this.formBuilder.array([]);
 
    for(let i=0 ; i< 2 ; i++){
      formArray.push(this.formBuilder.group({
        name: ['', [Validators.required]],
        age: ['', [Validators.required]],
      }));
    }
    
  return formArray;
  }

The Html markup of the table should be drawn according to the data of the items formArray.
to add a row to the table, I need to add a row to the formArray first:

addNewItem(name: string , age: number){
 var controls = <FormArray>this.entryForm.controls['items'];
  var formGroup= this.fb.group({
      name: [name, [Validators.required]],
       age: [age, [Validators.required]],
    });
    controls.push( formGroup);
}

the same for edit and remove, I need to remove the row form the FormArray.
I just can't Imagine how can I link this code to yours?

When can TableElement.currentData be undefined?

I have strictNullChecks enabled, and I have the following code:

// html
<button (click)="delete(row)">

// ts
delete(row: TableElement<X>) {
  // do some business with one of the properties of currentData: for example logging it:
  console.log(row.currentData.someProperty)
  row.delete()
}

When I compile it, I get this error:

error TS2532: Object is possibly 'undefined'

That's because currentData is optional in TableElement class, so it could possibly be undefined and I can't access someProperty on undefined.

My question: at what cases would currentData be undefined? I'm bewildered because originalData isn't optional. Can currentData just be a required property like originalData?

Thanks!

Upgrade to angular 7 to angular 8

Hello,
I made the upgrade angular 7 to angular 8 on my project.
And the error is occurring when the AOT compile at the production mode:

ERROR in ..\angular4-material-table\src\app.module.ts(4,2): Error during template compile of 'AppModule'
Function calls are not supported in decorators but 'ɵmakeDecorator' was called in 'NgModule'
'NgModule' calls 'ɵmakeDecorator'.

Please, can you help?

npm install --save angular4-material-table

I got the following error when I tried to install:

npm ERR! code EINVALIDPACKAGENAME
npm ERR! Invalid package name "@angular/cdk/collections": name can only contain URL-friendly characters

Issue with node_modules with in angular4-material-table package

I'm facing Issue after installing angular4-material-table NPM module.
After research, I found like my solution already contains @angular package with core, common and forms

Inside the Angular4-material-table module, Again we have Node_modules with the core, common and forms

Error Im getting:

Package.json

extending MatTableDataSource instead DataSource

If it can extend MatTableDataSource then we can use MatPaginator, MatSort, search etc more easily because in MatTable we can setup those features easily.

Upgrade to Angular 9

Angular 9 changes some package. A new compilation is required.

vulnerabilities in npm Package

I have tried installing the package, It has displayed on installation complete.
found 15 vulnerabilities (4 low, 5 moderate, 6 high)

Setting default values in FormControl

Hi,

I am trying to set a default value for a cell when creating a new row, but for some reason i cant make it work... any help will be appreciated.

How to get the current data in TableDataSource?

Currently there's no public attribute for us to get the current data in TableDataSource instance, right?
I check the source code of TableDataSource, it seems the data is stored in rowsSubject, could we change the rowsSubject to a public attribute? so that we can deal the logic with data rows in typescript files.

Example of saving changes to an API

Can you provide an example of data changes being saved via Put/Post/Delete? Based on the demo I can make changes in the form but those changes aren't permanent.
As a newbie this table looks great and is pretty easy to integrate when it comes to initially populating the table via Http(Get). However, being a newbie ... if I need to permanently save my changes (new, edit or delete) how would can I call my service? Do I have to extend TableDataSource or can it be done somewhere in the button (click) ?

TableDataSource should extend MatTableDataSource instead of DataSource

Hi irossimoline,

First of all, what you've developed is very cool and useful.
I think it could even be better with few changes.
TableDataSource should extend MatTableDataSource instead of DataSource. Like that, TableDataSource would inherited the filter and sort methods which are provided OOTB by Material.

ERROR TypeError: Class constructor DataSource cannot be invoked without 'new'

Hi,
I installed the last version of this component and I implemented the example from link https://stackblitz.com/edit/angular-tj9f6y but dosen't work. I get this error:

Any ideias why? My project uses Angular 8.1.0 and Angular Material 8.0.0.

Thanks

How to use a mat-autocomplete

Is it possible to use a mat-autocomplete in a cell in the table?
In addition, then typing in the autocomplete component the filtering should be done using a http call, like they do in this example: https://stackblitz.com/edit/angular-nku8fq?file=app/app.component.ts

The hardest thing for me to wrap my head around is how to react to changes to the autocomplete input field and do the filtering, like they do in the example I linked to:

this.filteredOptions = this.myControl.valueChanges
      .pipe(
        startWith(null),
        debounceTime(200),
        distinctUntilChanged(),
        switchMap(val => {
          return this.filter(val || '');
        })
      );

How do I get hold of the form control for each row and subscribe to its changes?
Any suggestions?

Build errors after updating to 0.8.0

Good day.

I have updated my project to Angular 8 and also the angular4-material-table which is awesome to 0.8.0.

I have a problem though that when I try and build my project or the table on its own I get a lot of errors. I am no js or Angular expert and cannot seem to figure out why this happens.

Attached is the output from the build.
angular4-material-table-build-error.log

could you use typescript method to colon object instead of lodash.com cloneDeep

could you use typescript method to colon object instead of lodash.com cloneDeep

like this

let swallowClone = { ...original };

or

let swallowClone= Object.assign({}, original);

Release for Angular 7

Any idea for release for angular 7 may valuable

Cannot overwrite row.currentData

Hi,
I'm checking if any of properties in object contains '' (empty string) and i'm trying to override it with null value.

for (let key in row.currentData) {
  if ((!row.currentData[key]) || (row.currentData[key] && (row.currentData[key].toString().trim() === '') {
    row.currentData[key] = null;
  }
}

but after all, when I debug row.currentData selected property still has value: '' instead of null. What's wrong?

Angular 6 support?

Hello,

Does this one work on Angular v6? Thanks!

createNew function

hi
while creating new item, I want to see added empty-data row at the top of table instead of buttom of it.
Is there any config setting to do this or should I change source code. If source code should be changed, How can I change?

TypeError: undefined is not an object (evaluating 'this.dataKeys.reduce')

Hi!
In the TableDataSource class / createNewObject function I get this error when I try to create a new element: ERROR - TypeError: undefined is not an object (evaluating 'this.dataKeys.reduce') wether by invoking (click)="dataSource.createNew()" in the view or when calling's the this.dataSource.createNew();function in the component. I'm not trying to innovate for the moment. Just trying to import StackBlitz's code in my app.

When I do a console.log(this.dataConstructor);and a console.log(this.dataKeys);inside the createNewObject()function both are undefined.

Any idea on how to solve this?

Nested Properties for sortingDataAccessor

Due to some inflexibility in the data I was using I was investigating a way to bind mat-sort-header to a nested property in the data structure. I ended up writing a custom function to replace the sortingDataAccessor in MatTableDataSource in order to facilitate this. It's written in a generic way so I was thinking I'd get some feedback on the idea first and then create a PR for the change if it sounds helpful.

Error I can't create a multiple row on dataTable !!

let nbdataRow=0;  
this.dataSource.createNew();
  this.dataSource.getRow(nbdataRow).confirmEditCreate();
  nbdataRow++;

Not an Issue - HTTP interceptor Conflict with keycloak-angular

Hi,

Thanks for all great effort in this nice plugin. I am using this plugin with Angular 6.

One observation is that when this plugin having some conflict with with keycloak-angular plugin (https://github.com/mauriciovigolo/keycloak-angular).
keycloak-angular plugin supposed to include Authorization header with Bearer + token using http interceptor. When this plugin is included in my project, It's not doing that any more. I am still investigating to find root cause of conflict. However, it would be helpful to share if this plugin uses the http interceptor and pointer in source code.

Thanks,