[ADF-4308] DatatableComponent - add Json cell type (#4518)

* [ADF-4308] DatatableComponent - add Json cell type

* [ADF-4308] - PR changes

* [ADF-4306] - remove unnecesary code and properties

* [ADF-4308] - PR changes
This commit is contained in:
Silviu Popa
2019-04-05 14:46:15 +03:00
committed by Eugenio Romano
parent 9217ebd999
commit 506ca306da
7 changed files with 210 additions and 13 deletions

View File

@@ -49,7 +49,7 @@ Defines column properties for DataTable, Tasklist, Document List and other compo
| sortable | `boolean` | true | Toggles ability to sort by this column, for example by clicking the column header. |
| srTitle | `string` | | Title to be used for screen readers. |
| title | `string` | "" | Display title of the column, typically used for column headers. You can use the i18n resource key to get it translated automatically. |
| type | `string` | "text" | Value type for the column. Possible settings are 'text', 'image', 'date', 'fileSize' and 'location'. |
| type | `string` | "text" | Value type for the column. Possible settings are 'text', 'image', 'date', 'fileSize', 'location' and 'json'. |
## Details
@@ -125,7 +125,7 @@ Every cell in the DataTable component is bound to the dynamic data context conta
| row | [`DataRow`](../../../lib/core/datatable/data/data-row.model.ts) | Current data row instance. |
| col | [`DataColumn`](../../../lib/core/datatable/data/data-column.model.ts) | Current data column instance. |
You can use all three properties to gain full access to underlying data from within your custom templates.
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 to define a variable that is bound to `$implicit` as shown below:
```html
@@ -166,7 +166,7 @@ You may want to use the **row** API to get access to the raw values.
Use the **data** API to get values with post-processing (eg, datetime or icon conversion).
In the Example below we will prepend `Hi!` to each file and folder name in the list:
In the Example below we will prepend `Hi!` to each file and folder name in the list:
<!-- {% raw %} -->
@@ -215,14 +215,14 @@ Let's start by assigning an "image-table-cell" class to the thumbnail column:
```html
<adf-document-list ...>
<data-columns>
<data-column
key="$thumbnail"
type="image"
[sortable]="false"
class="adf-image-table-cell">
</data-column>
...
</data-columns>
</adf-document-list>
@@ -262,18 +262,18 @@ Now you can declare columns and assign the `desktop-only` class where needed:
```html
<adf-document-list ...>
<data-columns>
<!-- always visible columns -->
<data-column key="$thumbnail" type="image"></data-column>
<data-column
title="Name"
key="name"
<data-column
title="Name"
key="name"
class="full-width ellipsis-cell">
</data-column>
<!-- desktop-only columns -->
<data-column
title="Created by"
key="createdByUser.displayName"