How to display array data in typescript with Kendo Grid

I have to display data who contain a array of data, using Kendo Grid with Angular(5.2) and TypeScript.

I tried many exemples of the kendo website. But my big concern is that i can have 3 to 99 columns to show.

import {
  Component
} from '@angular/core';
@Component({
  selector: 'test',
  templateUrl: './test.html',
  styleUrls: ['./validation.component.css']
})
export class testComponent {
  private rowData: any[] = [{
      dateHeureCapture: '2018/01/01',
      data: [{
        id: 'asd23dwer234',
        todisplay: 'A'
      }, {
        id: 'vbhkfb8045',
        todisplay: 'B'
      }]
    },
    {
      dateHeureCapture: '2018/01/02',
      data: [{
        id: 'asd23dwer234',
        todisplay: 'A'
      }, {
        id: 'vbhkfb8045',
        todisplay: 'B'
      }]
    },
    {
      dateHeureCapture: '2018/01/03',
      data: [{
        id: 'asd23dwer234',
        todisplay: 'A'
      }, {
        id: 'vbhkfb8045',
        todisplay: 'B'
      }]
    },
    {
      dateHeureCapture: '2018/01/04',
      data: [{
        id: 'asd23dwer234',
        todisplay: 'A'
      }, {
        id: 'vbhkfb8045',
        todisplay: 'B'
      }]
    },
    {
      dateHeureCapture: '2018/01/05',
      data: [{
        id: 'asd23dwer234',
        todisplay: 'A'
      }, {
        id: 'vbhkfb8045',
        todisplay: 'B'
      }]
    }
  ];
  private columns: any[] = [{
      field: 'dateHeureCapture',
      title: 'Horodatage',
      type: 'text'
    },
    {
      field: 'data[0].todisplay',
      title: '0',
      type: 'text'
    },
    {
      field: 'data[1].todisplay',
      title: '1',
      type: 'text'
    }
  ];
}

HTML:

<kendo-grid[data]='rowData' [scrollable]='scrollable' style='height: 200px'>
  <kendo-grid - column * ngFor='let column of columns' field='{{column.field}}' title='{{column.title}}' format='{{column.format}}' filter='{{column.type}}'> </kendo-grid-column>
    < /kendo-grid>

Did someone have a idea of solution?