title: How to display the column headers dynamically in jquery data table
body: <p>I have the below code for displaying array of objects having property and a value in a data table. But here the column headers are hardcoded as seen in my below html code. How can I make it dynamic based on the input dataset? </p>
  
  <pre><code> var dataSet = [{
    "Latitude": 18.00,
    "Longitude": 23.00,
    "Name": "Pune"
  }, {
    "Latitude": 14.00,
    "Longitude": 24.00,
    "Name": "Mumbai"
  }, {
    "Latitude": 34.004654,
    "Longitude": -4.005465,
    "Name": "Delhi"
  },{
    "Latitude": 23.004564,
    "Longitude": 23.007897,
    "Name": "Jaipur"
  }];
  $(document).ready(function() {
      $('#example').DataTable( {
          data: dataSet,
          "columns": [
              { "data": "Name" ,"title":"Custom Name"},
              { "data": "Latitude" },
              { "data": "Longitude" },
  
          ]
      } );
  } );
  
  
  
  
  &lt;table id="example" class="display" cellspacing="0" width="100%"&gt;
          &lt;thead&gt;
              &lt;tr&gt;
                  &lt;th&gt;Name&lt;/th&gt;
                  &lt;th&gt;Latitude&lt;/th&gt;
                  &lt;th&gt;Longitude&lt;/th&gt;
  
              &lt;/tr&gt;
          &lt;/thead&gt;
  
      &lt;/table&gt;
  </code></pre>