@spectric/ui 0.0.9 → 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.9",
+  "version": "0.0.11",
   "type": "module",
   "main": "./dist/index.es.js",
   "module": "./dist/index.es.js",

package/src/components/Button.ts

@@ -25,14 +25,14 @@ export enum ButtonVariants {
 type ButtonVariantsTypes = `${ButtonVariants}`
 export interface ButtonProps {
   /** Is this the principal call to action on the page? */
-  variant: ButtonVariantsTypes;
+  variant?: ButtonVariantsTypes;
   /** What background color to use */
   backgroundColor?: string;
   /** How large should the button be? */
   size: ButtonSizesTypes;
   label?: string,
   /* should the button be disabled*/
-  disabled: boolean;
+  disabled?: boolean;
   danger?: boolean;
   icon?: boolean
   tooltip?: DomRenderable

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

@@ -39,7 +39,7 @@ export interface IQueryProps {
   /**
    * The output of the query in a specific format
    */
-  outputLanguage: SupportedLanguagesTypes;
+  outputLanguage?: SupportedLanguagesTypes;
   /**
    * The output of the query
    */
@@ -47,16 +47,16 @@ export interface IQueryProps {
   /**
    * Fields that are used for the auto complete
    */
-  fields: FieldTypes[];
+  fields?: FieldTypes[];
   /**
    * Callback that will provide values for specific fields
    */
-  getValuesForField: (field: string, text: string) => Promise<string[]>;
+  getValuesForField?: (field: string, text: string) => Promise<string[]>;
 
   /**
    * Input placeholder
    */
-  placeholder: string;
+  placeholder?: string;
 }
 type LabelValue = {
   label?: string;
@@ -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`&#160;&#160;${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`&#160;&#160;${arrow} ${expect}`;
+    } catch (error: any) {
       return
     }
     let output
@@ -288,17 +290,20 @@ 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()
       if (value !== undefined) {
         this.value += value
-        setTimeout(()=>{this._input.focus();})
+        setTimeout(() => { this._input.focus(); })
       }
     }
     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 = (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 = (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,7 +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 = (this.row as Record<any, any>)[this.column.key]
+            rendered = rowGetValue(this.row as any, this.column.key)
         } else {
             rendered = html`error`
         }
@@ -131,3 +131,13 @@ declare global {
         }
     }
 }
+
+
+export const rowGetValue = (context: Record<string, any>, key: string) => {
+    let path = key.split(".")
+    let value = context[path[0]]
+    if (path.length > 1) {
+        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);
 }