@spectric/ui 0.0.9 → 0.0.11

package/src/components/table/table.ts

@@ -9,84 +9,143 @@ 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 & {
     target: T
 }
 /**
- * Table Element
- * 
- * The table element is a bit more complex and the column settings and data can only be set through the properties
- * 
- * 
- * React
- * 
- * ``` tsx
- * <spectric-table data={[{col1:1}]} columns={[{key:"col1",}]} ></spectric-table>
- * ```
- * 
- * Javascript
- * 
- * ``` js
- * table = document.createElement("spectric-table")
- * table.data = [{col1:1}]
- * table.columns = [{key:"col1",}]
- * ```
- * 
- * HTML 
- * 
- * ``` html
- * <spectric-table id="table"></spectric-table>
- * <script>
- * document.querySelector("#table")
- * table.data = [{col1:1}]
- * table.columns = [{key:"col1",}]
- * </script>
- * ```
+ * 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 = () => {
@@ -94,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
     }
@@ -105,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>`
@@ -134,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}
         `;
@@ -156,7 +217,7 @@ declare global {
     namespace JSX {
         interface IntrinsicElements {
             /**
-             * @see {@link DialogElement}
+             * @see {@link TableElement}
              */
             [TableElementTag]: ReactElementWithPropsAndEvents<TableElement<any>, TableProps<any>, TableEvents>;
         }
@@ -165,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>
             }

package/src/stories/fixtures/ExampleContent.ts

@@ -1,5 +1,5 @@
 
-import { filterByColumn, tablecolumns, tabledata } from "./data";
+import { filterByColumn, tablecolumns, tabledata, TestData } from "./data";
 import { ExampleBits } from "./Bits";
 import { FieldTypes, SpectricQuery } from "../../components/query_bar/QueryBar";
 
@@ -7,8 +7,9 @@ import { html, LitElement } from 'lit';
 
 import { customElement, property, query, state } from 'lit/decorators.js';
 import "./lorumipsum"
-import { PaginationChangeProps } from "../../components/pagination";
+import { PaginationChangeProps, PaginationProps } from "../../components/pagination";
 import { FilterEvent } from "../../components/table/cell";
+import { TableDataOptions, TableElement } from "../../components/table";
 type Props = {
   frameWidth: number
 }
@@ -23,10 +24,15 @@ export class SpectricStorybookExampleContent extends LitElement implements Props
   @query("spectric-query")
   query!: SpectricQuery
 
+  private dataSorter = TableElement.getDefaultDataSorterAndPaginatior<TestData>(tabledata)
   @state()
   dialogOpen: boolean = false;
-  tableData = tabledata.slice(0, 3)
-  pagination = {
+  get tableData() {
+    return this.dataSorter(this)
+  }
+
+  columns = tablecolumns
+  pagination: PaginationProps = {
     page: 1,
     pageSize: 3,
     size: "xsmall",
@@ -35,17 +41,17 @@ export class SpectricStorybookExampleContent extends LitElement implements Props
   _handleFilter = (e: CustomEvent<FilterEvent<any>>) => {
     let include = e.detail.include ? "" : "not "
     if (e.detail.column.key && e.detail.value) {
-      if (this.query.value !== "") {
+      if (this.query.value.trim() !== "") {
         this.query.value = `${this.query.value} and ${include}${e.detail.column.key}: '${e.detail.value}'`
       } else {
         this.query.value = `${include}${e.detail.column.key}: '${e.detail.value}'`
       }
     }
   }
-  _handlePaginationChange = (e: CustomEvent<{ pagination: PaginationChangeProps }>) => {
-    let { pagination } = e.detail
+  _handlePaginationChange = (e: CustomEvent<TableDataOptions<TestData>>) => {
+    let { pagination, columns } = e.detail
     this.pagination = { ...this.pagination, ...pagination }
-    this.tableData = tabledata.slice((pagination.page - 1) * pagination.pageSize, (pagination.page) * pagination.pageSize)
+    this.columns = columns
     this.requestUpdate()
   }
   render() {
@@ -89,6 +95,7 @@ export class SpectricStorybookExampleContent extends LitElement implements Props
         
           </spectric-query>
           <spectric-table 
+          style="height:200px;"
           .data=${this.tableData} 
           .columns=${tablecolumns} 
           @filter=${this._handleFilter}

package/src/stories/fixtures/data.ts

@@ -33,19 +33,32 @@ export const filterByColumn = async (field, text) => {
   return values.filter(v => v.includes(text))
 }
 
-type TestData = {
+export type TestData = {
   name: string
   company: string
   contact: string
-  country: string
+  location: {
+    country: string,
+    state: string
+  },
+  years: number
 }
-
 export const tabledata: TestData[] = [
-  { name: "Sean", company: "Spectric Labs", "contact": "123-4567", "country": "US" },
-  { name: "Kipp", company: "Spectric Labs", "contact": "123-4567", "country": "UK" },
-  { name: "Adam", company: "Spectric Labs", "contact": "123-4567", "country": "US" },
-  { name: "Chris", company: "Spectric Labs", "contact": "123-4567", "country": "US" },
-  { name: "Michael", company: "Spectric Labs", "contact": "123-4567", "country": "US" },
-  { name: "Matt", company: "Spectric Labs", "contact": "123-4567", "country": "US" },
-  { name: "Grant", company: "Spectric Labs", "contact": "123-4567", "country": "UK" },]
-export const tablecolumns: ColumnSettings<TestData>[] = [{ "title": "Company", key: "company" }, { "title": "Name", key: "name" }, { "title": "Contact", key: "contact" }, { "title": "Country", key: "country", filterable: true }]
+  { name: "Sean", company: "Spectric Labs", "contact": "123-4567", location: { "country": "US", state: "VA" }, years: 11 },
+  { name: "Kipp", company: "Spectric Labs", "contact": "123-4567", location: { "country": "UK", state: "N/A" }, years: 5 },
+  { name: "Adam", company: "Spectric Labs", "contact": "123-4567", location: { "country": "US", state: "VA" }, years: 19 },
+  { name: "Chris", company: "Spectric Labs", "contact": "123-4567", location: { "country": "US", state: "VA" }, years: 27 },
+  { name: "Michael", company: "Spectric Labs", "contact": "123-4567", location: { "country": "US", state: "VA" }, years: 3 },
+  { name: "Matt", company: "Spectric Labs", "contact": "123-4567", location: { "country": "US", state: "VA" }, years: 9 },
+  { name: "Matt", company: "Spectric Labs", "contact": "865-6343", location: { "country": "UK", state: "VA" }, years: 5 },
+  { name: "Matt", company: "Spectric Labs", "contact": "253-6795", location: { "country": "UK", state: "VA" }, years: 15 },
+  { name: "Matt", company: "Spectric Labs (Intern)", "contact": "253-6795", location: { "country": "US", state: "CO" }, years: 1 },
+  { name: "Matt", company: "Spectric Labs", "contact": "912-1230", location: { "country": "UK", state: "VA" }, years: 24 },
+  { name: "Grant", company: "Spectric Labs", "contact": "123-4567", location: { "country": "US", state: "VA" }, years: 100 },]
+export const tablecolumns: ColumnSettings<TestData>[] = [
+  { "title": "Company", key: "company" },
+  { "title": "Name", key: "name", sortable: true },
+  { "title": "Contact", key: "contact" },
+  { "title": "Country", key: "location.country", filterable: true },
+  { "title": "Years Employed", key: "years", sortable: true }
+]

package/src/stories/table.stories.ts

@@ -1,21 +1,16 @@
 import type { Meta, StoryObj } from "@storybook/web-components";
 
-import { ColumnSettings, PaginationChangeProps, type TableProps as Props } from "../components/";
+import { ColumnSettings, PaginationChangeProps, TableElement, TableSelectOptions, TableSortDirection, TableSortOption, type TableProps as Props } from "../components/";
 import { html } from "lit";
 import '../components';
 import { ifDefined } from "lit/directives/if-defined.js";
 import { useArgs } from "@storybook/client-api";
-import { FilterEvent } from "../components/table/cell";
+import { FilterEvent, rowGetValue } from "../components/table/cell";
 import { tablecolumns, tabledata } from "./fixtures/data";
 // More on how to set up stories at: https://storybook.js.org/docs/writing-stories
-type TestData = {
-  name: string
-  company: string
-  contact: string
-  country: string
-}
-const data = tabledata
+const data = JSON.parse(JSON.stringify(tabledata))
 const columns = tablecolumns
+const getData = TableElement.getDefaultDataSorterAndPaginatior<typeof tabledata[0]>(data)
 const meta = {
   title: "UI/Table",
   tags: ["autodocs"],
@@ -25,22 +20,29 @@ const meta = {
 
     return html`
       <spectric-table
+        style="max-height: 150px;"
         .pagination=${args.pagination}
         .columns=${args.columns}
-        .data=${!args.pagination ? data : data.slice((args.pagination.page - 1) * args.pagination.pageSize, (args.pagination.page) * args.pagination.pageSize)}
+        .data=${getData(args)}
         select=${ifDefined(args.select)}
+        sort=${ifDefined(args.sort)}
         @filter=${(e: CustomEvent<FilterEvent<any>>) => {
         alert(`filter ${e.detail.include ? "for" : "out"} event value ${e.detail.value}`)
       }}
         @change=${(e: CustomEvent<PaginationChangeProps>) => {
         console.log(e)
         updateArgs({ ...e.detail });
+        if (e.target && e.target instanceof TableElement) {
+          e.target.data = getData({ ...args, ...e.detail })
+        }
       }}
       >
       </spectric-table>
     `;
   },
   argTypes: {
+    select: { control: { type: "select" }, options: Object.values(TableSelectOptions) },
+    sort: { control: { type: "select" }, options: Object.values(TableSortOption) }
   },
   args: {
     pagination: {
@@ -49,12 +51,13 @@ const meta = {
       size: "xsmall",
       totalItems: data.length,
     },
-    columns: columns
+    columns: columns,
+    select: TableSelectOptions.none
   },
-} satisfies Meta<Props<TestData>>;
+} satisfies Meta<Props<typeof tabledata[0]>>;
 
 export default meta;
-type Story = StoryObj<Props<TestData>>;
+type Story = StoryObj<Props<typeof tabledata[0]>>;
 
 // More on writing stories with args: https://storybook.js.org/docs/writing-stories/args
 export const Basic: Story = {
@@ -85,4 +88,15 @@ export const SingleSelect: Story = {
   args: {
     select: "single"
   },
+};
+
+
+/**
+ * The spectric table by default is set to single column sorting, but you can enable multicolumn sorting with the sort="multi" attribute
+ */
+export const MultiColumnSort: Story = {
+  args: {
+    sort: "multi",
+    pagination: { pageSize: 20, page: 1 }
+  },
 };

package/src/utils/once.ts

@@ -0,0 +1,12 @@
+export function once(func: Function) {
+    let hasBeenCalled = false;
+    let result: any;
+    return function (...args: any[]) {
+        if (!hasBeenCalled) {
+            hasBeenCalled = true;
+            //@ts-ignore
+            result = func.apply(this, args);
+        }
+        return result;
+    };
+}

package/src/utils/spread.ts

@@ -7,7 +7,7 @@ import { AsyncDirective, directive } 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`
@@ -44,10 +44,10 @@ export class SpreadPropsDirective extends AsyncDirective {
 
     apply(data: any) {
         if (!data) return;
-        const { prevData, element } = this;
+        const { element } = this;
         for (const key in data) {
             const value = data[key];
-            if (value === prevData[key]) {
+            if ((element as any)[key] === value) {
                 continue;
             }
             // @ts-ignore