@spectric/ui 0.0.20 → 0.0.21

package/src/components/table/table.ts

@@ -1,315 +1,412 @@
-import { html, LitElement, PropertyValues, render, TemplateResult } from 'lit';
+import { html, LitElement, PropertyValues, TemplateResult } from "lit";
 import "../pagination";
-import "./header"
-import "./body"
-import { customElement, property, state, } from 'lit/decorators.js';
-import { HTMLElementTagWithEvents, ReactElementWithPropsAndEvents } from '../types';
-import "./virtualBody"
-import "./table.css"
-export const TableElementTag = "spectric-table"
-import { spreadProps } from '../../utils/spread';
-import { PaginationChangeProps, PaginationProps } from '../pagination';
-import { FilterEvent } from './cell';
-import { createSortChain } from './sorting';
+import "./header";
+import "./body";
+import { customElement, property, state } from "lit/decorators.js";
+import {
+  HTMLElementTagWithEvents,
+  ReactElementWithPropsAndEvents,
+} from "../types";
+import "./virtualBody";
+import "./table.css";
+export const TableElementTag = "spectric-table";
+import { spreadProps } from "../../utils/spread";
+import { PaginationChangeProps, PaginationProps } from "../pagination";
+import { FilterEvent } from "./cell";
+import { createSortChain } from "./sorting";
 
-export type { TableProps, TableEvents }
+export type { TableProps, TableEvents };
 
-export type DomRenderable = HTMLElement | TemplateResult | string | number | null
+export type DomRenderable =
+  | HTMLElement
+  | TemplateResult
+  | string
+  | number
+  | null
+  | undefined;
 export enum TableSelectOptions {
-    multi = "multi",
-    single = "single",
-    none = "none"
+  multi = "multi",
+  single = "single",
+  none = "none",
 }
 
 export enum TableSortOption {
-    multi = "multi",
-    single = "single",
+  multi = "multi",
+  single = "single",
 }
-export type TableSortOptionTypes = `${TableSortOption}`
+export type TableSortOptionTypes = `${TableSortOption}`;
 export enum TableSortDirection {
-    ascending = "ascending",
-    descending = "descending",
-    none = "none"
+  ascending = "ascending",
+  descending = "descending",
+  none = "none",
 }
-export type TableSortDirectionTypes = `${TableSortDirection}`
+export type TableSortDirectionTypes = `${TableSortDirection}`;
 export type ColumnSettings<T> = {
-    [TABLE_CREATED_SELECTION_COLUMN]?: boolean
-    width?: number
-    /**
-     * Enabled/disables resizing by dragging column header Default true
-     */
-    allowResize?: boolean
-    whiteSpace?: "nowrap";
-    hidden?: boolean
-    sortable?: boolean
-    sortDirection?: TableSortDirectionTypes
-    filterable?: boolean
-    title?: DomRenderable
-    /**
-     * Key to used for getting data from an object for a cell 
-     */
-    key?: string
-    /**
-     * Render function to render a table cell for displaying custom html
-     */
-    render?: (row: T, index: number, table: SpectricTableElement<T>) => DomRenderable
-    /**
-     * Custom comparator function for sorting
-     */
-    compareFn?: ((a: T, b: T) => number) | undefined
-}
-export type TableSelectOptionsTypes = `${TableSelectOptions}`
+  [TABLE_CREATED_SELECTION_COLUMN]?: boolean;
+  width?: number;
+  /**
+   * Enabled/disables resizing by dragging column header Default true
+   */
+  allowResize?: boolean;
+  whiteSpace?: "nowrap";
+  hidden?: boolean;
+  sortable?: boolean;
+  sortDirection?: TableSortDirectionTypes;
+  filterable?: boolean;
+  title?: DomRenderable | ((table: SpectricTableElement<T>) => DomRenderable);
+  /**
+   * Key to used for getting data from an object for a cell
+   */
+  key?: string;
+  /**
+   * Render function to render a table cell for displaying custom html
+   */
+  render?: (
+    row: T,
+    index: number,
+    table: SpectricTableElement<T>
+  ) => DomRenderable;
+  /**
+   * Custom comparator function for sorting
+   */
+  compareFn?: ((a: T, b: T) => number) | undefined;
+};
+export type TableSelectOptionsTypes = `${TableSelectOptions}`;
 export interface TableDataOptions<T> {
-    pagination?: PaginationProps
-    columns: ColumnSettings<T>[]
-    sortOrder?: string[]
+  pagination?: PaginationProps;
+  columns: ColumnSettings<T>[];
+  sortOrder?: string[];
 }
 interface TableProps<T> extends TableDataOptions<T> {
-    data: T[]
-    select: TableSelectOptionsTypes
-    sort?: TableSortOptionTypes
-    rowHeight?: number
+  data: T[];
+  select: TableSelectOptionsTypes;
+  sort?: TableSortOptionTypes;
+  rowHeight?: number;
 }
 
 export type DomEvent<T> = Event & {
-    target: T
-}
+  target: T;
+};
 
 export const TD_BorderAndPadding = 4;
-const TABLE_CREATED_SELECTION_COLUMN = Symbol("spectric-table-selection-column")
+const TABLE_CREATED_SELECTION_COLUMN = Symbol(
+  "spectric-table-selection-column"
+);
 /**
  * React example
  * <iframe  width="100%" height="400px" src="https://stackblitz.com/edit/react-ts-2ue7azag?ctl=1&embed=1&file=App.tsx&hideExplorer=1&hideNavigation=1"/>
  *
  */
 @customElement(TableElementTag)
-export class SpectricTableElement<T = any> extends LitElement implements TableProps<T> {
-    @property({ type: Array, attribute: false })
-    data: T[] = [];
-    @property({ type: Object, attribute: false })
-    pagination?: PaginationProps;
-    @property({ attribute: false })
-    columns: ColumnSettings<T>[] = [];
-    @property({ type: String, reflect: true })
-    select: TableSelectOptionsTypes = TableSelectOptions.none;
-    @property({ type: String, reflect: true })
-    sort: TableSortOptionTypes = TableSortOption.single;
-
-    @property({ type: Array, reflect: false })
-    sortOrder: string[] = [];
-    /**
-     * Needed for virtualization 
-     */
-    @property({ type: Number, reflect: true })
-    rowHeight: number = 25;
-    /**
-     * Needed for virtualization 
-     */
-    @property({ type: Number, reflect: true })
-    fontSize: number = 16;
-
-    static getDefaultDataSorterAndPaginatior<T>(data: T[]) {
-        return (props: TableDataOptions<T>) => {
-            //let sorts = props.columns.filter(column => column.sortable && column.sortDirection && column.sortDirection !== TableSortDirection.none)
-            let sorts = (props.sortOrder || []).map(key => props.columns.find(col => col.key === key) as ColumnSettings<T>)
-            let rows = [...data] // Need to copy the array to prevent mutating the ordering of the original data
-            if (sorts.length) {
-                let sortChain = createSortChain(sorts)
-                rows.sort((a, b) => {
-                    for (let sort of sortChain) {
-                        let result = sort(a, b)
-                        if (result) {
-                            return result
-                        }
-                    }
-                    return 0
-                })
-            }
+export class SpectricTableElement<T = any>
+  extends LitElement
+  implements TableProps<T>
+{
+  @property({ type: Array, attribute: false })
+  data: T[] = [];
+  @property({ type: Object, attribute: false })
+  pagination?: PaginationProps;
+  @property({ attribute: false })
+  columns: ColumnSettings<T>[] = [];
+  @property({ type: String, reflect: true })
+  select: TableSelectOptionsTypes = TableSelectOptions.none;
+  @property({ type: String, reflect: true })
+  sort: TableSortOptionTypes = TableSortOption.single;
 
-            if (!props.pagination) {
-                return rows
-            }
-            let { page, pageSize } = props.pagination
-            if (!page || !pageSize) {
-                return rows
+  @property({ type: Array, reflect: false })
+  sortOrder: string[] = [];
+  /**
+   * Needed for virtualization
+   */
+  @property({ type: Number, reflect: true })
+  rowHeight: number = 25;
+  /**
+   * Needed for virtualization
+   */
+  @property({ type: Number, reflect: true })
+  fontSize: number = 16;
+  static getDefaultDataSorterAndPaginatior<T>(data: T[]) {
+    return (props: TableDataOptions<T>) => {
+      //let sorts = props.columns.filter(column => column.sortable && column.sortDirection && column.sortDirection !== TableSortDirection.none)
+      let sorts = (props.sortOrder || []).map(
+        (key) =>
+          props.columns.find((col) => col.key === key) as ColumnSettings<T>
+      );
+      let rows = [...data]; // Need to copy the array to prevent mutating the ordering of the original data
+      if (sorts.length) {
+        let sortChain = createSortChain(sorts);
+        rows.sort((a, b) => {
+          for (let sort of sortChain) {
+            let result = sort(a, b);
+            if (result) {
+              return result;
             }
-            return !props.pagination ? rows : rows.slice((page - 1) * pageSize, (page) * pageSize)
-        }
-    }
+          }
+          return 0;
+        });
+      }
 
-    private _handlePaginationChange = (e: CustomEvent<PaginationChangeProps>) => {
-        if (this.pagination) {
-            let pagination = { ...this.pagination, ...e.detail }
-
-            let { totalItems, page, pageSize } = pagination
-            if (totalItems && page && pageSize && ((page - 1) * pageSize) > totalItems) {
-                pagination.page = 1
-            }
-            this.pagination = pagination
-        }
-        this.dispatchEvent(new CustomEvent<PaginationChangeProps>("paginationChange", { detail: e.detail }))
-        this._emitChange()
+      if (!props.pagination) {
+        return rows;
+      }
+      let { page, pageSize } = props.pagination;
+      if (!page || !pageSize) {
+        return rows;
+      }
+      return !props.pagination
+        ? rows
+        : rows.slice((page - 1) * pageSize, page * pageSize);
     };
-    private _handleSortChange = (e: CustomEvent<ColumnSettings<T>>) => {
-        let columnSetting = e.detail
-        let column = this.columns.find(col => col.key == columnSetting.key)
-        if (!column || column.key === undefined) {
-            console.warn("Unable to find sort column")
-            return
-        }
-        if (this.sort == TableSortOption.single) {
-            //Single column sort so we reset the sort direction for all columns
-            this.columns.forEach(col => {
-                col.sortDirection = TableSortDirection.none
-            })
-            this.sortOrder = []
-        }
-        column.sortDirection = columnSetting.sortDirection;
-        if (!column.sortDirection || column.sortDirection === "none") {
-            let index = this.sortOrder.findIndex(col => col === column.key)
-            if (index !== -1) {
-                this.sortOrder.splice(index, 1)
-            }
-        } else {
-            let index = this.sortOrder.findIndex(col => col === column.key)
-            if (index === -1) {
-                this.sortOrder = [...this.sortOrder, column.key]
-            }
-        }
-        this.columns = [...this.columns]
-        this._emitChange()
-    }
-    private _handleColumnResize = (e: CustomEvent<ColumnSettings<T>>) => {
-        let columnSetting = e.detail
-        let index = this.columns.findIndex(col => col.key == columnSetting.key)
-        this.columns[index] = { ...this.columns[index] }
-        this.columns = [...this.columns]
-        this._emitChange()
-    }
+  }
 
-    private _emitChange = () => {
-        let { pagination, columns, sortOrder } = this
-        this.dispatchEvent(new CustomEvent<TableDataOptions<T>>("change", { detail: { pagination, columns, sortOrder } }))
+  private _handlePaginationChange = (e: CustomEvent<PaginationChangeProps>) => {
+    if (this.pagination) {
+      let pagination = { ...this.pagination, ...e.detail };
+
+      let { totalItems, page, pageSize } = pagination;
+      if (
+        totalItems &&
+        page &&
+        pageSize &&
+        (page - 1) * pageSize > totalItems
+      ) {
+        pagination.page = 1;
+      }
+      this.pagination = pagination;
     }
-    //@ts-ignore
-    private __DO_NOT_USE_filter = () => {
-        //This is only here to auto document events that bubble up from lower components
-        this.dispatchEvent(new CustomEvent<FilterEvent<T>>("filter"))
-        this.dispatchEvent(new CustomEvent<ColumnSettings<T>>("sortChange"))
+    this.dispatchEvent(
+      new CustomEvent<PaginationChangeProps>("paginationChange", {
+        detail: e.detail,
+      })
+    );
+    this._emitChange();
+  };
+  private _handleSortChange = (e: CustomEvent<ColumnSettings<T>>) => {
+    let columnSetting = e.detail;
+    let column = this.columns.find((col) => col.key == columnSetting.key);
+    if (!column || column.key === undefined) {
+      console.warn("Unable to find sort column");
+      return;
     }
-    @state()
-    private selected: T[] = [];
-    protected createRenderRoot(): HTMLElement | DocumentFragment {
-        return this
+    if (this.sort == TableSortOption.single) {
+      //Single column sort so we reset the sort direction for all columns
+      this.columns.forEach((col) => {
+        col.sortDirection = TableSortDirection.none;
+      });
+      this.sortOrder = [];
     }
-    deselectAll() {
-        this.selected = []
-        this.dispatchEvent(new CustomEvent("selected", { detail: this.selected }))
+    column.sortDirection = columnSetting.sortDirection;
+    if (!column.sortDirection || column.sortDirection === "none") {
+      let index = this.sortOrder.findIndex((col) => col === column.key);
+      if (index !== -1) {
+        this.sortOrder.splice(index, 1);
+      }
+    } else {
+      let index = this.sortOrder.findIndex((col) => col === column.key);
+      if (index === -1) {
+        this.sortOrder = [...this.sortOrder, column.key];
+      }
     }
-    selectAll() {
-        this.selected = [...this.data]
-        this.dispatchEvent(new CustomEvent("selected", { detail: this.selected }))
+    this.columns = [...this.columns];
+    this._emitChange();
+  };
+  private _handleColumnResize = (e: CustomEvent<ColumnSettings<T>>) => {
+    let columnSetting = e.detail;
+    let index = this.columns.findIndex((col) => col.key == columnSetting.key);
+    this.columns[index] = { ...this.columns[index] };
+    this.columns = [...this.columns];
+    this._emitChange();
+  };
+
+  private _emitChange = () => {
+    let { pagination, columns, sortOrder } = this;
+    this.dispatchEvent(
+      new CustomEvent<TableDataOptions<T>>("change", {
+        detail: { pagination, columns, sortOrder },
+      })
+    );
+  };
+  //@ts-ignore
+  private __DO_NOT_USE_filter = () => {
+    //This is only here to auto document events that bubble up from lower components
+    this.dispatchEvent(new CustomEvent<FilterEvent<T>>("filter"));
+    this.dispatchEvent(new CustomEvent<ColumnSettings<T>>("sortChange"));
+  };
+  @state()
+  private selected: T[] = [];
+  protected createRenderRoot(): HTMLElement | DocumentFragment {
+    return this;
+  }
+  forceRefreshofSelectionColumn() {
+    // Because lit reuses dom elements for speed/effeciency it wont update unless the props are a different object.
+    //  So we set the selection colum to a "new object" to force the rerender
+    let index = this.columns.findIndex(
+      (col) => col[TABLE_CREATED_SELECTION_COLUMN]
+    );
+    if (index !== -1) {
+      this.columns[index] = { ...this.selectColumnConfig };
     }
-    _handleSelectAllChange = (e: DomEvent<HTMLInputElement>) => {
-        e.stopPropagation()
-        if (e.target.checked) {
-            this.selectAll()
-        } else {
-            this.deselectAll()
-        }
+  }
+  setSelected(selected: T[]) {
+    this.selected = selected;
+    this.forceRefreshofSelectionColumn();
+  }
+  deselectAll() {
+    this.selected = [];
+    this.forceRefreshofSelectionColumn();
+    this.dispatchEvent(new CustomEvent("selected", { detail: this.selected }));
+  }
+  selectAll() {
+    this.selected = [...this.data];
+    this.forceRefreshofSelectionColumn();
+    this.dispatchEvent(new CustomEvent("selected", { detail: this.selected }));
+  }
+  _handleSelectAllChange = (e: DomEvent<HTMLInputElement>) => {
+    e.stopPropagation();
+    if (e.target.checked) {
+      this.selectAll();
+    } else {
+      this.deselectAll();
     }
-    protected update(changedProperties: PropertyValues): void {
-        if (changedProperties.has("columns")) {
-            if (this.select !== TableSelectOptions.none) {
-                if (!this.columns.find(col => col[TABLE_CREATED_SELECTION_COLUMN])) {
-                    this.columns.unshift({
-                        [TABLE_CREATED_SELECTION_COLUMN]: true,
-                        title: this.select === "multi" ? html`<spectric-input variant="checkbox" @change=${this._handleSelectAllChange} .helperText=${"Select All"}></spectric-input>` : null,
-                        render: (row) => {
-                            let container = document.createElement("div")
-                            let checked = this.selected.includes(row)
-                            let template = html`<spectric-input variant="checkbox" class="table-checkbox-${this.select}" .helperText=${""} ${spreadProps({ checked })}  @change=${(e: DomEvent<HTMLInputElement>) => {
-                                e.stopPropagation()
-                                let index = this.selected.findIndex(value => value === row)
-                                if (e.target.checked && index !== -1) {
-                                    return
-                                }
-                                else if (!e.target.checked && index === -1) {
-                                    return
-                                }
-                                else if (!e.target.checked && index !== -1) {
-                                    this.selected.splice(index, 1)
-                                }
-                                if (e.target.checked) {
-                                    if (this.select === "single") {
-                                        this.selected = []
-                                    }
-                                    this.selected.push(row)
-                                }
-                                this.dispatchEvent(new CustomEvent("selected", { detail: [...this.selected] }))
-                            }}></spectric-input>`
-                            render(template, container)
-                            return template
-                        }
-                    })
-                }
-            }
-        }
-        if (changedProperties.has("select")) {
-            if (this.select === "single" && this.selected.length > 1) {
-                this.selected = [this.selected[0]]
-                this.dispatchEvent(new CustomEvent("selected", { detail: [...this.selected] }))
+  };
+  private selectColumnConfig: ColumnSettings<T> = {
+    [TABLE_CREATED_SELECTION_COLUMN]: true,
+    width: 39,
+    title: (table) => {
+      return table.select === "multi"
+        ? html`<spectric-input
+            variant="checkbox"
+            @change=${table._handleSelectAllChange}
+            .helperText=${"Select All"}
+          ></spectric-input>`
+        : null;
+    },
+    render: (row: T, _index, table) => {
+      let checked = table.selected.includes(row);
+      let template = html`<spectric-input
+        variant="checkbox"
+        class="table-checkbox-${table.select}"
+        .helperText=${""}
+        ${spreadProps({ checked })}
+        @change=${(e: DomEvent<HTMLInputElement>) => {
+          e.stopPropagation();
+          let index = table.selected.findIndex((value) => value === row);
+          if (e.target.checked && index !== -1) {
+            return;
+          } else if (!e.target.checked && index === -1) {
+            return;
+          } else if (!e.target.checked && index !== -1) {
+            table.selected.splice(index, 1);
+          }
+          if (e.target.checked) {
+            if (table.select === "single") {
+              table.selected = [];
+              table.forceRefreshofSelectionColumn();
             }
+            table.selected.push(row);
+          }
+          table.dispatchEvent(
+            new CustomEvent("selected", { detail: [...table.selected] })
+          );
+        }}
+      ></spectric-input>`;
+      return template;
+    },
+  };
+  protected update(changedProperties: PropertyValues): void {
+    if (changedProperties.has("columns")) {
+      if (this.select !== TableSelectOptions.none) {
+        if (!this.columns.find((col) => col[TABLE_CREATED_SELECTION_COLUMN])) {
+          this.columns.unshift(this.selectColumnConfig);
         }
-        super.update(changedProperties)
+      }
     }
-    protected render(): unknown {
-        let columns = this.columns.filter(column => !column.hidden)
-        let rowHeight = this.rowHeight - TD_BorderAndPadding;
-        if (rowHeight < this.fontSize + TD_BorderAndPadding) {
-            rowHeight = this.fontSize + TD_BorderAndPadding
-        }
-        return html`
-        <div class="table-wrapper" style="--rowHeight:${rowHeight}px;--fontSize:${this.fontSize}px;--lineClamp:${Math.floor(rowHeight / this.fontSize)}">
-            <div role="table">
-                <spectric-table-header .columns=${columns} @sortChange=${this._handleSortChange} @columnResize=${this._handleColumnResize}></spectric-table-header>
-                <spectric-table-virtual-body .columns=${columns} .data=${this.data} .table=${this} .rowHeight=${rowHeight}></spectric-table-virtual-body>
-            </div>
-        </div>
-        ${this.pagination ? html`<spectric-pagination ${spreadProps(this.pagination)} @change=${this._handlePaginationChange}></spectric-pagination>` : null}
-        `;
+    if (changedProperties.has("select")) {
+      if (this.select === "single" && this.selected.length > 1) {
+        this.selected = [this.selected[0]];
+        this.dispatchEvent(
+          new CustomEvent("selected", { detail: [...this.selected] })
+        );
+      }
+    }
+    super.update(changedProperties);
+  }
+  protected render(): unknown {
+    let columns = this.columns.filter((column) => !column.hidden);
+    let rowHeight = this.rowHeight - TD_BorderAndPadding;
+    if (rowHeight < this.fontSize + TD_BorderAndPadding) {
+      rowHeight = this.fontSize + TD_BorderAndPadding;
     }
+    return html`
+      <div
+        class="table-wrapper"
+        style="--rowHeight:${rowHeight}px;--fontSize:${this
+          .fontSize}px;--lineClamp:${Math.floor(rowHeight / this.fontSize)}"
+      >
+        <div role="table">
+          <spectric-table-header
+            .columns=${columns}
+            .table=${this}
+            @sortChange=${this._handleSortChange}
+            @columnResize=${this._handleColumnResize}
+          ></spectric-table-header>
+          <spectric-table-virtual-body
+            .columns=${columns}
+            .data=${this.data}
+            .table=${this}
+            .rowHeight=${rowHeight}
+          ></spectric-table-virtual-body>
+        </div>
+      </div>
+      ${this.pagination
+        ? html`<spectric-pagination
+            ${spreadProps(this.pagination)}
+            @change=${this._handlePaginationChange}
+          ></spectric-pagination>`
+        : null}
+    `;
+  }
 }
 
 interface TableEvents {
-    'change': (event: CustomEvent<TableDataOptions<any>>) => void;
-    'paginationChange': (event: CustomEvent<PaginationChangeProps>) => void;
-    'filter': (event: CustomEvent<FilterEvent<any>>) => void;
-    'sortChange': (event: CustomEvent<ColumnSettings<any>>) => void;
-    'selected': (event: CustomEvent<any[]>) => void;
+  change: (event: CustomEvent<TableDataOptions<any>>) => void;
+  paginationChange: (event: CustomEvent<PaginationChangeProps>) => void;
+  filter: (event: CustomEvent<FilterEvent<any>>) => void;
+  sortChange: (event: CustomEvent<ColumnSettings<any>>) => void;
+  selected: (event: CustomEvent<any[]>) => void;
 }
 
 declare global {
-    interface HTMLElementTagNameMap {
-        [TableElementTag]: HTMLElementTagWithEvents<SpectricTableElement<any>, TableEvents>
-
+  interface HTMLElementTagNameMap {
+    [TableElementTag]: HTMLElementTagWithEvents<
+      SpectricTableElement<any>,
+      TableEvents
+    >;
+  }
+  namespace JSX {
+    interface IntrinsicElements {
+      /**
+       * @see {@link TableElement}
+       */
+      [TableElementTag]: ReactElementWithPropsAndEvents<
+        SpectricTableElement<any>,
+        TableProps<any>,
+        TableEvents
+      >;
     }
+  }
+  namespace React {
     namespace JSX {
-        interface IntrinsicElements {
-            /**
-             * @see {@link TableElement}
-             */
-            [TableElementTag]: ReactElementWithPropsAndEvents<SpectricTableElement<any>, TableProps<any>, TableEvents>;
-        }
-    }
-    namespace React {
-        namespace JSX {
-            interface IntrinsicElements {
-                /**
-                 * @see {@link TableElement}
-                 */
-                [TableElementTag]: ReactElementWithPropsAndEvents<SpectricTableElement<any>, TableProps<any>, TableEvents>
-            }
-        }
+      interface IntrinsicElements {
+        /**
+         * @see {@link TableElement}
+         */
+        [TableElementTag]: ReactElementWithPropsAndEvents<
+          SpectricTableElement<any>,
+          TableProps<any>,
+          TableEvents
+        >;
+      }
     }
+  }
 }