datagrid

src/app/portal-manage/widgets/syncfusion-datagrid-widget/syncfusion-datagrid-widget.component.html

@@ -20,22 +20,81 @@
     </div>
 
     <!-- Grid -->
-    <ejs-grid #grid *ngIf="!isLoading && !hasError" 
-      [dataSource]="data" 
-      [allowPaging]="true" 
-      [pageSettings]="pageSettings" 
-      [allowSorting]="true" 
-      [allowFiltering]="true" 
-      [allowGrouping]="true" 
+    <ejs-grid #grid *ngIf="!isLoading && !hasError"
+      [dataSource]="data"
+      [allowPaging]="true"
+      [pageSettings]="pageSettings"
+      [allowSorting]="true"
+      [allowFiltering]="true"
+      [allowGrouping]="true"
       [toolbar]="toolbar"
       (toolbarClick)="toolbarClick($event)"
       [allowExcelExport]="true"
       [allowPdfExport]="true"
+      [searchSettings]="searchSettings"
+      [groupSettings]="groupSettings"
+      [filterSettings]="filterSettings"
+      [editSettings]="editSettings"
+      [selectionSettings]="selectionOptions"
+      [loadingIndicator]="loadingIndicator"
+      [query]="query"
+      [showColumnMenu]="showColumnMenu"
+      [allowReordering]="allowReordering"
+      [allowMultiSorting]="allowMultiSorting"
+      [columnMenuItems]="columnMenuItems"
+      (columnMenuClick)="onColumnMenuClick($event)"
+      (actionComplete)="actionComplete($event)"
       height="100%">
       <e-columns>
-        <e-column *ngFor="let col of columns" [field]="col.field" [headerText]="col.headerText" [width]="col.width"></e-column>
+        <e-column *ngFor="let col of columns" [field]="col.field" [headerText]="col.headerText" [width]="col.width"
+          [format]="col.format" [textAlign]="col.textAlign" [isPrimaryKey]="col.isPrimaryKey" [editType]="col.editType"
+          [validationRules]="col.validationRules" [allowEditing]="col.allowEditing" [allowSorting]="col.allowSorting"
+          [allowFiltering]="col.allowFiltering" [visible]="col.visible" [type]="col.type">
+          <ng-template #headerTemplate let-data>
+            <span class="font-size-12px font-weight-700">{{ col.headerText }}</span>
+          </ng-template>
+        </e-column>
       </e-columns>
+      <e-aggregates>
+        <e-aggregate>
+          <e-columns>
+            <e-column *ngFor="let col of aggregatesSum" [field]="col.field" [type]="'Sum'" [footerTemplate]="'Sum: ${Sum}'"
+              [groupFooterTemplate]="'Sum: ${Sum}'" [groupCaptionTemplate]="col.groupCaptionTemplate" [format]="col.format">
+            </e-column>
+          </e-columns>
+        </e-aggregate>
+        <e-aggregate>
+          <e-columns>
+            <e-column *ngFor="let col of aggregatesCount" [field]="col.field" [type]="'Count'"
+              [footerTemplate]="'Count: ${Count}'" [groupFooterTemplate]="'Count: ${Count}'"
+              [groupCaptionTemplate]="col.groupCaptionTemplate" [format]="col.format">
+            </e-column>
+          </e-columns>
+        </e-aggregate>
+        <e-aggregate>
+          <e-columns>
+            <e-column *ngFor="let col of aggregatesAvg" [field]="col.field" [type]="'Average'"
+              [footerTemplate]="'Average: ${Average}'" [groupFooterTemplate]="'Average: ${Average}'"
+              [groupCaptionTemplate]="col.groupCaptionTemplate" [format]="col.format">
+            </e-column>
+          </e-columns>
+        </e-aggregate>
+        <e-aggregate>
+          <e-columns>
+            <e-column *ngFor="let col of aggregatesMin" [field]="col.field" [type]="'Min'" [footerTemplate]="'Min: ${Min}'"
+              [groupFooterTemplate]="'Min: ${Min}'" [groupCaptionTemplate]="col.groupCaptionTemplate" [format]="col.format">
+            </e-column>
+          </e-columns>
+        </e-aggregate>
+        <e-aggregate>
+          <e-columns>
+            <e-column *ngFor="let col of aggregatesMax" [field]="col.field" [type]="'Max'" [footerTemplate]="'Max: ${Max}'"
+              [groupFooterTemplate]="'Max: ${Max}'" [groupCaptionTemplate]="col.groupCaptionTemplate" [format]="col.format">
+            </e-column>
+          </e-columns>
+        </e-aggregate>
+      </e-aggregates>
     </ejs-grid>
 
   </div>
-</div>
+</div>
\ No newline at end of file

src/styles.scss

@@ -59,3 +59,53 @@
 #search-modal ul li {
   @apply cursor-pointer;
 }
+
+
+// th{
+//   position: relative;         // เทียบเท่า class "relative"
+//   padding: 10px;              // เทียบเท่า class "px-10px py-10px" (อาจเปลี่ยนตามต้องการ)
+//   background-color: rgb(96 165 250 / 0.1);  // ตัวอย่างแทน "bg-soft-secondary"
+//   color: #2b2b2b;             // ตัวอย่างแทน "text-primary"
+//   text-align: center !important;  // เทียบเท่า "!text-center"
+
+//   // หากต้องการดีไซน์อื่น ๆ เพิ่มเติมก็ใส่ในนี้ได้เลย เช่น:
+//   font-weight: 600;
+//   border-bottom: 1px solid #eee;
+// }
+.e-headercell,
+.e-detailheadercell {
+  background-color: rgb(96 165 250 / 0.1) !important;
+}
+
+.e-pager .e-currentitem, .e-pager .e-currentitem:hover {
+  background: rgb(96 165 250) !important;
+  color: #fff;
+  opacity: 1 !important;
+}
+
+
+.e-checkbox-wrapper .e-frame.e-check, .e-css.e-checkbox-wrapper .e-frame.e-check {
+  background-color: rgb(96 165 250) !important;
+  border-color: transparent;
+  color: #fff;
+}
+
+.e-checkbox-wrapper .e-frame, .e-css.e-checkbox-wrapper .e-frame {
+  border: 1px solid !important;
+  border-radius: 2px;
+  box-sizing: border-box;
+  cursor: pointer;
+  display: inline-block;
+  font-family: "e-icons";
+  height: 18px;
+  line-height: 10px;
+  padding: 2px 0;
+  text-align: center;
+  vertical-align: middle;
+  width: 1rem !important;
+  border-color: #64748b !important;
+}
+
+.e-grid td.e-selectionbackground {
+  background-color: #aec2ec !important;
+}