Nested JSON structure usage with PrimeNG DataTable

PrimeNG DataTable is the most popular and complex component with it’s vast features. In real-time applications, we will use HTTP module to retrieve the data from remote data sources. Most of the time we will imagine that the result JSON structure would be interpreted as flatten type.

For example, the list of browser model object’s JSON structure would be written as follows,

Then we will directly use the JSON key values as dataTable field attributes as below,

Immediately, the question araises is do we need to design our JSON structure in a single flatten level? It is not always possible to design our datasources with flatten structure. Or Do we need to use TreeTable component? Those workarounds are not required at all.In this case you can just use dot(.) notation for child field access (for example, field=”environment.engine”).

Let us take  the same data but with nested structure as below

The PrimeNG dataTable column’s need be defined with field attributes in a chain access. Now the dataTable component will work the same way with all of it’s features as below.

Finally, you can view the awesome dataTable component with all of it’s features as below

Hence, we can use both flatten or nested JSON structure to work with PrimeNG DataTable component. The Github project is available here

Leave a Reply

Your email address will not be published. Required fields are marked *