Angular: Creating CRUD editable table with custom html

Question

Im trying to create an editable table who support the CRUD operations while for editing/delete/create i'll open a pop up dialog to effect these operations. What's important to me is:

I'd like to fully customize the table and it's rows (HTML & CSS)
I want to implement a dialogs functionality that can be used for CRUD operations

Right now i have some mixed solution (i used ng-grid for modals which allows me to control the dialogs html but the table itself can't really be changed as i see it).

Anyway it just limits me and i'd be happy if anyone who is experienced with that could describe me an idea of how such requirement should be implemented and in what libraries i should be using?

[hope this answers](https://stackoverflow.com/a/72910531/148271) — IsmailS, Jul 08 '22 at 11:12

score 0 · Answer 1 · edited May 23 '17 at 12:05

0

I would advice you to "keep it simple stupid" for starters. Repeating a few trs and tds and letting angular keep your model in sync with the table is quite simple.

This question is very similar (the accepted answer has a base dependency setup suggestion):

Best way to represent a Grid or Table in AngularJS with Bootstrap 3?

edited May 23 '17 at 12:05

Community

1
1

answered Oct 23 '14 at 20:51

marko

2,841
31
37

Hmm i do get your point but i still need to fulfill this requirement (editing in modal, while having customized table). Why this complexity exists over Angular? it doesn't make any sense to me. edit: i checked the link u attachted, it basiclly shows mostly simple tables/ng-grid/ng-Table which i already checked. – Popokoko Oct 23 '14 at 21:08

score 0 · Answer 2 · answered Aug 30 '18 at 20:57

Found a flexible way to do it using

window.addEventListener('keyup', (event) => {
  const el = event.srcElement as HTMLElement;
  if (el.contentEditable) {
    const id = el.id;
    console.log('Value Changed!', el.innerText);
    this.workingApprovalForm[id] = el.innerText;
  }
});

This will take any div inside your custom table that is "contentEditable" and assign value to an object. From there you can save it to your API or database.

Angular: Creating CRUD editable table with custom html

2 Answers2