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
Related
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 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.
SUMMARY: I have a column for ids within an ag-grid table. How can I get a button-click to only display some of the rows (for which I have a list of ids), while not re-writing the whole table?
BACKGROUND: I am using the community version of ag-grid and am using it with Javascript. I have a column with the id numbers in it. When I click a button (or something else eventually, but start with a button for simplicity), is it possible for it to act as a filter within the table, and hence could be undone by clicking another button to clear the filter?
In case that wasn't cleaar, I am looking to do:
1. Click button1
2. Display certain rows within a table whose id numbers are in my list variable
3. Have this button1's action act as a filter that can be undone by a button2 (which could be programmed perhaps like a clear filter button)
Is this possible to do with a quickfilter? Otherwise, if this isn't possible, how could I do this when over-writing the table, whilst still having the option to 'instantly' revert back to the original table
(I don't think I need to add code as I am unsure of how to build in this functionality)
Thanks in advance.
I have a component that renders a reactstrap table and within the render I have map function of a state of clients that gets rendered as table rows.
Within each table row there is a component(separate button component that just open up a modal) that gets rendered within the map function.I want to use the onMouseEnter to determine which row I am currently at(with cursor) and when I click on the button component.Now the modal component just opens up the same for all rows.
The idea is that lets say I load 4 clients and map through them,when I do I render a table row for each client within the map.Along with this map function I also add a button component(separate component) as a td tag for each tr that gets rendered.
I want to use onMouseEnter to know which one I am at in the row.
So when mouse is hovering over second row(position 1 in clients array) I want to be able to know at which row I am at.
Then I want to pass this row index(which I need to get somehow?) to the button component(same component just rendered 4 times for each client row) and when button component renders I can get this index from props.
.....Please know I am a big react noob just trying to figure this out
I am using a list/array to render the table depending from data I get from a API so it can be 6 clients or a 100 you know?
Hahah just asking for advise
Thanks
React has an abstraction to vanilla DOM events called Synthetic events. Lucky for you, the Synthetic event you're looking for has the same name, "onMouseEnter".
<span onMouseEnter={(event)=>console.log('ENTERED!')} />
You can get read up on most of them here
https://reactjs.org/docs/events.html
Is there a way to use angular.element(...).on('click', onTdClick); (for example) in a way that executes onTdClick (providing the element to it) on every that gets clicked?
Let's say I have 2 tables, both have cells and columns.
I want to be able to click on CELLS and send the element of what I clicked and send it to onTdClick($event).
$scope.onTdClick = function(ev){
window.getSelection().selectAllChildren(ev.target);
};
Essentially doing the same as: ng-click="onTdClick($event)" without having to put ng-click on hundreds of <td>'s
I dynamically add table rows and table cells with .insertRow and .insertCell
https://www.w3schools.com/jsref/met_table_insertrow.asp
So statically doing angular.element().find('td').on() wont work well here.
Whats my end result?
I'm attempting to make it so I can click <td>'s to essentially highlight cells by just clicking them.
The highlight code is already tested and works:
window.getSelection().selectAllChildren(ev.target);
(where ev is the td element)
You shouldn't use insertRow with AngularJS. Instead, you should use ng-repeat with an array that has an object for every row, and just push objects when you want to insert a row.
$scope.insertRow = function(){
$scope.tdList.push({});//push whatever you want
}
If you want the number of cells to be variable, you can store some param in this object to tell the view how many cells the row has, and put a nested ng-repeat inside to create the cells