inteligr8/alfresco-ng2-components
1
0
Fork 0
mirror of https://github.com/Alfresco/alfresco-ng2-components.git synced 2025-10-08 14:51:32 +00:00
Code Issues Packages Projects Releases Wiki Activity

[ADF-2764] Applied new doc tool features to core library (#3383)

Browse Source
This commit is contained in:
Andy Stark
2018-05-23 19:30:48 +01:00
committed by Eugenio Romano
parent 5831bc1d77
commit 41777e0540
97 changed files with 965 additions and 788 deletions
Download Patch File Download Diff File Expand all files Collapse all files

54
docs/core/datatable.component.md
View File

@@ -16,6 +16,8 @@ See it live: [DataTable Quickstart](https://embed.plnkr.co/80qr4YFBeHjLMdAV0F6l/
- [Basic usage](#basic-usage)
- [Class members](#class-members)
- [Properties](#properties)
- [Events](#events)
@@ -128,42 +130,42 @@ export class DataTableDemo {
### Properties
| Name | Type | Default value | Description |
| ---- | ---- | ------------- | ----------- |
| data | `DataTableAdapter` | | Data source for the table |
| display | `string` | `DisplayMode.List` | Selects the display mode of the table. Can be "list" or "gallery". |
| 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. |
| multiselect | `boolean` | `false` | Toggles multiple row selection, which renders checkboxes at the beginning of each row. |
| actions | `boolean` | `false` | Toggles the data actions column. |
| actionsPosition | `string` | `'right'` | Position of the actions dropdown menu. Can be "left" or "right". |
| fallbackThumbnail | `string` | | Fallback image for rows where the thumbnail is missing. |
| contextMenu | `boolean` | `false` | Toggles custom context menu for the component. |
| allowDropFiles | `boolean` | `false` | Toggles file drop support for rows (see [Upload directive](upload.directive.md) for further details). |
| -- | -- | -- | -- |
| actions | `boolean` | false | Toggles the data actions column. |
| actionsPosition | `string` | "right" | Position of the actions dropdown menu. Can be "left" or "right". |
| allowDropFiles | `boolean` | false | Toggles file drop support for rows (see [Upload directive](upload.directive.md) for further details). |
| contextMenu | `boolean` | false | Toggles custom context menu for the component. |
| data | [`DataTableAdapter`](../../lib/core/datatable/data/datatable-adapter.ts) | | Data source for the table |
| display | `string` | [`DisplayMode`](../../lib/core/datatable/components/datatable/datatable.component.ts).List | Selects the display mode of the table. Can be "list" or "gallery". |
| fallbackThumbnail | `string` | | Fallback image for rows where the thumbnail is missing. |
| 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). |
| 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. |
| rowStyle | `string` | | 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. |
| showHeader | `boolean` | `true` | Toggles the header. |
| 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). |
| noPermission | `boolean` | `false` | Flag that indicates if the datatable should show the "no permission" template. |
| 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 | `boolean` | true | Toggles the header. |
### Events
| Name | Type | Description |
| ---- | ---- | ----------- |
| rowClick | `EventEmitter<DataRowEvent>` | Emitted when the user clicks a row. |
| rowDblClick | `EventEmitter<DataRowEvent>` | Emitted when the user double-clicks a row. |
| showRowContextMenu | `EventEmitter<DataCellEvent>` | Emitted before the context menu is displayed for a row. |
| showRowActionsMenu | `EventEmitter<DataCellEvent>` | Emitted before the actions menu is displayed for a row. |
| executeRowAction | `EventEmitter<DataRowActionEvent>` | Emitted when the user executes a row action. |
| -- | -- | -- |
| executeRowAction | [`EventEmitter<DataRowActionEvent>`](../../lib/core/datatable/components/datatable/data-row-action.event.ts) | Emitted when the user executes a row action. |
| rowClick | [`EventEmitter<DataRowEvent>`](../../lib/core/datatable/data/data-row-event.model.ts) | Emitted when the user clicks a row. |
| rowDblClick | [`EventEmitter<DataRowEvent>`](../../lib/core/datatable/data/data-row-event.model.ts) | Emitted when the user double-clicks a row. |
| showRowActionsMenu | [`EventEmitter<DataCellEvent>`](../../lib/core/datatable/components/datatable/data-cell.event.ts) | Emitted before the actions menu is displayed for a row. |
| showRowContextMenu | [`EventEmitter<DataCellEvent>`](../../lib/core/datatable/components/datatable/data-cell.event.ts) | Emitted before the context menu is displayed for a row. |
## Details
### Supplying data for the table
The column layout and row data are supplied to the table using an object that implements the
DataTableAdapter interface. This interface hides the internal details of the class that provides
[`DataTableAdapter`](../../lib/core/datatable/data/datatable-adapter.ts) interface. This interface hides the internal details of the class that provides
the data, which gives a lot of flexibility in how the data can be stored and accessed. The DataTable
library includes a standard adapter class called `ObjectDataTableAdapter` that is useful in many
common cases. See the [DataTableAdapter](datatable-adapter.interface.md) for full details about the interface and the `ObjectDataTableAdapter` class.
library includes a standard adapter class called [`ObjectDataTableAdapter`](../../lib/core/datatable/data/object-datatable-adapter.ts) that is useful in many
common cases. See the [`DataTableAdapter`](../../lib/core/datatable/data/datatable-adapter.ts) for full details about the interface and the [`ObjectDataTableAdapter`](../../lib/core/datatable/data/object-datatable-adapter.ts) class.
### Customizing columns
@@ -241,7 +243,7 @@ You can add a template that will be shown when there are no rows in your datatab
</adf-datatable>
```
You can use the empty list component to show the default ADF empty template.
You can use the [empty list component](../../lib/core/datatable/components/datatable/empty-list.component.ts) to show the default ADF empty template.
You can place any HTML layout or Angular component as content in the empty template section
by using the `<adf-empty-list-header>`, `<adf-empty-list-body>`, and `<adf-empty-list-footer>`
@@ -483,5 +485,5 @@ earlier), and perform the corresponding actions.
- [Data column component](data-column.component.md)
- [Pagination component](pagination.component.md)
- [DataTableAdapter](datatable-adapter.interface.md)
- [`DataTableAdapter`](../../lib/core/datatable/data/datatable-adapter.ts)
- [Document list component](../content-services/document-list.component.md)