Angularjs dynamic table add edit remove and more

How to modify and update data table row in angular js angularjs add edit delete example angularjs inline edit example angularjs editable table cell angularjs update table row angularjs edit example angularjs editable table example angularjs table edit row

Dynamic table rendering, edititing, adding/removing rows with angularjs, render any json script in tabular format with heading and contents. W will try to render dynamic table, add & remove rows, edit rows in table all by very simple coding, hardly two to five lines, don't allow to remove the first row and keep the add button always in the last row etc.

1. Angularjs Render any json array to tabular format

https://plnkr.co/edit/7PDLyRojcrFKqQkKBiFI?p=preview

Rendering any json array to tabular format is just to use ng-repeat trick, we will see this in this section.

We have four types of json array, books, colors, customers and products we will try to render them in tabular format.

Here is the hard coded json variables:

vm.books = [...]
vm.colors = [...]
vm.customers = [...]
vm.products = [...]

On page load we are going to use the default records into the vm.records variable, here is the rest of the code:

var vm = this;
vm.records = [];
vm.changeSource = function(source){
  vm.records = source;
}

vm.$onInit = function(){
  vm.changeSource(vm.books);
}

changeSource is a method to change the source of records, $onInit is used to initialize the default records. Nothing is new here let's see the trick used to render any dynamic json:

Table Header & Rows: we are going to use the first row to get the key value pairs to render the header columns

<thead>
  <tr>
    <th ng-repeat="(key, value) in vm.records[0]">{{key}}</th>
  </tr>
</thead>

Above code will render the complete headers, now let's try to render the table body rows and columns. First we will use ng-repeat to get the records by using key & value pair and then again we will use ng-repeat on value to key every value in a record and create TD for every single value, see this:

<tbody>
  <tr ng-repeat="(key, value) in vm.records">
    <td ng-repeat="(key, value) in value">
      {{value}}
    </td>
  </tr>
</tbody>

Here is the working exmple, click different buttons to render differnt table rows and columns with the same code.

2. Angularjs Add, Remove dynamic table row & inline editing

Let's say we have to create a dynamic rows in table to add or remove customer, while first row should not be deleted and add button will always be in the last row. In any other language it is bit complicated to play on the HTML but with JavaScript and Angularjs we can do it just by adding and removing the records into the list.

Let's say we have a list of records like this:

var vm = this;    
vm.records = [
  {name: 'John Smith', city:'Manhattan', state: 'NY'},
  {name: 'Maria Rodriguez', city:'Brooklyn', state: 'NY'},
  {name: 'Michael Garcia', city:'Queens', state: 'NY'}
  ]

Add the HTML to render these records by using table, row and ng-repeat

<table class="table table-bordered">
 <thead>
  <tr>
    <th>Name</th>
    <th>City</th>
    <th>State</th>
    <th>Action</th>
  </tr>
 </thead>
 <tbody>
  <tr ng-repeat="record in vm.records">
    <td>
      <input type="text" name="name"
        class="form-control"
        ng-model="record.name" />
    </td>
    <td><input type="text" name="city"
        class="form-control"
        ng-model="record.city" /></td>
    <td>
      <input type="text" name="state"
        class="form-control"
        ng-model="record.state" />
    </td>
    <td class="text-center">
        Action buttons
    </td>
  </tr>
 </tbody>
</table>

It's a simple table which renders with the help of ng-repeat, in every column we added one text box and bind by using ng-model and item.property.

For add/delete button we use font-awesome icon with bootstrap colors.

To not render the remove button in first row we use ng-if='!$first' and to add the add button only in last row we use ng-if='$last'

<i class="fa fa-times-circle fa-lg text-danger" 
    ng-if="!$first"
    ng-click="vm.remove($index)"
    title="Delete" aria-hidden="true"></i>

<i class="fa fa-plus-circle fa-lg text-success"
    ng-if="$last"
    ng-click="vm.add()"
    title="Add" aria-hidden="true"></i>

Add button have a method named add(), it simple add a blank object to the list, rest will be taken care by Angularjs

vm.add = function(){
  vm.records.push({name: '', city:'', state: ''});
}

Remove button also have a method named remove(index) which simply removing the item from list by index using JavaScript array splice method:

vm.remove = function(index){
  vm.records.splice(index, 1);
}

You can add the buttons and code for save, left it for your practice. If you want to add the validation in that case every control need to have unique name for that use name = "whatever_{{$index}}"

    3.
Ali Adravi Having 13+ years of experience in Microsoft Technologies (C#, ASP.Net, MVC and SQL Server). Worked with Metaoption LLC, for more than 9 years and still with the same company. Always ready to learn new technologies and tricks.
  • angularjs
  • dynamic-table
By Ali Adravi On 07 Oct, 17  Viewed: 604

Other blogs you may like

Angularjs powerful paging on table and searching with delay and demo

Paging on table is the basic requirement and most of us look for some grid so it can provide the complete feature of paging and sorting but in Angularjs it is so easy that anyone can achieve it by writing some code. I checked and found most of the available code give the paging feature in for 1 to... By Ali Adravi   On 14 Aug 2015  Viewed: 10,445

Angularjs Cascading Dropdown/Select with demo

Cascading dropdown with angularjs is easier than MVC and ASP.Net. In Angularjs ng-change is the best event to hook the function to get the second dropdown list items. In this article, we will try to fill the state dropdown on selection change of country and then fill the city dropdown on change... By Ali Adravi   On 06 Aug 2015  Viewed: 40,072

Angularjs CRUD with Web API, Entity Framework & Bootstrap modal popup part 2

Add/Edid Customer in Modal Popup --- In previous article we discussed how to search, delete and show detail of customer and contact list. In this article we will try to open the modal popup to add new customer and edit an existing customer record. I divided article in two parts because of the... By Ali Adravi   On 29 Jul 2015  Viewed: 15,206

Custom Directives in AngularJS with example and demo

Angularjs custom directives are the common to avoid the duplicate code, it is easy powerful and really nice. There are already too many directive have been created by experts but as a developer we need to write our own to achieve our specific goal. ng-model, ng-if, ng-show, ng-repeat all these are... By Ali Adravi   On 29 Jul 2015  Viewed: 3,094

Angularjs CRUD with Web API, Entity Framework & Bootstrap modal popup part 1

Search sort Insert update and delete are the basic features we need to learn first to learn any language, In this article we will try to create these features with Web API, bootstrap modal popup and ui.router. We will use enetity framework code first to save and retrieve data from database. We... By Ali Adravi   On 28 Jul 2015  Viewed: 26,274