@spectric/ui 0.0.19 → 0.0.21

package/src/components/table/virtualBody.ts

@@ -1,139 +1,189 @@
-import { html } from 'lit';
-import { customElement, property, } from 'lit/decorators.js';
-import { HTMLElementTagWithEvents, ReactElementWithPropsAndEvents } from '../types';
-export const TableBodyElementTag = "spectric-table-virtual-body"
-import "./cell"
-import { ColumnSettings, SpectricTableElement, TD_BorderAndPadding } from './table';
-import { repeat } from 'lit/directives/repeat.js';
-import { DisposableElement } from '../../classes/DisposibleElement';
-import "./virtualBody.css"
+import { html } from "lit";
+import { customElement, property } from "lit/decorators.js";
+import {
+  HTMLElementTagWithEvents,
+  ReactElementWithPropsAndEvents,
+} from "../types";
+export const TableBodyElementTag = "spectric-table-virtual-body";
+import "./cell";
+import {
+  ColumnSettings,
+  SpectricTableElement,
+  TD_BorderAndPadding,
+} from "./table";
+import { repeat } from "lit/directives/repeat.js";
+import { DisposableElement } from "../../classes/DisposibleElement";
+import "./virtualBody.css";
 interface BodyProps<T> {
-    columns: ColumnSettings<T>[]
-    data: T[]
-    rowHeight: number
+  columns: ColumnSettings<T>[];
+  data: T[];
+  rowHeight: number;
 }
 
-
 /**
  * Table Body Element
  */
 @customElement(TableBodyElementTag)
-export class TableVirtualBodyElement<T> extends DisposableElement implements BodyProps<T> {
-    @property({ type: Array, attribute: false })
-    data: T[] = [];
-    @property({ type: Array, attribute: false })
-    columns: ColumnSettings<T>[] = [];
-    @property({ type: Number, attribute: false })
-    rowHeight: number = 30;
+export class TableVirtualBodyElement<T>
+  extends DisposableElement
+  implements BodyProps<T>
+{
+  @property({ type: Array, attribute: false })
+  data: T[] = [];
+  @property({ type: Array, attribute: false })
+  columns: ColumnSettings<T>[] = [];
+  @property({ type: Number, attribute: false })
+  rowHeight: number = 30;
 
-    @property({ type: Number, state: true })
-    startIndex: number = 0
+  @property({ type: Number, state: true })
+  startIndex: number = 0;
 
-    table!: SpectricTableElement<T>
-    columnsMeasured: boolean = false;
-    constructor() {
-        super()
-        this.addDisposableListener(() => this.table.querySelector(".table-wrapper")!, "scroll", () => {
-            const scrollTop = this.table.querySelector(".table-wrapper")!.scrollTop;
-            requestAnimationFrame(() => {
-                this.startIndex = Math.floor(scrollTop / this.rowHeight);
-            })
-        })
-    }
-    protected updated(): void {
-        if (this.columnsMeasured === false) {
-            let tr = this.querySelector("tr");
-            let cells = tr?.querySelectorAll("spectric-table-cell td")
-            if (tr && cells && cells.length) {
-                this.columns.forEach((col, index) => {
-                    if (!col.width || col.width === 0) {
-                        let rect = cells[index].getBoundingClientRect()
-                        if (rect.width > 0) {
-                            this.columnsMeasured = true
-                            col.width = rect.width - TD_BorderAndPadding
-                        }
-                    }
-                })
-                this.columns = [...this.columns]
+  @property({ type: Object, attribute: false })
+  table!: SpectricTableElement<T>;
+  columnsMeasured: boolean = false;
+  constructor() {
+    super();
+    this.addDisposableListener(
+      () => this.table.querySelector(".table-wrapper")!,
+      "scroll",
+      () => {
+        const scrollTop = this.table.querySelector(".table-wrapper")!.scrollTop;
+        requestAnimationFrame(() => {
+          this.startIndex = Math.floor(scrollTop / this.rowHeight);
+        });
+      }
+    );
+  }
+  protected updated(): void {
+    if (this.columnsMeasured === false) {
+      let tr = this.querySelector("tr");
+      let cells = tr?.querySelectorAll("spectric-table-cell td");
+      if (tr && cells && cells.length) {
+        this.columns.forEach((col, index) => {
+          if (!col.width || col.width === 0) {
+            let rect = cells[index].getBoundingClientRect();
+            if (rect.width > 0) {
+              this.columnsMeasured = true;
+              col.width = rect.width - TD_BorderAndPadding;
             }
+          }
+        });
+        if (this.columnsMeasured) {
+          this.columns = [...this.columns];
         }
+      }
     }
-    protected createRenderRoot(): HTMLElement | DocumentFragment {
-        return this
-    }
-    protected render(): unknown {
-        let totalRows = this.data.length
-        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
-        const rowsThatFit = Math.ceil((viewport.clientHeight - headerHeight) / this.rowHeight);
-        const endIndex = Math.min(startIndex + rowsThatFit + buffer, totalRows);
-        const visibleRows = endIndex - startIndex
-        let totalHeight = totalRows * this.rowHeight
-        let beforeHeight = (startIndex * this.rowHeight) + (viewport.scrollTop - (startIndex * this.rowHeight))
-        if (endIndex === totalRows) {
-            beforeHeight = (startIndex * this.rowHeight)
-        }
-        let visibleHeight = (visibleRows * this.rowHeight)
-        let afterHeight = totalHeight - beforeHeight - visibleHeight
-        let spacerElementBefore = this.startIndex != 0 ? html`
-                <tr style="height:${beforeHeight}px" class="virtual-scroll-spacer">
-                    <td colspan="${this.columns.length}"></td></tr>` : null
-
-        let spacerElementAfter = html`
-                <tr style="height:${afterHeight}px" class="virtual-scroll-spacer">
-                    <td colspan="${this.columns.length}"></td></tr>`
-        return html`
-          <div style="height:${totalHeight}px;position: absolute;overflow-x: hidden;overflow-y: hidden;z-index:-1;width:1px;"></div>
-          <tbody>
-            ${spacerElementBefore}
-            </tbody>
-          <div style="display:table-row-group;max-height:${visibleHeight}px; overflow:hidden;">
-
-              ${repeat(this.data.slice(Math.max(startIndex, 0), endIndex), (row, index) => html`
-              <tr class="${(index + startIndex) % 2 === 0 ? "odd" : ""}">
-                  ${repeat(this.columns, (col) => {
-            return html`<spectric-table-cell .column=${col} .row=${row} .index=${index + startIndex} .columns=${this.columns}></spectric-table-cell>`
-        })}
-              </tr>`)
-            }
-              </div>
-    <tbody>
-                ${afterHeight > 0 ? spacerElementAfter : null}
-</tbody>
-
-    `
-
+  }
+  protected createRenderRoot(): HTMLElement | DocumentFragment {
+    return this;
+  }
+  protected render(): unknown {
+    let totalRows = this.data.length;
+    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, 0);
+    const rowsThatFit = Math.ceil(
+      (viewport.clientHeight - headerHeight) / this.rowHeight
+    );
+    const endIndex = Math.min(startIndex + rowsThatFit + buffer, totalRows);
+    const visibleRows = endIndex - startIndex;
+    let totalHeight = totalRows * this.rowHeight;
+    let beforeHeight =
+      startIndex * this.rowHeight +
+      (viewport.scrollTop - startIndex * this.rowHeight);
+    if (endIndex === totalRows) {
+      beforeHeight = startIndex * this.rowHeight;
     }
+    let visibleHeight = visibleRows * this.rowHeight;
+    let afterHeight = totalHeight - beforeHeight - visibleHeight;
+    let spacerElementBefore =
+      startIndex != 0
+        ? html` <tr
+            style="height:${beforeHeight}px"
+            class="virtual-scroll-spacer"
+          >
+            <td colspan="${this.columns.length}"></td>
+          </tr>`
+        : null;
 
+    let spacerElementAfter = html` <tr
+      style="height:${afterHeight}px"
+      class="virtual-scroll-spacer"
+    >
+      <td colspan="${this.columns.length}"></td>
+    </tr>`;
+    return html`
+      <div
+        style="height:${totalHeight}px;position: absolute;overflow-x: hidden;overflow-y: hidden;z-index:-1;width:1px;"
+      ></div>
+      <tbody>
+        ${spacerElementBefore}
+      </tbody>
+      <div
+        style="display:table-row-group;max-height:${visibleHeight}px; overflow:hidden;"
+      >
+        ${repeat(
+          this.data.slice(Math.max(startIndex, 0), endIndex),
+          (row, index) => html` <tr
+            class="${(index + startIndex) % 2 === 0 ? "odd" : ""}"
+          >
+            ${repeat(this.columns, (col) => {
+              return html`<spectric-table-cell
+                .column=${col}
+                .row=${row}
+                .index=${index + startIndex}
+                .columns=${this.columns}
+                .table=${this.table}
+              ></spectric-table-cell>`;
+            })}
+          </tr>`
+        )}
+      </div>
+      <tbody>
+        ${afterHeight > 0 ? spacerElementAfter : null}
+      </tbody>
+    `;
+  }
 }
 
 interface TableBodyEvents {
-    //'sort': (event: CustomEvent<ColumnSettings<any>>) => void; //TODO sort events
+  //'sort': (event: CustomEvent<ColumnSettings<any>>) => void; //TODO sort events
 }
 
 declare global {
-    interface HTMLElementTagNameMap {
-        [TableBodyElementTag]: HTMLElementTagWithEvents<TableVirtualBodyElement<any>, TableBodyEvents>
-
+  interface HTMLElementTagNameMap {
+    [TableBodyElementTag]: HTMLElementTagWithEvents<
+      TableVirtualBodyElement<any>,
+      TableBodyEvents
+    >;
+  }
+  namespace JSX {
+    interface IntrinsicElements {
+      /**
+       * @see {@link DialogElement}
+       */
+      [TableBodyElementTag]: ReactElementWithPropsAndEvents<
+        TableVirtualBodyElement<any>,
+        BodyProps<any>,
+        TableBodyEvents
+      >;
     }
+  }
+  namespace React {
     namespace JSX {
-        interface IntrinsicElements {
-            /**
-             * @see {@link DialogElement}
-             */
-            [TableBodyElementTag]: ReactElementWithPropsAndEvents<TableVirtualBodyElement<any>, BodyProps<any>, TableBodyEvents>;
-        }
-    }
-    namespace React {
-        namespace JSX {
-            interface IntrinsicElements {
-                /**
-                 * @see {@link DialogElement}
-                 */
-                [TableBodyElementTag]: ReactElementWithPropsAndEvents<TableVirtualBodyElement<any>, BodyProps<any>, TableBodyEvents>
-            }
-        }
+      interface IntrinsicElements {
+        /**
+         * @see {@link DialogElement}
+         */
+        [TableBodyElementTag]: ReactElementWithPropsAndEvents<
+          TableVirtualBodyElement<any>,
+          BodyProps<any>,
+          TableBodyEvents
+        >;
+      }
     }
+  }
 }

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 }
   },
 };