@spectric/ui 0.0.10 → 0.0.11

package/dist/style.css

@@ -1 +1 @@
-spectric-input{--input-color: var(--spectric-input-color, #f4f4f4);--border-radius: var(--spectric-border-radius, .4em);--input-bottom: var(--spectric-input-bottom, var(--spectric-button-primary, #a8a8a8));--input-bottom-focused: var(--primary, #1ea7fd);--text-on-color: var(--spectric-text-on-color, #ffffff);--text-on-color-disabled: var(--spectric-text-on-color-disabled, #8d8d8d);--text-placeholder: rgba(22, 22, 22, .4);--text-primary: var(--spectric-text-primary, #161616);--text-secondary: var(--spectric-text-secondary, #525252)}spectric-input .inputWrapper{color:var(--text-secondary)}spectric-input .inputWrapper input{box-sizing:border-box;margin:0;vertical-align:baseline;font-size:.875rem;font-weight:400;line-height:1.28572;letter-spacing:.16px;outline:transparent solid 2px;outline-offset:-2px;border:none;padding:0 1rem;background-color:var(--input-color);color:var(--text-primary, #161616);font-family:inherit;inline-size:100%;block-size:2.5rem}spectric-input .inputWrapper .inputContainer:active:after,spectric-input .inputContainer:focus-within:after{border-bottom-color:var(--input-bottom-focused);width:calc(100% - 5px);transition:width .4s ease-in-out}spectric-input .inputWrapper input:read-only{background-color:transparent;border-bottom-color:var(--border-disabled)}spectric-input .inputContainer{position:relative;border-radius:var(--border-radius);overflow:hidden}spectric-input .inputContainer:after{content:"";width:0px;transition:background-color .4s cubic-bezier(.2,0,.38,.9),border-bottom-color .4s cubic-bezier(.2,0,.38,.9);border-bottom-color:var(--input-bottom);border-bottom-style:solid;border-bottom-width:1px;position:absolute;left:2.5px;bottom:0}spectric-input #helper-text{height:18px}spectric-input[variant=password] spectric-button{position:absolute;right:4px;bottom:3px}spectric-input .checkbox{display:flex;justify-self:center}spectric-query{font-family:monospace}spectric-query .autocomplete{color:var(--spectric-text-primary, #161616);border-radius:0em 0em var(--spectric-border-radius, .4em) var(--spectric-border-radius, .4em);background-color:var(--spectric-background, #ffffff);border:1px solid var(--spectric-background-hover, rgba(141, 141, 141, .12));max-height:300px;border-top:0px;margin:-18px 0 0;position:fixed;top:anchor(bottom);justify-self:anchor-center;text-align:center}spectric-query .autocomplete .optiontype{float:left;max-width:10px}spectric-query .autocomplete .label{position:absolute;right:0}spectric-query .autocomplete .option.active,spectric-query .autocomplete .option:hover{background-color:var(--spectric-background-hover, rgba(141, 141, 141, .12));border-bottom:1px solid var(--primary, #1ea7fd)}spectric-query .autocomplete .option{border-bottom:1px solid transparent;padding:8px}.query-bar-date-quick-select{display:flex;justify-content:space-evenly}spectric-pagination .spectric-pagination-container{display:flex;justify-content:space-between;align-items:center}spectric-pagination .spectric-pagination-text{flex-grow:1;text-align:center}spectric-table{display:flex;flex-direction:column}spectric-table tr{text-align:center}spectric-table-body tr:hover{background-color:color-mix(in srgb,var(--spectric-primary, #1ea7fd),transparent 70%)}spectric-table-header{display:table-header-group;font-weight:700}spectric-table div[role=table]{display:table}spectric-table-body{display:table-row-group}spectric-table-cell{display:contents;vertical-align:middle}spectric-table-cell td{position:relative}spectric-table td:hover:has(.filterable){border:1px solid var(--spectric-primary, #1ea7fd)}spectric-table td{border:1px solid transparent}spectric-table-cell .table-cell-actions{position:absolute;display:flex;width:100%;flex-direction:row-reverse;visibility:hidden;top:-10px}spectric-table-cell td:hover .table-cell-actions{visibility:unset}.spectric-tooltip-portal{position:fixed;z-index:9999;pointer-events:none;--spectric-tooltip-background: color-mix(in srgb,var(--spectric-background-inverse,#f4f4f4) 100%,var(--spectric-primary,#1ea7fd) 90%) }.spectric-tooltip-portal .tooltip-container{display:flex;justify-content:center;align-items:center}.spectric-tooltip-portal.top .tooltip-container{flex-direction:column-reverse}.spectric-tooltip-portal.bottom .tooltip-container{flex-direction:column}.spectric-tooltip-portal.left .tooltip-container{flex-direction:row-reverse}.spectric-tooltip-portal .tooltip-content{background:var(--spectric-tooltip-background);border-radius:var(--spectric-border-radius,.4em);box-shadow:0 0 .01em .01em color-mix(in srgb,var(--spectric-background-hover,rgba(141, 141, 141, .12)) 90%,var(--spectric-text-on-color,#ffffff) 90%);padding:.2em;color:var(--spectric-text-on-color,#ffffff)}.spectric-tooltip-portal .tooltip-caret{background:var(--spectric-tooltip-background)}.spectric-tooltip-portal.top .tooltip-caret,.spectric-tooltip-portal.bottom .tooltip-caret{inline-size:.75rem;block-size:.374rem}.spectric-tooltip-portal.left .tooltip-caret,.spectric-tooltip-portal.right .tooltip-caret{inline-size:.375rem;block-size:.75rem}.spectric-tooltip-portal.top .tooltip-caret{clip-path:polygon(0 0,50% 100%,100% 0)}.spectric-tooltip-portal.bottom .tooltip-caret{clip-path:polygon(0 100%,50% 0,100% 100%)}.spectric-tooltip-portal.left .tooltip-caret{clip-path:polygon(0 0,100% 50%,0 100%)}.spectric-tooltip-portal.right .tooltip-caret{clip-path:polygon(0 50%,100% 0,100% 100%)}
+spectric-input{--input-color: var(--spectric-input-color, #f4f4f4);--border-radius: var(--spectric-border-radius, .4em);--input-bottom: var(--spectric-input-bottom, var(--spectric-button-primary, #a8a8a8));--input-bottom-focused: var(--primary, #1ea7fd);--text-on-color: var(--spectric-text-on-color, #ffffff);--text-on-color-disabled: var(--spectric-text-on-color-disabled, #8d8d8d);--text-placeholder: rgba(22, 22, 22, .4);--text-primary: var(--spectric-text-primary, #161616);--text-secondary: var(--spectric-text-secondary, #525252)}spectric-input .inputWrapper{color:var(--text-secondary)}spectric-input .inputWrapper input{box-sizing:border-box;margin:0;vertical-align:baseline;font-size:.875rem;font-weight:400;line-height:1.28572;letter-spacing:.16px;outline:transparent solid 2px;outline-offset:-2px;border:none;padding:0 1rem;background-color:var(--input-color);color:var(--text-primary, #161616);font-family:inherit;inline-size:100%;block-size:2.5rem}spectric-input .inputWrapper .inputContainer:active:after,spectric-input .inputContainer:focus-within:after{border-bottom-color:var(--input-bottom-focused);width:calc(100% - 5px);transition:width .4s ease-in-out}spectric-input .inputWrapper input:read-only{background-color:transparent;border-bottom-color:var(--border-disabled)}spectric-input .inputContainer{position:relative;border-radius:var(--border-radius);overflow:hidden}spectric-input .inputContainer:after{content:"";width:0px;transition:background-color .4s cubic-bezier(.2,0,.38,.9),border-bottom-color .4s cubic-bezier(.2,0,.38,.9);border-bottom-color:var(--input-bottom);border-bottom-style:solid;border-bottom-width:1px;position:absolute;left:2.5px;bottom:0}spectric-input #helper-text{height:18px}spectric-input[variant=password] spectric-button{position:absolute;right:4px;bottom:3px}spectric-input .checkbox{display:flex;justify-self:center}spectric-query{font-family:monospace}spectric-query .autocomplete{color:var(--spectric-text-primary, #161616);border-radius:0em 0em var(--spectric-border-radius, .4em) var(--spectric-border-radius, .4em);background-color:var(--spectric-background, #ffffff);border:1px solid var(--spectric-background-hover, rgba(141, 141, 141, .12));max-height:300px;border-top:0px;margin:-18px 0 0;position:fixed;top:anchor(bottom);justify-self:anchor-center;text-align:center}spectric-query .autocomplete .optiontype{float:left;max-width:10px}spectric-query .autocomplete .label{position:absolute;right:0}spectric-query .autocomplete .option.active,spectric-query .autocomplete .option:hover{background-color:var(--spectric-background-hover, rgba(141, 141, 141, .12));border-bottom:1px solid var(--primary, #1ea7fd)}spectric-query .autocomplete .option{border-bottom:1px solid transparent;padding:8px}.query-bar-date-quick-select{display:flex;justify-content:space-evenly}spectric-pagination .spectric-pagination-container{display:flex;justify-content:space-between;align-items:center}spectric-pagination .spectric-pagination-text{flex-grow:1;text-align:center}spectric-table{display:flex;flex-direction:column;overflow:hidden}spectric-table .table-wrapper{overflow:auto;flex-grow:1}spectric-table tr{text-align:center}spectric-table-body tr:nth-child(odd){background-color:color-mix(in srgb,var(--spectric-primary, #1ea7fd),transparent 90%)}spectric-table-body tr:hover{background-color:color-mix(in srgb,var(--spectric-primary, #1ea7fd),transparent 70%)}spectric-table-header{display:table-header-group;font-weight:700;position:sticky;top:0;left:0;z-index:1;background:var(--spectric-background, #ffffff)}spectric-table-header td{vertical-align:middle}spectric-table-header .header-contents{position:relative}spectric-table-header .header-contents .sort-direction{position:absolute;right:0}spectric-table-header .header-contents.sortable{cursor:pointer}spectric-table-header .header-contents.sortable:hover .sort-direction.none:before{content:"⮁"}spectric-table div[role=table]{display:table;min-width:100%}spectric-table-body{display:table-row-group}spectric-table-cell{display:contents;vertical-align:middle}spectric-table-cell td{position:relative}spectric-table td:hover:has(.filterable){border:1px solid var(--spectric-primary, #1ea7fd)}spectric-table td{border:1px solid transparent}spectric-table-cell .table-cell-actions{position:absolute;display:flex;width:100%;flex-direction:row-reverse;visibility:hidden;top:-10px}spectric-table-cell td:hover .table-cell-actions{visibility:unset}spectric-table .table-checkbox-single spectric-button{--button-border-radius: 50%}spectric-input.table-checkbox-single[checked] spectric-button{--text-on-color: transparent;border-radius:50%;position:relative}spectric-input.table-checkbox-single[checked] spectric-button:before{position:absolute;content:" ";height:50%;width:50%;left:25%;top:25%;border-radius:50%;z-index:1;box-shadow:0 0 0 4px var(--input-color)}.spectric-tooltip-portal{position:fixed;z-index:9999;pointer-events:none;--spectric-tooltip-background: color-mix(in srgb,var(--spectric-background-inverse,#f4f4f4) 100%,var(--spectric-primary,#1ea7fd) 90%) }.spectric-tooltip-portal .tooltip-container{display:flex;justify-content:center;align-items:center}.spectric-tooltip-portal.top .tooltip-container{flex-direction:column-reverse}.spectric-tooltip-portal.bottom .tooltip-container{flex-direction:column}.spectric-tooltip-portal.left .tooltip-container{flex-direction:row-reverse}.spectric-tooltip-portal .tooltip-content{background:var(--spectric-tooltip-background);border-radius:var(--spectric-border-radius,.4em);box-shadow:0 0 .01em .01em color-mix(in srgb,var(--spectric-background-hover,rgba(141, 141, 141, .12)) 90%,var(--spectric-text-on-color,#ffffff) 90%);padding:.2em;color:var(--spectric-text-on-color,#ffffff)}.spectric-tooltip-portal .tooltip-caret{background:var(--spectric-tooltip-background)}.spectric-tooltip-portal.top .tooltip-caret,.spectric-tooltip-portal.bottom .tooltip-caret{inline-size:.75rem;block-size:.374rem}.spectric-tooltip-portal.left .tooltip-caret,.spectric-tooltip-portal.right .tooltip-caret{inline-size:.375rem;block-size:.75rem}.spectric-tooltip-portal.top .tooltip-caret{clip-path:polygon(0 0,50% 100%,100% 0)}.spectric-tooltip-portal.bottom .tooltip-caret{clip-path:polygon(0 100%,50% 0,100% 100%)}.spectric-tooltip-portal.left .tooltip-caret{clip-path:polygon(0 0,100% 50%,0 100%)}.spectric-tooltip-portal.right .tooltip-caret{clip-path:polygon(0 50%,100% 0,100% 100%)}

package/dist/utils/once.d.ts

@@ -0,0 +1 @@
+export declare function once(func: Function): (...args: any[]) => any;

package/dist/utils/spread.d.ts

@@ -3,7 +3,7 @@ import { AsyncDirective } from 'lit/async-directive.js';
 /**
  * Usage:
  *    import { html, render } from 'lit';
- *    import { spreadProps } from '@open-wc/lit-helpers';
+ *    import { spreadProps } from '@spectric/ui';
  *
  *    render(
  *      html`

package/package.json

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

package/src/components/input.ts

@@ -303,7 +303,6 @@ export class SpectricInput extends LitElement implements InputProps {
         <spectric-button @click=${() => {
             this.checked = !this.checked;
             this.value = Boolean(this.checked);
-            console.log(this.checked, this.value)
             this.dispatchEvent(new Event("change", { bubbles: true }))
           }} icon size=${this.size || "xxsmall"} variant=${this.checked ? "primary" : "secondary"}>${this.checked ? '✓' : "\u00A0"}</spectric-button>
           ${this.invalid || this.helperText ? html`<spectric-tooltip text=${this.invalid || this.helperText}></spectric-tooltip>` : null}

package/src/components/pagination/pagination.ts

@@ -8,12 +8,12 @@ import { ButtonSizesTypes } from '../Button';
 export type { PaginationProps, PaginationChangeProps, PaginationEvents }
 
 interface PaginationChangeProps {
-    page: number;
-    pageSize: number;
+    page?: number;
+    pageSize?: number;
 }
 
 interface PaginationProps extends PaginationChangeProps {
-    size: ButtonSizesTypes
+    size?: ButtonSizesTypes
     totalItems?: number
     pageSizeOptions?: number[]
 }
@@ -93,8 +93,8 @@ export class PaginationElement extends LitElement implements PaginationProps {
                     ${pageText}
                     </div>
                     <div>
-                    <spectric-button size=${this.size} ?disabled=${this.page === 1} @click=${this._handlePageDown} icon><</spectric-button>
-                    <spectric-button size=${this.size} ?disabled=${nextPageDisabled} @click=${this._handlePageUp} icon>></spectric-button>
+                    <spectric-button size=${this.size} ?disabled=${this.page === 1} @click=${this._handlePageDown} icon>🠈</spectric-button>
+                    <spectric-button size=${this.size} ?disabled=${nextPageDisabled} @click=${this._handlePageUp} icon>🠊</spectric-button>
                     </div>
                 </div>
                 `: null}
@@ -115,7 +115,7 @@ declare global {
     namespace JSX {
         interface IntrinsicElements {
             /**
-             * @see {@link DialogElement}
+             * @see {@link PaginationElement}
              */
             [PaginationElementTag]: ReactElementWithPropsAndEvents<PaginationElement, PaginationProps, PaginationEvents>;
         }
@@ -124,7 +124,7 @@ declare global {
         namespace JSX {
             interface IntrinsicElements {
                 /**
-                 * @see {@link DialogElement}
+                 * @see {@link PaginationElement}
                  */
                 [PaginationElementTag]: ReactElementWithPropsAndEvents<PaginationElement, PaginationProps, PaginationEvents>
             }

package/src/components/query_bar/QueryBar.ts

@@ -133,32 +133,34 @@ export class SpectricQuery extends LitElement implements IQueryProps {
   protected _input!: SpectricInput;
   _parseQuery = (e: InputEvent | undefined = undefined) => {
     let ast;
-    if (e && e?.currentTarget && (e.currentTarget as HTMLInputElement).value) {
+    if (e && e?.currentTarget) {
       this.value = (e.currentTarget as HTMLInputElement).value
     }
-    if (this.value == "") {
-      return
+    if (this.value) {
+      try {
+        if (e && e.data == "(") {
+          //Auto close parentheses or parsing and suggestions fail
+          this.value = this.value + " )"
+          this._input.setSelectionRange(this.value.length - 2, this.value.length - 2)
+        }
+        let value = this.value;
+        if (this._input.selectionStart !== null) {
+          value = value.substring(0, this._input.selectionStart) + "@kuery-cursor@" + value.substring(this._input.selectionStart)
+        }
+        //FIXME: make auto complete work well.
+        let suggestions = kuery.parse(value, { parseCursor: true, cursorSymbol: "@kuery-cursor@", allowLeadingWildcards: false }) as unknown as Suggestion;
+        this.autoComplete(suggestions)
+      } catch (error: any) {
+        // this.completions = []
+        // this._input.invalid = true;
+        // let [expect, _, arrow] = e.message.split("\n")
+        // this._input.invalidText = html`  ${arrow} ${expect}`;
+        return
+      }
     }
     try {
-      if (e && e.data == "(") {
-        //Auto close parentheses or parsing and suggestions fail
-        this.value = this.value + " )"
-        this._input.setSelectionRange(this.value.length - 2, this.value.length - 2)
-      }
-      let value = this.value;
-      if (this._input.selectionStart !== null) {
-        value = value.substring(0, this._input.selectionStart) + "@kuery-cursor@" + value.substring(this._input.selectionStart)
-      }
-      //FIXME: make auto complete work well.
-      let suggestions = kuery.parse(value, { parseCursor: true, cursorSymbol: "@kuery-cursor@", allowLeadingWildcards: false }) as unknown as Suggestion;
-      this.autoComplete(suggestions)
-
       ast = kuery.parse(this.value, { allowLeadingWildcards: false });
-    } catch (e: any) {
-      // this.completions = []
-      // this._input.invalid = true;
-      // let [expect, _, arrow] = e.message.split("\n")
-      // this._input.invalidText = html`  ${arrow} ${expect}`;
+    } catch (error: any) {
       return
     }
     let output
@@ -288,6 +290,8 @@ export class SpectricQuery extends LitElement implements IQueryProps {
     } else {
       this.value = prefix + this.value.substring(completion.end)
     }
+    //Important if the underlying inputs value hasn't been set the setSelectionRange will fail to set a range greater than the inputs current value
+    this._input.value = this.value
     this._input.setSelectionRange(insertIndex, insertIndex)
     if (completion.onSelect) {
       let value = await completion.onSelect()
@@ -299,6 +303,7 @@ export class SpectricQuery extends LitElement implements IQueryProps {
     this.completionIndex = 0;
     this.completions = []
     this._parseQuery()
+    this._input.focus()
   }
   _handleArrows = (e: KeyboardEvent) => {
     if (e.key === "Escape") {

package/src/components/table/cell.ts

@@ -43,7 +43,7 @@ export class TableCellElement<T> extends LitElement implements CellProps<T> {
     _handleFilterOut = () => {
         let value = undefined;
         if (this.column.key && typeof this.row === "object") {
-            value = getValue(this.row as Record<any, any>, this.column.key)
+            value = rowGetValue(this.row as Record<any, any>, this.column.key)
         }
         this.dispatchEvent(new CustomEvent<FilterEvent<T>>("filter", {
             composed: true,
@@ -59,7 +59,7 @@ export class TableCellElement<T> extends LitElement implements CellProps<T> {
     _handleFilterFor = () => {
         let value = undefined;
         if (this.column.key && typeof this.row === "object") {
-            value = getValue(this.row as Record<any, any>, this.column.key)
+            value = rowGetValue(this.row as Record<any, any>, this.column.key)
         }
         this.dispatchEvent(new CustomEvent<FilterEvent<T>>("filter", {
             composed: true,
@@ -77,8 +77,7 @@ export class TableCellElement<T> extends LitElement implements CellProps<T> {
         if (this.column.render) {
             rendered = this.column.render(this.row, this.table)
         } else if (this.column.key && typeof this.row === 'object') {
-
-            rendered = getValue(this.row as any, this.column.key)
+            rendered = rowGetValue(this.row as any, this.column.key)
         } else {
             rendered = html`error`
         }
@@ -134,11 +133,11 @@ declare global {
 }
 
 
-const getValue = (context: Record<string, any>, key: string) => {
+export const rowGetValue = (context: Record<string, any>, key: string) => {
     let path = key.split(".")
     let value = context[path[0]]
     if (path.length > 1) {
-        value = getValue(value, path.slice(1).join("."))
+        value = rowGetValue(value, path.slice(1).join("."))
     }
     return value
 }

package/src/components/table/header.ts

@@ -4,7 +4,7 @@ import { customElement, property, } from 'lit/decorators.js';
 import { HTMLElementTagWithEvents, ReactElementWithPropsAndEvents } from '../types';
 import "./table.css"
 export const TableHeaderElementTag = "spectric-table-header"
-import { ColumnSettings } from './table';
+import { ColumnSettings, TableSortDirection } from './table';
 
 
 interface HeaderProps<T> {
@@ -22,6 +22,20 @@ export class TableHeaderElement<T> extends LitElement implements HeaderProps<T>
     protected createRenderRoot(): HTMLElement | DocumentFragment {
         return this
     }
+    _handleSortChange = (column: ColumnSettings<T>) => {
+        column = JSON.parse(JSON.stringify(column))// Clone the column to not mutate the original object
+        if (!column.sortable) {
+            return
+        }
+        if (column.sortDirection === TableSortDirection.none || column.sortDirection === undefined) {
+            column.sortDirection = TableSortDirection.ascending
+        } else if (column.sortDirection === TableSortDirection.ascending) {
+            column.sortDirection = TableSortDirection.decending
+        } else if (column.sortDirection === TableSortDirection.decending) {
+            column.sortDirection = TableSortDirection.none
+        }
+        this.dispatchEvent(new CustomEvent<ColumnSettings<T>>("sortChange", { detail: column }))
+    }
     protected render(): unknown {
 
         return html`
@@ -31,7 +45,12 @@ export class TableHeaderElement<T> extends LitElement implements HeaderProps<T>
             if (column.filterable) {
                 //classes.push("filterable")
             }
-            return html`<td><div class=${classes.join(" ")}>${column.title || column.key}</div></td>`
+            if (column.sortable) {
+                classes.push("sortable")
+            }
+            let sortDirection = column.sortDirection === TableSortDirection.ascending ? `🠉` : column.sortDirection == TableSortDirection.decending ? `🠋` : ``
+            let sortClass = column.sortDirection || TableSortDirection.none
+            return html`<td @click=${() => this._handleSortChange(column)}><div class=${classes.join(" ")}>${column.title || column.key} <span class="sort-direction ${sortClass}">${sortDirection}</span></div></td>`
         })}
         </tr>
             `
@@ -39,7 +58,7 @@ export class TableHeaderElement<T> extends LitElement implements HeaderProps<T>
 }
 
 interface TableHeaderEvents {
-    'sort': (event: CustomEvent<ColumnSettings<any>>) => void; //TODO sort events
+    'sortChange': (event: CustomEvent<ColumnSettings<any>>) => void; //TODO sort events
 }
 
 declare global {

package/src/components/table/sorting.ts

@@ -0,0 +1,34 @@
+import { once } from "../../utils/once";
+import { rowGetValue } from "./cell";
+import { ColumnSettings, TableSortDirection } from "./table";
+
+/**
+ * Creates a chain of sort functions so you can perform multi column sorting.
+ */
+export const createSortChain = <T>(sorts: ColumnSettings<T>[]) => {
+    return sorts.map(({ key, sortDirection, compareFn }) => {
+        return (a: T, b: T) => {
+            if (!key) {
+                return undefined
+            }
+            let v1 = rowGetValue(a as Record<string, any>, key)
+            let v2 = rowGetValue(b as Record<string, any>, key)
+            if (compareFn) {
+                return compareFn(a, b)
+            }
+            if (typeof v1 === "number" || typeof v1 === "bigint" || typeof v1 === "boolean") {
+                //@ts-ignore
+                let sort: number = v1 - v2 as unknown as number
+                if (sortDirection === TableSortDirection.decending) {
+                    sort = sort * -1
+                }
+                return sort
+            } else if (typeof v1 === "string") {
+                return v1.localeCompare(v2) * (sortDirection === TableSortDirection.decending ? -1 : 1)
+            }
+            once(() => { console.error(`Unable to sort type ${typeof v1}`) })
+            return undefined
+
+        }
+    })
+}

package/src/components/table/table.css

@@ -1,20 +1,53 @@
 spectric-table{
     display: flex;
     flex-direction: column;
+    overflow: hidden;
+}
+spectric-table .table-wrapper{
+    overflow: auto;
+    flex-grow: 1;
 }
 spectric-table tr{
     text-align: center;
 }
 
+spectric-table-body tr:nth-child(odd){
+    background-color: color-mix(in srgb, var(--spectric-primary, #1ea7fd), transparent 90%);
+}
 spectric-table-body tr:hover{
     background-color: color-mix(in srgb, var(--spectric-primary, #1ea7fd), transparent 70%)
 }
 spectric-table-header{
     display: table-header-group;
     font-weight: bold;
+    position: sticky;
+    top: 0px;
+    left: 0px;
+    z-index: 1;
+    background: var(--spectric-background, #ffffff);
+}
+spectric-table-header td {
+    vertical-align: middle;
+}
+
+spectric-table-header .header-contents {
+    position: relative;
+}
+
+spectric-table-header .header-contents .sort-direction {
+    position: absolute;
+    right: 0;
+}
+spectric-table-header .header-contents.sortable {
+    cursor: pointer;
+}
+spectric-table-header .header-contents.sortable:hover .sort-direction.none::before
+ {
+    content: "\2B81";
 }
 spectric-table div[role="table"]{
     display: table;
+    min-width: 100%;
 }
 spectric-table-body {
     display: table-row-group;
@@ -43,4 +76,23 @@ spectric-table-cell .table-cell-actions{
 }
 spectric-table-cell td:hover .table-cell-actions{
     visibility: unset;
+}
+spectric-table .table-checkbox-single spectric-button{
+    --button-border-radius: 50%;
+}
+spectric-input.table-checkbox-single[checked] spectric-button{
+    --text-on-color: transparent;
+    border-radius: 50%;
+    position: relative;
+}
+spectric-input.table-checkbox-single[checked] spectric-button::before {
+    position: absolute;
+    content: " ";
+    height: 50%;
+    width: 50%;
+    left: 25%;
+    top: 25%;
+    border-radius: 50%;
+    z-index: 1;
+    box-shadow: 0px 0px 0px 4px var(--input-color);
 }

package/src/components/table/table.ts

@@ -9,26 +9,57 @@ 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 DomRenderable = HTMLElement | TemplateResult | string | number | null
+export enum TableSelectOptions {
+    multi = "multi",
+    single = "single",
+    none = "none"
+}
 
+export enum TableSortOption {
+    multi = "multi",
+    single = "single",
+}
+export type TableSortOptionTypes = `${TableSortOption}`
+export enum TableSortDirection {
+    ascending = "ascending",
+    decending = "decending",
+    none = "none"
+}
+export type TableSortDirectionTypes = `${TableSortDirection}`
 export type ColumnSettings<T> = {
     width?: number
     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, table: TableElement<T>) => DomRenderable
+    /**
+     * Custom comparator function for sorting
+     */
+    compareFn?: ((a: T, b: T) => number) | undefined
 }
-type TableSelectOptions = "multi" | "single"
-interface TableProps<T> {
+export type TableSelectOptionsTypes = `${TableSelectOptions}`
+export interface TableDataOptions<T> {
     pagination?: PaginationProps
     columns: ColumnSettings<T>[]
+}
+interface TableProps<T> extends TableDataOptions<T> {
     data: T[]
-    select?: TableSelectOptions
+    select: TableSelectOptionsTypes
+    sort?: TableSortOptionTypes
 }
 
 type DomEvent<T> = Event & {
@@ -37,30 +68,84 @@ type DomEvent<T> = Event & {
 /**
  * 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 TableElement<T> extends LitElement implements TableProps<T> {
     @property({ type: Array, attribute: false })
     data: T[] = [];
     @property({ type: Object, attribute: false })
-    pagination?: PaginationProps | undefined;
+    pagination?: PaginationProps;
     @property({ attribute: false })
     columns: ColumnSettings<T>[] = [];
-    @property({ type: String, reflect: false })
-    select?: TableSelectOptions;
+    @property({ type: String, reflect: true })
+    select: TableSelectOptionsTypes = TableSelectOptions.none;
+    @property({ type: String, reflect: true })
+    sort: TableSortOptionTypes = TableSortOption.single;
+
+    static getDefaultDataSorterAndPaginatior<T>(data: T[]) {
+        return (props: TableDataOptions<T>) => {
+            let sorts = props.columns.filter(column => column.sortable && column.sortDirection && column.sortDirection !== TableSortDirection.none)
+            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
+                })
+            }
+
+            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 _handlePaginationChange = (e: CustomEvent<PaginationChangeProps>) => {
         e.preventDefault()
         e.stopPropagation()
         if (this.pagination) {
-            this.pagination.size
-            this.pagination = { ...this.pagination, ...e.detail }
+            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._emitChange()
     };
+    private _handleSortChange = (e: CustomEvent<ColumnSettings<T>>) => {
+        let columnSetting = e.detail
+        let column = this.columns.find(col => col.key == columnSetting.key)
+        if (!column) {
+            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
+            })
+        }
+        column.sortDirection = columnSetting.sortDirection;
+        this.columns = [...this.columns]
+        this._emitChange()
+    }
+
     private _emitChange = () => {
-        let { pagination } = this
-        this.dispatchEvent(new CustomEvent<{ pagination?: PaginationChangeProps }>("change", { detail: { pagination } }))
+        let { pagination, columns } = this
+        this.dispatchEvent(new CustomEvent<TableDataOptions<T>>("change", { detail: { pagination, columns } }))
     }
     //@ts-ignore
     private __DO_NOT_USE_filter = () => {
@@ -68,7 +153,7 @@ export class TableElement<T> extends LitElement implements TableProps<T> {
         this.dispatchEvent(new CustomEvent<FilterEvent<T>>("filter"))
     }
     @state()
-    selected: T[] = [];
+    private selected: T[] = [];
     protected createRenderRoot(): HTMLElement | DocumentFragment {
         return this
     }
@@ -79,27 +164,27 @@ export class TableElement<T> extends LitElement implements TableProps<T> {
         } else {
             this.selected = []
         }
-        this.dispatchEvent(new CustomEvent("select", { detail: this.selected }))
+        this.dispatchEvent(new CustomEvent("selected", { detail: this.selected }))
     }
     protected render(): unknown {
         let columns = this.columns.filter(column => !column.hidden)
-        if (this.select) {
+        if (this.select !== TableSelectOptions.none) {
             columns.unshift({
                 title: this.select === "multi" ? html`<spectric-input variant="checkbox" @change=${this._handleSelectAllChange} .helperText=${"Select All"}></spectric-input>` : null,
                 render: (row) => {
-                    return html`<spectric-input variant="checkbox" .checked=${this.selected.includes(row)} @change=${(e: DomEvent<HTMLInputElement>) => {
+                    return html`<spectric-input variant="checkbox" class="table-checkbox-${this.select}" .checked=${this.selected.includes(row)} @change=${(e: DomEvent<HTMLInputElement>) => {
                         e.stopPropagation()
                         if (this.select === "single") {
                             this.selected = []
                         }
                         if (e.target.checked) {
                             this.selected.push(row)
-                            this.dispatchEvent(new CustomEvent("select", { detail: this.selected }))
+                            this.dispatchEvent(new CustomEvent("selected", { detail: this.selected }))
                         } else {
                             let index = this.selected.findIndex(value => value === row)
                             if (index !== -1) {
                                 this.selected.splice(index, 1)
-                                this.dispatchEvent(new CustomEvent("select", { detail: this.selected }))
+                                this.dispatchEvent(new CustomEvent("selected", { detail: this.selected }))
                             }
                         }
                     }}></spectric-input>`
@@ -108,9 +193,11 @@ export class TableElement<T> extends LitElement implements TableProps<T> {
         }
 
         return html`
-        <div role="table">
-            <spectric-table-header .columns=${columns}></spectric-table-header>
-            <spectric-table-body .columns=${columns} .data=${this.data} .table=${this}></spectric-table-body>
+        <div class="table-wrapper">
+            <div role="table">
+                <spectric-table-header .columns=${columns} @sortChange=${this._handleSortChange}></spectric-table-header>
+                <spectric-table-body .columns=${columns} .data=${this.data} .table=${this}></spectric-table-body>
+            </div>
         </div>
         ${this.pagination ? html`<spectric-pagination ${spreadProps(this.pagination)} @change=${this._handlePaginationChange}></spectric-pagination>` : null}
         `;
@@ -130,7 +217,7 @@ declare global {
     namespace JSX {
         interface IntrinsicElements {
             /**
-             * @see {@link DialogElement}
+             * @see {@link TableElement}
              */
             [TableElementTag]: ReactElementWithPropsAndEvents<TableElement<any>, TableProps<any>, TableEvents>;
         }
@@ -139,7 +226,7 @@ declare global {
         namespace JSX {
             interface IntrinsicElements {
                 /**
-                 * @see {@link DialogElement}
+                 * @see {@link TableElement}
                  */
                 [TableElementTag]: ReactElementWithPropsAndEvents<TableElement<any>, TableProps<any>, TableEvents>
             }

package/src/components/tooltip/tooltip.ts

@@ -210,7 +210,7 @@ declare global {
     namespace JSX {
         interface IntrinsicElements {
             /**
-             * @see {@link DialogElement}
+             * @see {@link TooltipElement}
              */
             [TooltipElementTag]: ReactElementWithPropsAndEvents<TooltipElement, TooltipProps, TooltipEvents>;
         }
@@ -219,7 +219,7 @@ declare global {
         namespace JSX {
             interface IntrinsicElements {
                 /**
-                 * @see {@link DialogElement}
+                 * @see {@link TooltipElement}
                  */
                 [TooltipElementTag]: ReactElementWithPropsAndEvents<TooltipElement, TooltipProps, TooltipEvents>
             }