@leanix/components 0.4.495 → 0.4.497
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/esm2022/lib/core-ui/components/table/table-header/table-header.component.mjs +3 -3
- package/esm2022/lib/core-ui/components/table/table.component.mjs +15 -3
- package/fesm2022/leanix-components.mjs +16 -4
- package/fesm2022/leanix-components.mjs.map +1 -1
- package/lib/core-ui/components/table/table.component.d.ts +14 -2
- package/package.json +1 -1
|
@@ -13,6 +13,8 @@ import * as i0 from "@angular/core";
|
|
|
13
13
|
* import { TableComponent } from '@leanix/components';
|
|
14
14
|
* ```
|
|
15
15
|
*
|
|
16
|
+
* 2. Add the `lx-table` directive to your `<table>` element.
|
|
17
|
+
*
|
|
16
18
|
* ```html
|
|
17
19
|
* <table lx-table></table>
|
|
18
20
|
* ```
|
|
@@ -22,13 +24,20 @@ import * as i0 from "@angular/core";
|
|
|
22
24
|
* To provide sortability within a table, the `isSortable` input has to be set to `true`
|
|
23
25
|
* and the columns that support sorting should be `<lx-th>` elements with a column name applied via the `column` input.
|
|
24
26
|
*
|
|
27
|
+
* Sorting can be disabled for individual columns via the `disableSort` input.
|
|
28
|
+
*
|
|
25
29
|
* By default the sort order of columns can be changed between unsorted, ascending, and descending (after descending back to unsorted).
|
|
26
30
|
* To prevent the user from clearing the sort order and just allow toggling between ascending and descending the `disableSortClear` input can be set to `true`.
|
|
27
31
|
*
|
|
32
|
+
* To handle sort changes, the `(sortChange)` output can be used to receive the new sort (`key` of the column and `order` - either `ASC`, `DESC`, or `undefined`).
|
|
33
|
+
*
|
|
34
|
+
* ### Example code
|
|
28
35
|
* ```html
|
|
29
|
-
* <table lx-table [isSortable]="true">
|
|
36
|
+
* <table lx-table [isSortable]="true" [(sort)]="sort" (sortChange)="...">
|
|
30
37
|
* <thead>
|
|
31
|
-
* <lx-th column="column1" [disableSortClear]="false">
|
|
38
|
+
* <lx-th column="column1" [disableSortClear]="false">Allows asc, desc & unsorted</lx-th>
|
|
39
|
+
* <lx-th column="column2" [disableSortClear]="true">Allows only asc & desc</lx-th>
|
|
40
|
+
* <lx-th column="column3" [disableSort]="true">Is not sortable</lx-th>
|
|
32
41
|
* </thead>
|
|
33
42
|
* </table>
|
|
34
43
|
* ```
|
|
@@ -42,6 +51,9 @@ export declare class TableComponent {
|
|
|
42
51
|
* The sort state of the table. Which column is sorted in what order.
|
|
43
52
|
*/
|
|
44
53
|
readonly sort: import("@angular/core").ModelSignal<SortingOptions>;
|
|
54
|
+
/**
|
|
55
|
+
* @internal To be called from `lx-th` elements to set the sort state.
|
|
56
|
+
*/
|
|
45
57
|
onTableHeaderSortChange(sort: SortingOptions): void;
|
|
46
58
|
static ɵfac: i0.ɵɵFactoryDeclaration<TableComponent, never>;
|
|
47
59
|
static ɵdir: i0.ɵɵDirectiveDeclaration<TableComponent, "table[lx-table]", never, { "isSortable": { "alias": "isSortable"; "required": false; "isSignal": true; }; "sort": { "alias": "sort"; "required": false; "isSignal": true; }; }, { "sort": "sortChange"; }, never, never, true, never>;
|