@pathscale/ui 1.1.12 → 1.1.14

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

@@ -1,22 +1,78 @@
-import "./table.css";
-import { type Component, type JSX } from "solid-js";
+import "./Table.css";
+import { type Accessor, type Component, type JSX } from "solid-js";
 import type { IComponentBaseProps } from "../types";
 type TableVariant = "primary" | "secondary";
-export declare const useTableContext: () => {
-    variant: TableVariant;
+type TableSortDirection = "ascending" | "descending";
+type TableSortDescriptor = {
+    column: string;
+    direction: TableSortDirection;
 };
+type TableColumnRenderProps = {
+    sortDirection: TableSortDirection | undefined;
+};
+type TableColumnChildren = JSX.Element | ((props: TableColumnRenderProps) => JSX.Element);
+type TableContextValue = {
+    variant: Accessor<TableVariant>;
+};
+type TableContentContextValue = {
+    sortDescriptor: Accessor<TableSortDescriptor | undefined>;
+    onSortChange?: (descriptor: TableSortDescriptor) => void;
+};
+export declare const useTableContext: () => TableContextValue;
+export declare const useTableContentContext: () => TableContentContextValue;
 export type TableRootProps = JSX.HTMLAttributes<HTMLDivElement> & IComponentBaseProps & {
     variant?: TableVariant;
 };
+declare const TableRoot: Component<TableRootProps>;
 export type TableScrollContainerProps = JSX.HTMLAttributes<HTMLDivElement> & IComponentBaseProps;
-export type TableContentProps = JSX.HTMLAttributes<HTMLTableElement> & IComponentBaseProps;
+declare const TableScrollContainer: Component<TableScrollContainerProps>;
+export type TableContentProps = JSX.HTMLAttributes<HTMLTableElement> & IComponentBaseProps & {
+    sortDescriptor?: TableSortDescriptor;
+    onSortChange?: (descriptor: TableSortDescriptor) => void;
+};
+declare const TableContent: Component<TableContentProps>;
 export type TableHeaderProps = JSX.HTMLAttributes<HTMLTableSectionElement> & IComponentBaseProps;
-export type TableColumnProps = JSX.ThHTMLAttributes<HTMLTableCellElement> & IComponentBaseProps;
+declare const TableHeader: Component<TableHeaderProps>;
+export type TableColumnProps = Omit<JSX.ThHTMLAttributes<HTMLTableCellElement>, "id" | "children"> & IComponentBaseProps & {
+    id: string;
+    allowsSorting?: boolean;
+    children?: TableColumnChildren;
+};
+declare const TableColumn: Component<TableColumnProps>;
 export type TableBodyProps = JSX.HTMLAttributes<HTMLTableSectionElement> & IComponentBaseProps;
+declare const TableBody: Component<TableBodyProps>;
 export type TableRowProps = JSX.HTMLAttributes<HTMLTableRowElement> & IComponentBaseProps;
+declare const TableRow: Component<TableRowProps>;
 export type TableCellProps = JSX.TdHTMLAttributes<HTMLTableCellElement> & IComponentBaseProps;
+declare const TableCell: Component<TableCellProps>;
+export type TableExpandedRowProps = JSX.HTMLAttributes<HTMLTableRowElement> & IComponentBaseProps & {
+    colSpan: number;
+    cellClass?: string;
+    cellClassName?: string;
+    cellDataTheme?: string;
+};
+declare const TableExpandedRow: Component<TableExpandedRowProps>;
 export type TableFooterProps = JSX.HTMLAttributes<HTMLDivElement> & IComponentBaseProps;
-export type { TableVariant };
+declare const TableFooter: Component<TableFooterProps>;
+export type TablePageSizeProps = Omit<JSX.SelectHTMLAttributes<HTMLSelectElement>, "onChange"> & IComponentBaseProps & {
+    value: number;
+    options: readonly number[];
+    onChange: (value: number) => void;
+    label?: JSX.Element;
+    selectClass?: string;
+    selectClassName?: string;
+};
+declare const TablePageSize: Component<TablePageSizeProps>;
+export type TableResizableContainerProps = JSX.HTMLAttributes<HTMLDivElement> & IComponentBaseProps;
+declare const TableResizableContainer: Component<TableResizableContainerProps>;
+export type TableColumnResizerProps = JSX.HTMLAttributes<HTMLDivElement> & IComponentBaseProps;
+declare const TableColumnResizer: Component<TableColumnResizerProps>;
+export type TableLoadMoreProps = JSX.HTMLAttributes<HTMLTableRowElement> & IComponentBaseProps;
+declare const TableLoadMore: Component<TableLoadMoreProps>;
+export type TableLoadMoreContentProps = JSX.HTMLAttributes<HTMLDivElement> & IComponentBaseProps;
+declare const TableLoadMoreContent: Component<TableLoadMoreContentProps>;
+export type { TableVariant, TableSortDirection, TableSortDescriptor, TableColumnRenderProps, };
+export { TableRoot, TableScrollContainer, TableContent, TableHeader, TableColumn, TableBody, TableRow, TableCell, TableExpandedRow, TableFooter, TablePageSize, TableResizableContainer, TableColumnResizer, TableLoadMore, TableLoadMoreContent, };
 declare const _default: Component<TableRootProps> & {
     Root: Component<TableRootProps>;
     ScrollContainer: Component<TableScrollContainerProps>;
@@ -26,6 +82,12 @@ declare const _default: Component<TableRootProps> & {
     Body: Component<TableBodyProps>;
     Row: Component<TableRowProps>;
     Cell: Component<TableCellProps>;
+    ExpandedRow: Component<TableExpandedRowProps>;
     Footer: Component<TableFooterProps>;
+    PageSize: Component<TablePageSizeProps>;
+    ResizableContainer: Component<TableResizableContainerProps>;
+    ColumnResizer: Component<TableColumnResizerProps>;
+    LoadMore: Component<TableLoadMoreProps>;
+    LoadMoreContent: Component<TableLoadMoreContentProps>;
 };
 export default _default;

package/dist/components/table/Table.js

@@ -1,12 +1,32 @@
 import * as __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__ from "solid-js/web";
-import "./table.css";
+import "./Table.css";
 import * as __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__ from "solid-js";
 import * as __WEBPACK_EXTERNAL_MODULE_tailwind_merge_e05e3e95__ from "tailwind-merge";
-var _tmpl$ = /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.template)("<div data-slot=table>"), _tmpl$2 = /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.template)("<div data-slot=table-scroll-container>"), _tmpl$3 = /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.template)("<table data-slot=table-content>"), _tmpl$4 = /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.template)("<thead data-slot=table-header>"), _tmpl$5 = /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.template)("<th data-slot=table-column>"), _tmpl$6 = /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.template)("<tbody data-slot=table-body>"), _tmpl$7 = /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.template)("<tr data-slot=table-row>"), _tmpl$8 = /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.template)("<td data-slot=table-cell>"), _tmpl$9 = /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.template)("<div data-slot=table-footer>");
-const TableContext = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.createContext)({
-    variant: "primary"
-});
-const useTableContext = ()=>(0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.useContext)(TableContext);
+var _tmpl$ = /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.template)("<div data-slot=table>"), _tmpl$2 = /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.template)("<div data-slot=table-scroll-container>"), _tmpl$3 = /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.template)("<table data-slot=table-content>"), _tmpl$4 = /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.template)("<thead data-slot=table-header>"), _tmpl$5 = /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.template)("<th data-slot=table-column>"), _tmpl$6 = /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.template)("<tbody data-slot=table-body>"), _tmpl$7 = /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.template)("<tr data-slot=table-row>"), _tmpl$8 = /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.template)("<td data-slot=table-cell>"), _tmpl$9 = /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.template)("<div data-slot=table-footer>"), _tmpl$0 = /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.template)("<label data-slot=table-page-size><span class=table__page-size-label data-slot=table-page-size-label></span><select>"), _tmpl$1 = /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.template)("<option>"), _tmpl$10 = /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.template)("<div data-slot=table-resizable-container>"), _tmpl$11 = /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.template)("<div data-slot=table-column-resizer>"), _tmpl$12 = /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.template)("<tr data-slot=table-load-more>"), _tmpl$13 = /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.template)("<div data-slot=table-load-more-content>");
+const TABLE_VARIANT_CLASS_MAP = {
+    primary: "table-root--primary",
+    secondary: "table-root--secondary"
+};
+const TableContext = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.createContext)();
+const TableContentContext = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.createContext)();
+const useTableContext = ()=>{
+    const context = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.useContext)(TableContext);
+    if (context) return context;
+    return {
+        variant: ()=>"primary"
+    };
+};
+const useTableContentContext = ()=>{
+    const context = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.useContext)(TableContentContext);
+    if (context) return context;
+    return {
+        sortDescriptor: ()=>void 0
+    };
+};
+const invokeEventHandler = (handler, event)=>{
+    if ("function" == typeof handler) return void handler(event);
+    if (Array.isArray(handler) && "function" == typeof handler[0]) handler[0](handler[1], event);
+};
 const TableRoot = (props)=>{
     const [local, rest] = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.splitProps)(props, [
         "children",
@@ -18,18 +38,19 @@ const TableRoot = (props)=>{
     const variant = ()=>local.variant ?? "primary";
     return (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.createComponent)(TableContext.Provider, {
         value: {
-            get variant () {
-                return variant();
-            }
+            variant
         },
         get children () {
             var _el$ = _tmpl$();
             (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.spread)(_el$, (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.mergeProps)({
                 get ["class"] () {
-                    return (0, __WEBPACK_EXTERNAL_MODULE_tailwind_merge_e05e3e95__.twMerge)("table-root", `table-root--${variant()}`, local.class, local.className);
+                    return (0, __WEBPACK_EXTERNAL_MODULE_tailwind_merge_e05e3e95__.twMerge)("table-root", TABLE_VARIANT_CLASS_MAP[variant()], local.class, local.className);
                 },
                 get ["data-theme"] () {
                     return local.dataTheme;
+                },
+                get ["data-variant"] () {
+                    return variant();
                 }
             }, rest), false, true);
             (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.insert)(_el$, ()=>local.children);
@@ -63,21 +84,37 @@ const TableContent = (props)=>{
         "children",
         "class",
         "className",
-        "dataTheme"
+        "dataTheme",
+        "sortDescriptor",
+        "onSortChange"
     ]);
-    return (()=>{
-        var _el$3 = _tmpl$3();
-        (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.spread)(_el$3, (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.mergeProps)({
-            get ["class"] () {
-                return (0, __WEBPACK_EXTERNAL_MODULE_tailwind_merge_e05e3e95__.twMerge)("table__content", local.class, local.className);
-            },
-            get ["data-theme"] () {
-                return local.dataTheme;
-            }
-        }, rest), false, true);
-        (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.insert)(_el$3, ()=>local.children);
-        return _el$3;
-    })();
+    return (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.createComponent)(TableContentContext.Provider, {
+        get value () {
+            return {
+                sortDescriptor: ()=>local.sortDescriptor,
+                onSortChange: local.onSortChange
+            };
+        },
+        get children () {
+            var _el$3 = _tmpl$3();
+            (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.spread)(_el$3, (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.mergeProps)({
+                get ["class"] () {
+                    return (0, __WEBPACK_EXTERNAL_MODULE_tailwind_merge_e05e3e95__.twMerge)("table__content", local.class, local.className);
+                },
+                get ["data-theme"] () {
+                    return local.dataTheme;
+                },
+                get ["data-sort-column"] () {
+                    return local.sortDescriptor?.column;
+                },
+                get ["data-sort-direction"] () {
+                    return local.sortDescriptor?.direction;
+                }
+            }, rest), false, true);
+            (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.insert)(_el$3, ()=>local.children);
+            return _el$3;
+        }
+    });
 };
 const TableHeader = (props)=>{
     const [local, rest] = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.splitProps)(props, [
@@ -101,23 +138,78 @@ const TableHeader = (props)=>{
     })();
 };
 const TableColumn = (props)=>{
+    const contentContext = useTableContentContext();
     const [local, rest] = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.splitProps)(props, [
+        "id",
+        "allowsSorting",
         "children",
         "class",
         "className",
-        "dataTheme"
+        "dataTheme",
+        "onClick",
+        "onKeyDown",
+        "tabIndex"
     ]);
+    const isSortable = ()=>Boolean(local.allowsSorting);
+    const sortDirection = ()=>{
+        const descriptor = contentContext.sortDescriptor();
+        if (!descriptor || descriptor.column !== local.id) return;
+        return descriptor.direction;
+    };
+    const emitSortChange = ()=>{
+        if (!isSortable() || !contentContext.onSortChange) return;
+        contentContext.onSortChange({
+            column: local.id,
+            direction: "ascending" === sortDirection() ? "descending" : "ascending"
+        });
+    };
+    const handleClick = (event)=>{
+        invokeEventHandler(local.onClick, event);
+        if (event.defaultPrevented) return;
+        emitSortChange();
+    };
+    const handleKeyDown = (event)=>{
+        invokeEventHandler(local.onKeyDown, event);
+        if (event.defaultPrevented) return;
+        if (!isSortable()) return;
+        if ("Enter" !== event.key && " " !== event.key) return;
+        event.preventDefault();
+        emitSortChange();
+    };
+    const renderedChildren = ()=>{
+        if ("function" == typeof local.children) return local.children({
+            sortDirection: sortDirection()
+        });
+        return local.children;
+    };
     return (()=>{
         var _el$5 = _tmpl$5();
+        _el$5.$$keydown = handleKeyDown;
+        _el$5.$$click = handleClick;
         (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.spread)(_el$5, (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.mergeProps)({
             get ["class"] () {
                 return (0, __WEBPACK_EXTERNAL_MODULE_tailwind_merge_e05e3e95__.twMerge)("table__column", local.class, local.className);
             },
             get ["data-theme"] () {
                 return local.dataTheme;
+            },
+            get ["data-column-id"] () {
+                return local.id;
+            },
+            get ["data-allows-sorting"] () {
+                return isSortable() ? "true" : void 0;
+            },
+            get ["data-sort-direction"] () {
+                return sortDirection();
+            },
+            get ["aria-sort"] () {
+                return (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.memo)(()=>!!isSortable())() ? sortDirection() ?? "none" : void 0;
+            },
+            get tabIndex () {
+                return isSortable() ? local.tabIndex ?? 0 : local.tabIndex;
             }
         }, rest), false, true);
-        (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.insert)(_el$5, ()=>local.children);
+        (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.insert)(_el$5, renderedChildren);
         return _el$5;
     })();
 };
@@ -184,6 +276,44 @@ const TableCell = (props)=>{
         return _el$8;
     })();
 };
+const TableExpandedRow = (props)=>{
+    const [local, rest] = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.splitProps)(props, [
+        "children",
+        "class",
+        "className",
+        "dataTheme",
+        "colSpan",
+        "cellClass",
+        "cellClassName",
+        "cellDataTheme"
+    ]);
+    return (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.createComponent)(TableRow, (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.mergeProps)({
+        get ["class"] () {
+            return (0, __WEBPACK_EXTERNAL_MODULE_tailwind_merge_e05e3e95__.twMerge)("table__expanded-row", local.class, local.className);
+        },
+        get ["data-theme"] () {
+            return local.dataTheme;
+        },
+        "data-slot": "table-expanded-row"
+    }, rest, {
+        get children () {
+            return (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.createComponent)(TableCell, {
+                get colSpan () {
+                    return local.colSpan;
+                },
+                get ["class"] () {
+                    return (0, __WEBPACK_EXTERNAL_MODULE_tailwind_merge_e05e3e95__.twMerge)("table__expanded-cell", local.cellClass, local.cellClassName);
+                },
+                get dataTheme () {
+                    return local.cellDataTheme ?? local.dataTheme;
+                },
+                get children () {
+                    return local.children;
+                }
+            });
+        }
+    }));
+};
 const TableFooter = (props)=>{
     const [local, rest] = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.splitProps)(props, [
         "children",
@@ -205,6 +335,140 @@ const TableFooter = (props)=>{
         return _el$9;
     })();
 };
+const TablePageSize = (props)=>{
+    const [local, rest] = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.splitProps)(props, [
+        "class",
+        "className",
+        "dataTheme",
+        "value",
+        "options",
+        "onChange",
+        "label",
+        "selectClass",
+        "selectClassName"
+    ]);
+    return (()=>{
+        var _el$0 = _tmpl$0(), _el$1 = _el$0.firstChild, _el$10 = _el$1.nextSibling;
+        (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.insert)(_el$1, ()=>local.label ?? "Rows");
+        (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.spread)(_el$10, (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.mergeProps)(rest, {
+            get ["class"] () {
+                return (0, __WEBPACK_EXTERNAL_MODULE_tailwind_merge_e05e3e95__.twMerge)("table__page-size-select", local.selectClass, local.selectClassName);
+            },
+            get value () {
+                return local.value;
+            },
+            onChange: (event)=>local.onChange(Number(event.currentTarget.value))
+        }), false, true);
+        (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.insert)(_el$10, ()=>local.options.map((option)=>(()=>{
+                    var _el$11 = _tmpl$1();
+                    _el$11.value = option;
+                    (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.insert)(_el$11, option);
+                    return _el$11;
+                })()));
+        (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.effect)((_p$)=>{
+            var _v$ = (0, __WEBPACK_EXTERNAL_MODULE_tailwind_merge_e05e3e95__.twMerge)("table__page-size", local.class, local.className), _v$2 = local.dataTheme;
+            _v$ !== _p$.e && (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.className)(_el$0, _p$.e = _v$);
+            _v$2 !== _p$.t && (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.setAttribute)(_el$0, "data-theme", _p$.t = _v$2);
+            return _p$;
+        }, {
+            e: void 0,
+            t: void 0
+        });
+        return _el$0;
+    })();
+};
+const TableResizableContainer = (props)=>{
+    const [local, rest] = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.splitProps)(props, [
+        "children",
+        "class",
+        "className",
+        "dataTheme"
+    ]);
+    return (()=>{
+        var _el$12 = _tmpl$10();
+        (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.spread)(_el$12, (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.mergeProps)({
+            get ["class"] () {
+                return (0, __WEBPACK_EXTERNAL_MODULE_tailwind_merge_e05e3e95__.twMerge)("table__resizable-container", local.class, local.className);
+            },
+            get ["data-theme"] () {
+                return local.dataTheme;
+            }
+        }, rest), false, true);
+        (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.insert)(_el$12, ()=>local.children);
+        return _el$12;
+    })();
+};
+const TableColumnResizer = (props)=>{
+    const [local, rest] = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.splitProps)(props, [
+        "children",
+        "class",
+        "className",
+        "dataTheme",
+        "role",
+        "aria-orientation"
+    ]);
+    return (()=>{
+        var _el$13 = _tmpl$11();
+        (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.spread)(_el$13, (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.mergeProps)({
+            get role () {
+                return local.role ?? "separator";
+            },
+            get ["aria-orientation"] () {
+                return local["aria-orientation"] ?? "vertical";
+            },
+            get ["class"] () {
+                return (0, __WEBPACK_EXTERNAL_MODULE_tailwind_merge_e05e3e95__.twMerge)("table__column-resizer", local.class, local.className);
+            },
+            get ["data-theme"] () {
+                return local.dataTheme;
+            }
+        }, rest), false, true);
+        (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.insert)(_el$13, ()=>local.children);
+        return _el$13;
+    })();
+};
+const TableLoadMore = (props)=>{
+    const [local, rest] = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.splitProps)(props, [
+        "children",
+        "class",
+        "className",
+        "dataTheme"
+    ]);
+    return (()=>{
+        var _el$14 = _tmpl$12();
+        (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.spread)(_el$14, (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.mergeProps)({
+            get ["class"] () {
+                return (0, __WEBPACK_EXTERNAL_MODULE_tailwind_merge_e05e3e95__.twMerge)("table__load-more", local.class, local.className);
+            },
+            get ["data-theme"] () {
+                return local.dataTheme;
+            }
+        }, rest), false, true);
+        (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.insert)(_el$14, ()=>local.children);
+        return _el$14;
+    })();
+};
+const TableLoadMoreContent = (props)=>{
+    const [local, rest] = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.splitProps)(props, [
+        "children",
+        "class",
+        "className",
+        "dataTheme"
+    ]);
+    return (()=>{
+        var _el$15 = _tmpl$13();
+        (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.spread)(_el$15, (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.mergeProps)({
+            get ["class"] () {
+                return (0, __WEBPACK_EXTERNAL_MODULE_tailwind_merge_e05e3e95__.twMerge)("table__load-more-content", local.class, local.className);
+            },
+            get ["data-theme"] () {
+                return local.dataTheme;
+            }
+        }, rest), false, true);
+        (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.insert)(_el$15, ()=>local.children);
+        return _el$15;
+    })();
+};
 const Table = Object.assign(TableRoot, {
     Root: TableRoot,
     ScrollContainer: TableScrollContainer,
@@ -214,6 +478,16 @@ const Table = Object.assign(TableRoot, {
     Body: TableBody,
     Row: TableRow,
     Cell: TableCell,
-    Footer: TableFooter
+    ExpandedRow: TableExpandedRow,
+    Footer: TableFooter,
+    PageSize: TablePageSize,
+    ResizableContainer: TableResizableContainer,
+    ColumnResizer: TableColumnResizer,
+    LoadMore: TableLoadMore,
+    LoadMoreContent: TableLoadMoreContent
 });
-export { Table as default, useTableContext };
+(0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.delegateEvents)([
+    "click",
+    "keydown"
+]);
+export { TableBody, TableCell, TableColumn, TableColumnResizer, TableContent, TableExpandedRow, TableFooter, TableHeader, TableLoadMore, TableLoadMoreContent, TablePageSize, TableResizableContainer, TableRoot, TableRow, TableScrollContainer, Table as default, useTableContentContext, useTableContext };

package/dist/components/table/hooks/helpers.d.ts

@@ -0,0 +1,7 @@
+import type { Accessor } from "solid-js";
+import type { SortingState, Updater } from "@tanstack/solid-table";
+import type { HookSortDescriptor } from "./useTableSorting";
+export declare const resolveUpdater: <T>(previous: T, updater: Updater<T>) => T;
+export declare const asAccessor: <T>(value: Accessor<T> | T) => Accessor<T>;
+export declare const toSortDescriptor: (sorting: SortingState) => HookSortDescriptor | undefined;
+export declare const toSortingState: (descriptor: HookSortDescriptor | undefined) => SortingState;

package/dist/components/table/hooks/helpers.js

@@ -0,0 +1,26 @@
+const resolveUpdater = (previous, updater)=>{
+    if ("function" == typeof updater) return updater(previous);
+    return updater;
+};
+const asAccessor = (value)=>{
+    if ("function" == typeof value) return value;
+    return ()=>value;
+};
+const toSortDescriptor = (sorting)=>{
+    const activeSort = sorting[0];
+    if (!activeSort) return;
+    return {
+        column: activeSort.id,
+        direction: activeSort.desc ? "descending" : "ascending"
+    };
+};
+const toSortingState = (descriptor)=>{
+    if (!descriptor) return [];
+    return [
+        {
+            id: descriptor.column,
+            desc: "descending" === descriptor.direction
+        }
+    ];
+};
+export { asAccessor, resolveUpdater, toSortDescriptor, toSortingState };

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

@@ -0,0 +1,9 @@
+export { useTableSorting, type UseTableSortingOptions, type UseTableSortingResult, type HookSortDirection, type HookSortDescriptor, } from "./useTableSorting";
+export { useTablePagination, type UseTablePaginationOptions, type UseTablePaginationResult, } from "./useTablePagination";
+export { useTableFiltering, type UseTableFilteringOptions, type UseTableFilteringResult, } from "./useTableFiltering";
+export { useTableSelection, type UseTableSelectionOptions, type UseTableSelectionResult, type TableSelectionState, } from "./useTableSelection";
+export { useTableExpansion, type UseTableExpansionOptions, type UseTableExpansionResult, } from "./useTableExpansion";
+export { useTableModel, type UseTableModelOptions, } from "./useTableModel";
+export { toSortDescriptor, toSortingState } from "./helpers";
+export { useAnchoredOverlayPosition } from "./useAnchoredOverlayPosition";
+export type { UseAnchoredOverlayPositionOptions } from "./useAnchoredOverlayPosition";

package/dist/components/table/hooks/index.js

@@ -0,0 +1,18 @@
+import * as __WEBPACK_EXTERNAL_MODULE__useTableSorting_js_bcbcf7e7__ from "./useTableSorting.js";
+import * as __WEBPACK_EXTERNAL_MODULE__useTablePagination_js_221a602e__ from "./useTablePagination.js";
+import * as __WEBPACK_EXTERNAL_MODULE__useTableFiltering_js_c008d8f8__ from "./useTableFiltering.js";
+import * as __WEBPACK_EXTERNAL_MODULE__useTableSelection_js_6791c7a2__ from "./useTableSelection.js";
+import * as __WEBPACK_EXTERNAL_MODULE__useTableExpansion_js_e1dc5a4d__ from "./useTableExpansion.js";
+import * as __WEBPACK_EXTERNAL_MODULE__useTableModel_js_1f373411__ from "./useTableModel.js";
+import * as __WEBPACK_EXTERNAL_MODULE__helpers_js_87289b43__ from "./helpers.js";
+import * as __WEBPACK_EXTERNAL_MODULE__useAnchoredOverlayPosition_js_ef09d6e3__ from "./useAnchoredOverlayPosition.js";
+var __webpack_exports__toSortDescriptor = __WEBPACK_EXTERNAL_MODULE__helpers_js_87289b43__.toSortDescriptor;
+var __webpack_exports__toSortingState = __WEBPACK_EXTERNAL_MODULE__helpers_js_87289b43__.toSortingState;
+var __webpack_exports__useAnchoredOverlayPosition = __WEBPACK_EXTERNAL_MODULE__useAnchoredOverlayPosition_js_ef09d6e3__.useAnchoredOverlayPosition;
+var __webpack_exports__useTableExpansion = __WEBPACK_EXTERNAL_MODULE__useTableExpansion_js_e1dc5a4d__.useTableExpansion;
+var __webpack_exports__useTableFiltering = __WEBPACK_EXTERNAL_MODULE__useTableFiltering_js_c008d8f8__.useTableFiltering;
+var __webpack_exports__useTableModel = __WEBPACK_EXTERNAL_MODULE__useTableModel_js_1f373411__.useTableModel;
+var __webpack_exports__useTablePagination = __WEBPACK_EXTERNAL_MODULE__useTablePagination_js_221a602e__.useTablePagination;
+var __webpack_exports__useTableSelection = __WEBPACK_EXTERNAL_MODULE__useTableSelection_js_6791c7a2__.useTableSelection;
+var __webpack_exports__useTableSorting = __WEBPACK_EXTERNAL_MODULE__useTableSorting_js_bcbcf7e7__.useTableSorting;
+export { __webpack_exports__toSortDescriptor as toSortDescriptor, __webpack_exports__toSortingState as toSortingState, __webpack_exports__useAnchoredOverlayPosition as useAnchoredOverlayPosition, __webpack_exports__useTableExpansion as useTableExpansion, __webpack_exports__useTableFiltering as useTableFiltering, __webpack_exports__useTableModel as useTableModel, __webpack_exports__useTablePagination as useTablePagination, __webpack_exports__useTableSelection as useTableSelection, __webpack_exports__useTableSorting as useTableSorting };

package/dist/components/table/hooks/useAnchoredOverlayPosition.d.ts

@@ -0,0 +1,16 @@
+import { type Accessor, type JSX } from "solid-js";
+export interface UseAnchoredOverlayPositionOptions {
+    isOpen: Accessor<boolean>;
+    getAnchor: Accessor<HTMLElement | undefined>;
+    getOverlay: Accessor<HTMLElement | undefined>;
+    offset?: number;
+    viewportPadding?: number;
+    align?: "start" | "end";
+    width?: number | Accessor<number | undefined>;
+    minWidth?: number | Accessor<number | undefined>;
+    zIndex?: number;
+}
+export declare const useAnchoredOverlayPosition: (options: UseAnchoredOverlayPositionOptions) => {
+    style: Accessor<JSX.CSSProperties>;
+    updatePosition: () => void;
+};

package/dist/components/table/hooks/useAnchoredOverlayPosition.js

@@ -0,0 +1,61 @@
+import * as __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__ from "solid-js";
+const resolveNumber = (value)=>{
+    if ("function" == typeof value) return value();
+    return value;
+};
+const useAnchoredOverlayPosition = (options)=>{
+    const [style, setStyle] = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.createSignal)({
+        position: "fixed",
+        top: "0px",
+        left: "0px",
+        "z-index": options.zIndex?.toString() ?? "1300"
+    });
+    const updatePosition = ()=>{
+        const anchor = options.getAnchor();
+        if (!anchor || "undefined" == typeof window) return;
+        const overlay = options.getOverlay();
+        const offset = options.offset ?? 6;
+        const viewportPadding = options.viewportPadding ?? 8;
+        const rect = anchor.getBoundingClientRect();
+        const desiredWidth = resolveNumber(options.width);
+        const desiredMinWidth = resolveNumber(options.minWidth);
+        const overlayRect = overlay?.getBoundingClientRect();
+        const measuredWidth = desiredWidth ?? overlayRect?.width ?? 0;
+        const measuredHeight = overlayRect?.height ?? 0;
+        const widthForBounds = desiredWidth ?? desiredMinWidth ?? measuredWidth;
+        let left = "start" === options.align ? rect.left : rect.right - widthForBounds;
+        left = Math.max(viewportPadding, Math.min(left, window.innerWidth - widthForBounds - viewportPadding));
+        let top = rect.bottom + offset;
+        if (measuredHeight > 0 && top + measuredHeight > window.innerHeight - viewportPadding) {
+            const above = rect.top - measuredHeight - offset;
+            top = above >= viewportPadding ? above : Math.max(viewportPadding, window.innerHeight - measuredHeight - viewportPadding);
+        }
+        setStyle({
+            position: "fixed",
+            top: `${top}px`,
+            left: `${left}px`,
+            width: desiredWidth ? `${desiredWidth}px` : void 0,
+            "min-width": desiredMinWidth ? `${desiredMinWidth}px` : void 0,
+            "z-index": options.zIndex?.toString() ?? "1300"
+        });
+    };
+    (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.createEffect)(()=>{
+        if (!options.isOpen()) return;
+        requestAnimationFrame(()=>{
+            updatePosition();
+            requestAnimationFrame(updatePosition);
+        });
+        const onViewportChange = ()=>updatePosition();
+        window.addEventListener("resize", onViewportChange);
+        window.addEventListener("scroll", onViewportChange, true);
+        (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.onCleanup)(()=>{
+            window.removeEventListener("resize", onViewportChange);
+            window.removeEventListener("scroll", onViewportChange, true);
+        });
+    });
+    return {
+        style,
+        updatePosition
+    };
+};
+export { useAnchoredOverlayPosition };

package/dist/components/table/hooks/useTableExpansion.d.ts

@@ -0,0 +1,13 @@
+import { type Accessor } from "solid-js";
+import type { ExpandedState, OnChangeFn } from "@tanstack/solid-table";
+export interface UseTableExpansionOptions {
+    expanded?: Accessor<ExpandedState>;
+    setExpanded?: OnChangeFn<ExpandedState>;
+    initialExpanded?: ExpandedState;
+}
+export interface UseTableExpansionResult {
+    expanded: Accessor<ExpandedState>;
+    setExpanded: OnChangeFn<ExpandedState>;
+    collapseAll: () => void;
+}
+export declare const useTableExpansion: (options?: UseTableExpansionOptions) => UseTableExpansionResult;