title: Bootstrap tables - how to access inner elements in the data source object
body: <p>Let's say my data source object looks something like this:</p>
  
  <pre><code>[{
     "id": 123,
     "name": "blabla1",
     "kids": {
        "id": "kid1",
        "name": "kk1"
     }
  },{
     "id": 456,
     "name": "blabla2",
     "kids": {
        "id": "kid2",
        "name": "kk2"
     }
  }]
  </code></pre>
  
  <p>This is a list (array) containing 2 objects, with the "kids" key in each, holding an inner object with keys and so on.</p>
  
  <p>When working with Bootstrap Tables, each column is connected to a key in the source object, for example:</p>
  
  <pre><code>&lt;th data-field="id"&gt;ID&lt;/th&gt;
  </code></pre>
  
  <p>The question here is how can I define a column to be connected to an inner key in the source object??</p>
  
  <p>I've tried the following thing (suited for the example data above):</p>
  
  <pre><code>&lt;th data-field="kids.id"&gt;Inner ID&lt;/th&gt;
  </code></pre>
  
  <p>And it doesn't work. :(</p>
  
  <p>P.S:</p>
  
  <p>I know that I can format each column's data by implementing the designated "data-formatter" attribute, but I prefer to find a more direct and faster way to accomplish what I need in this case.</p>