I'm trying to make a table that can be sorted, in AngularJS with ui-grid. The html code is this:
<div class="ui-grid" ui-grid="$ctrl.gridOptions" ui-grid-pagination ui-grid-resize-columns ui-grid-auto-resize></div>
In the js, the data that I want to show in the table is in this array:
vm.lista = [
{
"fd_ini": "01/01/18",
"fd_fin": "01/01/19",
"ds_tipo": "TURISMO",
"in_tipo": "2,10",
"anyo": 2018
},
{
"fd_ini": "02/01/18",
"fd_fin": "02/01/19",
"ds_tipo": "TURISMO",
"in_tipo": "2,20",
"anyo": 2018
},
{
"fd_ini": "03/01/18",
"fd_fin": "03/01/19",
"ds_tipo": "TURISMO",
"in_tipo": "3,10",
"anyo": 2018
},
{
"fd_ini": "03/01/18",
"fd_fin": "03/01/19",
"ds_tipo": "TURISMO",
"in_tipo": "3,10",
"anyo": 2017
},
{
"fd_ini": "02/01/18",
"fd_fin": "03/01/19",
"ds_tipo": "TURISMO",
"in_tipo": "3,10",
"anyo": 2018
},
];
And to be able to do the ui-grid and order it:
vm.gridOptions = {
enableSorting: true,
columnDefs: [
{field: 'fd_ini', displayName: 'FD_INI', cellTooltip: function(row){return row.entity.fd_ini}},
{field: 'fd_fin', displayName: 'FD_FIN', cellTooltip: function(row){return row.entity.fd_fin}},
{field: 'ds_tipo', displayName: 'DS_TIPO', cellTooltip: function(row){return row.entity.ds_tipo}},
{field: 'in_tipo', displayName: 'IN_TIPO', cellTooltip: function(row){return row.entity.in_tipo}},
{field: 'anyo', displayName: 'ANO', cellTooltip: function(row){return row.entity.anyo}}
],
onRegisterApi: function( gridApi ) {
vm.gridApi = gridApi;
//gridApi = gridApi.core.resfresh;
//console.log(gridApi);
}
}
vm.gridOptions.data = vm.lista.data;
And I do not paint any data or any column. I do not know much about angular and maybe the answer is very obvious for some, I hope you can help me, thank you very much!