Feature/1308 - Documentation for US - Sort filter with Handlebars customization

docs/usage/data-visualizer/layouts/details-list.md

@@ -4,6 +4,6 @@ The 'details list' layout allows you to display items as a structured list, the
 
 | Setting | Description | Default value 
 | ------- |---------------- | ---------- |
-| **Manage columns** | Allows you to build you own table view by adding or removing columns dynamically. For each column, you get the following options:<br><p align="center">[!["Manage columns"](../../../assets/webparts/search-results/layouts/details_list_fields.png)](../../../assets/webparts/search-results/layouts/details_list_fields.png)</p><ul><li>**Sort order**: the order of the column in the table.</li><li>**Column name**: the column friendly name to display.</li><li>**Column value**: you can choose here either a field from the data source current results set (from the list or as free text) without any transformation or use an Handlebars expression by clicking on the checkbox next to it. In this case, all Handlebars helpers from the main template are available and you can also add you own HTML markup in the column value. For HTML fields you can use the special variable `@root.theme` to use theme colors (ex: `@root.theme.palette.themePrimary`).<br>You can specify a different field for sorting when using an Handlebars expression by specifying the field from the separate dropdown.<br>![Handlebars Expression](../../../assets/webparts/search-results/layouts/details_list_hb_expr.png)<br><br>![Handlebars Expression 2](../../../assets/webparts/search-results/layouts/details_list_hb_expr2.png)</li><li>**Minimum width in px**: the minimum width of the column in pixels.</li><li>**Maximum width in px**: the maximum width of the column in pixels.</li><li>**Sortable**: allows you to sort column values according to the **data source sort settings**. It means you must first configure the sort setting at data source level with option _'User sort'_ to `true` to see them in the details list columns configuration. Sort is perfromed one column at a time.</li><li>**Resizable**: allows you to resize the column dynamically in display mode.</li><li>**Multiline**: if the column column should be multiline. By default only ellipsis (...) will be display for larger text.</li></ul>
+| **Manage columns** | Allows you to build you own table view by adding or removing columns dynamically. For each column, you get the following options:<br><p align="center">[!["Manage columns"](../../../assets/webparts/search-results/layouts/details_list_fields.png)](../../../assets/webparts/search-results/layouts/details_list_fields.png)</p><ul><li>**Sort order**: the order of the column in the table.</li><li>**Column name**: the column friendly name to display.</li><li>**Column value**: you can choose here either a field from the data source current results set (from the list or as free text) without any transformation or use an Handlebars expression by clicking on the checkbox next to it. In this case, all Handlebars helpers from the main template are available and you can also add you own HTML markup in the column value. For HTML fields you can use the special variable `@root.theme` to use theme colors (ex: `@root.theme.palette.themePrimary`).<br>You can specify a different field for sorting when using an Handlebars expression by specifying the field from the separate dropdown.<br>![Handlebars Expression](../../../assets/webparts/search-results/layouts/details_list_hb_expr.png)<br><br>![Handlebars Expression 2](../../../assets/webparts/search-results/layouts/details_list_hb_expr2.png)</li><li>**Minimum width in px**: the minimum width of the column in pixels.</li><li>**Maximum width in px**: the maximum width of the column in pixels.</li><li>**Sortable**: allows you to sort column values according to the **data source sort settings**. It means you must first configure the sort setting at data source level with option _'User sort'_ to `true` to see them in the details list columns configuration. Sort is perfromed one column at a time. The Sorting is also allowed when using 'Use Handlebars expression'. In this scenario, the corresponding managed property should be selected under 'Column value sorting' based on which sorting will occur. </li><li>**Resizable**: allows you to resize the column dynamically in display mode.</li><li>**Multiline**: if the column column should be multiline. By default only ellipsis (...) will be display for larger text.</li></ul>
 | **Show file icon** | Hide or display the file icon in the first column.
 | **Compact mode** | Display the details list in compact mode.