@skyux/ag-grid 6.0.0-beta.4 → 6.0.0-beta.5
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/css/sky-ag-grid.css +16 -12
- package/documentation.json +2 -2
- package/package.json +14 -14
package/css/sky-ag-grid.css
CHANGED
|
@@ -606,6 +606,10 @@ ag-grid, ag-grid-angular, ag-grid-ng2, ag-grid-polymer, ag-grid-aurelia {
|
|
|
606
606
|
height: 100%;
|
|
607
607
|
}
|
|
608
608
|
|
|
609
|
+
.ag-cell-value {
|
|
610
|
+
flex: 1 1 auto;
|
|
611
|
+
}
|
|
612
|
+
|
|
609
613
|
.ag-cell-value, .ag-group-value {
|
|
610
614
|
overflow: hidden;
|
|
611
615
|
text-overflow: ellipsis;
|
|
@@ -3596,7 +3600,7 @@ ag-grid-angular:not(.sky-ag-grid-editable) .ag-rtl .ag-row-drag, ag-grid-angular
|
|
|
3596
3600
|
}
|
|
3597
3601
|
|
|
3598
3602
|
ag-grid-angular:not(.sky-ag-grid-editable) .ag-cell-wrapper > *:not(.ag-cell-value):not(.ag-group-value) {
|
|
3599
|
-
height: min(var(--ag-
|
|
3603
|
+
height: min(var(--ag-line-height, 36px), 36px);
|
|
3600
3604
|
display: flex;
|
|
3601
3605
|
align-items: center;
|
|
3602
3606
|
flex: none;
|
|
@@ -6462,7 +6466,7 @@ ag-grid-angular:not(.sky-ag-grid-editable) .ag-rtl .ag-right-aligned-cell .ag-ce
|
|
|
6462
6466
|
|
|
6463
6467
|
ag-grid-angular:not(.sky-ag-grid-editable) .ag-cell, ag-grid-angular:not(.sky-ag-grid-editable) .ag-full-width-row .ag-cell-wrapper.ag-row-group {
|
|
6464
6468
|
border: 1px solid transparent;
|
|
6465
|
-
line-height: min(var(--ag-
|
|
6469
|
+
line-height: min(var(--ag-line-height, 36px), 36px);
|
|
6466
6470
|
padding-left: 11px;
|
|
6467
6471
|
padding-right: 11px;
|
|
6468
6472
|
-webkit-font-smoothing: subpixel-antialiased;
|
|
@@ -8530,7 +8534,7 @@ ag-grid-angular.sky-ag-grid-editable .ag-rtl .ag-row-drag, ag-grid-angular.sky-a
|
|
|
8530
8534
|
}
|
|
8531
8535
|
|
|
8532
8536
|
ag-grid-angular.sky-ag-grid-editable .ag-cell-wrapper > *:not(.ag-cell-value):not(.ag-group-value) {
|
|
8533
|
-
height: min(var(--ag-
|
|
8537
|
+
height: min(var(--ag-line-height, 36px), 36px);
|
|
8534
8538
|
display: flex;
|
|
8535
8539
|
align-items: center;
|
|
8536
8540
|
flex: none;
|
|
@@ -11391,7 +11395,7 @@ ag-grid-angular.sky-ag-grid-editable .ag-rtl .ag-right-aligned-cell .ag-cell-val
|
|
|
11391
11395
|
|
|
11392
11396
|
ag-grid-angular.sky-ag-grid-editable .ag-cell, ag-grid-angular.sky-ag-grid-editable .ag-full-width-row .ag-cell-wrapper.ag-row-group {
|
|
11393
11397
|
border: 1px solid transparent;
|
|
11394
|
-
line-height: min(var(--ag-
|
|
11398
|
+
line-height: min(var(--ag-line-height, 36px), 36px);
|
|
11395
11399
|
padding-left: 10px;
|
|
11396
11400
|
padding-right: 10px;
|
|
11397
11401
|
-webkit-font-smoothing: subpixel-antialiased;
|
|
@@ -13506,7 +13510,7 @@ ag-grid-angular.sky-ag-grid-editable .ag-row .ag-cell-focus.ag-cell-popup-editin
|
|
|
13506
13510
|
}
|
|
13507
13511
|
|
|
13508
13512
|
.sky-theme-modern:not(.the-editing-theme) ag-grid-angular:not(.sky-ag-grid-editable) .ag-cell-wrapper > *:not(.ag-cell-value):not(.ag-group-value) {
|
|
13509
|
-
height: min(var(--ag-
|
|
13513
|
+
height: min(var(--ag-line-height, 58px), 58px);
|
|
13510
13514
|
display: flex;
|
|
13511
13515
|
align-items: center;
|
|
13512
13516
|
flex: none;
|
|
@@ -16367,7 +16371,7 @@ ag-grid-angular.sky-ag-grid-editable .ag-row .ag-cell-focus.ag-cell-popup-editin
|
|
|
16367
16371
|
|
|
16368
16372
|
.sky-theme-modern:not(.the-editing-theme) ag-grid-angular:not(.sky-ag-grid-editable) .ag-cell, .sky-theme-modern:not(.the-editing-theme) ag-grid-angular:not(.sky-ag-grid-editable) .ag-full-width-row .ag-cell-wrapper.ag-row-group {
|
|
16369
16373
|
border: 1px solid transparent;
|
|
16370
|
-
line-height: min(var(--ag-
|
|
16374
|
+
line-height: min(var(--ag-line-height, 58px), 58px);
|
|
16371
16375
|
padding-left: 11px;
|
|
16372
16376
|
padding-right: 11px;
|
|
16373
16377
|
-webkit-font-smoothing: subpixel-antialiased;
|
|
@@ -18419,7 +18423,7 @@ ag-grid-angular.sky-ag-grid-editable .ag-row .ag-cell-focus.ag-cell-popup-editin
|
|
|
18419
18423
|
}
|
|
18420
18424
|
|
|
18421
18425
|
.sky-theme-modern ag-grid-angular.sky-ag-grid-editable .ag-cell-wrapper > *:not(.ag-cell-value):not(.ag-group-value) {
|
|
18422
|
-
height: min(var(--ag-
|
|
18426
|
+
height: min(var(--ag-line-height, 58px), 58px);
|
|
18423
18427
|
display: flex;
|
|
18424
18428
|
align-items: center;
|
|
18425
18429
|
flex: none;
|
|
@@ -21280,7 +21284,7 @@ ag-grid-angular.sky-ag-grid-editable .ag-row .ag-cell-focus.ag-cell-popup-editin
|
|
|
21280
21284
|
|
|
21281
21285
|
.sky-theme-modern ag-grid-angular.sky-ag-grid-editable .ag-cell, .sky-theme-modern ag-grid-angular.sky-ag-grid-editable .ag-full-width-row .ag-cell-wrapper.ag-row-group {
|
|
21282
21286
|
border: 1px solid transparent;
|
|
21283
|
-
line-height: min(var(--ag-
|
|
21287
|
+
line-height: min(var(--ag-line-height, 58px), 58px);
|
|
21284
21288
|
padding-left: 11px;
|
|
21285
21289
|
padding-right: 11px;
|
|
21286
21290
|
-webkit-font-smoothing: subpixel-antialiased;
|
|
@@ -23367,7 +23371,7 @@ ag-grid-angular.sky-ag-grid-editable .ag-row .ag-cell-focus.ag-cell-popup-editin
|
|
|
23367
23371
|
}
|
|
23368
23372
|
|
|
23369
23373
|
.sky-theme-modern.sky-theme-mode-dark:not(.the-editing-theme) ag-grid-angular:not(.sky-ag-grid-editable) .ag-cell-wrapper > *:not(.ag-cell-value):not(.ag-group-value) {
|
|
23370
|
-
height: min(var(--ag-
|
|
23374
|
+
height: min(var(--ag-line-height, 58px), 58px);
|
|
23371
23375
|
display: flex;
|
|
23372
23376
|
align-items: center;
|
|
23373
23377
|
flex: none;
|
|
@@ -26228,7 +26232,7 @@ ag-grid-angular.sky-ag-grid-editable .ag-row .ag-cell-focus.ag-cell-popup-editin
|
|
|
26228
26232
|
|
|
26229
26233
|
.sky-theme-modern.sky-theme-mode-dark:not(.the-editing-theme) ag-grid-angular:not(.sky-ag-grid-editable) .ag-cell, .sky-theme-modern.sky-theme-mode-dark:not(.the-editing-theme) ag-grid-angular:not(.sky-ag-grid-editable) .ag-full-width-row .ag-cell-wrapper.ag-row-group {
|
|
26230
26234
|
border: 1px solid transparent;
|
|
26231
|
-
line-height: min(var(--ag-
|
|
26235
|
+
line-height: min(var(--ag-line-height, 58px), 58px);
|
|
26232
26236
|
padding-left: 11px;
|
|
26233
26237
|
padding-right: 11px;
|
|
26234
26238
|
-webkit-font-smoothing: subpixel-antialiased;
|
|
@@ -28285,7 +28289,7 @@ ag-grid-angular.sky-ag-grid-editable .ag-row .ag-cell-focus.ag-cell-popup-editin
|
|
|
28285
28289
|
}
|
|
28286
28290
|
|
|
28287
28291
|
.sky-theme-modern.sky-theme-mode-dark ag-grid-angular.sky-ag-grid-editable .ag-cell-wrapper > *:not(.ag-cell-value):not(.ag-group-value) {
|
|
28288
|
-
height: min(var(--ag-
|
|
28292
|
+
height: min(var(--ag-line-height, 58px), 58px);
|
|
28289
28293
|
display: flex;
|
|
28290
28294
|
align-items: center;
|
|
28291
28295
|
flex: none;
|
|
@@ -31146,7 +31150,7 @@ ag-grid-angular.sky-ag-grid-editable .ag-row .ag-cell-focus.ag-cell-popup-editin
|
|
|
31146
31150
|
|
|
31147
31151
|
.sky-theme-modern.sky-theme-mode-dark ag-grid-angular.sky-ag-grid-editable .ag-cell, .sky-theme-modern.sky-theme-mode-dark ag-grid-angular.sky-ag-grid-editable .ag-full-width-row .ag-cell-wrapper.ag-row-group {
|
|
31148
31152
|
border: 1px solid transparent;
|
|
31149
|
-
line-height: min(var(--ag-
|
|
31153
|
+
line-height: min(var(--ag-line-height, 58px), 58px);
|
|
31150
31154
|
padding-left: 11px;
|
|
31151
31155
|
padding-right: 11px;
|
|
31152
31156
|
-webkit-font-smoothing: subpixel-antialiased;
|
package/documentation.json
CHANGED
|
@@ -4058,7 +4058,7 @@
|
|
|
4058
4058
|
{
|
|
4059
4059
|
"fileName": "data-entry-grid-docs-demo.component.ts",
|
|
4060
4060
|
"filePath": "/projects/ag-grid/documentation/code-examples/data-entry-grid/basic/data-entry-grid-docs-demo.component.ts",
|
|
4061
|
-
"rawContents": "import {\n ChangeDetectionStrategy,\n ChangeDetectorRef,\n Component,\n} from '@angular/core';\nimport { SkyAgGridService, SkyCellType } from '@skyux/ag-grid';\nimport { SkyModalCloseArgs, SkyModalService } from '@skyux/modals';\n\nimport {\n ColDef,\n GridApi,\n GridOptions,\n GridReadyEvent,\n ValueFormatterParams,\n} from 'ag-grid-community';\n\nimport { SkyDataEntryGridContextMenuComponent } from './data-entry-grid-docs-demo-context-menu.component';\nimport { SKY_AG_GRID_DEMO_DATA } from './data-entry-grid-docs-demo-data';\nimport { SkyDataEntryGridEditModalContext } from './data-entry-grid-docs-demo-edit-modal-context';\nimport { SkyDataEntryGridEditModalComponent } from './data-entry-grid-docs-demo-edit-modal.component';\n\n@Component({\n selector: 'app-data-entry-grid-docs-demo',\n templateUrl: './data-entry-grid-docs-demo.component.html',\n changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class SkyDataEntryGridDemoComponent {\n public gridData = SKY_AG_GRID_DEMO_DATA;\n public columnDefs: ColDef[] = [\n {\n field: 'selected',\n type: SkyCellType.RowSelector,\n },\n {\n colId: 'context',\n headerName: '',\n maxWidth: 50,\n sortable: false,\n cellRenderer: SkyDataEntryGridContextMenuComponent,\n },\n {\n field: 'name',\n headerName: 'Name',\n type: SkyCellType.Text,\n cellRendererParams: {\n skyComponentProperties: {\n validator: (value): boolean => String(value).length <= 10,\n validatorMessage: `Value exceeds maximum length`,\n },\n },\n },\n {\n field: 'age',\n headerName: 'Age',\n type: SkyCellType.Number,\n cellRendererParams: {\n skyComponentProperties: {\n validator: (value) => value >= 18,\n validatorMessage: `Age must be 18+`,\n },\n },\n maxWidth: 60,\n },\n {\n field: 'startDate',\n headerName: 'Start date',\n type: SkyCellType.Date,\n sort: 'asc',\n },\n {\n field: 'endDate',\n headerName: 'End date',\n type: SkyCellType.Date,\n valueFormatter: this.endDateFormatter,\n },\n {\n field: 'department',\n headerName: 'Department',\n type: SkyCellType.Autocomplete,\n },\n {\n field: 'jobTitle',\n headerName: 'Title',\n type: SkyCellType.Autocomplete,\n },\n {\n colId: 'validationCurrency',\n field: 'validationCurrency',\n headerName: 'Validation currency',\n type: [SkyCellType.CurrencyValidator],\n },\n {\n colId: 'validationDate',\n field: 'validationDate',\n headerName: 'Validation date',\n type: [SkyCellType.Date, SkyCellType.Validator],\n cellRendererParams: {\n skyComponentProperties: {\n validator: (value: Date) => !!value && value > new Date(1985, 9, 26),\n validatorMessage: 'Please enter a future date',\n },\n },\n },\n ];\n\n public gridApi: GridApi | undefined;\n public gridOptions: GridOptions;\n public searchText = '';\n public noRowsTemplate: string;\n\n constructor(\n private agGridService: SkyAgGridService,\n private modalService: SkyModalService,\n private changeDetection: ChangeDetectorRef\n ) {\n this.noRowsTemplate = `<div class=\"sky-deemphasized\">No results found.</div>`;\n this.gridOptions = {\n columnDefs: this.columnDefs,\n onGridReady: (gridReadyEvent) => this.onGridReady(gridReadyEvent),\n };\n this.gridOptions = this.agGridService.getGridOptions({\n gridOptions: this.gridOptions,\n });\n this.changeDetection.markForCheck();\n }\n\n public onGridReady(gridReadyEvent: GridReadyEvent): void {\n this.gridApi = gridReadyEvent.api;\n this.gridApi.sizeColumnsToFit();\n this.changeDetection.markForCheck();\n }\n\n public openModal(): void {\n const context = new SkyDataEntryGridEditModalContext();\n context.gridData = this.gridData;\n\n const options = {\n providers: [\n { provide: SkyDataEntryGridEditModalContext, useValue: context },\n ],\n ariaDescribedBy: 'docs-edit-grid-modal-content',\n size: 'large',\n };\n\n const modalInstance = this.modalService.open(\n SkyDataEntryGridEditModalComponent,\n options\n );\n\n modalInstance.closed.subscribe((result: SkyModalCloseArgs) => {\n if (result.reason === 'cancel' || result.reason === 'close') {\n alert('Edits canceled!');\n } else {\n this.gridData = result.data;\n if (this.gridApi) {\n this.gridApi.refreshCells();\n }\n alert('Saving data!');\n }\n });\n }\n\n public searchApplied(searchText: string |
|
|
4061
|
+
"rawContents": "import {\n ChangeDetectionStrategy,\n ChangeDetectorRef,\n Component,\n} from '@angular/core';\nimport { SkyAgGridService, SkyCellType } from '@skyux/ag-grid';\nimport { SkyModalCloseArgs, SkyModalService } from '@skyux/modals';\n\nimport {\n ColDef,\n GridApi,\n GridOptions,\n GridReadyEvent,\n ValueFormatterParams,\n} from 'ag-grid-community';\n\nimport { SkyDataEntryGridContextMenuComponent } from './data-entry-grid-docs-demo-context-menu.component';\nimport { SKY_AG_GRID_DEMO_DATA } from './data-entry-grid-docs-demo-data';\nimport { SkyDataEntryGridEditModalContext } from './data-entry-grid-docs-demo-edit-modal-context';\nimport { SkyDataEntryGridEditModalComponent } from './data-entry-grid-docs-demo-edit-modal.component';\n\n@Component({\n selector: 'app-data-entry-grid-docs-demo',\n templateUrl: './data-entry-grid-docs-demo.component.html',\n changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class SkyDataEntryGridDemoComponent {\n public gridData = SKY_AG_GRID_DEMO_DATA;\n public columnDefs: ColDef[] = [\n {\n field: 'selected',\n type: SkyCellType.RowSelector,\n },\n {\n colId: 'context',\n headerName: '',\n maxWidth: 50,\n sortable: false,\n cellRenderer: SkyDataEntryGridContextMenuComponent,\n },\n {\n field: 'name',\n headerName: 'Name',\n type: SkyCellType.Text,\n cellRendererParams: {\n skyComponentProperties: {\n validator: (value): boolean => String(value).length <= 10,\n validatorMessage: `Value exceeds maximum length`,\n },\n },\n },\n {\n field: 'age',\n headerName: 'Age',\n type: SkyCellType.Number,\n cellRendererParams: {\n skyComponentProperties: {\n validator: (value) => value >= 18,\n validatorMessage: `Age must be 18+`,\n },\n },\n maxWidth: 60,\n },\n {\n field: 'startDate',\n headerName: 'Start date',\n type: SkyCellType.Date,\n sort: 'asc',\n },\n {\n field: 'endDate',\n headerName: 'End date',\n type: SkyCellType.Date,\n valueFormatter: this.endDateFormatter,\n },\n {\n field: 'department',\n headerName: 'Department',\n type: SkyCellType.Autocomplete,\n },\n {\n field: 'jobTitle',\n headerName: 'Title',\n type: SkyCellType.Autocomplete,\n },\n {\n colId: 'validationCurrency',\n field: 'validationCurrency',\n headerName: 'Validation currency',\n type: [SkyCellType.CurrencyValidator],\n },\n {\n colId: 'validationDate',\n field: 'validationDate',\n headerName: 'Validation date',\n type: [SkyCellType.Date, SkyCellType.Validator],\n cellRendererParams: {\n skyComponentProperties: {\n validator: (value: Date) => !!value && value > new Date(1985, 9, 26),\n validatorMessage: 'Please enter a future date',\n },\n },\n },\n ];\n\n public gridApi: GridApi | undefined;\n public gridOptions: GridOptions;\n public searchText = '';\n public noRowsTemplate: string;\n\n constructor(\n private agGridService: SkyAgGridService,\n private modalService: SkyModalService,\n private changeDetection: ChangeDetectorRef\n ) {\n this.noRowsTemplate = `<div class=\"sky-deemphasized\">No results found.</div>`;\n this.gridOptions = {\n columnDefs: this.columnDefs,\n onGridReady: (gridReadyEvent) => this.onGridReady(gridReadyEvent),\n };\n this.gridOptions = this.agGridService.getGridOptions({\n gridOptions: this.gridOptions,\n });\n this.changeDetection.markForCheck();\n }\n\n public onGridReady(gridReadyEvent: GridReadyEvent): void {\n this.gridApi = gridReadyEvent.api;\n this.gridApi.sizeColumnsToFit();\n this.changeDetection.markForCheck();\n }\n\n public openModal(): void {\n const context = new SkyDataEntryGridEditModalContext();\n context.gridData = this.gridData;\n\n const options = {\n providers: [\n { provide: SkyDataEntryGridEditModalContext, useValue: context },\n ],\n ariaDescribedBy: 'docs-edit-grid-modal-content',\n size: 'large',\n };\n\n const modalInstance = this.modalService.open(\n SkyDataEntryGridEditModalComponent,\n options\n );\n\n modalInstance.closed.subscribe((result: SkyModalCloseArgs) => {\n if (result.reason === 'cancel' || result.reason === 'close') {\n alert('Edits canceled!');\n } else {\n this.gridData = result.data;\n if (this.gridApi) {\n this.gridApi.refreshCells();\n }\n alert('Saving data!');\n }\n });\n }\n\n public searchApplied(searchText: string | void): void {\n if (searchText) {\n this.searchText = searchText;\n } else {\n this.searchText = '';\n }\n if (this.gridApi) {\n this.gridApi.setQuickFilter(this.searchText);\n const displayedRowCount = this.gridApi.getDisplayedRowCount();\n if (displayedRowCount > 0) {\n this.gridApi.hideOverlay();\n } else {\n this.gridApi.showNoRowsOverlay();\n }\n }\n }\n\n private endDateFormatter(params: ValueFormatterParams): string {\n const dateConfig = { year: 'numeric', month: '2-digit', day: '2-digit' };\n return params.value\n ? params.value.toLocaleDateString('en-us', dateConfig)\n : 'N/A';\n }\n}\n"
|
|
4062
4062
|
},
|
|
4063
4063
|
{
|
|
4064
4064
|
"fileName": "data-entry-grid-docs-demo.module.ts",
|
|
@@ -4143,7 +4143,7 @@
|
|
|
4143
4143
|
{
|
|
4144
4144
|
"fileName": "basic-data-grid-docs-demo.component.ts",
|
|
4145
4145
|
"filePath": "/projects/ag-grid/documentation/code-examples/data-grid/basic/basic-data-grid-docs-demo.component.ts",
|
|
4146
|
-
"rawContents": "import {\n ChangeDetectionStrategy,\n ChangeDetectorRef,\n Component,\n} from '@angular/core';\nimport { SkyAgGridService, SkyCellType } from '@skyux/ag-grid';\n\nimport {\n ColDef,\n GridApi,\n GridOptions,\n GridReadyEvent,\n ValueFormatterParams,\n} from 'ag-grid-community';\n\nimport { SKY_AG_GRID_DEMO_DATA } from './basic-data-grid-docs-demo-data';\n\n@Component({\n selector: 'app-basic-data-grid-docs-demo',\n templateUrl: './basic-data-grid-docs-demo.component.html',\n changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class SkyBasicDataGridDemoComponent {\n public columnDefs: ColDef[] = [\n {\n field: 'selected',\n type: SkyCellType.RowSelector,\n },\n {\n field: 'name',\n headerName: 'Name',\n },\n {\n field: 'age',\n headerName: 'Age',\n type: SkyCellType.Number,\n maxWidth: 60,\n },\n {\n field: 'startDate',\n headerName: 'Start date',\n type: SkyCellType.Date,\n sort: 'asc',\n },\n {\n field: 'endDate',\n headerName: 'End date',\n type: SkyCellType.Date,\n valueFormatter: this.endDateFormatter,\n },\n {\n field: 'department',\n headerName: 'Department',\n type: SkyCellType.Autocomplete,\n },\n {\n field: 'jobTitle',\n headerName: 'Title',\n type: SkyCellType.Autocomplete,\n },\n ];\n\n public gridApi: GridApi | undefined;\n public gridData = SKY_AG_GRID_DEMO_DATA;\n public gridOptions: GridOptions;\n public searchText = '';\n public noRowsTemplate: string;\n\n constructor(\n private agGridService: SkyAgGridService,\n private changeDetector: ChangeDetectorRef\n ) {\n this.noRowsTemplate = `<div class=\"sky-deemphasized\">No results found.</div>`;\n this.gridOptions = this.agGridService.getGridOptions({\n gridOptions: {\n columnDefs: this.columnDefs,\n onGridReady: this.onGridReady.bind(this),\n },\n });\n this.changeDetector.markForCheck();\n }\n\n public onGridReady(gridReadyEvent: GridReadyEvent): void {\n this.gridApi = gridReadyEvent.api;\n this.gridApi.sizeColumnsToFit();\n this.changeDetector.markForCheck();\n }\n\n public searchApplied(searchText: string |
|
|
4146
|
+
"rawContents": "import {\n ChangeDetectionStrategy,\n ChangeDetectorRef,\n Component,\n} from '@angular/core';\nimport { SkyAgGridService, SkyCellType } from '@skyux/ag-grid';\n\nimport {\n ColDef,\n GridApi,\n GridOptions,\n GridReadyEvent,\n ValueFormatterParams,\n} from 'ag-grid-community';\n\nimport { SKY_AG_GRID_DEMO_DATA } from './basic-data-grid-docs-demo-data';\n\n@Component({\n selector: 'app-basic-data-grid-docs-demo',\n templateUrl: './basic-data-grid-docs-demo.component.html',\n changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class SkyBasicDataGridDemoComponent {\n public columnDefs: ColDef[] = [\n {\n field: 'selected',\n type: SkyCellType.RowSelector,\n },\n {\n field: 'name',\n headerName: 'Name',\n },\n {\n field: 'age',\n headerName: 'Age',\n type: SkyCellType.Number,\n maxWidth: 60,\n },\n {\n field: 'startDate',\n headerName: 'Start date',\n type: SkyCellType.Date,\n sort: 'asc',\n },\n {\n field: 'endDate',\n headerName: 'End date',\n type: SkyCellType.Date,\n valueFormatter: this.endDateFormatter,\n },\n {\n field: 'department',\n headerName: 'Department',\n type: SkyCellType.Autocomplete,\n },\n {\n field: 'jobTitle',\n headerName: 'Title',\n type: SkyCellType.Autocomplete,\n },\n ];\n\n public gridApi: GridApi | undefined;\n public gridData = SKY_AG_GRID_DEMO_DATA;\n public gridOptions: GridOptions;\n public searchText = '';\n public noRowsTemplate: string;\n\n constructor(\n private agGridService: SkyAgGridService,\n private changeDetector: ChangeDetectorRef\n ) {\n this.noRowsTemplate = `<div class=\"sky-deemphasized\">No results found.</div>`;\n this.gridOptions = this.agGridService.getGridOptions({\n gridOptions: {\n columnDefs: this.columnDefs,\n onGridReady: this.onGridReady.bind(this),\n },\n });\n this.changeDetector.markForCheck();\n }\n\n public onGridReady(gridReadyEvent: GridReadyEvent): void {\n this.gridApi = gridReadyEvent.api;\n this.gridApi.sizeColumnsToFit();\n this.changeDetector.markForCheck();\n }\n\n public searchApplied(searchText: string | void): void {\n if (searchText) {\n this.searchText = searchText;\n } else {\n this.searchText = '';\n }\n if (this.gridApi) {\n this.gridApi.setQuickFilter(this.searchText);\n const displayedRowCount = this.gridApi.getDisplayedRowCount();\n if (displayedRowCount > 0) {\n this.gridApi.hideOverlay();\n } else {\n this.gridApi.showNoRowsOverlay();\n }\n }\n }\n\n private endDateFormatter(params: ValueFormatterParams): string {\n const dateConfig = { year: 'numeric', month: '2-digit', day: '2-digit' };\n return params.value\n ? params.value.toLocaleDateString('en-us', dateConfig)\n : 'N/A';\n }\n}\n"
|
|
4147
4147
|
},
|
|
4148
4148
|
{
|
|
4149
4149
|
"fileName": "basic-data-grid-docs-demo.module.ts",
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@skyux/ag-grid",
|
|
3
|
-
"version": "6.0.0-beta.
|
|
3
|
+
"version": "6.0.0-beta.5",
|
|
4
4
|
"author": "Blackbaud, Inc.",
|
|
5
5
|
"keywords": [
|
|
6
6
|
"blackbaud",
|
|
@@ -35,19 +35,19 @@
|
|
|
35
35
|
"@angular/common": "^13.3.2",
|
|
36
36
|
"@angular/core": "^13.3.2",
|
|
37
37
|
"@angular/forms": "^13.3.2",
|
|
38
|
-
"@skyux/autonumeric": "6.0.0-beta.
|
|
39
|
-
"@skyux/core": "6.0.0-beta.
|
|
40
|
-
"@skyux/data-manager": "6.0.0-beta.
|
|
41
|
-
"@skyux/datetime": "6.0.0-beta.
|
|
42
|
-
"@skyux/forms": "6.0.0-beta.
|
|
43
|
-
"@skyux/i18n": "6.0.0-beta.
|
|
44
|
-
"@skyux/indicators": "6.0.0-beta.
|
|
45
|
-
"@skyux/layout": "6.0.0-beta.
|
|
46
|
-
"@skyux/lookup": "6.0.0-beta.
|
|
47
|
-
"@skyux/popovers": "6.0.0-beta.
|
|
48
|
-
"@skyux/theme": "6.0.0-beta.
|
|
49
|
-
"ag-grid-angular": "^27.
|
|
50
|
-
"ag-grid-community": "^27.
|
|
38
|
+
"@skyux/autonumeric": "6.0.0-beta.5",
|
|
39
|
+
"@skyux/core": "6.0.0-beta.5",
|
|
40
|
+
"@skyux/data-manager": "6.0.0-beta.5",
|
|
41
|
+
"@skyux/datetime": "6.0.0-beta.5",
|
|
42
|
+
"@skyux/forms": "6.0.0-beta.5",
|
|
43
|
+
"@skyux/i18n": "6.0.0-beta.5",
|
|
44
|
+
"@skyux/indicators": "6.0.0-beta.5",
|
|
45
|
+
"@skyux/layout": "6.0.0-beta.5",
|
|
46
|
+
"@skyux/lookup": "6.0.0-beta.5",
|
|
47
|
+
"@skyux/popovers": "6.0.0-beta.5",
|
|
48
|
+
"@skyux/theme": "6.0.0-beta.5",
|
|
49
|
+
"ag-grid-angular": "^27.2.0",
|
|
50
|
+
"ag-grid-community": "^27.2.0"
|
|
51
51
|
},
|
|
52
52
|
"dependencies": {
|
|
53
53
|
"tslib": "^2.3.1"
|