@spectric/ui 0.0.19 → 0.0.20

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@spectric/ui",
-  "version": "0.0.19",
+  "version": "0.0.20",
   "type": "module",
   "main": "./dist/index.es.js",
   "module": "./dist/index.es.js",

package/src/components/table/virtualBody.ts

@@ -66,7 +66,7 @@ export class TableVirtualBodyElement<T> extends DisposableElement implements Bod
         let buffer = 10 // Have a buffer of rows to prevent column jitter
         let headerHeight = this.table.querySelector("spectric-table-header")!.clientHeight
         let viewport = this.table.querySelector(".table-wrapper")!
-        let startIndex = Math.max(this.startIndex - buffer, 0) //pad the front with 10 rows
+        let startIndex = Math.max(this.startIndex, 0)
         const rowsThatFit = Math.ceil((viewport.clientHeight - headerHeight) / this.rowHeight);
         const endIndex = Math.min(startIndex + rowsThatFit + buffer, totalRows);
         const visibleRows = endIndex - startIndex
@@ -77,7 +77,7 @@ export class TableVirtualBodyElement<T> extends DisposableElement implements Bod
         }
         let visibleHeight = (visibleRows * this.rowHeight)
         let afterHeight = totalHeight - beforeHeight - visibleHeight
-        let spacerElementBefore = this.startIndex != 0 ? html`
+        let spacerElementBefore = startIndex != 0 ? html`
                 <tr style="height:${beforeHeight}px" class="virtual-scroll-spacer">
                     <td colspan="${this.columns.length}"></td></tr>` : null
 

package/src/stories/table.stories.ts

@@ -52,7 +52,7 @@ const meta = {
       size: "xsmall",
       totalItems: data.length,
     },
-    columns: columns,
+    columns: JSON.parse(JSON.stringify(columns)),
     select: TableSelectOptions.none
   },
 } satisfies Meta<Props<typeof tabledata[0]>>;
@@ -68,26 +68,30 @@ export const Basic: Story = {
       pageSize: 3,
       size: "xsmall",
       totalItems: data.length,
-    }
+    },
+    columns: JSON.parse(JSON.stringify(columns)),
   },
 };
 
 // More on writing stories with args: https://storybook.js.org/docs/writing-stories/args
 export const NoPagination: Story = {
   args: {
-    pagination: undefined
+    pagination: undefined,
+    columns: JSON.parse(JSON.stringify(columns)),
   },
 };
 
 export const MiltiSelect: Story = {
   args: {
-    select: "multi"
+    select: "multi",
+    columns: JSON.parse(JSON.stringify(columns)),
   },
 };
 
 export const SingleSelect: Story = {
   args: {
-    select: "single"
+    select: "single",
+    columns: JSON.parse(JSON.stringify(columns)),
   },
 };
 
@@ -98,6 +102,7 @@ export const SingleSelect: Story = {
 export const MultiColumnSort: Story = {
   args: {
     sort: "multi",
+    columns: JSON.parse(JSON.stringify(columns)),
     pagination: { pageSize: 20, page: 1 }
   },
 };