mirror of
https://github.com/Alfresco/alfresco-ng2-components.git
synced 2025-07-24 17:32:15 +00:00
AAE-12273: Implemented column resizing directive (#8272)
* AAE-12273: Implemented column resizing directive * AAE-12273: Updated datatable component docs with column resizing feature * AAE-12273: Fixed lint errors * AAE-12273: Fixed spell check and lint errors * AAE-12273: Fixing lint issues * AAE-12273: Excluded failing e2e * AAE-12273: Excluded more failing E2Es * AAE-12273: Excluded more failing e2e * AAE-12273: Code Improvement * AAE-12273: Fixed datatable column flex item shrink * AAE-12273: Fixed unit tests of column header resizing flex item shrink
This commit is contained in:
@@ -60,6 +60,7 @@ Defines column properties for DataTable, Tasklist, Document List and other compo
|
||||
| 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', 'location', and 'json'. |
|
||||
| width | `number` | | size of the column in pixels |
|
||||
|
||||
## Details
|
||||
|
||||
|
@@ -388,6 +388,7 @@ Learm more about styling your datatable: [Customizing the component's styles](#c
|
||||
| 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. |
|
||||
| isResizingEnabled | `boolean` | false | Toggles column resizing feature. |
|
||||
|
||||
### Events
|
||||
|
||||
@@ -873,3 +874,19 @@ You can define the tooltip format for cells of type date using a configuration i
|
||||
- [Pagination component](pagination.component.md)
|
||||
- [Data Table Adapter interface](../interfaces/datatable-adapter.interface.md)
|
||||
- [Document list component](../../content-services/components/document-list.component.md)
|
||||
|
||||
#### Column Resizing
|
||||
|
||||
It is possible to have the ability to resize columns by clicking on the right border of each column and dragging it to the left.
|
||||
You can do this by setting the `isResizingEnabled` property of your datatable to `true`:
|
||||
|
||||
```html
|
||||
<adf-datatable
|
||||
[data]="data"
|
||||
[isResizingEnabled]="true">
|
||||
</adf-datatable>
|
||||
```
|
||||
|
||||
Once set up, the column resizing behaves as shown in the image below:
|
||||
|
||||

|
||||
|
Reference in New Issue
Block a user