feat(components/data-grid): split out simple option

libs/components/code-examples/src/lib/modules/data-grid/basic/example.component.html

@@ -9,7 +9,7 @@
   </sky-box-content>
 </sky-box>
 
-<sky-data-grid
+<sky-data-grid-lite
   data-sky-id="example-data-grid"
   multiselect
   [data]="gridData()"
@@ -50,7 +50,7 @@
   <sky-data-grid-column field="jobTitle" headingText="Title">
     <ng-template let-row="row">{{ row.jobTitle?.name }}</ng-template>
   </sky-data-grid-column>
-</sky-data-grid>
+</sky-data-grid-lite>
 
 <ng-template #contextMenu let-row="row">
   <sky-dropdown

libs/components/code-examples/src/lib/modules/data-grid/filtered/example.component.html

@@ -25,7 +25,7 @@
   />
 </sky-filter-bar>
 
-<sky-data-grid
+<sky-data-grid-lite
   height="400"
   [data]="allEmployees"
   [appliedFilters]="appliedFilters()"
@@ -72,4 +72,4 @@
     filterId="hideInactive"
     flexWidth="0"
   />
-</sky-data-grid>
+</sky-data-grid-lite>

libs/components/code-examples/src/lib/modules/data-grid/paging/example.component.html

@@ -1,4 +1,4 @@
-<sky-data-grid
+<sky-data-grid-lite
   height="270"
   pageSize="5"
   [data]="data"
@@ -27,4 +27,4 @@
   <sky-data-grid-column field="jobTitle" headingText="Job title">
     <ng-template let-value="value">{{ value?.name ?? '' }}</ng-template>
   </sky-data-grid-column>
-</sky-data-grid>
+</sky-data-grid-lite>

libs/components/data-grid/README.md

@@ -1,3 +1,8 @@
 # data-grid
 
 This library was generated with [Nx](https://nx.dev).
+
+## In development
+
+- [ ] Refactor so `skyAgGridDataManagerAdapter` is not required in the template.
+- [ ] 

libs/components/data-grid/documentation.json

@@ -5,6 +5,7 @@
       "development": {
         "docsIds": [
           "SkyDataGridModule",
+          "SkyDataGridLiteComponent",
           "SkyDataGridComponent",
           "SkyDataGridColumnComponent",
           "SkyDataGridFilterOperator",

libs/components/data-grid/src/index.ts

@@ -1,4 +1,5 @@
 export { SkyDataGridComponent } from './lib/modules/data-grid/data-grid.component';
+export { SkyDataGridLiteComponent } from './lib/modules/data-grid/data-grid-lite.component';
 export { SkyDataGridColumnComponent } from './lib/modules/data-grid/data-grid-column.component';
 export { SkyDataGridModule } from './lib/modules/data-grid/data-grid.module';
 export { SkyDataGridFilterOperator } from './lib/modules/types/data-grid-filter-operator';
@@ -11,3 +12,4 @@ export { SkyDataGridSort } from './lib/modules/types/data-grid-sort';
 export { SkyDataGridPageRequest } from './lib/modules/types/data-grid-page-request';
 export { SkyDataGridRowDeleteCancelArgs } from './lib/modules/types/data-grid-row-delete-cancel-args';
 export { SkyDataGridRowDeleteConfirmArgs } from './lib/modules/types/data-grid-row-delete-confirm-args';
+export { SkyDataGridDirective as λ1 } from './lib/modules/data-grid/data-grid.directive';

libs/components/data-grid/src/lib/modules/data-grid/data-grid-lite.component.html

@@ -0,0 +1,29 @@
+<sky-wait [isWaiting]="!directive.gridReady()" />
+@if (directive.gridOptions(); as gridOptions) {
+  <sky-ag-grid-wrapper
+    skyAgGridRowDelete
+    [compact]="compact()"
+    [(rowDeleteIds)]="rowDeleteIds"
+    (rowDeleteCancel)="rowDeleteCancel.emit($event)"
+    (rowDeleteConfirm)="rowDeleteConfirm.emit($event)"
+  >
+    <ag-grid-angular
+      skyViewkeeperOmitShadow=".ag-body-horizontal-scroll"
+      [skyViewkeeper]="directive.skyViewkeeper()"
+      [gridOptions]="gridOptions"
+      [isExternalFilterPresent]="directive.isExternalFilterPresent"
+      [doesExternalFilterPass]="directive.doesExternalFilterPass()"
+      [style.height.px]="height() || undefined"
+      [style.width.px]="width() || undefined"
+    />
+  </sky-ag-grid-wrapper>
+
+  @if (directive.pageCount(); as pageCount) {
+    <sky-paging
+      [currentPage]="directive.page() || 1"
+      [itemCount]="pageCount * pageSize()"
+      [pageSize]="pageSize()"
+      (currentPageChange)="directive.currentPageChange($event)"
+    />
+  }
+}