Return model to angular, but do not show all fields in dynamic table

I have some ViewModels that I get from API, and those models should be shown in dynamic table in Angular.For example CountryTableViewModel:

 public class CountryTableViewModel : IMapFrom<Country>
{
    public int ID { get; set; }
    public string CreatedBy {get;set;}
    public string Name { get; set; }
    public bool Active { get; set; }
}

After applying filters, response model looks like:

   {
    "pageNumber": 1,
    "pageSize": 10,
    "totalPages": 1,
    "totalRecords": 3,
    "succeeded": true,
    "data": [
        {
            "createdBy": "Admin",
            "id": 1,
            "name": "England",
            "active": true
        },
        {
            "createdBy": "Admin",
            "id": 6,
            "name": "Italy",
            "active": true
        },
        {
            "createdBy": "Operator",
            "id": 4,
            "name": "France",
            "active": true
        }
    ],
    "errors": ""
}

Now, I want to make dynamic table in Angular, but problem is that I do not want to show all fields in table. In this example, ID should not be shown in table, but I still need it, so when administrator click on some row, it can edit it, and I use this ID to identify exact row.
Now, all my tables have same situation with ID, and I could make filtering in Angular, where if key is ID skip that field.
But, in future there could be more fields that I need to send to Angular, and that they should not be shown in table.

I thought about two solutions, one is to make one more List in response, with names of fields that should be skipped, for example:

  {
"pageNumber": 1,
"pageSize": 10,
"totalPages": 1,
"totalRecords": 3,
"succeeded": true,
"data": [
    ...
],
"errors": "",
"fieldsForSkipping": [{"ID"}, {"CreatedBy"} ] 

}

and another solution is to make some TablePropertyClass with two properties, object Value and bool ShownInTable, and then map my view model so in the end I get this:

    {
   "pageNumber":1,
   "pageSize":10,
   "totalPages":1,
   "totalRecords":2,
   "succeeded":true,
   "data":[
      {
         "createdBy":{
            "value":"Admin",
            "ShownInTable":false
         },
         "id":{
            "value":1,
            "ShownInTable":false
         },
         "name":{
            "value":"England",
            "ShownInTable":true
         },
         "active":{
            "value":true,
            "ShownInTable":true
         }
      },
      {
         "createdBy":{
            "value":"Admin",
            "ShownInTable":false
         },
         "id":{
            "value":1,
            "ShownInTable":false
         },
         "name":{
            "value":"France",
            "ShownInTable":true
         },
         "active":{
            "value":true,
            "ShownInTable":true
         }
      }
   ],
   "errors":""
}

Second option seems better, as I can expand TablePropertyClass with third property HeaderName where I could use that to personalize headers in table without using data annotation, but I am still wondering is there some third, better option for sending model fields to frontend, but excluding them from dynamic table?

>Solution :

I’s up to your table. But the second way looks fine. For a dynamically table like yours, I would do the same.

Additionally you can write a function for the table to get the correct data like:

@Input() pureData: any;

getTableData(data: any, toHide: any) {
  //toHide = ['id']
  const result = [];
  for (let _data of data) {
    const objectToAdd = {};
    for (let _key in _data) {
      if (!toHide.includes(_key) {
        objectToAdd[_key] = _data[_key];
      }
    }
  result.push(objectToAdd);
  }

  return result;
}

And in your Table HTML

<table>
  <td *ngFor="let data of getTableData(pureData, ['id'])"></td>
</table>