@pathscale/ui 0.0.89 → 0.0.90

package/dist/components/table/EnhancedTable.d.ts

@@ -1,4 +1,4 @@
-import { type JSX, type Accessor } from "solid-js";
+import { type Accessor, type JSX } from "solid-js";
 import { type ColumnDef, type SortingState, type ColumnFiltersState, type PaginationState, type OnChangeFn } from "@tanstack/solid-table";
 import { type TableProps } from "./Table";
 export type EnhancedTableProps<TData> = Omit<TableProps, "children"> & {
@@ -10,6 +10,8 @@ export type EnhancedTableProps<TData> = Omit<TableProps, "children"> & {
     setColumnFilters?: OnChangeFn<ColumnFiltersState>;
     pagination?: Accessor<PaginationState>;
     setPagination?: OnChangeFn<PaginationState>;
+    globalFilter?: Accessor<string>;
+    setGlobalFilter?: OnChangeFn<string>;
     enableSorting?: boolean;
     enableFilters?: boolean;
     enablePagination?: boolean;
@@ -17,6 +19,8 @@ export type EnhancedTableProps<TData> = Omit<TableProps, "children"> & {
         row: any;
     }) => JSX.Element;
     renderEmpty?: () => JSX.Element;
+    loading?: boolean;
+    renderLoading?: () => JSX.Element;
 };
 declare function EnhancedTable<TData>(props: EnhancedTableProps<TData>): JSX.Element;
 export default EnhancedTable;

package/dist/components/table/Table.d.ts

@@ -1,6 +1,5 @@
 import { type Component, type JSX } from "solid-js";
 import type { IComponentBaseProps, ComponentSize } from "../types";
-import EnhancedTable from "./EnhancedTable";
 export type TableProps = JSX.HTMLAttributes<HTMLTableElement> & IComponentBaseProps & {
     size?: ComponentSize;
     zebra?: boolean;
@@ -15,6 +14,5 @@ declare const _default: Component<TableProps> & {
     Footer: Component<import("./TableFooter").TableFooterProps>;
     Cell: Component<import("./TableCell").TableCellProps>;
     HeadCell: Component<import("./TableHeadCell").TableHeadCellProps>;
-    Enhanced: typeof EnhancedTable;
 };
 export default _default;

package/dist/components/table/index.d.ts

@@ -1,3 +1,4 @@
 export { default } from "./Table";
 export type { TableProps } from "./Table";
+export { default as EnhancedTable } from "./EnhancedTable";
 export type { EnhancedTableProps } from "./EnhancedTable";

package/dist/index.d.ts

@@ -72,7 +72,7 @@ export type { StatusProps } from "./components/status";
 export { default as Steps } from "./components/steps";
 export { SvgBackground, type SvgBackgroundProps, } from "./components/svgbackground";
 export { default as Swap } from "./components/swap";
-export { default as Table } from "./components/table";
+export { default as Table, EnhancedTable } from "./components/table";
 export type { TableProps } from "./components/table";
 export type { EnhancedTableProps } from "./components/table/EnhancedTable";
 export { default as Tabs } from "./components/tabs";

package/dist/index.js

@@ -4997,11 +4997,11 @@ const Re = Ht("host", {
     } : t.key = n, Ht(e, t)), I = p, Wt = H`*,*:before,*:after{box-sizing:border-box}button{padding:0;touch-action:manipulation;cursor:pointer;user-select:none}`, Jt = H`.vh{position:absolute;transform:scale(0)}`;
 function lt() {
     const e = /* @__PURE__ */ new Date();
-    return new v(e.getFullYear(), e.getMonth() + 1, e.getDate());
+    return new cally_v(e.getFullYear(), e.getMonth() + 1, e.getDate());
 }
 function ut(e, t = 0) {
     const n = w(e), s = n.getUTCDay(), r = (s < t ? 7 : 0) + s - t;
-    return n.setUTCDate(n.getUTCDate() - r), v.from(n);
+    return n.setUTCDate(n.getUTCDate() - r), cally_v.from(n);
 }
 function Zt(e, t = 0) {
     return ut(e, t).add({
@@ -5009,10 +5009,10 @@ function Zt(e, t = 0) {
     });
 }
 function Xt(e) {
-    return v.from(new Date(Date.UTC(e.year, e.month, 0)));
+    return cally_v.from(new Date(Date.UTC(e.year, e.month, 0)));
 }
 function K(e, t, n) {
-    return t && v.compare(e, t) < 0 ? t : n && v.compare(e, n) > 0 ? n : e;
+    return t && cally_v.compare(e, t) < 0 ? t : n && cally_v.compare(e, n) > 0 ? n : e;
 }
 const _e = {
     days: 1
@@ -5020,7 +5020,7 @@ const _e = {
 function je(e, t = 0) {
     let n = ut(e.toPlainDate(), t);
     const s = Zt(Xt(e), t), r = [];
-    for(; v.compare(n, s) < 0;){
+    for(; cally_v.compare(n, s) < 0;){
         const o = [];
         for(let a = 0; a < 7; a++)o.push(n), n = n.add(_e);
         r.push(o);
@@ -5031,21 +5031,21 @@ function w(e) {
     return new Date(Date.UTC(e.year, e.month - 1, e.day ?? 1));
 }
 const Ye = /^(\d{4})-(0[1-9]|1[0-2])-(0[1-9]|[12][0-9]|3[0-1])$/, Q = (e, t)=>e.toString().padStart(t, "0");
-class v {
+class cally_v {
     constructor(t, n, s){
         this.year = t, this.month = n, this.day = s;
     }
     add(t) {
         const n = w(this);
-        if ("days" in t) return n.setUTCDate(this.day + t.days), v.from(n);
+        if ("days" in t) return n.setUTCDate(this.day + t.days), cally_v.from(n);
         let { year: s, month: r } = this;
         "months" in t ? (r = this.month + t.months, n.setUTCMonth(r - 1)) : (s = this.year + t.years, n.setUTCFullYear(s));
-        const o = v.from(w({
+        const o = cally_v.from(w({
             year: s,
             month: r,
             day: 1
         }));
-        return K(v.from(n), o, Xt(o));
+        return K(cally_v.from(n), o, Xt(o));
     }
     toString() {
         return `${Q(this.year, 4)}-${Q(this.month, 2)}-${Q(this.day, 2)}`;
@@ -5054,7 +5054,7 @@ class v {
         return new W(this.year, this.month);
     }
     equals(t) {
-        return 0 === v.compare(this, t);
+        return 0 === cally_v.compare(this, t);
     }
     static compare(t, n) {
         return t.year < n.year ? -1 : t.year > n.year ? 1 : t.month < n.month ? -1 : t.month > n.month ? 1 : t.day < n.day ? -1 : t.day > n.day ? 1 : 0;
@@ -5064,9 +5064,9 @@ class v {
             const n = t.match(Ye);
             if (!n) throw new TypeError(t);
             const [, s, r, o] = n;
-            return new v(parseInt(s, 10), parseInt(r, 10), parseInt(o, 10));
+            return new cally_v(parseInt(s, 10), parseInt(r, 10), parseInt(o, 10));
         }
-        return new v(t.getUTCFullYear(), t.getUTCMonth() + 1, t.getUTCDate());
+        return new cally_v(t.getUTCFullYear(), t.getUTCMonth() + 1, t.getUTCDate());
     }
 }
 class W {
@@ -5081,7 +5081,7 @@ class W {
         return this.year === t.year && this.month === t.month;
     }
     toPlainDate() {
-        return new v(this.year, this.month, 1);
+        return new cally_v(this.year, this.month, 1);
     }
 }
 function z(e, t) {
@@ -5092,7 +5092,7 @@ function z(e, t) {
 function N(e) {
     const [t, n] = it(e);
     return [
-        C(()=>z(v, t), [
+        C(()=>z(cally_v, t), [
             t
         ]),
         (o)=>n(o?.toString())
@@ -5102,7 +5102,7 @@ function Be(e) {
     const [t = "", n] = it(e);
     return [
         C(()=>{
-            const [o, a] = t.split("/"), u = z(v, o), i = z(v, a);
+            const [o, a] = t.split("/"), u = z(cally_v, o), i = z(cally_v, a);
             return u && i ? [
                 u,
                 i
@@ -5119,7 +5119,7 @@ function qe(e) {
         C(()=>{
             const o = [];
             for (const a of t.trim().split(/\s+/)){
-                const u = z(v, a);
+                const u = z(cally_v, a);
                 u && o.push(u);
             }
             return o;
@@ -5569,7 +5569,7 @@ const Qe = cally_j((e)=>{
     styles: mt
 });
 customElements.define("calendar-date", Qe);
-const Mt = (e, t)=>v.compare(e, t) < 0 ? [
+const Mt = (e, t)=>cally_v.compare(e, t) < 0 ? [
         e,
         t
     ] : [
@@ -11048,7 +11048,7 @@ function Swap(props) {
 (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.delegateEvents)([
     "click"
 ]);
-var TableHead_tmpl$ = /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.template)("<thead><tr>");
+var TableHead_tmpl$ = /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.template)("<thead>"), TableHead_tmpl$2 = /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.template)("<tr>");
 const TableHead_TableHead = (props)=>{
     const [local, rest] = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.splitProps)(props, [
         "children",
@@ -11060,7 +11060,7 @@ const TableHead_TableHead = (props)=>{
     const classes = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.createMemo)(()=>twMerge(dist_clsx(local.class, local.className)));
     const resolved = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.children)(()=>local.children);
     return (()=>{
-        var _el$ = TableHead_tmpl$(), _el$2 = _el$.firstChild;
+        var _el$ = TableHead_tmpl$();
         (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.spread)(_el$, (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.mergeProps)({
             get ["class"] () {
                 return classes();
@@ -11069,7 +11069,21 @@ const TableHead_TableHead = (props)=>{
                 return local.dataTheme;
             }
         }, rest), false, true);
-        (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.insert)(_el$2, resolved);
+        (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.insert)(_el$, (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.createComponent)(__WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.Show, {
+            get when () {
+                return local.noCell;
+            },
+            get fallback () {
+                return (()=>{
+                    var _el$2 = TableHead_tmpl$2();
+                    (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.insert)(_el$2, resolved);
+                    return _el$2;
+                })();
+            },
+            get children () {
+                return resolved();
+            }
+        }));
         return _el$;
     })();
 };
@@ -11231,7 +11245,52 @@ const TableFooter = (props)=>{
     })();
 };
 const table_TableFooter = TableFooter;
-var EnhancedTable_tmpl$ = /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.template)('<div class="flex items-center gap-2">'), EnhancedTable_tmpl$2 = /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.template)(`<span>\u{2191}`), EnhancedTable_tmpl$3 = /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.template)(`<span>\u{2193}`);
+var Table_tmpl$ = /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.template)("<table>");
+const Table = (props)=>{
+    const [local, rest] = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.splitProps)(props, [
+        "children",
+        "size",
+        "zebra",
+        "pinRows",
+        "pinCols",
+        "hover",
+        "dataTheme",
+        "class"
+    ]);
+    const classes = ()=>twMerge("table", local.class, dist_clsx({
+            "table-zebra": local.zebra,
+            "table-hover": local.hover,
+            "table-xl": "xl" === local.size,
+            "table-lg": "lg" === local.size,
+            "table-md": "md" === local.size,
+            "table-sm": "sm" === local.size,
+            "table-xs": "xs" === local.size,
+            "table-pin-rows": local.pinRows,
+            "table-pin-cols": local.pinCols
+        }));
+    return (()=>{
+        var _el$ = Table_tmpl$();
+        (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.spread)(_el$, (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.mergeProps)({
+            get ["data-theme"] () {
+                return local.dataTheme;
+            },
+            get ["class"] () {
+                return classes();
+            }
+        }, rest), false, true);
+        (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.insert)(_el$, ()=>local.children);
+        return _el$;
+    })();
+};
+const table_Table = Object.assign(Table, {
+    Head: TableHead,
+    Body: table_TableBody,
+    Row: table_TableRow,
+    Footer: table_TableFooter,
+    Cell: TableCell,
+    HeadCell: table_TableHeadCell
+});
+var EnhancedTable_tmpl$ = /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.template)('<caption class="mb-3 text-left"><div class="flex items-center gap-2"><div class=join>'), EnhancedTable_tmpl$2 = /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.template)("<tr>"), EnhancedTable_tmpl$3 = /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.template)("<option value=10>10"), EnhancedTable_tmpl$4 = /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.template)("<option value=25>25"), EnhancedTable_tmpl$5 = /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.template)("<option value=50>50"), EnhancedTable_tmpl$6 = /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.template)("<option value=100>100"), EnhancedTable_tmpl$7 = /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.template)('<div class="flex items-center justify-between w-full"><div class="flex items-center gap-2"><span class=opacity-70>Rows per page</span></div><div class="flex items-center gap-3"><span class=opacity-70>Page <!> of </span><div class=join>'), EnhancedTable_tmpl$8 = /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.template)('<div class="flex items-center gap-2">'), EnhancedTable_tmpl$9 = /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.template)(`<span>\u{2191}`), EnhancedTable_tmpl$0 = /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.template)(`<span>\u{2193}`), EnhancedTable_tmpl$1 = /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.template)('<div class="flex gap-1">'), EnhancedTable_tmpl$10 = /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.template)("<option value>All"), _tmpl$11 = /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.template)("<option>");
 function EnhancedTable_EnhancedTable(props) {
     const [local, tableProps] = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.splitProps)(props, [
         "data",
@@ -11242,11 +11301,15 @@ function EnhancedTable_EnhancedTable(props) {
         "setColumnFilters",
         "pagination",
         "setPagination",
+        "globalFilter",
+        "setGlobalFilter",
         "enableSorting",
         "enableFilters",
         "enablePagination",
         "renderRowSubComponent",
-        "renderEmpty"
+        "renderEmpty",
+        "loading",
+        "renderLoading"
     ]);
     const table = (0, __WEBPACK_EXTERNAL_MODULE__tanstack_solid_table_1239d047__.createSolidTable)({
         get data () {
@@ -11267,11 +11330,15 @@ function EnhancedTable_EnhancedTable(props) {
                     pageIndex: 0,
                     pageSize: 10
                 };
+            },
+            get globalFilter () {
+                return local.globalFilter?.() || "";
             }
         },
         onSortingChange: local.setSorting,
         onColumnFiltersChange: local.setColumnFilters,
         onPaginationChange: local.setPagination,
+        onGlobalFilterChange: local.setGlobalFilter,
         getCoreRowModel: (0, __WEBPACK_EXTERNAL_MODULE__tanstack_solid_table_1239d047__.getCoreRowModel)(),
         getSortedRowModel: (0, __WEBPACK_EXTERNAL_MODULE__tanstack_solid_table_1239d047__.getSortedRowModel)(),
         getFilteredRowModel: (0, __WEBPACK_EXTERNAL_MODULE__tanstack_solid_table_1239d047__.getFilteredRowModel)(),
@@ -11281,51 +11348,122 @@ function EnhancedTable_EnhancedTable(props) {
         manualPagination: !local.enablePagination
     });
     const tableRows = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.createMemo)(()=>{
+        if (local.loading) return [];
         const rows = table.getRowModel().rows;
         if (0 === rows.length && local.renderEmpty) return [];
         return rows;
     });
+    const headerGroups = ()=>table.getHeaderGroups();
+    const leafHeaders = ()=>headerGroups().length > 0 ? headerGroups()[headerGroups().length - 1].headers : [];
     return (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.createComponent)(table_Table, (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.mergeProps)(tableProps, {
         get children () {
             return [
+                (()=>{
+                    var _el$ = EnhancedTable_tmpl$(), _el$2 = _el$.firstChild, _el$3 = _el$2.firstChild;
+                    (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.insert)(_el$3, (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.createComponent)(input_Input, {
+                        size: "sm",
+                        placeholder: "Search\u2026",
+                        get value () {
+                            return table.getState().globalFilter ?? "";
+                        },
+                        onInput: (e)=>{
+                            const val = e.currentTarget.value;
+                            clearTimeout(window.__t);
+                            window.__t = setTimeout(()=>table.setGlobalFilter(val), 300);
+                        }
+                    }), null);
+                    (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.insert)(_el$3, (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.createComponent)(button_Button, {
+                        size: "sm",
+                        color: "neutral",
+                        onClick: ()=>table.setGlobalFilter(""),
+                        children: "Clear"
+                    }), null);
+                    return _el$;
+                })(),
                 (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.createComponent)(table_Table.Head, {
+                    noCell: true,
                     get children () {
-                        return (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.createComponent)(__WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.For, {
-                            get each () {
-                                return table.getHeaderGroups();
-                            },
-                            children: (headerGroup)=>(0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.createComponent)(__WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.For, {
-                                    get each () {
-                                        return headerGroup.headers;
-                                    },
-                                    children: (header)=>(0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.createComponent)(table_Table.HeadCell, {
-                                            get ["class"] () {
-                                                return header.column.getCanSort() ? "cursor-pointer select-none" : "";
-                                            },
-                                            get onClick () {
-                                                return (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.memo)(()=>!!header.column.getCanSort())() ? header.column.getToggleSortingHandler() : void 0;
+                        return [
+                            (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.createComponent)(__WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.For, {
+                                get each () {
+                                    return headerGroups();
+                                },
+                                children: (hg)=>(()=>{
+                                        var _el$17 = EnhancedTable_tmpl$2();
+                                        (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.insert)(_el$17, (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.createComponent)(__WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.For, {
+                                            get each () {
+                                                return hg.headers;
                                             },
-                                            get children () {
-                                                var _el$ = EnhancedTable_tmpl$();
-                                                (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.insert)(_el$, ()=>(0, __WEBPACK_EXTERNAL_MODULE__tanstack_solid_table_1239d047__.flexRender)(header.column.columnDef.header, header.getContext()), null);
-                                                (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.insert)(_el$, (()=>{
-                                                    var _c$ = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.memo)(()=>"asc" === header.column.getIsSorted());
-                                                    return ()=>_c$() && EnhancedTable_tmpl$2();
-                                                })(), null);
-                                                (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.insert)(_el$, (()=>{
-                                                    var _c$2 = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.memo)(()=>"desc" === header.column.getIsSorted());
-                                                    return ()=>_c$2() && EnhancedTable_tmpl$3();
-                                                })(), null);
-                                                return _el$;
-                                            }
-                                        })
-                                })
-                        });
+                                            children: (header)=>(0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.createComponent)(table_Table.HeadCell, {
+                                                    get ["class"] () {
+                                                        return header.column.getCanSort() ? "cursor-pointer select-none" : "";
+                                                    },
+                                                    get onClick () {
+                                                        return (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.memo)(()=>!!header.column.getCanSort())() ? header.column.getToggleSortingHandler() : void 0;
+                                                    },
+                                                    get children () {
+                                                        var _el$18 = EnhancedTable_tmpl$8();
+                                                        (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.insert)(_el$18, ()=>(0, __WEBPACK_EXTERNAL_MODULE__tanstack_solid_table_1239d047__.flexRender)(header.column.columnDef.header, header.getContext()), null);
+                                                        (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.insert)(_el$18, (()=>{
+                                                            var _c$ = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.memo)(()=>"asc" === header.column.getIsSorted());
+                                                            return ()=>_c$() && EnhancedTable_tmpl$9();
+                                                        })(), null);
+                                                        (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.insert)(_el$18, (()=>{
+                                                            var _c$2 = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.memo)(()=>"desc" === header.column.getIsSorted());
+                                                            return ()=>_c$2() && EnhancedTable_tmpl$0();
+                                                        })(), null);
+                                                        return _el$18;
+                                                    }
+                                                })
+                                        }));
+                                        return _el$17;
+                                    })()
+                            }),
+                            (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.createComponent)(__WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.Show, {
+                                get when () {
+                                    return local.enableFilters;
+                                },
+                                get children () {
+                                    var _el$4 = EnhancedTable_tmpl$2();
+                                    (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.insert)(_el$4, (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.createComponent)(__WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.For, {
+                                        get each () {
+                                            return leafHeaders();
+                                        },
+                                        children: (header)=>(0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.createComponent)(table_Table.HeadCell, {
+                                                get children () {
+                                                    return (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.memo)(()=>!!(header.isPlaceholder || !header.column.getCanFilter()))() ? null : (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.createComponent)(ColumnFilter, {
+                                                        get column () {
+                                                            return header.column;
+                                                        }
+                                                    });
+                                                }
+                                            })
+                                    }));
+                                    return _el$4;
+                                }
+                            })
+                        ];
                     }
                 }),
                 (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.createComponent)(table_Table.Body, {
                     get children () {
-                        return (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.memo)(()=>!!(0 === tableRows().length && local.renderEmpty))() ? (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.createComponent)(table_Table.Row, {
+                        return (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.memo)(()=>!!local.loading)() ? (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.createComponent)(table_Table.Row, {
+                            get children () {
+                                return (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.createComponent)(table_Table.Cell, {
+                                    get colSpan () {
+                                        return table.getAllColumns().length;
+                                    },
+                                    class: "text-center py-6",
+                                    get children () {
+                                        return (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.memo)(()=>!!local.renderLoading)() ? local.renderLoading() : (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.createComponent)(loading_Loading, {
+                                            variant: "spinner",
+                                            size: "lg",
+                                            color: "primary"
+                                        });
+                                    }
+                                });
+                            }
+                        }) : (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.memo)(()=>!!(0 === tableRows().length && local.renderEmpty))() ? (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.createComponent)(table_Table.Row, {
                             get children () {
                                 return (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.createComponent)(table_Table.Cell, {
                                     get colSpan () {
@@ -11341,93 +11479,157 @@ function EnhancedTable_EnhancedTable(props) {
                             get each () {
                                 return tableRows();
                             },
-                            children: (row)=>[
-                                    (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.createComponent)(table_Table.Row, {
-                                        get ["class"] () {
-                                            return row.getIsExpanded() ? "bg-base-200" : "";
-                                        },
-                                        get children () {
-                                            return (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.createComponent)(__WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.For, {
-                                                get each () {
-                                                    return row.getVisibleCells();
-                                                },
-                                                children: (cell)=>(0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.createComponent)(table_Table.Cell, {
-                                                        get children () {
-                                                            return (0, __WEBPACK_EXTERNAL_MODULE__tanstack_solid_table_1239d047__.flexRender)(cell.column.columnDef.cell, cell.getContext());
-                                                        }
-                                                    })
-                                            });
-                                        }
-                                    }),
-                                    (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.memo)(()=>(0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.memo)(()=>!!(row.getIsExpanded() && local.renderRowSubComponent))() && (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.createComponent)(table_Table.Row, {
-                                            get children () {
-                                                return (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.createComponent)(table_Table.Cell, {
-                                                    get colSpan () {
-                                                        return row.getVisibleCells().length;
-                                                    },
+                            children: (row)=>(0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.createComponent)(table_Table.Row, {
+                                    get children () {
+                                        return (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.createComponent)(__WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.For, {
+                                            get each () {
+                                                return row.getVisibleCells();
+                                            },
+                                            children: (cell)=>(0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.createComponent)(table_Table.Cell, {
                                                     get children () {
-                                                        return local.renderRowSubComponent({
-                                                            row
-                                                        });
+                                                        return (0, __WEBPACK_EXTERNAL_MODULE__tanstack_solid_table_1239d047__.flexRender)(cell.column.columnDef.cell, cell.getContext());
                                                     }
-                                                });
-                                            }
-                                        }))
-                                ]
+                                                })
+                                        });
+                                    }
+                                })
                         });
                     }
+                }),
+                (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.createComponent)(table_Table.Footer, {
+                    noCell: true,
+                    get children () {
+                        var _el$5 = EnhancedTable_tmpl$7(), _el$6 = _el$5.firstChild, _el$10 = (_el$6.firstChild, _el$6.nextSibling), _el$11 = _el$10.firstChild, _el$12 = _el$11.firstChild, _el$15 = _el$12.nextSibling, _el$16 = (_el$15.nextSibling, _el$11.nextSibling);
+                        (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.insert)(_el$6, (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.createComponent)(select_Select, {
+                            size: "sm",
+                            get value () {
+                                return String(table.getState().pagination.pageSize);
+                            },
+                            onChange: (e)=>table.setPageSize(Number(e.currentTarget.value)),
+                            get children () {
+                                return [
+                                    EnhancedTable_tmpl$3(),
+                                    EnhancedTable_tmpl$4(),
+                                    EnhancedTable_tmpl$5(),
+                                    EnhancedTable_tmpl$6()
+                                ];
+                            }
+                        }), null);
+                        (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.insert)(_el$11, ()=>table.getState().pagination.pageIndex + 1, _el$15);
+                        (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.insert)(_el$11, ()=>table.getPageCount() || 1, null);
+                        (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.insert)(_el$16, (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.createComponent)(button_Button, {
+                            size: "sm",
+                            get disabled () {
+                                return !table.getCanPreviousPage();
+                            },
+                            onClick: ()=>table.setPageIndex(0),
+                            children: "|\u27EA"
+                        }), null);
+                        (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.insert)(_el$16, (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.createComponent)(button_Button, {
+                            size: "sm",
+                            get disabled () {
+                                return !table.getCanPreviousPage();
+                            },
+                            onClick: ()=>table.previousPage(),
+                            children: "Prev"
+                        }), null);
+                        (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.insert)(_el$16, (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.createComponent)(button_Button, {
+                            size: "sm",
+                            get disabled () {
+                                return !table.getCanNextPage();
+                            },
+                            onClick: ()=>table.nextPage(),
+                            children: "Next"
+                        }), null);
+                        (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.insert)(_el$16, (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.createComponent)(button_Button, {
+                            size: "sm",
+                            get disabled () {
+                                return !table.getCanNextPage();
+                            },
+                            onClick: ()=>table.setPageIndex(table.getPageCount() - 1),
+                            children: "\u27EB|"
+                        }), null);
+                        return _el$5;
+                    }
                 })
             ];
         }
     }));
 }
-const EnhancedTable = EnhancedTable_EnhancedTable;
-var Table_tmpl$ = /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.template)("<table>");
-const Table = (props)=>{
-    const [local, rest] = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.splitProps)(props, [
-        "children",
-        "size",
-        "zebra",
-        "pinRows",
-        "pinCols",
-        "hover",
-        "dataTheme",
-        "class"
-    ]);
-    const classes = ()=>twMerge("table", local.class, dist_clsx({
-            "table-zebra": local.zebra,
-            "table-hover": local.hover,
-            "table-xl": "xl" === local.size,
-            "table-lg": "lg" === local.size,
-            "table-md": "md" === local.size,
-            "table-sm": "sm" === local.size,
-            "table-xs": "xs" === local.size,
-            "table-pin-rows": local.pinRows,
-            "table-pin-cols": local.pinCols
-        }));
-    return (()=>{
-        var _el$ = Table_tmpl$();
-        (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.spread)(_el$, (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.mergeProps)({
-            get ["data-theme"] () {
-                return local.dataTheme;
+function ColumnFilter(props) {
+    const col = props.column;
+    const value = ()=>col.getFilterValue();
+    const type = col.columnDef.meta?.filterType ?? "text";
+    if ("text" === type) return (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.createComponent)(input_Input, {
+        size: "xs",
+        placeholder: "Filter\u2026",
+        get value () {
+            return value() ?? "";
+        },
+        onInput: (e)=>col.setFilterValue(e.currentTarget.value || void 0)
+    });
+    if ("numberRange" === type) {
+        const v = value() ?? [
+            void 0,
+            void 0
+        ];
+        const setRange = (min, max)=>{
+            if (!min && !max) return col.setFilterValue(void 0);
+            col.setFilterValue([
+                min || void 0,
+                max || void 0
+            ]);
+        };
+        return (()=>{
+            var _el$21 = EnhancedTable_tmpl$1();
+            (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.insert)(_el$21, (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.createComponent)(input_Input, {
+                size: "xs",
+                type: "number",
+                placeholder: "Min",
+                get value () {
+                    return v[0] ?? "";
+                },
+                onInput: (e)=>setRange(e.currentTarget.value, v[1])
+            }), null);
+            (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.insert)(_el$21, (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.createComponent)(input_Input, {
+                size: "xs",
+                type: "number",
+                placeholder: "Max",
+                get value () {
+                    return v[1] ?? "";
+                },
+                onInput: (e)=>setRange(v[0], e.currentTarget.value)
+            }), null);
+            return _el$21;
+        })();
+    }
+    if ("select" === type) {
+        const options = col.columnDef.meta?.options ?? [];
+        return (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.createComponent)(select_Select, {
+            size: "xs",
+            get value () {
+                return value() ?? "";
             },
-            get ["class"] () {
-                return classes();
+            onChange: (e)=>col.setFilterValue(e.currentTarget.value || void 0),
+            get children () {
+                return [
+                    EnhancedTable_tmpl$10(),
+                    (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.createComponent)(__WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.For, {
+                        each: options,
+                        children: (o)=>(()=>{
+                                var _el$23 = _tmpl$11();
+                                (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.insert)(_el$23, ()=>o.label);
+                                (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.effect)(()=>_el$23.value = o.value);
+                                return _el$23;
+                            })()
+                    })
+                ];
             }
-        }, rest), false, true);
-        (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.insert)(_el$, ()=>local.children);
-        return _el$;
-    })();
-};
-const table_Table = Object.assign(Table, {
-    Head: TableHead,
-    Body: table_TableBody,
-    Row: table_TableRow,
-    Footer: table_TableFooter,
-    Cell: TableCell,
-    HeadCell: table_TableHeadCell,
-    Enhanced: EnhancedTable
-});
+        });
+    }
+    return null;
+}
+const EnhancedTable = EnhancedTable_EnhancedTable;
 var Tab_tmpl$ = /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.template)("<a role=tab>");
 const Tab = (props)=>{
     const [local, others] = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.splitProps)(props, [
@@ -12020,4 +12222,4 @@ const WindowMockup = (props)=>{
     })();
 };
 const windowmockup_WindowMockup = WindowMockup;
-export { accordion_Accordion as Accordion, alert_Alert as Alert, artboard_Artboard as Artboard, avatar as Avatar, background_Background as Background, Badge, bottom_sheet_BottomSheet as BottomSheet, Breadcrumbs, breadcrumbs_BreadcrumbsItem as BreadcrumbsItem, browsermockup_BrowserMockup as BrowserMockup, button_Button as Button, Calendar, card_Card as Card, carousel_Carousel as Carousel, chatbubble_ChatBubble as ChatBubble, checkbox_Checkbox as Checkbox, codemockup_CodeMockup as CodeMockup, CodeMockupLine, collapse_Collapse as Collapse, CollapseContent, CollapseDetails, CollapseTitle, connectionstatus_ConnectionStatus as ConnectionStatus, CopyButton, countdown_Countdown as Countdown, diff_Diff as Diff, divider as Divider, dock as Dock, Drawer, dropdown as Dropdown, FileInput, flex_Flex as Flex, footer_Footer as Footer, form_Form as Form, Grid, hero_Hero as Hero, icon_Icon as Icon, indicator_Indicator as Indicator, input as Input, join_Join as Join, kbd_Kbd as Kbd, link_Link as Link, loading_Loading as Loading, mask as Mask, menu_Menu as Menu, modal_Modal as Modal, navbar_Navbar as Navbar, pagination_Pagination as Pagination, phonemockup_PhoneMockup as PhoneMockup, Progress, props_table_PropsTable as PropsTable, radialprogress_RadialProgress as RadialProgress, radio_Radio as Radio, range_Range as Range, Rating, select_Select as Select, showcase_ShowcaseBlock as ShowcaseBlock, showcase_section_ShowcaseSection as ShowcaseSection, sidenav_Sidenav as Sidenav, sidenav_SidenavButton as SidenavButton, sidenav_SidenavGroup as SidenavGroup, sidenav_SidenavItem as SidenavItem, sidenav_SidenavLink as SidenavLink, sidenav_SidenavMenu as SidenavMenu, skeleton_Skeleton as Skeleton, Stack, stat_card_StatCard as StatCard, stats_Stats as Stats, status_Status as Status, steps as Steps, Summary, SvgBackground, Swap, table_Table as Table, tabs_Tabs as Tabs, textarea_Textarea as Textarea, Timeline, timeline_TimelineEnd as TimelineEnd, timeline_TimelineItem as TimelineItem, timeline_TimelineMiddle as TimelineMiddle, timeline_TimelineStart as TimelineStart, toast_Toast as Toast, ToastContainer, toggle_Toggle as Toggle, tooltip_Tooltip as Tooltip, windowmockup_WindowMockup as WindowMockup, connectionstatus_ConnectionStatus as default, toastStore, useDesktop, useFormValidation };
+export { accordion_Accordion as Accordion, alert_Alert as Alert, artboard_Artboard as Artboard, avatar as Avatar, background_Background as Background, Badge, bottom_sheet_BottomSheet as BottomSheet, Breadcrumbs, breadcrumbs_BreadcrumbsItem as BreadcrumbsItem, browsermockup_BrowserMockup as BrowserMockup, button_Button as Button, Calendar, card_Card as Card, carousel_Carousel as Carousel, chatbubble_ChatBubble as ChatBubble, checkbox_Checkbox as Checkbox, codemockup_CodeMockup as CodeMockup, CodeMockupLine, collapse_Collapse as Collapse, CollapseContent, CollapseDetails, CollapseTitle, connectionstatus_ConnectionStatus as ConnectionStatus, CopyButton, countdown_Countdown as Countdown, diff_Diff as Diff, divider as Divider, dock as Dock, Drawer, dropdown as Dropdown, EnhancedTable, FileInput, flex_Flex as Flex, footer_Footer as Footer, form_Form as Form, Grid, hero_Hero as Hero, icon_Icon as Icon, indicator_Indicator as Indicator, input as Input, join_Join as Join, kbd_Kbd as Kbd, link_Link as Link, loading_Loading as Loading, mask as Mask, menu_Menu as Menu, modal_Modal as Modal, navbar_Navbar as Navbar, pagination_Pagination as Pagination, phonemockup_PhoneMockup as PhoneMockup, Progress, props_table_PropsTable as PropsTable, radialprogress_RadialProgress as RadialProgress, radio_Radio as Radio, range_Range as Range, Rating, select_Select as Select, showcase_ShowcaseBlock as ShowcaseBlock, showcase_section_ShowcaseSection as ShowcaseSection, sidenav_Sidenav as Sidenav, sidenav_SidenavButton as SidenavButton, sidenav_SidenavGroup as SidenavGroup, sidenav_SidenavItem as SidenavItem, sidenav_SidenavLink as SidenavLink, sidenav_SidenavMenu as SidenavMenu, skeleton_Skeleton as Skeleton, Stack, stat_card_StatCard as StatCard, stats_Stats as Stats, status_Status as Status, steps as Steps, Summary, SvgBackground, Swap, table_Table as Table, tabs_Tabs as Tabs, textarea_Textarea as Textarea, Timeline, timeline_TimelineEnd as TimelineEnd, timeline_TimelineItem as TimelineItem, timeline_TimelineMiddle as TimelineMiddle, timeline_TimelineStart as TimelineStart, toast_Toast as Toast, ToastContainer, toggle_Toggle as Toggle, tooltip_Tooltip as Tooltip, windowmockup_WindowMockup as WindowMockup, connectionstatus_ConnectionStatus as default, toastStore, useDesktop, useFormValidation };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pathscale/ui",
-  "version": "0.0.89",
+  "version": "0.0.90",
   "author": "pathscale",
   "repository": {
     "type": "git",