fix(table): table and ag-grid visual alignments (#1140)

allianz · Mar 5, 2024 · f9e0c83 · f9e0c83
1 parent ebf1c82
commit f9e0c83
Show file tree

Hide file tree

Showing 3 changed files with 15 additions and 8 deletions.
diff --git a/...aquila/documentation/examples/table/table-column-reorder/table-column-reorder-example.css b/...aquila/documentation/examples/table/table-column-reorder/table-column-reorder-example.css
@@ -1,12 +1,13 @@
+.nx-table--reorder {
+    cursor: move;
+}
+
 .cdk-drag-preview {
     box-sizing: border-box;
     border-radius: 4px;
     background-color: var(--ui-01);
     box-shadow: 0 0 24px 0 rgba(65, 65, 65, 0.35);
-}
-
-.cdk-drag-placeholder {
-    opacity: 0;
+    border: 0;
 }
 
 .cdk-drag-animating {
@@ -17,7 +18,7 @@
     transition: transform 250ms cubic-bezier(0, 0, 0.2, 1);
 }
 .col {
-    cursor: grab;
+    cursor: default;
 }
 .scroll-container {
     overflow-x: auto;

diff --git a/...quila/documentation/examples/table/table-column-reorder/table-column-reorder-example.html b/...quila/documentation/examples/table/table-column-reorder/table-column-reorder-example.html
@@ -1,4 +1,4 @@
-<table nxTable>
+<table nxTable class="nx-table--reorder">
     <thead>
         <tr
             nxTableRow
@@ -11,15 +11,16 @@
                 nxHeaderCell
                 cdkDrag
                 cdkDragLockAxis="x"
-                class="col"
             >
                 {{h.title}}
             </th>
         </tr>
     </thead>
     <tbody>
         <tr nxTableRow *ngFor="let item of content">
-            <td nxTableCell *ngFor="let h of header">{{item[h.field]}}</td>
+            <td nxTableCell *ngFor="let h of header" class="col">
+                {{item[h.field]}}
+            </td>
         </tr>
     </tbody>
 </table>
diff --git a/projects/ng-aquila/src/ag-grid/ag-theme-aquila.scss b/projects/ng-aquila/src/ag-grid/ag-theme-aquila.scss
@@ -262,3 +262,8 @@ $icon-mapping: (
     --ag-odd-row-background-color: var(--zebra-table-even-row-background-color);
     --ag-row-border-style: none;
 }
+
+.ag-dnd-ghost {
+    box-shadow: 0 0 24px 0 rgba(65, 65, 65, 0.35);
+    border: 0;
+}