How to add an input field per each row in a table?

[klim]

I would like to display a table and have the ability to give the data a category via an input field. So each row would have its own input field for the user to enter a value into it. For example the data could be something like this where the category column is the input field. I want to put the brand of the car in the category field and save it to a lookup table. 

|Car|Category|

|Prius | Toyota|

|Mustang | Ford |

[kamlesh_vaghela]

@klim 

Can you please try this?

XML:

<dashboard script="a.js">
  <label>Car Lookup Edit</label>
  <row>
    <panel>
      <table id="tbl_1">
        <search id="srch_1">
          <query>| inputlookup car.csv | table Id Car Category | fillnull value="" Category | eval Category=Id."|".Category</query>
          <earliest>-24h@h</earliest>
          <latest>now</latest>
          <sampleRatio>1</sampleRatio>
        </search>
        <option name="count">100</option>
        <option name="dataOverlayMode">none</option>
        <option name="drilldown">none</option>
        <option name="percentagesRow">false</option>
        <option name="refresh.display">progressbar</option>
        <option name="rowNumbers">false</option>
        <option name="totalsRow">false</option>
        <option name="wrap">true</option>
      </table>
    </panel>
  </row>
</dashboard>

a.js

require([
    'underscore',
    'jquery',
    'splunkjs/mvc',
    'splunkjs/mvc/tableview',
    'splunkjs/mvc/searchmanager',
    'splunkjs/mvc/simplexml/ready!'
], function(_, $, mvc, TableView, SearchManager) {
    var tokens = mvc.Components.getInstance("submitted");

    var detailSearch = new SearchManager({
        preview: true,
        cache: false,
        search: '| inputlookup car.csv | table Id Car Category | eval Category=if(Id="$tkn_id$","$tkn_category$",Category) | outputlookup car.csv'
    }, { tokens: true, tokenNamespace: "submitted" });
    detailSearch.on('search:done', function(properties) {
        $("#div_" + tokens.get('tkn_id')).html("");
    });
    detailSearch.on('search:start', function(properties) {
        $("#div_" + tokens.get('tkn_id')).html("Saving...");
    });

    var CustomRangeRenderer = TableView.BaseCellRenderer.extend({
        canRender: function(cell) {
            return _(['Category']).contains(cell.field);
        },
        render: function($td, cell) {
            var id = cell.value.split("|")[0];
            var category = cell.value.split("|")[1];
            $td.append(
                $('<input>').attr({
                    type: 'text',
                    value: category,
                }).on('change', function() {
                    console.log(id);
                    // Action goes here.
                    tokens.set('tkn_id', id);
                    tokens.set('tkn_category', this.value);
                    console.log(this.value);
                })
            )
            $td.append($('<div id="div_' + id + '">'));
        }
    });
    var sh = mvc.Components.get("tbl_1");
    if (typeof(sh) != "undefined") {
        sh.getVisualization(function(tableView) {
            // Add custom cell renderer and force re-render
            tableView.table.addCellRenderer(new CustomRangeRenderer());
            tableView.table.render();
        });
    }
});

car.csv

Id,Car,Category
1,Prius,
2,Mustang,

KV