I recently created a bootstrap table which looks like this:
https://i.sstatic.net/tNg2T.png
Below is the HTML code for the table:
<div class="card card">
<div class="header">
<div class="typo-line">
<h4>Suivi des approbations</h4>
</div>
<!-- <h4 class="title">Table on Plain Background</h4> -->
<!-- <p class="category">Here is a subtitle for this table</p> -->
</div>
<div class="content table-responsive table-full-width">
<table class="table table-hover">
<thead>
<tr>
<th *ngFor="let cell of tableData2.headerRow">{{ cell }}</th>
</tr>
</thead>
<tbody>
<tr *ngFor="let row of tableData2.dataRows">
<td *ngFor="let cell of row">{{ cell }}</td>
</tr>
</tbody>
</table>
</div>
</div>
And here's the TypeScript code relevant to it:
ngOnInit(){
this.tableData2 = {
headerRow: [ 'Version', 'Approbateur(nom+fonction)', 'Principales remarques', 'Date d\'approbation'],
dataRows: [
['', '', '', ''],
['', '', '', ''],
['', '', '', ''],
['', '', '', ''],
['', '', '', ''],
['', '', '', ''],
['', '', '', ''],
]
};
The current table rows are not editable. I have two questions:
1/ Why can't users edit the rows?
2/ How can I make them editable? Do I need to implement forms?
Thank you!