Table editor

Angular Bootstrap 5 Table editor plugin

Table Editor is a useful tool for displaying and managing data. The component works similarly to the Datatable (docs) with an additional column for action buttons.

Responsive interactive built with the Bootstrap 5, Angular 11 and Material Design 2.0. Creates editable tables. Delete or edit rows directly or via modal editor.

Note: Examples use additional components such as Datatables, Modal, Alerts and Popconfirm. Remember to import them.


Basic example


Company Address Employees
Smith & Johnson Park Lane 2, London 30
P.J. Company Oak Street 7, Aberdeen 80
Food & Wine Netherhall Gardens 3, Hampstead 12
IT Service Warwick Road 14, London 17
A. Jonson Gallery Oaklands Avenue 2, London 4
F.A. Architects Frognal Way 7, Hampstead 4

Modal

Note: This example use Modal. Remember to import them.



Inputs example



Disable edit



Confirm delete

Note: This example use Popconfirm. Remember to import them.




Async data



Custom rows

M.B.

(5 Avenue 26, New York)

Berkley & Clark

(43th Street 12, New York)

D&D Inc.

(14 Street 67, New York)

Thomas & Co.

(2 Avenue 54, New York)



Notifications

Note: This example use Alerts Remember to import them.



Dark

Note: This example use Modal. Remember to import them.


Company Address Employees
Smith & Johnson Park Lane 2, London 30
P.J. Company Oak Street 7, Aberdeen 80
Food & Wine Netherhall Gardens 3, Hampstead 12
IT Service Warwick Road 14, London 17
A. Jonson Gallery Oaklands Avenue 2, London 4
F.A. Architects Frognal Way 7, Hampstead 4