<commit_before>---

permalink: /table-components/o-table-renderers.component/
title: "Column renderers"
---


<h2 id="overview">Overview</h2>
In this section we are specifing how to render a cell content of the column.

<aside class="sidebar__right">
  <nav class="toc">
      <header><h4 class="nav__title"><i class="fa fa-file-text"></i> On This Page</h4></header>
      <ul class="toc__menu" id="markdown-toc">
        <li><a href="#overview" id="markdown-toc-overview">Overview</a></li>
        <li><a href="#default-renderers" >Default renderers</a></li>
        <li><a href="#custom-renderers" >Custom renderers.</a></li>
    </ul>
  </nav>
</aside>

By default, the table will place the values of your data into the cell as simple strings. If you want something other than simple strings, then you use a cell renderer. So for rendering your values, you have the following four options.

**1.** Do nothing, simple strings get used to display the table.

**2.** Use one of cell renderer predefined. The predefined types are *boolean*, *real*, *currency*, *date*, *image*, *percentage* and *string*. If a column haven't type will be *string*. you can find all information [here]({{ base_path }}/docs/table-components/o-table-renderers.component/#default-renderers).

**3.** Use equivalente code.

**4.** Custom renderer. Below is an example but you can find all information [here]({{ base_path }}/docs/table-components/o-table-renderers.component/#custom-renderers).


For example:

```html
// 1.Do nothing, simple strings get used to display the table
<o-table-column attr="PHOTO" > </o-table-column>

// 2. Use one of cell renderer predefined
<o-table-column attr="PHOTO" orderable="no" searchable="no" type="image"
  image-type="base64" empty-image="assets/images/no-image.png" avatar="yes">
</o-table-column>

// 3. Use equivalente code
<o-table-column attr="PHOTO" orderable="no" searchable="no">
  <o-table-cell-renderer-image image-type="base64"
    empty-image="assets/images/no-image.png" avatar="yes">
  </o-table-cell-renderer-image>
</o-table-column>

// 4. Custom renderer.
<o-table-column attr="NAME" orderable="no" searchable="no">
  <o-table-cell-renderer-name></o-table-cell-renderer-name>
</o-table-column>
```


## Default renderers

{% assign filenameArray = "" | split:"|"  %}
{% for renderers_hash in site.data.components.otableData.renderers %}
  {% assign filenameArray = filenameArray | push: renderers_hash[0] %}
{% endfor %}
{% assign filenameArray = filenameArray | sort %}


{% for filename in filenameArray %}

  {% assign dataFile = site.data.components.otableData.renderers[filename] %}
  {% capture dataFileCapture %}
    {% include o-component-single.md compFile=dataFile  %}
  {% endcapture %}
  <div class="o-compFile-div">
    <h2 class="">{{ dataFile.title }}</h2>
    {{ dataFileCapture | replace: '    ', '' | markdownify }}
  </div>
{% endfor %}

## Custom renderers

To create a custom render, you need to create a new component to display custom renderer information and place this render in the content of cell.

Here's how you might begin in your file .ts:

- Your component must extends ```OBaseTableCellRenderer```
- Also add a line ``` @ViewChild('templateref', { read: TemplateRef }) public templateref: TemplateRef<any> ```  you'll acquire the <ng-template> contents with a TemplateRef and access the view container.
- In constructor you must add 
``` 
constructor(protected injector: Injector) {
    super(injector);
    this.initialize(); 
}
```

The following example show how render two values of column in a cell, "SURNAME, name". 

The o-table-cell-renderer-name.ts file is as follows:

```

import { Component, Injector, ViewChild, TemplateRef } from '@angular/core';
import { OBaseTableCellRenderer } from 'ontimize-web-ngx';


@Component({
    selector: 'custom-render',
    templateUrl: './custom-render.component.html'
})

export class OTableCellRendererName extends OBaseTableCellRenderer {

    @ViewChild('templateref', { read: TemplateRef }) public templateref: TemplateRef<any>;

    constructor(protected injector: Injector) {

        super(injector);
        this.initialize(); 
    }

}
```

Here's how you might begin in your file .html:

- Your component must start ```<ng-template #templateref let-cellvalue="cellvalue" let-rowvalue="rowvalue">``` and end ```</ng-template>```.
The *let* keyword declares a template input variable that you reference within the template. The input variables are *cellvalue* and *rowvalue*. The parser translates let cellvalue and let rowvalue into variables named, *let-cellvalue* and *let-rowvalue*.


The o-table-cell-renderer-name.html file is as follows:

```
<ng-template #templateref let-cellvalue="cellvalue" let-rowvalue="rowvalue">
    {{ "{{ " }} rowvalue['SURNAME'] | uppercase {{ "}}" }} ,  {{ "{{ " }} rowvalue['NAME'] {{ "}}" }}
</ng-template>

```
<commit_msg>updating table renderers<commit_after>---

permalink: /table-components/o-table-renderers.component/
title: "Column renderers"
---


<h2 id="overview">Overview</h2>
In this section we are specifing how to render a cell content of the column.

<aside class="sidebar__right">
  <nav class="toc">
      <header><h4 class="nav__title"><i class="fa fa-file-text"></i> On This Page</h4></header>
      <ul class="toc__menu" id="markdown-toc">
        <li><a href="#overview" id="markdown-toc-overview">Overview</a></li>
        <li><a href="#default-renderers" >Default renderers</a></li>
        <li><a href="#custom-renderers" >Custom renderers.</a></li>
    </ul>
  </nav>
</aside>

By default, the table will place the values of your data into the cell as simple strings. If you want something other than simple strings, then you use a cell renderer. So for rendering your values, you have the following four options.

**1.** Do nothing, simple strings get used to display the table.

**2.** Use one of cell renderer predefined. The predefined types are *boolean*, *real*, *currency*, *date*, *image*, *percentage* and *string*. If a column haven't type will be *string*. you can find all information [here]({{ base_path }}/docs/table-components/o-table-renderers.component/#default-renderers).

**3.** Use equivalente code.

**4.** Custom renderer. Below is an example but you can find all information [here]({{ base_path }}/docs/table-components/o-table-renderers.component/#custom-renderers).


For example:

```html
// 1.Do nothing, simple strings get used to display the table
<o-table-column attr="PHOTO" > </o-table-column>

// 2. Use one of cell renderer predefined
<o-table-column attr="PHOTO" orderable="no" searchable="no" type="image"
  image-type="base64" empty-image="assets/images/no-image.png" avatar="yes">
</o-table-column>

// 3. Use equivalente code
<o-table-column attr="PHOTO" orderable="no" searchable="no">
  <o-table-cell-renderer-image image-type="base64"
    empty-image="assets/images/no-image.png" avatar="yes">
  </o-table-cell-renderer-image>
</o-table-column>

// 4. Custom renderer.
<o-table-column attr="NAME" orderable="no" searchable="no">
  <o-table-cell-renderer-name></o-table-cell-renderer-name>
</o-table-column>
```


## Default renderers

{% assign filenameArray = "" | split:"|"  %}
{% for renderers_hash in site.data.components.otableData.renderers %}
  {% assign filenameArray = filenameArray | push: renderers_hash[0] %}
{% endfor %}
{% assign filenameArray = filenameArray | sort %}


{% for filename in filenameArray %}

  {% assign dataFile = site.data.components.otableData.renderers[filename] %}
  {% capture dataFileCapture %}
    {% include o-component-single.md compFile=dataFile  %}
  {% endcapture %}
  <div class="o-compFile-div">
    <h2 class="">{{ dataFile.title }}</h2>
    {{ dataFileCapture | replace: '    ', '' | markdownify }}
  </div>
{% endfor %}

## Custom renderers

To create a custom render, you need to create a new component to display custom renderer information and place this render in the content of cell.

Here's how you might begin in your file .ts:

- Your component must extends ```OBaseTableCellRenderer```
- Also add a line ``` @ViewChild('templateref', { read: TemplateRef }) public templateref: TemplateRef<any> ```  you'll acquire the <ng-template> contents with a TemplateRef and access the view container.
- In constructor you must add 
``` 
constructor(protected injector: Injector) {
    super(injector);
    this.initialize(); 
}
```

The following example show how render two values of column in a cell, "SURNAME, name". 

The o-table-cell-renderer-name.ts file is as follows:

```

import { Component, Injector, ViewChild, TemplateRef } from '@angular/core';
import { OBaseTableCellRenderer } from 'ontimize-web-ngx';


@Component({
    selector: 'custom-render',
    templateUrl: './custom-render.component.html'
})

export class OTableCellRendererName extends OBaseTableCellRenderer {

    @ViewChild('templateref', { read: TemplateRef }) public templateref: TemplateRef<any>;

    constructor(protected injector: Injector) {

        super(injector);
        this.initialize(); 
    }

}
```

Here's how you might begin in your file .html:

- Your component must start ```<ng-template #templateref let-cellvalue="cellvalue" let-rowvalue="rowvalue">``` and end ```</ng-template>```.
The *let* keyword declares a template input variable that you reference within the template. The input variables are *cellvalue* and *rowvalue*. The parser translates let cellvalue and let rowvalue into variables named, *let-cellvalue* and *let-rowvalue*.


The o-table-cell-renderer-name.html file is as follows:

```
<ng-template #templateref let-cellvalue="cellvalue" let-rowvalue="rowvalue">
    {{ "{{ " }} rowvalue['SURNAME'] | uppercase {{ "}}" }} ,  {{ "{{ " }} rowvalue['NAME'] {{ "}}" }}
</ng-template>

```


Finally, add the component *OTableCellRendererName* to your module.


{'fraction_non_alphanumeric': 0.14961429151441333, 'fraction_numerical': 0.003857084855866829, 'mean_word_length': 4.317323259579061, 'pattern_counts': {'":': 0, '<': 101, '<?xml version=': 0, '>': 101, 'https://': 0, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '2483939', 'n_tokens_mistral': 3140, 'n_tokens_neox': 2983, 'n_words': 918}