alfresco-ng2-components/docs/data-column.component.md

DataColumn Component

Defines column properties for DataTable, Tasklist, Document List and other components.

• Basic Usage
  • Properties
• Details
  • Automatic column header translation
  • Custom tooltips
  • Column Template
  • Styling Techniques
    • Custom icons for selected rows
    • Hiding columns on small screens
• See also

Basic Usage

<adf-datatable [data]="data">
    <data-columns>
        <data-column key="icon" type="image" [sortable]="false"></data-column>
        <data-column key="id" title="Id"></data-column>
        <data-column key="createdOn" title="Created"></data-column>
        <data-column key="name" title="Name" class="full-width name-column"></data-column>
        <data-column key="createdBy.name" title="Created By"></data-column>
    </data-columns>
</adf-datatable>

Properties

Name	Type	Default	Description
key	string		Data source key, can be either column/property key like title or property path like createdBy.name
type	string	text	Value type for the column. Possible settings are 'text', 'image', 'date', 'fileSize' and 'location'.
format	string		Value format (if supported by components), for example format of the date
sortable	boolean	true	Toggles ability to sort by this column, for example by clicking the column header
title	string		Display title of the column, typically used for column headers. You can use the i18n resouce key to get it translated automatically.
template	TemplateRef		Custom column template
sr-title	string		Screen reader title, used for accessibility purposes
class	string		Additional CSS class to be applied to column (header and cells)
formatTooltip	Function		Custom tooltip formatter function.

Details

Automatic column header translation

You can use i18n resource keys with DataColumn title property. The component will automatically check the corresponding i18n resources and fetch corresponding value.

<data-column
    key="name"
    title="MY.RESOURCE.KEY">
</data-column>

This feature is optional. Regular text either plain or converted via the translate pipe will still be working as it was before.

Custom tooltips

You can create custom tooltips for the table cells by providing a formatTooltip property with a tooltip formatter function when declaring a data column.

<data-column
    title="Name"
    key="name"
    [formatTooltip]="getNodeNameTooltip"
    class="full-width ellipsis-cell">
</data-column>

And the code in this case will be similar to the following:

import { DataColumn, DataRow } from 'ng2-alfresco-datatable';

@Component({...})
export class MyComponent {
    ...

    getNodeNameTooltip(row: DataRow, col: DataColumn): string {
        if (row) {
            return row.getValue('name');
        }
        return null;
    }
}

To disable the tooltip your function can return null or an empty string.

Column Template

You can provide custom column/cell templates that may contain other Angular components or HTML elements:

Every cell in the DataTable component is bound to the dynamic data context containing the following properties:

Name	Type	Description
data	DataTableAdapter	Data adapter instance.
row	DataRow	Current data row instance.
col	DataColumn	Current data column instance.

You can use all three properties to gain full access to underlying data from within your custom templates. In order to wire HTML templates with the data context you will need defining a variable that is bound to $implicit like shown below:

<ng-template let-context="$implicit">
    <!-- template body -->
</ng-template>

The format of naming is let-VARIABLE_NAME="$implicit" where VARIABLE_NAME is the name of the variable you want to bind template data context to.

Getting a cell value from the underlying DataTableAdapter:

context.data.getValue(entry.row, entry.col);

You can retrieve all property values for underlying node, including nested properties (via property paths):

context.row.getValue('name')
context.row.getValue('createdByUser.displayName')

You may want using row api to get raw value access.

<data-column title="Name" key="name" sortable="true" class="full-width ellipsis-cell">
    <ng-template let-context="$implicit">
        <span>Hi! {{context.row.getValue('createdByUser.displayName')}}</span>
        <span>Hi! {{context.row.getValue('name')}}</span>
    </ng-template>
</data-column>

Use data api to get values with post-processing, like datetime/icon conversion._

In the Example below we will prepend Hi! to each file and folder name in the list:

<data-column title="Name" key="name" sortable="true" class="full-width ellipsis-cell">
    <ng-template let-entry="$implicit">
        <span>Hi! {{entry.data.getValue(entry.row, entry.col)}}</span>
    </ng-template>
</data-column>

In the Example below we will integrate the adf-tag-node-list component with the document list.

<data-column
    title="{{'DOCUMENT_LIST.COLUMNS.TAG' | translate}}"
    key="id"
    sortable="true"
    class="full-width ellipsis-cell">
    <ng-template let-entry="$implicit">
        <adf-tag-node-list  [nodeId]="entry.data.getValue(entry.row, entry.col)"></adf-tag-node-list>
    </ng-template>
</data-column>

Styling Techniques

You can add a custom CSS class to a column using its class property. This is useful for many purposes - some examples are given below.

Custom icons for selected rows

Custom styling can be used to change the look and feel of the icon for the selected rows.

Let's start by assigning an "image-table-cell" class to the thumbnail column:

<adf-document-list ...>
    <data-columns>
        
        <data-column
            key="$thumbnail"
            type="image"
            [sortable]="false"
            class="image-table-cell">
        </data-column>
        
        ...
    </data-columns>
</adf-document-list>

Now your application can define styles to change the content of the column based on conditions such as the selection state:

adf-document-list ::ng-deep adf-datatable tr.is-selected .image-table-cell {
    position: relative;
}

adf-document-list ::ng-deep adf-datatable tr.is-selected .image-table-cell::before {
    content: "\E876"; /* "done" */
    font-family: "Material Icons";
    font-size: 24px;
    line-height: 32px;
    text-align: center;
    color: white;
    position: absolute;
    width: 32px;
    height: 32px;
    top: 50%;
    left: 50%;
    margin-top: -16px;
    margin-left: -14px;
    border-radius: 100%;
    background: #00bcd4;
}

Once your application starts you should see the following icon for each selected row:

Hiding columns on small screens

You can hide columns on small screens using custom CSS rules:

@media all and (max-width: 768px) {

    alfresco-document-list ::ng-deep th.desktop-only .cell-value {
        display: none;
    }

    alfresco-document-list ::ng-deep td.desktop-only .cell-value {
        display: none;
    }
}

Now you can declare columns and assign desktop-only class where needed:

<adf-document-list ...>
    <data-columns>
        
        <!-- always visible columns -->
        
        <data-column key="$thumbnail" type="image"></data-column>
        <data-column 
                title="Name" 
                key="name" 
                class="full-width ellipsis-cell">
        </data-column>
        
        <!-- desktop-only columns -->
        
        <data-column
                title="Created by"
                key="createdByUser.displayName"
                class="desktop-only">
        </data-column>
        <data-column
                title="Created on"
                key="createdAt"
                type="date"
                format="medium"
                class="desktop-only">
        </data-column>
    </data-columns>
</adf-document-list>

Desktop View

Mobile View

See also

• Document list component
• Datatable component
• Tasklist component