Dynamic and complex list in a WebApplication

I'm writing a WebApplication in Node.js/Express, Html5 and Bootstrap. In several pages I need to show a list, where each row contains different controls in function of a json model.

Let's see an example:

[
  {
    "type": "label",
    "name": "id"
  },
  {
    "type": "textbox",
    "name": "Name"
  },
  {
    "type": "checkbox",
    "name": "Enabled"
  },
  {
    "type": "numeric",
    "name": "Delay"
  }
]

This would create a list with four column with "id", "Name", "Enabled" and "Delay" as headers' names. Then I have another json with the acutal values (rows) i.e.:

[
  [
    {
      "value": "1"
    },
    {
      "value": "First"
    },
    {
      "value: true
    },
    {
      "value": 10.5
    }
  ],
  [
    {
      "value": "2"
    },
    {
      "value": "Second"
    },
    {
      "value": false
    },
    {
      "value": 0
    }
  ]
]

This would produce something like this:

id        Name       Enabled        Delay
1         First      [x]            10.5
2         Second     [ ]            0

I want the correct input type to allow the user to edit the values: i.e. span, text, checkbox, number, etc... I want this to be created server-side to avoid too much js code in the client. Of course in this example I shown only a "value" field. But using boostrap components I would pass also the classes to control the appearance.

I also need functions to add, remove and move rows.

I'm able to do all this stuff by hand - but it takes quite a lot of time. The question is if there is a more convenient way to achieve this or if there are some ready-to-use components.

Because I don't know the proper name of such a control my searches didn't produce valuable results.

via Mark