`
together in the same datatable.
-Learm more about styling your datatable: [Customizing the component's styles](#customizing-the-components-styles)
+Learn more about styling your datatable: [Customizing the component's styles](#customizing-the-components-styles)
## Class members
### Properties
-| Name | Type | Default value | Description |
-| ---- | ---- | ------------- | ----------- |
-| actions | `boolean` | false | Toggles the data actions column. |
-| actionsPosition | `string` | "right" | Position of the actions dropdown menu. Can be "left" or "right". |
-| actionsVisibleOnHover | `boolean` | false | Toggles whether the actions dropdown should only be visible if the row is hovered over or the dropdown menu is open. |
-| allowFiltering | `boolean` | false | Flag that indicate if the datatable allow the use [facet widget](../../../lib/content-services/src/lib/search/models/facet-widget.interface.ts) search for filtering. |
-| blurOnResize | `boolean` | true | Toggles blur when columns of the datatable are being resized. |
-| columns | `any[]` | \[] | The columns that the datatable will show. |
-| contextMenu | `boolean` | false | Toggles custom context menu for the component. |
-| data | [`DataTableAdapter`](../../../lib/core/src/lib/datatable/data/datatable-adapter.ts) | | Data source for the table |
-| display | `string` | DisplayMode.List | Selects the display mode of the table. Can be "list" or "gallery". |
-| fallbackThumbnail | `string` | | Fallback image for rows where the thumbnail is missing. |
-| isResizingEnabled | `boolean` | false | Flag that indicates if the datatable allows column resizing. |
-| loading | `boolean` | false | Flag that indicates if the datatable is in loading state and needs to show the loading template (see the docs to learn how to configure a loading template). |
-| mainTableAction | `boolean` | true | Toggles main data table action column. |
-| multiselect | `boolean` | false | Toggles multiple row selection, which renders checkboxes at the beginning of each row. |
-| noPermission | `boolean` | false | Flag that indicates if the datatable should show the "no permission" template. |
-| resolverFn | `Function` | null | Custom resolver function which is used to parse dynamic column objects see the docs to learn how to configure a resolverFn. |
-| rowMenuCacheEnabled | `boolean` | true | Should the items for the row actions menu be cached for reuse after they are loaded the first time? |
-| rowStyle | `Function` | | The inline style to apply to every row. See [NgStyle](https://angular.io/docs/ts/latest/api/common/index/NgStyle-directive.html) docs for more details and usage examples. |
-| rowStyleClass | `string` | "" | The CSS class to apply to every row. |
-| rows | `any[]` | \[] | The rows that the datatable will show. |
-| selectionMode | `string` | "single" | Row selection mode. Can be none, `single` or `multiple`. For `multiple` mode, you can use Cmd (macOS) or Ctrl (Win) modifier key to toggle selection for multiple rows. |
-| showHeader | `ShowHeaderMode` | | Toggles the header. |
-| showMainDatatableActions | `boolean` | false | Toggles the main datatable action. |
-| sorting | `any[]` | \[] | Define the sort order of the datatable. Possible values are : [`created`, `desc`], [`created`, `asc`], [`due`, `desc`], [`due`, `asc`] |
-| stickyHeader | `boolean` | false | Toggles the sticky header mode. |
+| Name | Type | Default value | Description |
+|--------------------------|-------------------------------------------------------------------------------------|---------------|----------------------------------------------------------------------------------------------------------------------------------------------------------------------------|
+| actions | `boolean` | false | Toggles the data actions column. |
+| actionsPosition | `string` | "right" | Position of the actions dropdown menu. Can be "left" or "right". |
+| actionsVisibleOnHover | `boolean` | false | Toggles whether the actions dropdown should only be visible if the row is hovered over or the dropdown menu is open. |
+| allowFiltering | `boolean` | false | Flag that indicate if the datatable allow the use [facet widget](../../../lib/content-services/src/lib/search/models/facet-widget.interface.ts) search for filtering. |
+| blurOnResize | `boolean` | true | Toggles blur when columns of the datatable are being resized. |
+| columns | `any[]` | \[] | The columns that the datatable will show. |
+| contextMenu | `boolean` | false | Toggles custom context menu for the component. |
+| data | [`DataTableAdapter`](../../../lib/core/src/lib/datatable/data/datatable-adapter.ts) | | Data source for the table |
+| fallbackThumbnail | `string` | | Fallback image for rows where the thumbnail is missing. |
+| isResizingEnabled | `boolean` | false | Flag that indicates if the datatable allows column resizing. |
+| loading | `boolean` | false | Flag that indicates if the datatable is in loading state and needs to show the loading template (see the docs to learn how to configure a loading template). |
+| mainTableAction | `boolean` | true | Toggles main data table action column. |
+| multiselect | `boolean` | false | Toggles multiple row selection, which renders checkboxes at the beginning of each row. |
+| noPermission | `boolean` | false | Flag that indicates if the datatable should show the "no permission" template. |
+| resolverFn | `Function` | null | Custom resolver function which is used to parse dynamic column objects see the docs to learn how to configure a resolverFn. |
+| rowMenuCacheEnabled | `boolean` | true | Should the items for the row actions menu be cached for reuse after they are loaded the first time? |
+| rowStyle | `Function` | | The inline style to apply to every row. See [NgStyle](https://angular.io/docs/ts/latest/api/common/index/NgStyle-directive.html) docs for more details and usage examples. |
+| rowStyleClass | `string` | "" | The CSS class to apply to every row. |
+| rows | `any[]` | \[] | The rows that the datatable will show. |
+| selectionMode | `string` | "single" | Row selection mode. Can be none, `single` or `multiple`. For `multiple` mode, you can use Cmd (macOS) or Ctrl (Win) modifier key to toggle selection for multiple rows. |
+| showHeader | `ShowHeaderMode` | | Toggles the header. |
+| showMainDatatableActions | `boolean` | false | Toggles the main datatable action. |
+| sorting | `any[]` | \[] | Define the sort order of the datatable. Possible values are : [`created`, `desc`], [`created`, `asc`], [`due`, `desc`], [`due`, `asc`] |
+| stickyHeader | `boolean` | false | Toggles the sticky header mode. |
### Events
-| Name | Type | Description |
-| ---- | ---- | ----------- |
-| columnOrderChanged | [`EventEmitter`](https://angular.io/api/core/EventEmitter)`<`[`DataColumn`](../../../lib/core/src/lib/datatable/data/data-column.model.ts)`<>[]>` | Emitted when the column order is changed. |
-| columnsWidthChanged | [`EventEmitter`](https://angular.io/api/core/EventEmitter)`<`[`DataColumn`](../../../lib/core/src/lib/datatable/data/data-column.model.ts)`<>[]>` | Emitted when the column width is changed. |
-| executeRowAction | [`EventEmitter`](https://angular.io/api/core/EventEmitter)`<`[`DataRowActionEvent`](../../../lib/core/src/lib/datatable/components/data-row-action.event.ts)`>` | Emitted when the user executes a row action. |
-| rowClick | [`EventEmitter`](https://angular.io/api/core/EventEmitter)`<`[`DataRowEvent`](../../../lib/core/src/lib/datatable/data/data-row-event.model.ts)`>` | Emitted when the user clicks a row. |
-| rowDblClick | [`EventEmitter`](https://angular.io/api/core/EventEmitter)`<`[`DataRowEvent`](../../../lib/core/src/lib/datatable/data/data-row-event.model.ts)`>` | Emitted when the user double-clicks a row. |
-| showRowActionsMenu | [`EventEmitter`](https://angular.io/api/core/EventEmitter)`<`[`DataCellEvent`](../../../lib/core/src/lib/datatable/components/data-cell.event.ts)`>` | Emitted before the actions menu is displayed for a row. |
-| showRowContextMenu | [`EventEmitter`](https://angular.io/api/core/EventEmitter)`<`[`DataCellEvent`](../../../lib/core/src/lib/datatable/components/data-cell.event.ts)`>` | Emitted before the context menu is displayed for a row. |
+| Name | Type | Description |
+|---------------------|-----------------------------------------------------------------------------------------------------------------------------------------------------------------|---------------------------------------------------------|
+| columnOrderChanged | [`EventEmitter`](https://angular.io/api/core/EventEmitter)`<`[`DataColumn`](../../../lib/core/src/lib/datatable/data/data-column.model.ts)`<>[]>` | Emitted when the column order is changed. |
+| columnsWidthChanged | [`EventEmitter`](https://angular.io/api/core/EventEmitter)`<`[`DataColumn`](../../../lib/core/src/lib/datatable/data/data-column.model.ts)`<>[]>` | Emitted when the column width is changed. |
+| executeRowAction | [`EventEmitter`](https://angular.io/api/core/EventEmitter)`<`[`DataRowActionEvent`](../../../lib/core/src/lib/datatable/components/data-row-action.event.ts)`>` | Emitted when the user executes a row action. |
+| rowClick | [`EventEmitter`](https://angular.io/api/core/EventEmitter)`<`[`DataRowEvent`](../../../lib/core/src/lib/datatable/data/data-row-event.model.ts)`>` | Emitted when the user clicks a row. |
+| rowDblClick | [`EventEmitter`](https://angular.io/api/core/EventEmitter)`<`[`DataRowEvent`](../../../lib/core/src/lib/datatable/data/data-row-event.model.ts)`>` | Emitted when the user double-clicks a row. |
+| showRowActionsMenu | [`EventEmitter`](https://angular.io/api/core/EventEmitter)`<`[`DataCellEvent`](../../../lib/core/src/lib/datatable/components/data-cell.event.ts)`>` | Emitted before the actions menu is displayed for a row. |
+| showRowContextMenu | [`EventEmitter`](https://angular.io/api/core/EventEmitter)`<`[`DataCellEvent`](../../../lib/core/src/lib/datatable/components/data-cell.event.ts)`>` | Emitted before the context menu is displayed for a row. |
## Details
@@ -477,27 +478,29 @@ for more information.
Below are the DOM events emitted by the DataTable component.
These events bubble up the component tree and can be handled by any parent component.
-| Name | Description |
-| ---- | ----------- |
-| row-click | Raised when user clicks a row |
-| row-dblclick | Raised when user double-clicks a row |
-| row-select | Raised after user selects a row |
-| row-unselect | Raised after user unselects a row |
-| row-keyup | Raised on the 'keyup' event for the focused row. |
+| Name | Description |
+|-----------------|------------------------------------------------------|
+| row-click | Raised when user clicks a row |
+| row-dblclick | Raised when user double-clicks a row |
+| row-select | Raised after user selects a row |
+| row-unselect | Raised after user unselects a row |
+| row-keyup | Raised on the 'keyup' event for the focused row. |
| sorting-changed | Raised after user clicks the sortable column header. |
-| header-dragover | Raised when dragging content over the header. |
-| header-drop | Raised when data is dropped on the column header. |
-| cell-dragover | Raised when dragging data over the cell. |
-| cell-drop | Raised when data is dropped on the column cell. |
+| header-dragover | Raised when dragging content over the header. |
+| header-drop | Raised when data is dropped on the column header. |
+| cell-dragover | Raised when dragging data over the cell. |
+| cell-drop | Raised when data is dropped on the column cell. |
#### Sorting-changed
sorting-changed event contains
```ts
-direction: "asc"
-key: "timestamp"
-sortingKey: ""
+{
+ direction: "asc"
+ key: "timestamp"
+ sortingKey: ""
+}
```
#### Drop Events
@@ -540,16 +543,18 @@ Given that DataTable raises bubbling DOM events, you can handle drop behavior fr
Where the implementation of the handlers can look like following:
```ts
-onDragOver(event: CustomEvent) {
- // always needed for custom drop handlers (!)
- event.preventDefault();
-}
+class MyComponent {
+ onDragOver(event: CustomEvent) {
+ // always needed for custom drop handlers (!)
+ event.preventDefault();
+ }
-onDrop(event: DataTableDropEvent) {
- event.preventDefault();
+ onDrop(event: DataTableDropEvent) {
+ event.preventDefault();
- const { column, row, target } = event.detail;
- // do something with the details
+ const { column, row, target } = event.detail;
+ // do something with the details
+ }
}
```
@@ -564,26 +569,15 @@ onDrop(event: DataTableDropEvent) {
```
```ts
-onRowClick(event) {
- console.log(event);
+class MyComponent {
+ onRowClick(event) {
+ console.log(event);
+ }
}
```
-### Card view
-
-Set the `display` property to "gallery" to enable Card View mode:
-
-```html
-
- `name - ${users[index].firstName} ${users[index].lastName} status: ${status}` ).toString();
+ return (value || []).map((status, index) => `name - ${users[index].firstName} ${users[index].lastName} status: ${status}`).toString();
}
return value;
}
+}
```
```html
@@ -919,9 +923,11 @@ here is the sample resolver which merge the users property and status and it wil
You can define the tooltip format for cells of type date using a configuration in `app.config.json`:
```json
- "dateValues": {
- "defaultTooltipDateFormat": "medium"
- }
+{
+ "dateValues": {
+ "defaultTooltipDateFormat": "medium"
+ }
+}
```
## See also
diff --git a/docs/docassets/images/document-list-card-view.png b/docs/docassets/images/document-list-card-view.png
deleted file mode 100644
index d0ca556d04..0000000000
Binary files a/docs/docassets/images/document-list-card-view.png and /dev/null differ
diff --git a/lib/content-services/src/lib/breadcrumb/navigable-component.interface.ts b/lib/content-services/src/lib/breadcrumb/navigable-component.interface.ts
deleted file mode 100644
index d1eda45b39..0000000000
--- a/lib/content-services/src/lib/breadcrumb/navigable-component.interface.ts
+++ /dev/null
@@ -1,22 +0,0 @@
-/*!
- * @license
- * Copyright © 2005-2023 Hyland Software, Inc. and its affiliates. All rights reserved.
- *
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- * http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- */
-
-import { Node } from '@alfresco/js-api';
-
-export interface NavigableComponentInterface {
- navigateTo(node: Node | string);
-}
diff --git a/lib/content-services/src/lib/breadcrumb/public-api.ts b/lib/content-services/src/lib/breadcrumb/public-api.ts
index fb2941af43..5d5b39789b 100644
--- a/lib/content-services/src/lib/breadcrumb/public-api.ts
+++ b/lib/content-services/src/lib/breadcrumb/public-api.ts
@@ -17,6 +17,5 @@
export * from './breadcrumb.component';
export * from './dropdown-breadcrumb.component';
-export * from './navigable-component.interface';
export * from './breadcrumb.module';
diff --git a/lib/content-services/src/lib/document-list/components/document-list.component.html b/lib/content-services/src/lib/document-list/components/document-list.component.html
index c19c66a860..ddf4c35d29 100644
--- a/lib/content-services/src/lib/document-list/components/document-list.component.html
+++ b/lib/content-services/src/lib/document-list/components/document-list.component.html
@@ -10,7 +10,6 @@
[rowStyleClass]="rowStyleClass"
[showMainDatatableActions]="true"
[loading]="loading"
- [display]="display"
[noPermission]="noPermission"
[showHeader]="showHeader"
[rowMenuCacheEnabled]="false"
diff --git a/lib/content-services/src/lib/document-list/components/document-list.component.spec.ts b/lib/content-services/src/lib/document-list/components/document-list.component.spec.ts
index 25dc7bf91e..f971a23f56 100644
--- a/lib/content-services/src/lib/document-list/components/document-list.component.spec.ts
+++ b/lib/content-services/src/lib/document-list/components/document-list.component.spec.ts
@@ -364,23 +364,6 @@ describe('DocumentList', () => {
expect(documentList.resetSelection).toHaveBeenCalled();
});
- it('should use the cardview style if cardview is true', () => {
- documentList.display = 'gallery';
-
- fixture.detectChanges();
-
- expect(element.querySelector('.adf-datatable-card')).toBeDefined();
- });
-
- it('should use the base document list style if cardview is false', () => {
- documentList.display = 'list';
-
- fixture.detectChanges();
-
- expect(element.querySelector('.adf-datatable-card')).toBe(null);
- expect(element.querySelector('.adf-datatable')).toBeDefined();
- });
-
it('should reset selection upon reload', () => {
documentList.currentFolderId = 'id-folder';
spyOn(documentList, 'resetSelection').and.callThrough();
diff --git a/lib/content-services/src/lib/document-list/components/document-list.component.ts b/lib/content-services/src/lib/document-list/components/document-list.component.ts
index 18319ec43d..800e5b9def 100644
--- a/lib/content-services/src/lib/document-list/components/document-list.component.ts
+++ b/lib/content-services/src/lib/document-list/components/document-list.component.ts
@@ -41,7 +41,6 @@ import {
DataRowActionEvent,
DataSorting,
DataTableComponent,
- DisplayMode,
ShowHeaderMode,
PaginatedComponent,
AppConfigService,
@@ -61,7 +60,6 @@ import {
DataColumn
} from '@alfresco/adf-core';
import { NodesApiService } from '../../common/services/nodes-api.service';
-
import { Node, NodeEntry, NodePaging, NodesApi, Pagination } from '@alfresco/js-api';
import { Subject, BehaviorSubject, of } from 'rxjs';
import { ShareDataRow } from './../data/share-data-row.model';
@@ -70,7 +68,6 @@ import { presetsDefaultModel } from '../models/preset.model';
import { ContentActionModel } from './../models/content-action.model';
import { PermissionStyleModel } from './../models/permissions-style.model';
import { NodeEntityEvent, NodeEntryEvent } from './node.event';
-import { NavigableComponentInterface } from '../../breadcrumb/navigable-component.interface';
import { FilterSearch } from './../../search/models/filter-search.interface';
import { RowFilter } from '../data/row-filter.model';
import { DocumentListService } from '../services/document-list.service';
@@ -97,7 +94,7 @@ const BYTES_TO_MB_CONVERSION_VALUE = 1048576;
encapsulation: ViewEncapsulation.None,
host: { class: 'adf-document-list' }
})
-export class DocumentListComponent extends DataTableSchema implements OnInit, OnChanges, OnDestroy, AfterContentInit, PaginatedComponent, NavigableComponentInterface {
+export class DocumentListComponent extends DataTableSchema implements OnInit, OnChanges, OnDestroy, AfterContentInit, PaginatedComponent {
static SINGLE_CLICK_NAVIGATION: string = 'click';
static DOUBLE_CLICK_NAVIGATION: string = 'dblclick';
@@ -133,10 +130,6 @@ export class DocumentListComponent extends DataTableSchema implements OnInit, On
@Input()
where: string;
- /** Change the display mode of the table. Can be "list" or "gallery". */
- @Input()
- display: string = DisplayMode.List;
-
/**
* Define a set of CSS styles to apply depending on the permission
* of the user on that node. See the Permission Style model
@@ -479,7 +472,6 @@ export class DocumentListComponent extends DataTableSchema implements OnInit, On
return defaultSorting;
}
-
isMobile(): boolean {
return !!/Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent);
}
@@ -976,7 +968,6 @@ export class DocumentListComponent extends DataTableSchema implements OnInit, On
return canNavigateFolder;
}
-
private onDataReady(nodePaging: NodePaging) {
this.ready.emit(nodePaging);
this.pagination.next(nodePaging.list.pagination);
diff --git a/lib/core/src/lib/datatable/components/datatable/datatable.component.html b/lib/core/src/lib/datatable/components/datatable/datatable.component.html
index 4976da60fa..63f39b4c38 100644
--- a/lib/core/src/lib/datatable/components/datatable/datatable.component.html
+++ b/lib/core/src/lib/datatable/components/datatable/datatable.component.html
@@ -1,8 +1,7 @@
@@ -14,7 +13,6 @@
data-automation-id="datatable-row-header"
[disabled]="!isHeaderVisible()"
class="adf-datatable-row"
- *ngIf="display === 'list'"
role="row">
@@ -143,17 +141,6 @@
-
-
-
- {{ col.title | translate}}
-
-
-
-
+
-
-
+ class="adf-datatable-row adf-no-permission__row">
-
+
{
expect(dataTable.data.setColumns).toHaveBeenCalled();
}));
- it('should use the cardview style if cardview is true', () => {
- const newData = new ObjectDataTableAdapter([{ name: '1' }, { name: '2' }], [new ObjectDataColumn({ key: 'name' })]);
-
- dataTable.display = 'gallery';
- dataTable.ngOnChanges({
- data: new SimpleChange(null, newData, false)
- });
-
- fixture.detectChanges();
-
- expect(element.querySelector('.adf-datatable-card')).not.toBeNull();
- expect(element.querySelector('.adf-datatable')).toBeNull();
- });
-
it('should use the cardview style if cardview is false', () => {
const newData = new ObjectDataTableAdapter([{ name: '1' }, { name: '2' }], [new ObjectDataColumn({ key: 'name' })]);
@@ -299,22 +285,28 @@ describe('DataTable', () => {
it('should sortPredicate from CdkDropList return true if column is enabled', () => {
const dropList = getDropList();
- spyOn(dropList, 'getSortedItems').and.returnValue([{
- disabled: true
- }, {
- disabled: false
- }] as CdkDrag[]);
+ spyOn(dropList, 'getSortedItems').and.returnValue([
+ {
+ disabled: true
+ },
+ {
+ disabled: false
+ }
+ ] as CdkDrag[]);
expect(dropList.sortPredicate(1, undefined, dropList)).toBeTrue();
});
it('should sortPredicate from CdkDropList return false if column is disabled', () => {
const dropList = getDropList();
- spyOn(dropList, 'getSortedItems').and.returnValue([{
- disabled: true
- }, {
- disabled: true
- }] as CdkDrag[]);
+ spyOn(dropList, 'getSortedItems').and.returnValue([
+ {
+ disabled: true
+ },
+ {
+ disabled: true
+ }
+ ] as CdkDrag[]);
expect(dropList.sortPredicate(1, undefined, dropList)).toBeFalse();
});
@@ -955,12 +947,6 @@ describe('DataTable', () => {
expect(dataTable.asIconValue(row, column)).toBe(null);
});
- it('should parse icon values to a valid i18n key', () => {
- expect(dataTable.iconAltTextKey('custom')).toBe('ICONS.custom');
- expect(dataTable.iconAltTextKey('/path/to/custom')).toBe('ICONS.custom');
- expect(dataTable.iconAltTextKey('/path/to/custom.svg')).toBe('ICONS.custom');
- });
-
it('should require column and direction to evaluate sorting state', () => {
expect(dataTable.isColumnSorted(null, null)).toBeFalsy();
expect(dataTable.isColumnSorted({} as DataColumn, null)).toBeFalsy();
diff --git a/lib/core/src/lib/datatable/components/datatable/datatable.component.stories.ts b/lib/core/src/lib/datatable/components/datatable/datatable.component.stories.ts
index 2da1bbeea5..19d69294aa 100644
--- a/lib/core/src/lib/datatable/components/datatable/datatable.component.stories.ts
+++ b/lib/core/src/lib/datatable/components/datatable/datatable.component.stories.ts
@@ -29,13 +29,7 @@ export default {
title: 'Core/Datatable/Datatable',
decorators: [
moduleMetadata({
- imports: [
- CoreStoryModule,
- DataTableModule,
- MatProgressSpinnerModule,
- BrowserAnimationsModule,
- RouterTestingModule
- ]
+ imports: [CoreStoryModule, DataTableModule, MatProgressSpinnerModule, BrowserAnimationsModule, RouterTestingModule]
})
],
argTypes: {
@@ -136,9 +130,7 @@ export default {
sorting: {
control: 'object',
defaultValue: ['id', 'asc'],
- description: 'A string array.\n\n' +
- 'First element describes the key to sort by.\n\n' +
- 'Second element describes the sorting order.',
+ description: 'A string array.\n\n' + 'First element describes the key to sort by.\n\n' + 'Second element describes the sorting order.',
table: {
type: { summary: 'any[]' },
defaultValue: { summary: '[]' }
@@ -149,11 +141,27 @@ export default {
description: 'The columns that the datatable will show.',
defaultValue: [
{ type: 'text', key: 'id', title: 'Id', sortable: true },
- { type: 'text', key: 'textCol', title: 'Text Column', sortable: true, draggable: true, cssClass: 'adf-ellipsis-cell', copyContent: true },
+ {
+ type: 'text',
+ key: 'textCol',
+ title: 'Text Column',
+ sortable: true,
+ draggable: true,
+ cssClass: 'adf-ellipsis-cell',
+ copyContent: true
+ },
{ type: 'image', key: 'imageCol', title: 'Image Column', draggable: true, cssClass: 'adf-ellipsis-cell' },
{ type: 'icon', key: 'iconCol', title: 'Icon Column', draggable: true, cssClass: 'adf-ellipsis-cell' },
{ type: 'date', key: 'dateCol', title: 'Date Column', sortable: true, draggable: true, cssClass: 'adf-ellipsis-cell' },
- { type: 'date', key: 'dateCol', title: 'Date Time Ago Column', sortable: true, draggable: true, cssClass: 'adf-ellipsis-cell', dateConfig: { format: 'timeAgo' } },
+ {
+ type: 'date',
+ key: 'dateCol',
+ title: 'Date Time Ago Column',
+ sortable: true,
+ draggable: true,
+ cssClass: 'adf-ellipsis-cell',
+ dateConfig: { format: 'timeAgo' }
+ },
{ type: 'fileSize', key: 'fileSizeCol', title: 'File Size Column', sortable: true, draggable: true, cssClass: 'adf-ellipsis-cell' },
{ type: 'location', format: '/files', key: 'locationCol', title: 'Location Column', draggable: true, cssClass: 'adf-ellipsis-cell' },
{ type: 'boolean', key: 'booleanCol', title: 'Boolean Column', draggable: true, cssClass: 'adf-ellipsis-cell' },
@@ -257,7 +265,8 @@ export default {
},
rowStyle: {
control: 'object',
- description: 'The inline style to apply to every row. See [NgStyle](https://angular.io/docs/ts/latest/api/common/index/NgStyle-directive.html) docs for more details and usage examples.',
+ description:
+ 'The inline style to apply to every row. See [NgStyle](https://angular.io/docs/ts/latest/api/common/index/NgStyle-directive.html) docs for more details and usage examples.',
table: {
category: 'Custom Row Styles',
type: { summary: '{ [key: string]: any }' }
@@ -365,9 +374,8 @@ export default {
}
} as Meta;
-const insertContentToTemplate = (content: string): string => (
+const insertContentToTemplate = (content: string): string =>
` (
(columnOrderChanged)=columnOrderChanged($event)
>
${content}
- `
-);
+ `;
export const defaultDatatable: Story = (args: DataTableComponent) => ({
props: args,
diff --git a/lib/core/src/lib/datatable/components/datatable/datatable.component.ts b/lib/core/src/lib/datatable/components/datatable/datatable.component.ts
index c0a520485b..66633f8df5 100644
--- a/lib/core/src/lib/datatable/components/datatable/datatable.component.ts
+++ b/lib/core/src/lib/datatable/components/datatable/datatable.component.ts
@@ -62,12 +62,6 @@ import { MatIconRegistry } from '@angular/material/icon';
import { DomSanitizer } from '@angular/platform-browser';
import { ResizeEvent } from '../../directives/resizable/types';
-// eslint-disable-next-line no-shadow
-export enum DisplayMode {
- List = 'list',
- Gallery = 'gallery'
-}
-
// eslint-disable-next-line no-shadow
export enum ShowHeaderMode {
Never = 'never',
@@ -95,10 +89,6 @@ export class DataTableComponent implements OnInit, AfterContentInit, OnChanges,
@Input()
data: DataTableAdapter;
- /** Selects the display mode of the table. Can be "list" or "gallery". */
- @Input()
- display: string = DisplayMode.List;
-
/** The rows that the datatable will show. */
@Input()
rows: any[] = [];
@@ -241,8 +231,8 @@ export class DataTableComponent implements OnInit, AfterContentInit, OnChanges,
/**
* Flag that indicates if the datatable should be blurred when resizing.
*/
- @Input()
- blurOnResize = true;
+ @Input()
+ blurOnResize = true;
headerFilterTemplate: TemplateRef;
noContentTemplate: TemplateRef;
@@ -259,9 +249,6 @@ export class DataTableComponent implements OnInit, AfterContentInit, OnChanges,
hoveredHeaderColumnIndex = -1;
resizingColumnIndex = -1;
- /** This array of fake rows fix the flex layout for the gallery view */
- fakeRows = [];
-
private keyManager: FocusKeyManager;
private clickObserver: Observer;
private click$: Observable;
@@ -299,7 +286,6 @@ export class DataTableComponent implements OnInit, AfterContentInit, OnChanges,
})
);
}
- this.datatableLayoutFix();
this.setTableSchema();
}
@@ -347,10 +333,6 @@ export class DataTableComponent implements OnInit, AfterContentInit, OnChanges,
if (this.isPropertyChanged(changes['sorting'])) {
this.setTableSorting(changes['sorting'].currentValue);
}
-
- if (this.isPropertyChanged(changes['display'])) {
- this.datatableLayoutFix();
- }
}
isColumnSortActive(column: DataColumn): boolean {
@@ -514,7 +496,7 @@ export class DataTableComponent implements OnInit, AfterContentInit, OnChanges,
}
if (row) {
- const rowIndex = this.data.getRows().indexOf(row) + (this.isHeaderListVisible() ? 1 : 0);
+ const rowIndex = this.data.getRows().indexOf(row) + (this.isHeaderVisible() ? 1 : 0);
this.keyManager.setActiveItem(rowIndex);
const dataRowEvent = new DataRowEvent(row, mouseEvent, this);
@@ -528,10 +510,6 @@ export class DataTableComponent implements OnInit, AfterContentInit, OnChanges,
}
}
- private isHeaderListVisible(): boolean {
- return this.isHeaderVisible() && this.display === DisplayMode.List;
- }
-
private handleRowSelection(row: DataRow, e: KeyboardEvent | MouseEvent) {
if (this.data) {
if (this.isSingleSelectionMode()) {
@@ -726,10 +704,6 @@ export class DataTableComponent implements OnInit, AfterContentInit, OnChanges,
return null;
}
- iconAltTextKey(value: string): string {
- return value ? 'ICONS.' + value.substring(value.lastIndexOf('/') + 1).replace(/\.[a-z]+/, '') : '';
- }
-
isColumnSorted(col: DataColumn, direction: string): boolean {
if (col && direction) {
const sorting = this.data.getSorting();
@@ -779,10 +753,6 @@ export class DataTableComponent implements OnInit, AfterContentInit, OnChanges,
return row.isDropTarget === true;
}
- hasSelectionMode(): boolean {
- return this.isSingleSelectionMode() || this.isMultiSelectionMode();
- }
-
isSingleSelectionMode(): boolean {
return this.selectionMode && this.selectionMode.toLowerCase() === 'single';
}
@@ -811,14 +781,6 @@ export class DataTableComponent implements OnInit, AfterContentInit, OnChanges,
}
}
- getSortingKey(): string | null {
- if (this.data.getSorting()) {
- return this.data.getSorting().key;
- }
-
- return null;
- }
-
selectRow(row: DataRow, value: boolean) {
if (row) {
row.isSelected = value;
@@ -909,18 +871,6 @@ export class DataTableComponent implements OnInit, AfterContentInit, OnChanges,
}
}
- private datatableLayoutFix() {
- const maxGalleryRows = 25;
-
- if (this.display === 'gallery') {
- for (let i = 0; i < maxGalleryRows; i++) {
- this.fakeRows.push('');
- }
- } else {
- this.fakeRows = [];
- }
- }
-
getNameColumnValue() {
return this.data.getColumns().find((el: any) => el.key.includes('name'));
}
@@ -1005,10 +955,8 @@ export class DataTableComponent implements OnInit, AfterContentInit, OnChanges,
}
private isSortingEqual(col: DataColumn, direction: string, sorting: DataSorting): boolean {
- return sorting &&
- (sorting.key === col.key || sorting.key === col.sortingKey) &&
- sorting.direction?.toLocaleLowerCase() === direction;
- };
+ return sorting && (sorting.key === col.key || sorting.key === col.sortingKey) && sorting.direction?.toLocaleLowerCase() === direction;
+ }
get isResizing(): boolean {
return this.resizingColumnIndex >= 0;
diff --git a/package-lock.json b/package-lock.json
index f5a9c40164..9195359a2c 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -161,7 +161,8 @@
},
"lib/eslint-angular": {
"name": "@alfresco/eslint-plugin-eslint-angular",
- "version": "6.7.1",
+ "version": "6.8.0",
+ "dev": true,
"license": "Apache-2.0"
},
"node_modules/@aashutoshrathi/word-wrap": {