@spectric/ui 0.0.6 → 0.0.8

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 spectric-button{position:absolute;right:4px;bottom:3px}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-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 spectric-button{position:absolute;right:4px;bottom:3px}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-header{display:table-header-group}spectric-table div[role=table]{display:table}spectric-table-body{display:table-row-group}spectric-table-cell{display:contents}spectric-table-cell td{position:relative}spectric-table .filterable{padding-top:10px}spectric-table-cell .table-cell-actions{position:absolute;display:flex;width:100%;flex-direction:row-reverse;visibility:hidden}spectric-table-cell td:hover .table-cell-actions{visibility:unset}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@spectric/ui",
-  "version": "0.0.6",
+  "version": "0.0.8",
   "type": "module",
   "main": "./dist/index.es.js",
   "module": "./dist/index.es.js",
@@ -35,4 +35,4 @@
     "vite-plugin-run": "^0.6.1",
     "web-component-analyzer": "^2.0.0"
   }
-}
+}

package/src/components/Button.ts

@@ -9,13 +9,17 @@ export enum ButtonSizes {
   large = "large",
   medium = "medium",
   small = "small",
+  xsmall = "xsmall",
+  xxsmall = "xxsmall",
+  tiny = "tiny"
 }
-type ButtonSizesTypes = `${ButtonSizes}`
+export type ButtonSizesTypes = `${ButtonSizes}`
 export enum ButtonVariants {
   primary = "primary",
   secondary = "secondary",
-  text = "text"
+  text = "text",
 }
+
 type ButtonVariantsTypes = `${ButtonVariants}`
 export interface ButtonProps {
   /** Is this the principal call to action on the page? */
@@ -28,6 +32,7 @@ export interface ButtonProps {
   /* should the button be disabled*/
   disabled: boolean;
   danger?: boolean;
+  icon?: boolean
 }
 const MODES = {
   "primary": 'spectric-button--primary',
@@ -46,14 +51,17 @@ export class SpectricButton extends LitElement implements ButtonProps {
   @property({ type: String, reflect: true })
   backgroundColor?: string | undefined;
   @property({ type: String, reflect: true })
-  size: 'small' | 'medium' | 'large' = "large";
+  size: ButtonSizesTypes = "small";
   @property({ type: String, reflect: true })
   label?: string = "";
   @property({ type: Boolean, reflect: true })
   danger = false;
+  @property({ type: Boolean, reflect: true })
+  icon: boolean = false;
+
   connectedCallback(): void {
     super.connectedCallback()
-    this.addEventListener("click", this._onClick)
+    this.addEventListener("click", this._onClick, { capture: true })
   }
   disconnectedCallback(): void {
     super.disconnectedCallback()

package/src/components/button.css.ts

@@ -78,6 +78,53 @@ export default css`
     box-shadow: 0 0 30px white inset;
 }
 
+:host([icon]) .spectric-button {
+    padding: unset;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+
+/* :host([icon][size="small"]){
+  height:12px;
+  width:12px;
+}
+
+:host([icon][size="medium"]){
+  height:14px;
+  width:14px;
+}
+
+:host([icon][size="large"]){
+    width: 48px;
+    height: 48px;
+} */
+:host([icon][size="tiny"]) .spectric-button{
+    width: 10px;
+    height: 10px;
+}
+:host([icon][size="xxsmall"]) .spectric-button{
+    width: 20px;
+    height: 20px;
+}
+:host([icon][size="xsmall"]) .spectric-button{
+    width: 28px;
+    height: 28px;
+}
+:host([icon][size="small"]) .spectric-button{
+    width: 34px;
+    height: 34px;
+}
+:host([icon][size="medium"]) .spectric-button{
+    width: 40px;
+    height: 40px;
+}
+
+:host([icon][size="large"]) .spectric-button{
+    width: 48px;
+    height: 48px;
+}
+
 .spectric-button:disabled{
   cursor: not-allowed;
   pointer-events: none;
@@ -145,6 +192,25 @@ opacity:1
   background-color: transparent;
   color: var(--text-secondary);
 }
+.spectric-button--tiny {
+    font-size: 10px;
+    line-height: 10px;
+    height: 10px;
+    display: flex;
+    align-content: center;
+    align-items: center;
+}
+.spectric-button--xxsmall {
+  padding: 5px 6px;
+  font-size: 10px;
+  line-height: 8px;
+}
+.spectric-button--xsmall {
+  padding: 5px 8px;
+  font-size: 10px;
+  font-size: 12px;
+  line-height: 14px;
+}
 .spectric-button--small {
   padding: 5px 10px;
   font-size: 12px;

package/src/components/index.ts

@@ -7,4 +7,6 @@ export * from "./query_bar"
 export * from "./Panel"
 export * from "./ThemeProvider"
 export * from "./dialog"
-export * from "./splitview"
+export * from "./splitview"
+export * from "./pagination"
+export * from "./table"

package/src/components/input.ts

@@ -155,6 +155,9 @@ export class SpectricInput extends LitElement implements InputProps {
   @property({ reflect: true })
   autocomplete: HTMLInputElement['autocomplete'] = "";
   get selectionStart() {
+    if(!this._input){
+      return null
+    }
     return this._input.selectionStart
   }
   /**
@@ -183,8 +186,22 @@ export class SpectricInput extends LitElement implements InputProps {
       this._input.value = String(value);
     }
   }
-
+  blur(): void {
+    if(this._input){
+      this._input.blur()
+    }
+  }
+  focus(options?: FocusOptions): void {
+    if(this._input){
+      //Sometimes the input will get auto focused after a modal closes but the cursor isn't set. we need to blur then refocus to get the cursor
+      this._input.blur()
+      this._input.focus(options)
+    }
+  }
   setSelectionRange(start: number, end: number, direction: "forward" | "backward" | "none" = "none") {
+    if(!this._input){
+      return 
+    }
     this._input.setSelectionRange(start, end, direction)
   }
   /**
@@ -199,7 +216,7 @@ export class SpectricInput extends LitElement implements InputProps {
   * The underlying input element
   */
   @query('input')
-  protected _input!: HTMLInputElement;
+  protected _input?: HTMLInputElement;
 
   private handleTogglePasswordVisibility = () => {
     this._showPassword = !this._showPassword;

package/src/components/pagination/index.ts

@@ -0,0 +1 @@
+export * from "./pagination"

package/src/components/pagination/pagination.css

@@ -0,0 +1,10 @@
+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;
+
+}

package/src/components/pagination/pagination.ts

@@ -0,0 +1,133 @@
+import { html, LitElement, PropertyValues } from 'lit';
+import "../Button";
+import { customElement, property, } from 'lit/decorators.js';
+import { HTMLElementTagWithEvents, ReactElementWithPropsAndEvents } from '../types';
+export const PaginationElementTag = "spectric-pagination"
+import "./pagination.css"
+import { ButtonSizesTypes } from '../Button';
+export type { PaginationProps, PaginationChangeProps, PaginationEvents }
+
+interface PaginationChangeProps {
+    page: number;
+    pageSize: number;
+}
+
+interface PaginationProps extends PaginationChangeProps {
+    size: ButtonSizesTypes
+    totalItems?: number
+    pageSizeOptions?: number[]
+}
+
+console.log("Pagination")
+
+/**
+ * Pagination Element
+ */
+@customElement(PaginationElementTag)
+export class PaginationElement extends LitElement implements PaginationProps {
+    @property({ type: Number, reflect: true })
+    page: number = 1;
+
+    @property({ type: Number, reflect: true })
+    pageSize: number = 10;
+
+    @property({ type: Number, reflect: true })
+    totalItems?: number;
+
+    @property({ type: Array })
+    pageSizeOptions = [10, 20, 50, 100, 1000];
+
+    /**
+     * Size of the pagination buttons
+     */
+    @property({ type: String, reflect: true })
+    size: ButtonSizesTypes = "small"
+    protected createRenderRoot(): HTMLElement | DocumentFragment {
+        return this
+    }
+    protected updated(_changedProperties: PropertyValues): void {
+        if (_changedProperties.has("pageSize") && !this.pageSizeOptions.includes(this.pageSize)) {
+            this.pageSizeOptions = [...this.pageSizeOptions, this.pageSize].sort((a, b) => a - b)
+        }
+    }
+    private _handlePageUp = () => {
+        this.page += 1
+        this._emitChange()
+    }
+    private _handlePageDown = () => {
+        this.page -= 1
+        this._emitChange()
+    }
+    private _handleSizeChange = (e: any) => {
+        let value = parseInt(e.target.value)
+        this.pageSize = value
+        this._emitChange()
+    }
+    private _emitChange = () => {
+        let { page, pageSize } = this
+        this.dispatchEvent(new CustomEvent<PaginationChangeProps>("change", { detail: { page, pageSize } }))
+    }
+    protected render(): unknown {
+        let nextPage = (this.page) * this.pageSize
+        let nextPageDisabled = true
+
+        if (this.totalItems && nextPage < this.totalItems) {
+            nextPageDisabled = false
+        }
+        let pageText = ""
+        if (this.totalItems) {
+            pageText = `${this.page} of ${Math.ceil(this.totalItems / this.pageSize)}`
+        }
+        return html`
+        <div class="spectric-pagination-container">
+                <div>
+                    <!-- TODO/FIXME Make a select component and use it for cross browser styling-->
+                    <select @change=${this._handleSizeChange} .value=${String(this.pageSize)}>
+                        ${this.pageSizeOptions.map(size => html`<option .value=${String(size)} class=${String(size) === String(this.pageSize) ? "selected" : ""}>${size}</option>`)}
+                    </select>
+                </div>
+                ${this.totalItems ? html`
+                    <div class="spectric-pagination-text">${`Items ${(this.page - 1) * this.pageSize}-${Math.min(this.page * this.pageSize, this.totalItems)} of ${this.totalItems}`}</div>
+                <div class="spectric-pagination-container">
+                    <div>
+                    ${pageText}
+                    </div>
+                    <div>
+                    <spectric-button size=${this.size} ?disabled=${this.page === 1} @click=${this._handlePageDown}><</spectric-button>
+                    <spectric-button size=${this.size} ?disabled=${nextPageDisabled} @click=${this._handlePageUp}>></spectric-button>
+                    </div>
+                </div>
+                `: null}
+        </div>
+        `;
+    }
+}
+
+interface PaginationEvents {
+    'change': (event: CustomEvent<PaginationChangeProps>) => void;
+}
+
+declare global {
+    interface HTMLElementTagNameMap {
+        [PaginationElementTag]: HTMLElementTagWithEvents<PaginationElement, PaginationEvents>
+
+    }
+    namespace JSX {
+        interface IntrinsicElements {
+            /**
+             * @see {@link DialogElement}
+             */
+            [PaginationElementTag]: ReactElementWithPropsAndEvents<PaginationElement, PaginationProps, PaginationEvents>;
+        }
+    }
+    namespace React {
+        namespace JSX {
+            interface IntrinsicElements {
+                /**
+                 * @see {@link DialogElement}
+                 */
+                [PaginationElementTag]: ReactElementWithPropsAndEvents<PaginationElement, PaginationProps, PaginationEvents>
+            }
+        }
+    }
+}

package/src/components/query_bar/QueryBar.ts

@@ -43,7 +43,7 @@ export interface IQueryProps {
   /**
    * The output of the query
    */
-  value: string;
+  value?: string;
   /**
    * Fields that are used for the auto complete
    */
@@ -109,25 +109,7 @@ export class SpectricQuery extends LitElement implements IQueryProps {
    * The value of the input.
    */
   @property({ type: String, reflect: true })
-  get value() {
-    //pull directly from the input
-    if (this._input) {
-      return String(this._input.value)
-    }
-    // but before then _value will work fine
-    return this._value;
-  }
-
-  set value(value) {
-    const oldValue = this._value;
-    this._value = value;
-    this.requestUpdate('value', oldValue);
-    // we set the value directly on the input (when available)
-    // so that programatic manipulation updates the UI correctly
-    if (this._input) {
-      this._input.value = String(value);
-    }
-  }
+  value = ""
   @property({ type: String, reflect: true })
   outputLanguage: SupportedLanguagesTypes = "AST";
   @state()
@@ -151,6 +133,9 @@ 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){
+      this.value = (e.currentTarget as HTMLInputElement).value
+    }
     if (this.value == "") {
       return
     }
@@ -308,6 +293,7 @@ export class SpectricQuery extends LitElement implements IQueryProps {
       let value = await completion.onSelect()
       if (value !== undefined) {
         this.value += value
+        setTimeout(()=>{this._input.focus();})
       }
     }
     this.completionIndex = 0;
@@ -353,7 +339,7 @@ export class SpectricQuery extends LitElement implements IQueryProps {
   }
   protected render() {
     return html`
-      <spectric-input .placeholder=${this.placeholder} style=${`anchor-name:--${this.uuid};`} autocomplete="off" @input=${this._parseQuery} @keydown=${this._handleArrows} @change=${(e: Event) => e.stopPropagation()}></spectric-input>
+      <spectric-input .value=${this.value} .placeholder=${this.placeholder} style=${`anchor-name:--${this.uuid};`} autocomplete="off" @input=${this._parseQuery} @keydown=${this._handleArrows} @change=${(e: Event) => e.stopPropagation()}></spectric-input>
       <div class="autocomplete" popover style=${`position-anchor: --${this.uuid};`}>
       ${this.completions.map((option: Completion, index) =>
       html`<div @click=${() => {

package/src/components/table/body.ts

@@ -0,0 +1,69 @@
+import { html, LitElement } from 'lit';
+import { customElement, property, } from 'lit/decorators.js';
+import { HTMLElementTagWithEvents, ReactElementWithPropsAndEvents } from '../types';
+export const TableBodyElementTag = "spectric-table-body"
+import "./cell"
+import { ColumnSettings, TableElement } from './table';
+
+interface BodyProps<T> {
+    columns: ColumnSettings<T>[]
+    data: T[]
+}
+
+
+/**
+ * Pagination Element
+ */
+@customElement(TableBodyElementTag)
+export class TableBodyElement<T> extends LitElement implements BodyProps<T> {
+    @property({ type: Array, attribute: false })
+    data: T[] = [];
+    @property({ type: Array, attribute: false })
+    columns: ColumnSettings<T>[] = [];
+    table!: TableElement<T>
+    protected createRenderRoot(): HTMLElement | DocumentFragment {
+        return this
+    }
+    protected render(): unknown {
+        return html`
+        <body>
+            ${this.data.map((row: any) => {
+            return html`<tr>${this.columns.map(col => {
+                return html`<spectric-table-cell .column=${col} .row=${row}></spectric-table-cell>`
+            })}</tr>`
+        })}
+        </body>
+        `
+
+    }
+
+}
+
+interface TableBodyEvents {
+    //'sort': (event: CustomEvent<ColumnSettings<any>>) => void; //TODO sort events
+}
+
+declare global {
+    interface HTMLElementTagNameMap {
+        [TableBodyElementTag]: HTMLElementTagWithEvents<TableBodyElement<any>, TableBodyEvents>
+
+    }
+    namespace JSX {
+        interface IntrinsicElements {
+            /**
+             * @see {@link DialogElement}
+             */
+            [TableBodyElementTag]: ReactElementWithPropsAndEvents<TableBodyElement<any>, BodyProps<any>, TableBodyEvents>;
+        }
+    }
+    namespace React {
+        namespace JSX {
+            interface IntrinsicElements {
+                /**
+                 * @see {@link DialogElement}
+                 */
+                [TableBodyElementTag]: ReactElementWithPropsAndEvents<TableBodyElement<any>, BodyProps<any>, TableBodyEvents>
+            }
+        }
+    }
+}

package/src/components/table/cell.ts

@@ -0,0 +1,117 @@
+import { html, LitElement } from 'lit';
+import { customElement, property, } from 'lit/decorators.js';
+import { HTMLElementTagWithEvents, ReactElementWithPropsAndEvents } from '../types';
+export const TableCellElementTag = "spectric-table-cell"
+import { ColumnSettings, TableElement } from './table';
+
+interface CellProps<T> {
+    column: ColumnSettings<T>
+    row: T
+}
+
+export type FilterEvent<T> = {
+    value?: T,
+    include: boolean
+    column: ColumnSettings<T>
+    row: T
+}
+
+/**
+ * Pagination Element
+ */
+@customElement(TableCellElementTag)
+export class TableCellElement<T> extends LitElement implements CellProps<T> {
+    @property({ type: Object, attribute: false })
+    row!: T;
+    @property({ type: Object, attribute: false })
+    column!: ColumnSettings<T>;
+    table!: TableElement<T>
+    protected createRenderRoot(): HTMLElement | DocumentFragment {
+        return this
+    }
+    _handleFilterOut = () => {
+        let value = undefined;
+        if (this.column.key && typeof this.row === "object") {
+            value = (this.row as Record<any, any>)[this.column.key]
+        }
+        this.dispatchEvent(new CustomEvent<FilterEvent<T>>("filter", {
+            composed: true,
+            bubbles: true,
+            detail: {
+                include: false,
+                row: this.row,
+                value,
+                column: this.column
+            }
+        }))
+    }
+    _handleFilterFor = () => {
+        let value = undefined;
+        if (this.column.key && typeof this.row === "object") {
+            value = (this.row as Record<any, any>)[this.column.key]
+        }
+        this.dispatchEvent(new CustomEvent<FilterEvent<T>>("filter", {
+            composed: true,
+            bubbles: true,
+            detail: {
+                include: true,
+                row: this.row,
+                value,
+                column: this.column
+            }
+        }))
+    }
+    protected render(): unknown {
+        let rendered
+        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]
+        } else {
+            rendered = html`error`
+        }
+        let classes = ["cell-contents"]
+        if (this.column.filterable) {
+            classes.push("filterable")
+        }
+        let filterButtons = html`<div class="table-cell-actions"><spectric-button @click=${this._handleFilterOut} size="tiny" variant="text" icon>-</spectric-button><spectric-button @click=${this._handleFilterFor} size="tiny" variant="text" icon>+</spectric-button></div>`
+
+
+        return html`
+            <td>
+                ${this.column.filterable ? filterButtons : null}
+                <div class=${classes.join(" ")}>${rendered}</div>
+            </td>
+            `
+    }
+
+}
+
+interface TableBodyEvents {
+    'filter': (event: CustomEvent<ColumnSettings<any>>) => void; //TODO filter events
+}
+
+declare global {
+    interface HTMLElementTagNameMap {
+        [TableCellElementTag]: HTMLElementTagWithEvents<TableCellElement<any>, TableBodyEvents>
+
+    }
+    namespace JSX {
+        interface IntrinsicElements {
+            /**
+             * @see {@link DialogElement}
+             */
+            [TableCellElementTag]: ReactElementWithPropsAndEvents<TableCellElement<any>, CellProps<any>, TableBodyEvents>;
+        }
+    }
+    namespace React {
+        namespace JSX {
+            interface IntrinsicElements {
+                /**
+                 * @see {@link DialogElement}
+                 */
+                [TableCellElementTag]: ReactElementWithPropsAndEvents<TableCellElement<any>, CellProps<any>, TableBodyEvents>
+            }
+        }
+    }
+}

package/src/components/table/header.ts

@@ -0,0 +1,68 @@
+import { html, LitElement } from 'lit';
+import "../pagination";
+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';
+
+
+interface HeaderProps<T> {
+    columns: ColumnSettings<T>[]
+}
+
+/**
+ * Pagination Element
+ */
+@customElement(TableHeaderElementTag)
+export class TableHeaderElement<T> extends LitElement implements HeaderProps<T> {
+    @property({ type: Array, attribute: false })
+    columns: ColumnSettings<T>[] = [];
+
+    protected createRenderRoot(): HTMLElement | DocumentFragment {
+        return this
+    }
+    protected render(): unknown {
+
+        return html`
+        <tr>
+                ${this.columns.map(column => {
+            let classes = ["header-contents"]
+            if (column.filterable) {
+                //classes.push("filterable")
+            }
+            return html`<td><div class=${classes.join(" ")}>${column.title || column.key}</div></td>`
+        })}
+        </tr>
+            `
+    }
+}
+
+interface TableHeaderEvents {
+    'sort': (event: CustomEvent<ColumnSettings<any>>) => void; //TODO sort events
+}
+
+declare global {
+    interface HTMLElementTagNameMap {
+        [TableHeaderElementTag]: HTMLElementTagWithEvents<TableHeaderElement<any>, TableHeaderEvents>
+
+    }
+    namespace JSX {
+        interface IntrinsicElements {
+            /**
+             * @see {@link DialogElement}
+             */
+            [TableHeaderElementTag]: ReactElementWithPropsAndEvents<TableHeaderElement<any>, HeaderProps<any>, TableHeaderEvents>;
+        }
+    }
+    namespace React {
+        namespace JSX {
+            interface IntrinsicElements {
+                /**
+                 * @see {@link DialogElement}
+                 */
+                [TableHeaderElementTag]: ReactElementWithPropsAndEvents<TableHeaderElement<any>, HeaderProps<any>, TableHeaderEvents>
+            }
+        }
+    }
+}

package/src/components/table/index.ts

@@ -0,0 +1 @@
+export * from "./table"