@spectric/ui 0.0.7 → 0.0.9

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[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%)}

package/package.json

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

package/src/components/Button.ts

@@ -4,18 +4,24 @@ import { styleMap } from 'lit/directives/style-map.js';
 import style from './button.css';
 import { customElement, property } from 'lit/decorators.js';
 import { HTMLElementTagWithEvents, ReactElementWithPropsAndEvents } from './types';
+import { DomRenderable } from './table';
+import { TooltipPostionsTypes } from './tooltip';
 
 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 +34,9 @@ export interface ButtonProps {
   /* should the button be disabled*/
   disabled: boolean;
   danger?: boolean;
+  icon?: boolean
+  tooltip?: DomRenderable
+  tooltipPosition?: TooltipPostionsTypes
 }
 const MODES = {
   "primary": 'spectric-button--primary',
@@ -46,14 +55,20 @@ 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;
+  @property({ type: String, reflect: true })
+  tooltip?: DomRenderable;
+  @property({ type: String, reflect: true })
+  tooltipPosition?: TooltipPostionsTypes = "right";
   connectedCallback(): void {
     super.connectedCallback()
-    this.addEventListener("click", this._onClick)
+    this.addEventListener("click", this._onClick, { capture: true })
   }
   disconnectedCallback(): void {
     super.disconnectedCallback()
@@ -66,6 +81,9 @@ export class SpectricButton extends LitElement implements ButtonProps {
     e.preventDefault()
     e.stopImmediatePropagation()
     e.stopPropagation()
+    if (this.disabled) {
+      return
+    }
     const options: CustomEventInit = {
       bubbles: true,
       composed: true,
@@ -77,6 +95,7 @@ export class SpectricButton extends LitElement implements ButtonProps {
   protected render(): unknown {
     const mode = MODES[this.variant] || 'spectric-button--primary';
     return html`
+    ${this.tooltip ? html`<spectric-tooltip .text=${this.tooltip} .position=${this.tooltipPosition || "right"} .triggerTarget=${this}></spectric-tooltip>` : null}
       <button
         type="button"
         ?disabled=${this.disabled}

package/src/components/button.css.ts

@@ -22,9 +22,15 @@ export default css`
     --button-primary-hover: var(--spectric-button-primary-hover, #0050e6);
     --button-secondary-hover: var(--spectric-button-secondary-hover, #474747);
     --button-tertiary-hover: var(--spectric-button-tertiary-hover, #0050e6);
-    --button-disabled: var(--spectric-button-disabled, #c6c6c6);
+    --button-disabled: var(--spectric-button-disabled, #cfcbcb4d);
+}
+:host([disabled]) { 
+  cursor: not-allowed;
+}
+
+:host([disabled]) .animation{ 
+  visibility:hidden;
 }
-:host([disabled]) { pointer-events: none }
 
 .spectric-button {
   pointer-events:none;
@@ -78,6 +84,59 @@ export default css`
     box-shadow: 0 0 30px white inset;
 }
 
+:host([icon]) .spectric-button {
+    padding: unset;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    -webkit-user-select: none; /* For Safari */
+    -moz-user-select: none;    /* For Firefox */
+    -ms-user-select: none;     /* For IE 10+ */
+    user-select: none;         /* Standard syntax */
+}
+
+
+
+/* :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;
@@ -85,6 +144,11 @@ export default css`
   /* background-color:var(--button-disabled); */
   color:var(--text-on-color-disabled);
 }
+.spectric-button.spectric-button--primary:disabled{
+
+  background-color:var(--button-disabled);
+
+}
 .spectric-button:disabled .animation , :host(:disabled:hover) .animation{
 background-color: rgba(0, 0, 0, 0);
 opacity:1
@@ -145,6 +209,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,7 @@ 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"
+export * from "./tooltip"

package/src/components/input.css

@@ -68,8 +68,13 @@ spectric-input #helper-text {
     height: 18px;
 }
 
-spectric-input spectric-button {
+spectric-input[variant="password"] spectric-button {
     position: absolute;
     right: 4px;
     bottom: 3px;
+}
+
+spectric-input .checkbox{
+    display: flex;
+    justify-self: center;
 }

package/src/components/input.ts

@@ -3,6 +3,7 @@ import "./input.css"
 import { customElement, property, query } from 'lit/decorators.js';
 import { ifDefined } from 'lit/directives/if-defined.js';
 import { ReactElementWithPropsAndEvents } from './types';
+import { ButtonSizesTypes } from './Button';
 
 export enum InputVariants {
   Text = 'text',
@@ -16,6 +17,7 @@ export enum InputVariants {
   file = "file",//display drop area
   hidden = "hidden",//display drop area
   password = "password",
+  checkbox = "checkbox"
 
 }
 type InputVariantsTypes = `${InputVariants}`
@@ -73,6 +75,9 @@ export interface InputProps {
 }
 @customElement('spectric-input')
 export class SpectricInput extends LitElement implements InputProps {
+  @property({ type: Boolean, reflect: true })
+  checked?: boolean;
+  size?: ButtonSizesTypes;
   //static styles?: CSSResultGroup | undefined = style;
   protected createRenderRoot(): HTMLElement | DocumentFragment {
     return this
@@ -155,7 +160,7 @@ export class SpectricInput extends LitElement implements InputProps {
   @property({ reflect: true })
   autocomplete: HTMLInputElement['autocomplete'] = "";
   get selectionStart() {
-    if(!this._input){
+    if (!this._input) {
       return null
     }
     return this._input.selectionStart
@@ -187,20 +192,20 @@ export class SpectricInput extends LitElement implements InputProps {
     }
   }
   blur(): void {
-    if(this._input){
+    if (this._input) {
       this._input.blur()
     }
   }
   focus(options?: FocusOptions): void {
-    if(this._input){
+    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 
+    if (!this._input) {
+      return
     }
     this._input.setSelectionRange(start, end, direction)
   }
@@ -290,6 +295,22 @@ export class SpectricInput extends LitElement implements InputProps {
 
       case InputVariants.hidden:
         return html`<input type="hidden"></input>`
+
+      case InputVariants.checkbox:
+
+        return html`
+        <div class="checkbox">
+        <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}
+          ${this.label}
+        </div>
+        </label>
+        `
       default:
         break;
     }

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 = "xsmall"
+    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} icon><</spectric-button>
+                    <spectric-button size=${this.size} ?disabled=${nextPageDisabled} @click=${this._handlePageUp} icon>></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/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[]
+}
+
+
+/**
+ * Table Body 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} .columns=${this.columns}></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,133 @@
+import { html, LitElement, PropertyValues } from 'lit';
+import { customElement, property, query, } 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>;
+    columns!: ColumnSettings<T>[];
+    table!: TableElement<T>
+    styleRules: CSSStyleDeclaration;
+    @query("td")
+    td!: HTMLTableCellElement
+    constructor() {
+        super()
+        this.styleRules = document.createElement('span').style;
+    }
+    protected updated(_changedProperties: PropertyValues): void {
+        Object.assign(this.td.style, this.styleRules)
+    }
+    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 tooltip="Filter Out Value">-</spectric-button>
+            <spectric-button @click=${this._handleFilterFor} size="tiny" variant="text" icon tooltip="Filter For Value">+</spectric-button></div>`
+        this.styleRules = {
+            ...this.styleRules,
+            width: this.column.width ? this.column.width + "px" : "",
+            whiteSpace: this.column.whiteSpace || ""
+        }
+        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>
+            }
+        }
+    }
+}