From 6838b111b42cb1db2fa5c20570d15fa6a6d0f6a4 Mon Sep 17 00:00:00 2001
From: Patrik Hellgren <patrik.hellgren@sherpas.se>
Date: Tue, 27 Feb 2024 23:13:44 +0100
Subject: [PATCH 1/3] Add feature sticky header

---
 .../src/components/DetailsListComponent.tsx   | 50 +++++++++++++++++--
 .../results/detailsList/DetailListLayout.ts   | 37 +++++++++++++-
 .../results/detailsList/details-list.html     | 17 +++++++
 search-parts/src/loc/commonStrings.d.ts       |  2 +
 search-parts/src/loc/da-dk.js                 |  4 +-
 search-parts/src/loc/de-de.js                 |  4 +-
 search-parts/src/loc/en-us.js                 |  4 +-
 search-parts/src/loc/es-es.js                 |  4 +-
 search-parts/src/loc/fi-fi.js                 |  4 +-
 search-parts/src/loc/fr-fr.js                 |  4 +-
 search-parts/src/loc/nb-no.js                 |  4 +-
 search-parts/src/loc/nl-nl.js                 |  4 +-
 search-parts/src/loc/pl-pl.js                 |  4 +-
 search-parts/src/loc/pt-br.js                 |  4 +-
 search-parts/src/loc/sv-SE.js                 |  4 +-
 15 files changed, 134 insertions(+), 16 deletions(-)

diff --git a/search-parts/src/components/DetailsListComponent.tsx b/search-parts/src/components/DetailsListComponent.tsx
index 0dec8285..d021b469 100644
--- a/search-parts/src/components/DetailsListComponent.tsx
+++ b/search-parts/src/components/DetailsListComponent.tsx
@@ -210,6 +210,16 @@ export interface IDetailsListComponentProps {
      * The template service instance
      */
     templateService: ITemplateService;
+
+    /**
+     * If the header should be sticky
+     */
+    enableStickyHeader?: boolean;
+
+    /**
+     * The height of the list view when sticky header is enabled
+     */
+    stickyHeaderListViewHeight?: number;
 }
 
 export interface IDetailsListComponentState {
@@ -226,6 +236,16 @@ export class DetailsListComponent extends React.Component<IDetailsListComponentP
     private _selection: Selection;
     private _selectionMode: SelectionMode = SelectionMode.none;
 
+    private _scrollClass = mergeStyleSets({
+      detailsListWrapper: {
+          height: this.props.stickyHeaderListViewHeight,
+          maxHeight: 'inherit',
+          width: '100%',
+          position: 'relative'
+      },
+    });
+    
+
     constructor(props: IDetailsListComponentProps) {
         super(props);
 
@@ -429,10 +449,24 @@ export class DetailsListComponent extends React.Component<IDetailsListComponentP
             };
         }
 
-        return (
+        if (this.props.enableStickyHeader) {
+          return (
             <Fabric>
-                <ShimmeredDetailsList {...shimmeredDetailsListProps} />
+              <Stack horizontal className={this._scrollClass.detailsListWrapper}>
+                <Stack.Item>
+                  <ScrollablePane scrollbarVisibility={ScrollbarVisibility.auto} >
+                    <ShimmeredDetailsList {...shimmeredDetailsListProps} />
+                  </ScrollablePane>
+                </Stack.Item>
+              </Stack >
             </Fabric>
+          );
+        }
+
+        return (
+          <Fabric>
+            <ShimmeredDetailsList {...shimmeredDetailsListProps} />
+          </Fabric>
         );
     }
 
@@ -551,7 +585,7 @@ export class DetailsListComponent extends React.Component<IDetailsListComponentP
         return <DetailsRow {...rowProps} theme={this.props.themeVariant as ITheme} />;
     }
 
-    private _onRenderDetailsHeader(props: IDetailsHeaderProps): JSX.Element {
+    private _onRenderDetailsHeader(props: IDetailsHeaderProps, defaultRender): JSX.Element {
 
         props.onRenderColumnHeaderTooltip = (tooltipHostProps: ITooltipHostProps) => {
 
@@ -578,7 +612,15 @@ export class DetailsListComponent extends React.Component<IDetailsListComponentP
             return <TooltipHost {...tooltipHostProps} theme={this.props.themeVariant as ITheme} styles={customStyles} />;
         };
 
-        return <DetailsHeader {...props} theme={this.props.themeVariant as ITheme} />;
+        if (this.props.enableStickyHeader) {
+          return (
+            <Sticky stickyPosition={StickyPositionType.Header} isScrollSynced>
+              {defaultRender!({...props, theme: this.props.themeVariant as ITheme})}
+            </Sticky>
+          );
+        }
+
+        return defaultRender!({...props, theme: this.props.themeVariant as ITheme});
     }
 
     private _onColumnClick = (ev: React.MouseEvent<HTMLElement>, column: IColumn): void => {
diff --git a/search-parts/src/layouts/results/detailsList/DetailListLayout.ts b/search-parts/src/layouts/results/detailsList/DetailListLayout.ts
index 266e877c..cdabe9f6 100644
--- a/search-parts/src/layouts/results/detailsList/DetailListLayout.ts
+++ b/search-parts/src/layouts/results/detailsList/DetailListLayout.ts
@@ -7,6 +7,7 @@ import { IPropertyPaneField, PropertyPaneToggle, PropertyPaneDropdown, PropertyP
 import { TemplateValueFieldEditor, ITemplateValueFieldEditorProps } from '../../../controls/TemplateValueFieldEditor/TemplateValueFieldEditor';
 import { AsyncCombo } from "../../../controls/PropertyPaneAsyncCombo/components/AsyncCombo";
 import { IAsyncComboProps } from "../../../controls/PropertyPaneAsyncCombo/components/IAsyncComboProps";
+import { PropertyFieldNumber } from "@pnp/spfx-property-controls";
 
 /**
  * Details List Builtin Layout
@@ -47,6 +48,16 @@ export interface IDetailsListLayoutProperties {
      * If groups should collapsed by default
      */
     groupsCollapsed: boolean;
+
+    /**
+     * If the header should be sticky
+     */
+    enableStickyHeader: boolean;
+
+    /**
+     * The height of the list view when sticky header is enabled
+     */
+    stickyHeaderListViewHeight: number;
 }
 
 export class DetailsListLayout extends BaseLayout<IDetailsListLayoutProperties> {
@@ -303,6 +314,26 @@ export class DetailsListLayout extends BaseLayout<IDetailsListLayoutProperties>
             );
         }
 
+        propertyPaneFields.push(
+          PropertyPaneToggle('layoutProperties.enableStickyHeader', {
+            label: strings.Layouts.DetailsList.EnableStickyHeader || 'Enable Sticky Header',
+            checked: this.properties.enableStickyHeader
+          }));
+
+        //Sticky header options
+        if (this.properties.enableStickyHeader) {
+            propertyPaneFields.push(
+                PropertyFieldNumber('layoutProperties.stickyHeaderListViewHeight', {
+                    label: strings.Layouts.DetailsList.StickyHeaderListViewHeight,
+                    maxValue: 5000,
+                    minValue: 200,
+                    value: this.properties.stickyHeaderListViewHeight ? this.properties.stickyHeaderListViewHeight : 500,
+                    disabled: !this.properties.enableStickyHeader,
+                    key: 'layoutProperties.stickyHeaderListViewHeight',
+                })
+            );
+        }
+
         return propertyPaneFields;
     }
 
@@ -311,5 +342,9 @@ export class DetailsListLayout extends BaseLayout<IDetailsListLayoutProperties>
         if (propertyPath.localeCompare('layoutProperties.enableGrouping') === 0) {
             this.properties.groupByField = '';
         }
-    }
+
+        if (propertyPath.localeCompare('layoutProperties.enableStickyHeader') === 0) {
+          this.properties.stickyHeaderListViewHeight = 500;
+        }
+  }
 }
diff --git a/search-parts/src/layouts/results/detailsList/details-list.html b/search-parts/src/layouts/results/detailsList/details-list.html
index 8014c944..6d918064 100644
--- a/search-parts/src/layouts/results/detailsList/details-list.html
+++ b/search-parts/src/layouts/results/detailsList/details-list.html
@@ -1,6 +1,21 @@
 <content id="data-content">
 
     <style>
+        {{#if properties.layoutProperties.enableStickyHeader}}
+        .template .ms-DetailsHeader-cell:first-child {
+          position: sticky;
+          inset: 0;
+          background-color: {{@root.theme.palette.primaryBackground}};
+          z-index: 1;
+        }
+
+        .template .ms-DetailsRow-cell:first-child {
+          position: sticky;
+          inset: 0;
+          background-color: {{@root.theme.palette.primaryBackground}};
+          z-index: 0;
+        }
+        {{/if}}
 
         .template .ms-DetailsRow {
             animation-name: none;
@@ -47,6 +62,8 @@
             data-fields="{{JSONstringify @root.properties.dataSourceProperties.sortList}}" 
             data-default-selected-field="{{sort.selectedSortFieldName}}" 
             data-default-direction="{{sort.selectedSortDirection}}"
+            data-enable-sticky-header="{{properties.layoutProperties.enableStickyHeader}}"
+            data-sticky-header-list-view-height="{{properties.layoutProperties.stickyHeaderListViewHeight}}"
         >
         </pnp-detailslist>
 
diff --git a/search-parts/src/loc/commonStrings.d.ts b/search-parts/src/loc/commonStrings.d.ts
index 1e615295..81ca47f9 100644
--- a/search-parts/src/loc/commonStrings.d.ts
+++ b/search-parts/src/loc/commonStrings.d.ts
@@ -228,6 +228,8 @@ declare interface ICommonStrings {
         EnableGrouping: string;
         CollapsedGroupsByDefault: string;
         ResetFieldsBtnLabel: string;
+        EnableStickyHeader: string;
+        StickyHeaderListViewHeight: string;
       };
       Cards: {
         Name: string;
diff --git a/search-parts/src/loc/da-dk.js b/search-parts/src/loc/da-dk.js
index 25858a5d..748e7a1d 100644
--- a/search-parts/src/loc/da-dk.js
+++ b/search-parts/src/loc/da-dk.js
@@ -228,7 +228,9 @@ define([], function() {
                 EnableGrouping: "Aktivér gruppering",
                 GroupingDescription: "Sørg for, at du har data vist i resultatwebdelen for at få vist en liste over egenskaber.",
                 CollapsedGroupsByDefault: "Vis collapsed",
-                ResetFieldsBtnLabel: "Nulstil felter til standardværdier"
+                ResetFieldsBtnLabel: "Nulstil felter til standardværdier",
+                EnableStickyHeader: "Aktivér fastgjort header",
+                StickyHeaderListViewHeight: "Listevisningshøjde (px)"
             },
             Cards: {
                 Name: "Cards",
diff --git a/search-parts/src/loc/de-de.js b/search-parts/src/loc/de-de.js
index 41e5964f..bbea81ed 100644
--- a/search-parts/src/loc/de-de.js
+++ b/search-parts/src/loc/de-de.js
@@ -228,7 +228,9 @@ define([], function () {
                 EnableGrouping: "Gruppierung aktivieren",
                 GroupingDescription: "Stellen Sie sicher, dass im Ergebnis-Webpart Daten angezeigt werden, damit eine Liste der anzuzeigenden Eigenschaften angezeigt wird.",
                 CollapsedGroupsByDefault: "Eingeklappt anzeigen",
-                ResetFieldsBtnLabel: "Felder auf Standardwerte zurücksetzen"
+                ResetFieldsBtnLabel: "Felder auf Standardwerte zurücksetzen",
+                EnableStickyHeader: "Fixierte Kopfzeile aktivieren",
+                StickyHeaderListViewHeight: "Höhe der Listenansicht (px)"
             },
             Cards: {
                 Name: "Karten",
diff --git a/search-parts/src/loc/en-us.js b/search-parts/src/loc/en-us.js
index c48fce77..0ec7b918 100644
--- a/search-parts/src/loc/en-us.js
+++ b/search-parts/src/loc/en-us.js
@@ -228,7 +228,9 @@ define([], function() {
                 EnableGrouping: "Enable grouping",
                 GroupingDescription: "Ensure you have data showing in the result web part for a list of properties to show.",
                 CollapsedGroupsByDefault: "Show collapsed",
-                ResetFieldsBtnLabel: "Reset fields to default values"
+                ResetFieldsBtnLabel: "Reset fields to default values",
+                EnableStickyHeader: "Enable sticky header",
+                StickyHeaderListViewHeight: "List view height (in px)"
             },
             Cards: {
                 Name: "Cards",
diff --git a/search-parts/src/loc/es-es.js b/search-parts/src/loc/es-es.js
index 2d676d35..f58f2d60 100644
--- a/search-parts/src/loc/es-es.js
+++ b/search-parts/src/loc/es-es.js
@@ -228,7 +228,9 @@ define([], function() {
                 EnableGrouping: "Activar la agrupación",
                 GroupingDescription: "Asegúrese de tener datos que se muestren en el elemento web de resultados para que se muestre una lista de propiedades.",
                 CollapsedGroupsByDefault: "Mostrar colapsado",
-                ResetFieldsBtnLabel: "Restablecer los valores por defecto de los campos"
+                ResetFieldsBtnLabel: "Restablecer los valores por defecto de los campos",
+                EnableStickyHeader: "Activar el encabezado fijo",
+                StickyHeaderListViewHeight: "Altura de la vista de lista con encabezado fijo (en píxeles)"
             },
             Cards: {
                 Name: "Tarjetas",
diff --git a/search-parts/src/loc/fi-fi.js b/search-parts/src/loc/fi-fi.js
index 55822a9e..98de1dc3 100644
--- a/search-parts/src/loc/fi-fi.js
+++ b/search-parts/src/loc/fi-fi.js
@@ -226,7 +226,9 @@ define([], function() {
                 EnableGrouping: "Salli ryhmittely",
                 GroupingDescription: "Varmista, että tulosten verkko-osassa on tietoja, jotta voit näyttää ominaisuusluettelon.",
                 CollapsedGroupsByDefault: "Näytä ryhmät tiivistettynä",
-                ResetFieldsBtnLabel: "Palauta kentät templaatin oletusarvoihin"
+                ResetFieldsBtnLabel: "Palauta kentät templaatin oletusarvoihin",
+                EnableStickyHeader: "Kiinnitä ylätunniste",
+                StickyHeaderListViewHeight: "Kiinnitetyn ylätunnisteen korkeus (px)"
             },
             Cards: {
                 Name: "Kortit",
diff --git a/search-parts/src/loc/fr-fr.js b/search-parts/src/loc/fr-fr.js
index 4b3a621c..c9956ecf 100644
--- a/search-parts/src/loc/fr-fr.js
+++ b/search-parts/src/loc/fr-fr.js
@@ -228,7 +228,9 @@ define([], function() {
                 EnableGrouping: "Permettre le regroupement",
                 GroupingDescription: "Assurez-vous que les données s'affichent dans le composant WebPart de résultat pour obtenir une liste des propriétés à afficher.",
                 CollapsedGroupsByDefault: "Afficher les groupes réduits",
-                ResetFieldsBtnLabel: "Rétablir la valeur par défaut dans les champs"
+                ResetFieldsBtnLabel: "Rétablir la valeur par défaut dans les champs",
+                EnableStickyHeader: "Activer l’en-tête collant",
+                StickyHeaderListViewHeight: "Hauteur de la liste de détails (en pixels)"
             },
             Cards: {
                 Name: "Cartes",
diff --git a/search-parts/src/loc/nb-no.js b/search-parts/src/loc/nb-no.js
index 5fad2e80..4a36a19c 100644
--- a/search-parts/src/loc/nb-no.js
+++ b/search-parts/src/loc/nb-no.js
@@ -227,7 +227,9 @@ define([], function () {
           EnableGrouping: "Aktiver gruppering",
           GroupingDescription: "Sørg for at du har data som vises i resultatwebdelen for å vise en liste over egenskaper.",
           CollapsedGroupsByDefault: "Vis kollapsede",
-          ResetFieldsBtnLabel: "Bruk standardverdiene"
+          ResetFieldsBtnLabel: "Bruk standardverdiene",
+          EnableStickyHeader: "Aktiver klebrig overskrift",
+          StickyHeaderListViewHeight: "Høyde på listevisning med klebrig overskrift (px)"
         },
         Cards: {
           Name: "Kort",
diff --git a/search-parts/src/loc/nl-nl.js b/search-parts/src/loc/nl-nl.js
index 1b0d21e1..f63e837e 100644
--- a/search-parts/src/loc/nl-nl.js
+++ b/search-parts/src/loc/nl-nl.js
@@ -227,7 +227,9 @@ define([], function() {
                 EnableGrouping: "Groeperen inschakelen",
                 GroupingDescription: "Zorg ervoor dat er gegevens worden weergegeven in het resultaatwebonderdeel voor een lijst met eigenschappen die moeten worden weergegeven.",
                 CollapsedGroupsByDefault: "Toon ingeklapt",
-                ResetFieldsBtnLabel: "Reset velden naar standaard waarden"
+                ResetFieldsBtnLabel: "Reset velden naar standaard waarden",
+                EnableStickyHeader: "Sticky header inschakelen",
+                StickyHeaderListViewHeight: "Hoogte van de lijstweergave (px)"
             },
             Cards: {
                 Name: "Kaarten",
diff --git a/search-parts/src/loc/pl-pl.js b/search-parts/src/loc/pl-pl.js
index cc2bffb6..55d8a9bb 100644
--- a/search-parts/src/loc/pl-pl.js
+++ b/search-parts/src/loc/pl-pl.js
@@ -228,7 +228,9 @@ define([], function() {
               EnableGrouping: "Grupowanie włączone",
               GroupingDescription: "Upewnij się, że dane są wyświetlane w wynikowym składniku Web Part, aby wyświetlić listę właściwości.",
               CollapsedGroupsByDefault: "Pokaż zapadnięte",
-              ResetFieldsBtnLabel: "Resetuj pola do wartości domyślnych"
+              ResetFieldsBtnLabel: "Resetuj pola do wartości domyślnych",
+              EnableStickyHeader: "Włącz lepką nagłówkę",
+              StickyListViewHeight: "Wysokość listy ze szczegółami (px)"
           },
           Cards: {
               Name: "Karty",
diff --git a/search-parts/src/loc/pt-br.js b/search-parts/src/loc/pt-br.js
index 76372411..ab4afc54 100644
--- a/search-parts/src/loc/pt-br.js
+++ b/search-parts/src/loc/pt-br.js
@@ -226,7 +226,9 @@ define([], function() {
                 EnableGrouping: "Ativar agrupamento",
                 GroupingDescription: "Certifique-se de que os dados sejam exibidos na Web Part de resultado para uma lista de propriedades a serem exibidas.",
                 CollapsedGroupsByDefault: "Mostrar recolhido",
-                ResetFieldsBtnLabel: "Redefinir campos para os valores padrão"
+                ResetFieldsBtnLabel: "Redefinir campos para os valores padrão",
+                EnableStickyHeader: "Cabeçalho fixo",
+                StickyHeaderListViewHeight: "Altura da lista de visualização (px)"
             },
             Cards: {
                 Name: "Cartões",
diff --git a/search-parts/src/loc/sv-SE.js b/search-parts/src/loc/sv-SE.js
index 6042e841..3e9d21a9 100644
--- a/search-parts/src/loc/sv-SE.js
+++ b/search-parts/src/loc/sv-SE.js
@@ -228,7 +228,9 @@ define([], function () {
           EnableGrouping: "Aktivera gruppering",
           GroupingDescription: "Se till att du har data som visas i resultatwebbdelen för en lista över egenskaper att visa.",
           CollapsedGroupsByDefault: "Visa kollapsade",
-          ResetFieldsBtnLabel: "Återställ fält till standardvärden"
+          ResetFieldsBtnLabel: "Återställ fält till standardvärden",
+          EnableStickyHeader: "Aktivera fast rubrik",
+          StickyHeaderListViewHeight: "Höjd för listvy (px)",
         },
         Cards: {
           Name: "Kort",

From 761cb56c09762a77593156bede48f111730f302f Mon Sep 17 00:00:00 2001
From: Patrik Hellgren <patrik.hellgren@sherpas.se>
Date: Wed, 28 Feb 2024 20:29:05 +0100
Subject: [PATCH 2/3] Add missing imports

---
 search-parts/src/components/DetailsListComponent.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/search-parts/src/components/DetailsListComponent.tsx b/search-parts/src/components/DetailsListComponent.tsx
index d021b469..6f6d29f8 100644
--- a/search-parts/src/components/DetailsListComponent.tsx
+++ b/search-parts/src/components/DetailsListComponent.tsx
@@ -1,14 +1,14 @@
 /* eslint-disable @typescript-eslint/no-non-null-assertion */
 import * as React from 'react';
 import * as ReactDOM from 'react-dom';
-import { Fabric, ShimmeredDetailsList, IShimmeredDetailsListProps } from '@fluentui/react';
+import { Fabric, ShimmeredDetailsList, IShimmeredDetailsListProps, Sticky, StickyPositionType, Stack, ScrollablePane, ScrollbarVisibility } from '@fluentui/react';
 import { ITooltipHostProps, TooltipHost, ITooltipStyles, Shimmer, ShimmerElementsGroup, ShimmerElementType, IShimmerElement, mergeStyleSets, ITheme, Selection } from '@fluentui/react';
 import * as Handlebars from 'handlebars';
 import { IReadonlyTheme } from '@microsoft/sp-component-base';
 import { BaseWebComponent, BuiltinTemplateSlots, ExtensibilityConstants, ISortInfo, SortFieldDirection } from '@pnp/modern-search-extensibility';
 import { groupBy, sortBy, findIndex, isEmpty } from "@microsoft/sp-lodash-subset";
 import { FileIcon } from '../components/FileIconComponent';
-import { DetailsListLayoutMode, SelectionMode, IColumn, IGroup, IDetailsRowProps, DetailsRow, IDetailsHeaderProps, DetailsHeader, CheckboxVisibility } from '@fluentui/react/lib/DetailsList';
+import { DetailsListLayoutMode, SelectionMode, IColumn, IGroup, IDetailsRowProps, DetailsRow, IDetailsHeaderProps, CheckboxVisibility } from '@fluentui/react/lib/DetailsList';
 import { DEFAULT_CELL_STYLE_PROPS, DEFAULT_ROW_HEIGHTS } from '@fluentui/react/lib/components/DetailsList/DetailsRow.styles';
 import { ISearchResultsTemplateContext } from '../models/common/ITemplateContext';
 import { ObjectHelper } from '../helpers/ObjectHelper';

From f7937c7d58ceb4e90e8b7a326ba2aa59c7f4f0c7 Mon Sep 17 00:00:00 2001
From: Patrik Hellgren <patrik.hellgren@sherpas.se>
Date: Wed, 28 Feb 2024 20:29:57 +0100
Subject: [PATCH 3/3] Add docs for grouping and sticky header

---
 docs/usage/search-results/layouts/details-list.md | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/docs/usage/search-results/layouts/details-list.md b/docs/usage/search-results/layouts/details-list.md
index e2d596b5..4271b44d 100644
--- a/docs/usage/search-results/layouts/details-list.md
+++ b/docs/usage/search-results/layouts/details-list.md
@@ -6,4 +6,6 @@ The 'details list' layout allows you to display items as a structured list, the
 | ------- |---------------- | ---------- |
 | **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>
 | **Show file icon** | Hide or display the file icon in the first column.
-| **Compact mode** | Display the details list in compact mode.
\ No newline at end of file
+| **Compact mode** | Display the details list in compact mode.
+| **Enable grouping** | Display a grouped list, grouped by the specified column.
+| **Enable sticky header** | Display the details list with a sticky header that will stay in place when scrolling. Specify the desired height for the view (in pixels) and then specify the desired items per page in _Number of items per page_ under _Paging options_ and all items on the page will be scrollable within the view.
\ No newline at end of file