table in Angular using dynamic table headers

Question

I was creating an angular app to display data from various data sources. I configured the list of various data sources in a JSON file each data source has a set of values attached to it. Here is an example

var configurableConfigurations=[
   {
       name:"Locations",
       table:"location_set",
       columnList:[
          {
              name:"LOCATION_NAME",
              alias:"Location",
              primary:true
          },
          {
              name:"DESCRIPTION",
              alias:"Description",
              primary:false
          } 
       ]
   },
   {
       name:"System Parameters",
       table:"system_params",
       columnList:[
                  {
                      name:"param_Key",
                      alias:"Parameter",
                      primary:true
                  },
                  {
                      name:"param_Value",
                      alias:"Value",
                      primary:false
                  } 
       ]
   }
];

I then created an HTML page to display this using angular : the page has 2 parts 1. A select box which shows various parameters this is done using ng-repeat <select name="ConfigurationName" ng-model="selected" ng-options="eachConfiguration.name for eachConfiguration in configurableConfigurations" ng-change="fetchRequiredConfiguration()">

A table which I want to generate using the headers of the parameter selected this is my code to do that

<table id="configtable">
<thead>
    <tr>                
        <th class="col-md-1" ng-repeat="column in selected.columnList" >{{column.alias}}</th>                   
    </tr>
</thead>

This works great for the first time. But when the option is selected again using the select box the table header is not shown.

The table data is being populated properly , its just the table headers that are getting messed up.

Could anyone please help me get around this problem. I am new to angularjs. May be I am missing something important.

Edit :: I should Also Mention that I fetch the data from the API and then was using the Data table plugin(https://www.datatables.net/download/) to show this as Data

    $("#configtable").DataTable({
        "ajax": "../fetchvalue/config/"+this.selected.table,
        destroy: true,
        "columns":{ "data": "ColumnXXX"},
         {"data": "ColumnYYY" }
    });

As it turns out, I have a problem with the disappearing headers only when I use the DataTable

hello, where you able to solve the above issue ?

Aless Hosry
– Aless Hosry

2020-11-27 09:49:51 +00:00
Commented Nov 27, 2020 at 9:49 — Aless Hosry
– Aless Hosry, Commented Nov 27, 2020 at 9:49

puemos · Accepted Answer · 2016-01-14 11:46:22Z

0

I don't know how the table data is store but this way is good:

$scope.configurableConfigurations = [{
    name: "Locations",
    table: "location_set",
    columnList: [{
      name: "LOCATION_NAME",
      alias: "Location",
      primary: true
    }, {
      name: "DESCRIPTION",
      alias: "Description",
      primary: false
    }],
    data:[[12,"home"],[43,"work"]]
  }, {
    name: "System Parameters",
    table: "system_params",
    columnList: [{
      name: "param_Key",
      alias: "Parameter",
      primary: true
    }, {
      name: "param_Value",
      alias: "Value",
      primary: false
    }],
    data:[["GOO",586],["FOO",123]]
  }];

And then you can print the table like this:

<select name="ConfigurationName" ng-model="selected" ng-options="eachConfiguration as  eachConfiguration.name for eachConfiguration in configurableConfigurations" ng-change="fetchRequiredConfiguration()"></select>
    <table id="configtable">
      <thead>
        <tr>
          <th class="col-md-1" ng-repeat="column in selected.columnList">{{column.alias}}</th>
        </tr>
      </thead>
      <tbody>
        <tr ng-repeat="row in selected.data" >
          <td class="col-md-1" ng-repeat="col in row">{{col}}</td>
        </tr>
      </tbody>
    </table>

Example here

edited Jan 14, 2016 at 11:46

answered Jan 14, 2016 at 11:38

puemos

1,20910 silver badges12 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

chunks03 Over a year ago

Thanks for the reply, I missed out a part in the question(turns out to be crucial after debugging) The headers are only lost when I use Data tables. I have edited the Question.

Collectives™ on Stack Overflow

table in Angular using dynamic table headers

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related