I am creating a project using angular and material. In my project i want to add customised footer row in material table on click of button and delete that row on click of delete button.
Here is my code:
https://stackblitz.com/edit/angular-dshjiz-beqnrj?file=src/app/table-basic-example.html
You need to push data in datasource
this.dataSource.data.push({id: 1, name: 'test'})
There is stackblitz example
You need to push data as mentioned by Armen. You also need to call renderRows() method of the table as per suggestion https://material.angular.io/components/table/overview#1-write-your-mat-table-and-provide-data
Please check your updated stackblitz example
Same method can be implemented to delete the row. Just make sure the renderRows method calls everytime the table updates.
Related
Has anyone managed to implement individual column filtering into Vuetify datatable? e.g. a dynamic dropdown at the top of each column which is populated with the columns' unique values and filters the table on change.
Is the table data connected to a backend?
Yes? then just send the API call on submit
No?:
I assume that you use a similar setup as the documentation.
Then you might want to implement a v-dialog where you use v-text-field to be able to edit each field. for that you could simply create a second JSON, where the edited elements are stored in. On submit, could assign the edited data table to the new data table.
methods: { submit() { this.yourDataTableJSON = this.editedDataTableJSON }, }
I am just started with angular.I have a table and a button. on-click on the button a new row like previous one should be added in the table.i have added stackblitz link below. i am struggling to figure that out.thanks in advance.
stackblitz link
Here is an example https://stackblitz.com/edit/angular-rs6bkq. You need to create an arbitrary array and use its length to define how many rows to display. Notice the *ngFor directive placed on the tr tag. This is effectively a for loop in your HTML for the number of items in your array. So if you change the length of your array using a function call the number of table rows will update to reflect this.
You can read more about structural directives (like ngFor) here - https://angular.io/guide/structural-directives
Check this if it helps : https://stackblitz.com/edit/angular-add-new-row
I have added some modifications to let inputs have different values.
I'm trying to create a table that looks like a spreadsheet with editable inputs inside each td. I'm using Angular's ComponentFactoryResolver as explained here, to add a row to the table when user clicks the add button.
Once the row is added, I use EventEmitter to emit all the data of that row as the last column value is changed.
I've tried to re implement the same functionality on this StackBlitz.
I'm having the following issues:
I'm unable to emit data from the newly added components. (Check Console)
Once I add a new row, the first row (not dynamic) also stops giving me the emitted data.
I'm not sure how to delete a row if user don't needs it as I don't have the reference to it.
This is what I am suggesting. You can create a list of row objects in the parent (table) component and use *ngFor to loop it over.
<app-row
*ngFor="let row of rowList"
[row]="row"
(entryUpdate)="onEntryUpdated($event)">
</app-row>
Please have a look at this
I have an ExtJS grid which has 15 items on each page. Individual items can be searched using Ext.getCmp('id').store.data.items[0];
But I want a generic functions which can search for a particular record on any page based on number of columns value which I supply.
Also when it has found the record I need to click on the checkbox(in the first column) of the corresponding row
I am new bee to ExtJS
View ScreenShot 1
View Screenshot 2
I guess you are loking for Ext.data.Store find() and findBy() methods.
This fiddle illustrate how you can use it.
I am having 2 Json files i.e. Products.json and Promotions.json. Both are having the same structure i.e. fields are same just the values are different.
When the page gets loaded the grid is bound with the data in Products.json as follows:
<!--dataSource gets the Products.json data -->
<div data-role="grid" data-columns="[{field:'code',title:'Code'} .... data-bind="source: dataSource"></div>
after which on button click I want to clear the current records of grid and add data of Promotions.json
<div data-role="grid" data-columns="[{field:'code',title:'Code'} .... data-bind="source: applyPromotionsDataSource"></div>
I am able to read both the dataSources successfully, also I am successfully able to get the "click" event as well..
Questions
How shall I clear the existing dataSource of the grid?
How shall I bind the new dataSource to the grid? (using what method?)
the method setDataSource() works well, but if datasource is different also in columns it goes on error cause it can't find the column "xxxNewDataSourceColumn"... There is a method to refresh also the columns?
I got the solution for the above issue.
I went through the documentation of grid and came across the setDataSource() method and added it on the button click event.
That worked well.
Those looking into this issue, Thanks!! :)
-Hardik