@operato/data-grist 1.13.4 → 1.13.5

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@operato/data-grist",
-  "version": "1.13.4",
+  "version": "1.13.5",
   "description": "User interface for grid (desktop) and list (mobile)",
   "author": "heartyoh",
   "main": "dist/index.js",
@@ -100,5 +100,5 @@
       "prettier --write"
     ]
   },
-  "gitHead": "8391250ac6c8d747111b2171031de1127b8b67a3"
+  "gitHead": "6effe65cf71902acc1ec065b4936760f6fb11d41"
 }

package/src/data-grid/data-grid-header.ts

@@ -267,24 +267,28 @@ export class DataGridHeader extends LitElement {
     `
   }
 
-  updated(changes: PropertyValues) {
-    if (changes.has('data')) {
-      const fixedHeaders = Array.from(this.renderRoot.querySelectorAll('div[fixed]')) as HTMLElement[]
-      const fixedLefts = [] as number[]
-      var left = 0
-      fixedHeaders.forEach((header: HTMLElement) => {
-        header.style.left = left + 'px'
-        fixedLefts.push(left)
-
-        const width = header.offsetWidth
-        left += width
+  notifyFixedLeftChange() {
+    const fixedHeaders = Array.from(this.renderRoot.querySelectorAll('div[fixed]')) as HTMLElement[]
+    const fixedLefts = [] as number[]
+    var left = 0
+    fixedHeaders.forEach((header: HTMLElement) => {
+      header.style.left = left + 'px'
+      fixedLefts.push(left)
+
+      const width = header.offsetWidth
+      left += width
+    })
+
+    this.dispatchEvent(
+      new CustomEvent('fixed-lefts-change', {
+        detail: fixedLefts
       })
+    )
+  }
 
-      this.dispatchEvent(
-        new CustomEvent('fixed-lefts-change', {
-          detail: fixedLefts
-        })
-      )
+  updated(changes: PropertyValues) {
+    if (changes.has('data')) {
+      requestAnimationFrame(this.notifyFixedLeftChange.bind(this))
     }
 
     if (changes.has('columns')) {
@@ -512,6 +516,8 @@ export class DataGridHeader extends LitElement {
           })
         )
 
+        this.notifyFixedLeftChange()
+
         this._lastAccVal = 0
       }, 100)
     }

package/stories/fixed-column.stories.ts

@@ -144,8 +144,7 @@ const config = {
       },
       filter: 'search',
       sortable: true,
-      width: 120,
-      fixed: true
+      width: 120
     },
     {
       type: 'string',
@@ -161,7 +160,8 @@ const config = {
         click: (columns, data, column, record, rowIndex, target) => {
           alert(`${column!.name} ${record![column!.name]}, row : ${rowIndex}`)
         }
-      } as GristEventHandlerSet
+      } as GristEventHandlerSet,
+      fixed: true
     },
     {
       type: 'email',