forked from NationalBankBelgium/stark
-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
feat(stark-ui): add support for displaying the "items per page" dropd…
…own also in Pagination on "compact" mode ISSUES CLOSED: NationalBankBelgium#1248
- Loading branch information
1 parent
c123ef4
commit 187b1b4
Showing
13 changed files
with
150 additions
and
4 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
1 change: 1 addition & 0 deletions
1
showcase/src/app/demo-ui/components/table-with-items-per-page-selector/index.ts
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1 @@ | ||
export * from "./table-with-items-per-page-selector.component"; |
14 changes: 14 additions & 0 deletions
14
...ents/table-with-items-per-page-selector/table-with-items-per-page-selector.component.html
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,14 @@ | ||
<stark-table | ||
[data]="data" | ||
[columnProperties]="columns" | ||
[filter]="filter" | ||
[orderProperties]="order" | ||
[paginationConfig]="pagination" | ||
[tableRowActions]="tableRowActions" | ||
showRowIndex | ||
multiSort | ||
showRowsCounter | ||
(rowClicked)="handleRowClicked($event)" | ||
> | ||
<header><h1 class="mb0" translate>SHOWCASE.DEMO.TABLE.WITH_ITEMS_PER_PAGE_SELECTOR</h1></header> | ||
</stark-table> |
97 changes: 97 additions & 0 deletions
97
...onents/table-with-items-per-page-selector/table-with-items-per-page-selector.component.ts
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,97 @@ | ||
import { Component, Inject } from "@angular/core"; | ||
import { STARK_LOGGING_SERVICE, StarkLoggingService } from "@nationalbankbelgium/stark-core"; | ||
import { StarkPaginationConfig, StarkTableColumnProperties, StarkTableFilter, StarkTableRowActions } from "@nationalbankbelgium/stark-ui"; | ||
|
||
const DUMMY_DATA: object[] = [ | ||
{ | ||
id: 1, | ||
title: { label: "first title (value: 1)", value: 1 }, | ||
description: "first one", | ||
extra: "number one has some extra information" | ||
}, | ||
{ id: 10, title: { label: "second title (value: 2)", value: 2 }, description: "second description" }, | ||
{ id: 12, title: { label: "third title (value: 3)", value: 3 }, description: "the third description" }, | ||
{ id: 2, title: { label: "fourth title (value: 4)", value: 4 }, description: "description number four" }, | ||
{ | ||
id: 23, | ||
title: { label: "fifth title (value: 5)", value: 5 }, | ||
description: "fifth description", | ||
extra: "The fifth row has some extra information" | ||
}, | ||
{ id: 222, title: { label: "sixth title (value: 6)", value: 6 }, description: "the sixth description" }, | ||
{ | ||
id: 112, | ||
title: { label: "seventh title (value: 7)", value: 7 }, | ||
description: "seventh description", | ||
extra: "This row has some extra information" | ||
}, | ||
{ id: 232, title: { label: "eighth title (value: 8)", value: 8 }, description: "description number eight" }, | ||
{ id: 154, title: { label: "ninth title (value: 9)", value: 9 }, description: "the ninth description" }, | ||
{ id: 27, title: { label: "tenth title (value: 10)", value: 10 }, description: "description number ten", extra: "extra info" }, | ||
{ id: 86, title: { label: "eleventh title (value: 11)", value: 11 }, description: "eleventh description" }, | ||
{ id: 44, title: { label: "twelfth title (value: 12)", value: 12 }, description: "the twelfth description" } | ||
]; | ||
|
||
@Component({ | ||
selector: "showcase-table-with-items-per-page-selector", | ||
templateUrl: "./table-with-items-per-page-selector.component.html" | ||
}) | ||
export class TableWithItemsPerPageSelectorComponent { | ||
public data: object[] = DUMMY_DATA; | ||
|
||
public columns: StarkTableColumnProperties[] = [ | ||
{ name: "id", label: "Id" }, | ||
{ | ||
name: "title", | ||
label: "SHOWCASE.DEMO.TABLE.LABELS.TITLE", | ||
cellFormatter: (value: { label: string }): string => "~" + value.label, | ||
compareFn: (n1: { value: number }, n2: { value: number }): number => n1.value - n2.value | ||
}, | ||
{ name: "description", label: "SHOWCASE.DEMO.TABLE.LABELS.DESCRIPTION" }, | ||
{ | ||
name: "extra", | ||
label: "SHOWCASE.DEMO.TABLE.LABELS.EXTRA_INFO", | ||
isFilterable: false, | ||
isSortable: false, | ||
isVisible: false | ||
} | ||
]; | ||
|
||
public filter: StarkTableFilter = { | ||
globalFilterPresent: true, | ||
columns: [ | ||
{ columnName: "id", filterPosition: "below" }, | ||
{ columnName: "title", filterPosition: "above" } | ||
], | ||
filterPosition: "below" | ||
}; | ||
|
||
public order: string[] = ["title", "-description", "id"]; | ||
|
||
public pagination: StarkPaginationConfig = { totalItems: DUMMY_DATA.length, page: 1, itemsPerPage: 10, itemsPerPageIsPresent: true }; | ||
|
||
public tableRowActions: StarkTableRowActions = { | ||
actions: [ | ||
{ | ||
id: "edit-item", | ||
label: "STARK.ICONS.EDIT_ITEM", | ||
icon: "pencil", | ||
actionCall: ($event: Event, data: object): void => this.logger.debug("EDIT", $event, data), | ||
isEnabled: true | ||
}, | ||
{ | ||
id: "delete-item", | ||
label: "STARK.ICONS.DELETE_ITEM", | ||
icon: "delete", | ||
actionCall: ($event: Event, data: object): void => this.logger.debug("DELETE", $event, data), | ||
isEnabled: false | ||
} | ||
] | ||
}; | ||
|
||
public constructor(@Inject(STARK_LOGGING_SERVICE) private logger: StarkLoggingService) {} | ||
|
||
public handleRowClicked(data: object): void { | ||
this.logger.debug("ROW CLICKED:", data); | ||
} | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters