\n```\n\n```ts\nimport { Component, OnInit, TemplateRef, ViewChild } from '@angular/core';\nimport { PageEvent } from '@angular/material/paginator';\nimport { Sort } from '@angular/material/sort';\nimport { Tablo, TabloColumns } from '@notiz/ngx-tablo';\nimport { CustomDataSource } from '../custom-data-source';\nimport { PeriodicElement, customerData, Customer } from '../example.data';\n\n@Component({\n selector: 'niz-home',\n standalone: true,\n imports: [Tablo],\n template: `\n \n \n Search\n search \n \n \n\n \n\n \n\n \n \n {{ row.symbol }}\n \n \n
\n\n Users
\n \n `,\n styles: [],\n})\nexport class HomeComponent implements OnInit {\n @ViewChild('test', { static: true }) test!: TemplateRef;\n\n search = '';\n\n dataSource!: CustomDataSource;\n\n columnsConfig: TabloColumns = [\n {\n columnName: 'position',\n header: 'No.',\n sort: true,\n },\n {\n columnName: 'name',\n header: 'Name',\n cell: (element) => element.name,\n },\n {\n columnName: 'weight',\n header: 'Weight',\n cell: (element) => element.weight,\n format: {\n currency: 'EUR',\n },\n },\n {\n columnName: 'symbol',\n header: 'Symbol',\n cell: (element) => element.symbol,\n lifecycle: {\n onInit: (column) => (column!.cellTemplate = this.test),\n },\n },\n {\n columnName: 'discoveredAt',\n header: 'Discovered',\n format: { date: 'dd.MM.yyyy' },\n },\n { columnName: 'meta.radioactive', header: 'Radioactive' },\n ];\n\n rowClick(row: PeriodicElement) {\n console.log(row);\n }\n\n sortChange(sort: Sort) {\n console.log('sortChange', sort);\n }\n\n pageChange(page: PageEvent) {\n console.log('pageChange', page);\n }\n\n customFilter(data: PeriodicElement, filter: string): boolean {\n return data.name.toLowerCase().includes(filter.toLowerCase());\n }\n}\n```\n\n## Display Cell Content\n\n### Default Content\n\nThe default content will be the data property value based on the `columnName` -> `row[columnName]`.\n\n```ts\nimport { Component } from '@angular/core';\nimport { Tablo, TabloColumns } from '@notiz/ngx-tablo';\n\n@Component({\n selector: 'niz-default',\n standalone: true,\n imports: [Tablo],\n template: ` `,\n styles: [],\n})\nexport class DefaultComponent {\n data = [\n {\n name: 'Tom Cook',\n },\n ];\n\n columns: TabloColumns = [\n {\n header: 'Name',\n columnName: 'name',\n },\n ];\n}\n```\n\nIn this [example](./src/app/examples/default/default.component.ts) the column displays the data value `name` for each row. If the `columnName` doesn't match a property in the data the cell remains empty.\n\n### Nested Content\n\nThe above example works only if the property is a primitive value. What if your data contains nested objects? How to access a property inside an object?\n\n```ts\nimport { Component } from '@angular/core';\nimport { Tablo, TabloColumns } from '@notiz/ngx-tablo';\n\n@Component({\n selector: 'niz-nested',\n standalone: true,\n imports: [Tablo],\n template: ` `,\n styles: [],\n})\nexport class NestedComponent {\n data = [\n {\n name: 'Tom Cook',\n address: {\n street: 'Onion Park',\n },\n },\n ];\n\n columns: TabloColumns = [\n {\n header: 'Name',\n columnName: 'name',\n },\n { header: 'Street', columnName: 'address.street' },\n ];\n}\n```\n\nIn this [example](./src/app/examples/nested/nested.component.ts) the data contains an `address` object.\nDisplay the street in the cell by adding the object name followed with a dot to the `columnName`.\n","readmeFilename":"README.md"}