[Feature] td-data-table to handle column data for JSON nested objects

[bzmillerboy]

When using the <td-data-table [data]="data" [columns]="columns" > it's required you specify your column values as strings like:

  columns: ITdDataTableColumn[] = [
    { name: 'name', label: 'Name' },
    { name: 'dob', label: 'Date of Birth' },
    { name: 'age', label 'Age', numeric: true },
  ];

However, when your JSON is not flat and is structured with nested objects like:

  data: any[] = [
    {
      name: {
        firstName: "Jane",
        lastName: "Doe"
      },
      dob: "10/20/1982",
      age: "34",
    }
  ]

This array of columns does not work.

The work around to this would be to use the atomic parts of the <td-data-table> and define this in your template with {{ name.first}} {{ name.last }}. However, it would be great if the component property could handle nested objects.

Issue raised by @kmiyatake in the gitter chat room.

[jeremysmartt]

I think the best way to handle this is to have a flag on the column to indicate that you want to use a nested json object. If we allow this:

columns: ITdDataTableColumn[] = [
    { name: 'name.firstname', label: 'First Name' },
    { name: 'dob', label: 'Date of Birth' },
    { name: 'age', label 'Age', numeric: true },
  ];

we wouldn't know by the string 'name.firstname', do they want the object attribute name.firstname or the actual string value "name.firstname".

Having a flag like:

columns: ITdDataTableColumn[] = [
   { name: 'name.firstname', label: 'First Name', nested: true|false },
   { name: 'dob', label: 'Date of Birth' },
   { name: 'age', label 'Age', numeric: true },
 ];

Will allow us to distinguish between these two cases. Also the nested flag should be an optional parameter and by default would be true, as probably most cases would expect name.firstname to mean the object.