@sunggang/ui-lib 0.3.66 → 0.4.0

package/DataTable.esm.js

@@ -0,0 +1,943 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import * as React from 'react';
+import { useState, useEffect } from 'react';
+import { useReactTable, getCoreRowModel, getPaginationRowModel, getSortedRowModel, getFilteredRowModel, flexRender } from '@tanstack/react-table';
+import { ChevronDown } from 'lucide-react';
+import { I as Input, B as Button } from './input.esm.js';
+import * as DropdownMenuPrimitive from '@radix-ui/react-dropdown-menu';
+import { ChevronRightIcon, CheckIcon, DotFilledIcon } from '@radix-ui/react-icons';
+import { c as cn } from './utils.esm.js';
+import '@radix-ui/react-slot';
+import 'class-variance-authority';
+import 'clsx';
+import 'tailwind-merge';
+
+function _define_property$1(obj, key, value) {
+    if (key in obj) {
+        Object.defineProperty(obj, key, {
+            value: value,
+            enumerable: true,
+            configurable: true,
+            writable: true
+        });
+    } else {
+        obj[key] = value;
+    }
+    return obj;
+}
+function _object_spread$1(target) {
+    for(var i = 1; i < arguments.length; i++){
+        var source = arguments[i] != null ? arguments[i] : {};
+        var ownKeys = Object.keys(source);
+        if (typeof Object.getOwnPropertySymbols === "function") {
+            ownKeys = ownKeys.concat(Object.getOwnPropertySymbols(source).filter(function(sym) {
+                return Object.getOwnPropertyDescriptor(source, sym).enumerable;
+            }));
+        }
+        ownKeys.forEach(function(key) {
+            _define_property$1(target, key, source[key]);
+        });
+    }
+    return target;
+}
+function ownKeys(object, enumerableOnly) {
+    var keys = Object.keys(object);
+    if (Object.getOwnPropertySymbols) {
+        var symbols = Object.getOwnPropertySymbols(object);
+        if (enumerableOnly) {
+            symbols = symbols.filter(function(sym) {
+                return Object.getOwnPropertyDescriptor(object, sym).enumerable;
+            });
+        }
+        keys.push.apply(keys, symbols);
+    }
+    return keys;
+}
+function _object_spread_props(target, source) {
+    source = source != null ? source : {};
+    if (Object.getOwnPropertyDescriptors) {
+        Object.defineProperties(target, Object.getOwnPropertyDescriptors(source));
+    } else {
+        ownKeys(Object(source)).forEach(function(key) {
+            Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key));
+        });
+    }
+    return target;
+}
+function _object_without_properties$1(source, excluded) {
+    if (source == null) return {};
+    var target = _object_without_properties_loose$1(source, excluded);
+    var key, i;
+    if (Object.getOwnPropertySymbols) {
+        var sourceSymbolKeys = Object.getOwnPropertySymbols(source);
+        for(i = 0; i < sourceSymbolKeys.length; i++){
+            key = sourceSymbolKeys[i];
+            if (excluded.indexOf(key) >= 0) continue;
+            if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue;
+            target[key] = source[key];
+        }
+    }
+    return target;
+}
+function _object_without_properties_loose$1(source, excluded) {
+    if (source == null) return {};
+    var target = {};
+    var sourceKeys = Object.keys(source);
+    var key, i;
+    for(i = 0; i < sourceKeys.length; i++){
+        key = sourceKeys[i];
+        if (excluded.indexOf(key) >= 0) continue;
+        target[key] = source[key];
+    }
+    return target;
+}
+var DropdownMenu = DropdownMenuPrimitive.Root;
+var DropdownMenuTrigger = DropdownMenuPrimitive.Trigger;
+var DropdownMenuSubTrigger = /*#__PURE__*/ React.forwardRef(function(_param, ref) {
+    var className = _param.className, inset = _param.inset, children = _param.children, props = _object_without_properties$1(_param, [
+        "className",
+        "inset",
+        "children"
+    ]);
+    return /*#__PURE__*/ jsxs(DropdownMenuPrimitive.SubTrigger, _object_spread_props(_object_spread$1({
+        ref: ref,
+        className: cn("flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none focus:bg-accent data-[state=open]:bg-accent", inset && "pl-8", className)
+    }, props), {
+        children: [
+            children,
+            /*#__PURE__*/ jsx(ChevronRightIcon, {
+                className: "ml-auto h-4 w-4"
+            })
+        ]
+    }));
+});
+DropdownMenuSubTrigger.displayName = DropdownMenuPrimitive.SubTrigger.displayName;
+var DropdownMenuSubContent = /*#__PURE__*/ React.forwardRef(function(_param, ref) {
+    var className = _param.className, props = _object_without_properties$1(_param, [
+        "className"
+    ]);
+    return /*#__PURE__*/ jsx(DropdownMenuPrimitive.SubContent, _object_spread$1({
+        ref: ref,
+        className: cn("z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-lg data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2", className)
+    }, props));
+});
+DropdownMenuSubContent.displayName = DropdownMenuPrimitive.SubContent.displayName;
+var DropdownMenuContent = /*#__PURE__*/ React.forwardRef(function(_param, ref) {
+    var className = _param.className, _param_sideOffset = _param.sideOffset, sideOffset = _param_sideOffset === void 0 ? 4 : _param_sideOffset, props = _object_without_properties$1(_param, [
+        "className",
+        "sideOffset"
+    ]);
+    return /*#__PURE__*/ jsx(DropdownMenuPrimitive.Portal, {
+        children: /*#__PURE__*/ jsx(DropdownMenuPrimitive.Content, _object_spread$1({
+            ref: ref,
+            sideOffset: sideOffset,
+            className: cn("z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md", "data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2", className)
+        }, props))
+    });
+});
+DropdownMenuContent.displayName = DropdownMenuPrimitive.Content.displayName;
+var DropdownMenuItem = /*#__PURE__*/ React.forwardRef(function(_param, ref) {
+    var className = _param.className, inset = _param.inset, props = _object_without_properties$1(_param, [
+        "className",
+        "inset"
+    ]);
+    return /*#__PURE__*/ jsx(DropdownMenuPrimitive.Item, _object_spread$1({
+        ref: ref,
+        className: cn("relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50", inset && "pl-8", className)
+    }, props));
+});
+DropdownMenuItem.displayName = DropdownMenuPrimitive.Item.displayName;
+var DropdownMenuCheckboxItem = /*#__PURE__*/ React.forwardRef(function(_param, ref) {
+    var className = _param.className, children = _param.children, checked = _param.checked, props = _object_without_properties$1(_param, [
+        "className",
+        "children",
+        "checked"
+    ]);
+    return /*#__PURE__*/ jsxs(DropdownMenuPrimitive.CheckboxItem, _object_spread_props(_object_spread$1({
+        ref: ref,
+        className: cn("relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50", className),
+        checked: checked
+    }, props), {
+        children: [
+            /*#__PURE__*/ jsx("span", {
+                className: "absolute left-2 flex h-3.5 w-3.5 items-center justify-center",
+                children: /*#__PURE__*/ jsx(DropdownMenuPrimitive.ItemIndicator, {
+                    children: /*#__PURE__*/ jsx(CheckIcon, {
+                        className: "h-4 w-4"
+                    })
+                })
+            }),
+            children
+        ]
+    }));
+});
+DropdownMenuCheckboxItem.displayName = DropdownMenuPrimitive.CheckboxItem.displayName;
+var DropdownMenuRadioItem = /*#__PURE__*/ React.forwardRef(function(_param, ref) {
+    var className = _param.className, children = _param.children, props = _object_without_properties$1(_param, [
+        "className",
+        "children"
+    ]);
+    return /*#__PURE__*/ jsxs(DropdownMenuPrimitive.RadioItem, _object_spread_props(_object_spread$1({
+        ref: ref,
+        className: cn("relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50", className)
+    }, props), {
+        children: [
+            /*#__PURE__*/ jsx("span", {
+                className: "absolute left-2 flex h-3.5 w-3.5 items-center justify-center",
+                children: /*#__PURE__*/ jsx(DropdownMenuPrimitive.ItemIndicator, {
+                    children: /*#__PURE__*/ jsx(DotFilledIcon, {
+                        className: "h-4 w-4 fill-current"
+                    })
+                })
+            }),
+            children
+        ]
+    }));
+});
+DropdownMenuRadioItem.displayName = DropdownMenuPrimitive.RadioItem.displayName;
+var DropdownMenuLabel = /*#__PURE__*/ React.forwardRef(function(_param, ref) {
+    var className = _param.className, inset = _param.inset, props = _object_without_properties$1(_param, [
+        "className",
+        "inset"
+    ]);
+    return /*#__PURE__*/ jsx(DropdownMenuPrimitive.Label, _object_spread$1({
+        ref: ref,
+        className: cn("px-2 py-1.5 text-sm font-semibold", inset && "pl-8", className)
+    }, props));
+});
+DropdownMenuLabel.displayName = DropdownMenuPrimitive.Label.displayName;
+var DropdownMenuSeparator = /*#__PURE__*/ React.forwardRef(function(_param, ref) {
+    var className = _param.className, props = _object_without_properties$1(_param, [
+        "className"
+    ]);
+    return /*#__PURE__*/ jsx(DropdownMenuPrimitive.Separator, _object_spread$1({
+        ref: ref,
+        className: cn("-mx-1 my-1 h-px bg-muted", className)
+    }, props));
+});
+DropdownMenuSeparator.displayName = DropdownMenuPrimitive.Separator.displayName;
+
+function _define_property(obj, key, value) {
+    if (key in obj) {
+        Object.defineProperty(obj, key, {
+            value: value,
+            enumerable: true,
+            configurable: true,
+            writable: true
+        });
+    } else {
+        obj[key] = value;
+    }
+    return obj;
+}
+function _object_spread(target) {
+    for(var i = 1; i < arguments.length; i++){
+        var source = arguments[i] != null ? arguments[i] : {};
+        var ownKeys = Object.keys(source);
+        if (typeof Object.getOwnPropertySymbols === "function") {
+            ownKeys = ownKeys.concat(Object.getOwnPropertySymbols(source).filter(function(sym) {
+                return Object.getOwnPropertyDescriptor(source, sym).enumerable;
+            }));
+        }
+        ownKeys.forEach(function(key) {
+            _define_property(target, key, source[key]);
+        });
+    }
+    return target;
+}
+function _object_without_properties(source, excluded) {
+    if (source == null) return {};
+    var target = _object_without_properties_loose(source, excluded);
+    var key, i;
+    if (Object.getOwnPropertySymbols) {
+        var sourceSymbolKeys = Object.getOwnPropertySymbols(source);
+        for(i = 0; i < sourceSymbolKeys.length; i++){
+            key = sourceSymbolKeys[i];
+            if (excluded.indexOf(key) >= 0) continue;
+            if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue;
+            target[key] = source[key];
+        }
+    }
+    return target;
+}
+function _object_without_properties_loose(source, excluded) {
+    if (source == null) return {};
+    var target = {};
+    var sourceKeys = Object.keys(source);
+    var key, i;
+    for(i = 0; i < sourceKeys.length; i++){
+        key = sourceKeys[i];
+        if (excluded.indexOf(key) >= 0) continue;
+        target[key] = source[key];
+    }
+    return target;
+}
+var Table = /*#__PURE__*/ React.forwardRef(function(_param, ref) {
+    var className = _param.className, props = _object_without_properties(_param, [
+        "className"
+    ]);
+    return /*#__PURE__*/ jsx("div", {
+        className: "relative w-full overflow-auto",
+        children: /*#__PURE__*/ jsx("table", _object_spread({
+            ref: ref,
+            className: cn("w-full caption-bottom text-sm", className)
+        }, props))
+    });
+});
+Table.displayName = "Table";
+var TableHeader = /*#__PURE__*/ React.forwardRef(function(_param, ref) {
+    var className = _param.className, props = _object_without_properties(_param, [
+        "className"
+    ]);
+    return /*#__PURE__*/ jsx("thead", _object_spread({
+        ref: ref,
+        className: cn("[&_tr]:border-b", className)
+    }, props));
+});
+TableHeader.displayName = "TableHeader";
+var TableBody = /*#__PURE__*/ React.forwardRef(function(_param, ref) {
+    var className = _param.className, props = _object_without_properties(_param, [
+        "className"
+    ]);
+    return /*#__PURE__*/ jsx("tbody", _object_spread({
+        ref: ref,
+        className: cn("[&_tr:last-child]:border-0", className)
+    }, props));
+});
+TableBody.displayName = "TableBody";
+var TableFooter = /*#__PURE__*/ React.forwardRef(function(_param, ref) {
+    var className = _param.className, props = _object_without_properties(_param, [
+        "className"
+    ]);
+    return /*#__PURE__*/ jsx("tfoot", _object_spread({
+        ref: ref,
+        className: cn("border-t bg-muted/50 font-medium [&>tr]:last:border-b-0", className)
+    }, props));
+});
+TableFooter.displayName = "TableFooter";
+var TableRow = /*#__PURE__*/ React.forwardRef(function(_param, ref) {
+    var className = _param.className, props = _object_without_properties(_param, [
+        "className"
+    ]);
+    return /*#__PURE__*/ jsx("tr", _object_spread({
+        ref: ref,
+        className: cn("border-b transition-colors hover:bg-muted/50 data-[state=selected]:bg-muted", className)
+    }, props));
+});
+TableRow.displayName = "TableRow";
+var TableHead = /*#__PURE__*/ React.forwardRef(function(_param, ref) {
+    var className = _param.className, props = _object_without_properties(_param, [
+        "className"
+    ]);
+    return /*#__PURE__*/ jsx("th", _object_spread({
+        ref: ref,
+        className: cn("h-10 px-2 text-left align-middle font-medium text-muted-foreground [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[2px]", className)
+    }, props));
+});
+TableHead.displayName = "TableHead";
+var TableCell = /*#__PURE__*/ React.forwardRef(function(_param, ref) {
+    var className = _param.className, props = _object_without_properties(_param, [
+        "className"
+    ]);
+    return /*#__PURE__*/ jsx("td", _object_spread({
+        ref: ref,
+        className: cn("p-2 align-middle [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[2px]", className)
+    }, props));
+});
+TableCell.displayName = "TableCell";
+var TableCaption = /*#__PURE__*/ React.forwardRef(function(_param, ref) {
+    var className = _param.className, props = _object_without_properties(_param, [
+        "className"
+    ]);
+    return /*#__PURE__*/ jsx("caption", _object_spread({
+        ref: ref,
+        className: cn("mt-4 text-sm text-muted-foreground", className)
+    }, props));
+});
+TableCaption.displayName = "TableCaption";
+
+var TablePagination = function(param) {
+    var table = param.table;
+    var setPageIndex = table.setPageIndex, getCanPreviousPage = table.getCanPreviousPage, getCanNextPage = table.getCanNextPage, getPageCount = table.getPageCount, previousPage = table.previousPage, nextPage = table.nextPage, getPreFilteredRowModel = table.getPreFilteredRowModel, getState = table.getState;
+    return /*#__PURE__*/ jsxs("div", {
+        className: "flex items-center flex-wrap",
+        children: [
+            /*#__PURE__*/ jsxs("div", {
+                className: "flex gap-2 items-center text-md font-medium",
+                children: [
+                    /*#__PURE__*/ jsx("span", {
+                        className: "",
+                        children: "每頁"
+                    }),
+                    /*#__PURE__*/ jsx("select", {
+                        name: "",
+                        id: "",
+                        onChange: function(e) {
+                            return table.setPageSize(Number(e.target.value));
+                        },
+                        className: "border inline-flex gap-4 w-[70px] cursor-pointer rounded-md p-1",
+                        children: [
+                            5,
+                            10,
+                            20,
+                            50,
+                            100
+                        ].map(function(row) {
+                            return /*#__PURE__*/ jsx("option", {
+                                value: row,
+                                className: "mt-2",
+                                children: row
+                            }, row);
+                        })
+                    }),
+                    "筆"
+                ]
+            }),
+            /*#__PURE__*/ jsxs("div", {
+                className: "text-gray-400 text-sm pl-4",
+                children: [
+                    "共",
+                    getPreFilteredRowModel().rows.length,
+                    "筆資料"
+                ]
+            }),
+            /*#__PURE__*/ jsxs("div", {
+                className: "flex gap-8 justify-end",
+                children: [
+                    /*#__PURE__*/ jsxs("div", {
+                        className: "flex w-[100px] items-center justify-start lg:justify-center text-md font-medium",
+                        children: [
+                            "頁數 \xa0 ",
+                            /*#__PURE__*/ jsx("strong", {
+                                children: getState().pagination.pageIndex + 1
+                            }),
+                            "\xa0 / ",
+                            getPageCount()
+                        ]
+                    }),
+                    /*#__PURE__*/ jsxs("div", {
+                        className: "flex gap-2 [&>button]:h-8 [&>button]:w-8 [&>button]:border [&>button]:border-gray-300 [&>button]:rounded-md [&>button]:grid [&>button]:place-items-center [&>button:disabled]:opacity-50 [&>button:disabled]:border-gray-200 ",
+                        children: [
+                            /*#__PURE__*/ jsx("button", {
+                                type: "button",
+                                disabled: !getCanPreviousPage(),
+                                onClick: function() {
+                                    return setPageIndex(0);
+                                },
+                                children: "<<"
+                            }),
+                            /*#__PURE__*/ jsx("button", {
+                                type: "button",
+                                disabled: !getCanPreviousPage(),
+                                onClick: previousPage,
+                                children: "<"
+                            }),
+                            /*#__PURE__*/ jsx("button", {
+                                type: "button",
+                                disabled: !getCanNextPage(),
+                                onClick: nextPage,
+                                children: ">"
+                            }),
+                            /*#__PURE__*/ jsx("button", {
+                                type: "button",
+                                disabled: !getCanNextPage(),
+                                onClick: function() {
+                                    return setPageIndex(getPageCount() - 1);
+                                },
+                                children: ">>"
+                            })
+                        ]
+                    })
+                ]
+            })
+        ]
+    });
+};
+
+function _array_like_to_array$1(arr, len) {
+    if (len == null || len > arr.length) len = arr.length;
+    for(var i = 0, arr2 = new Array(len); i < len; i++)arr2[i] = arr[i];
+    return arr2;
+}
+function _array_with_holes$1(arr) {
+    if (Array.isArray(arr)) return arr;
+}
+function _iterable_to_array_limit$1(arr, i) {
+    var _i = arr == null ? null : typeof Symbol !== "undefined" && arr[Symbol.iterator] || arr["@@iterator"];
+    if (_i == null) return;
+    var _arr = [];
+    var _n = true;
+    var _d = false;
+    var _s, _e;
+    try {
+        for(_i = _i.call(arr); !(_n = (_s = _i.next()).done); _n = true){
+            _arr.push(_s.value);
+            if (i && _arr.length === i) break;
+        }
+    } catch (err) {
+        _d = true;
+        _e = err;
+    } finally{
+        try {
+            if (!_n && _i["return"] != null) _i["return"]();
+        } finally{
+            if (_d) throw _e;
+        }
+    }
+    return _arr;
+}
+function _non_iterable_rest$1() {
+    throw new TypeError("Invalid attempt to destructure non-iterable instance.\\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
+}
+function _sliced_to_array$1(arr, i) {
+    return _array_with_holes$1(arr) || _iterable_to_array_limit$1(arr, i) || _unsupported_iterable_to_array$1(arr, i) || _non_iterable_rest$1();
+}
+function _unsupported_iterable_to_array$1(o, minLen) {
+    if (!o) return;
+    if (typeof o === "string") return _array_like_to_array$1(o, minLen);
+    var n = Object.prototype.toString.call(o).slice(8, -1);
+    if (n === "Object" && o.constructor) n = o.constructor.name;
+    if (n === "Map" || n === "Set") return Array.from(n);
+    if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _array_like_to_array$1(o, minLen);
+}
+var DataTable = function(param) {
+    var data = param.data, filterColumn = param.filterColumn, columns = param.columns, _param_searchData = param.searchData, searchData = _param_searchData === void 0 ? {
+        disable: true,
+        label: "",
+        name: ""
+    } : _param_searchData, _param_hiddenPagination = param.hiddenPagination, hiddenPagination = _param_hiddenPagination === void 0 ? false : _param_hiddenPagination, _param_hiddenSort = param.hiddenSort, hiddenSort = _param_hiddenSort === void 0 ? false : _param_hiddenSort;
+    var _table_getColumn, _table_getRowModel_rows;
+    var _useState = _sliced_to_array$1(useState([]), 2), sorting = _useState[0], setSorting = _useState[1];
+    var _useState1 = _sliced_to_array$1(useState([]), 2), columnFilters = _useState1[0], setColumnFilters = _useState1[1];
+    var _useState2 = _sliced_to_array$1(useState({}), 2), columnVisibility = _useState2[0], setColumnVisibility = _useState2[1];
+    var _useState3 = _sliced_to_array$1(useState({}), 2), rowSelection = _useState3[0], setRowSelection = _useState3[1];
+    var table = useReactTable({
+        data: data,
+        columns: columns,
+        onSortingChange: setSorting,
+        onColumnFiltersChange: setColumnFilters,
+        getCoreRowModel: getCoreRowModel(),
+        getPaginationRowModel: getPaginationRowModel(),
+        getSortedRowModel: getSortedRowModel(),
+        getFilteredRowModel: getFilteredRowModel(),
+        onColumnVisibilityChange: setColumnVisibility,
+        onRowSelectionChange: setRowSelection,
+        state: {
+            sorting: sorting,
+            columnFilters: columnFilters,
+            columnVisibility: columnVisibility,
+            rowSelection: rowSelection
+        }
+    });
+    useEffect(function() {
+        table.setPageSize(5);
+    }, []);
+    var _table_getColumn_getFilterValue;
+    return /*#__PURE__*/ jsxs("div", {
+        className: "w-full",
+        children: [
+            /*#__PURE__*/ jsxs("div", {
+                className: "flex items-center py-4 gap-2",
+                children: [
+                    !(searchData === null || searchData === void 0 ? void 0 : searchData.disable) && /*#__PURE__*/ jsx(Input, {
+                        placeholder: searchData === null || searchData === void 0 ? void 0 : searchData.label,
+                        value: (_table_getColumn_getFilterValue = (_table_getColumn = table.getColumn(searchData === null || searchData === void 0 ? void 0 : searchData.name)) === null || _table_getColumn === void 0 ? void 0 : _table_getColumn.getFilterValue()) !== null && _table_getColumn_getFilterValue !== void 0 ? _table_getColumn_getFilterValue : "",
+                        onChange: function(event) {
+                            var _table_getColumn;
+                            return (_table_getColumn = table.getColumn(searchData === null || searchData === void 0 ? void 0 : searchData.name)) === null || _table_getColumn === void 0 ? void 0 : _table_getColumn.setFilterValue(event.target.value);
+                        },
+                        className: "max-w-sm"
+                    }),
+                    /*#__PURE__*/ jsx("div", {
+                        children: table.pagesize
+                    }),
+                    hiddenSort ? null : /*#__PURE__*/ jsxs(DropdownMenu, {
+                        children: [
+                            /*#__PURE__*/ jsx(DropdownMenuTrigger, {
+                                asChild: true,
+                                children: /*#__PURE__*/ jsxs(Button, {
+                                    variant: "outline",
+                                    className: "ml-auto",
+                                    children: [
+                                        "欄位篩選 ",
+                                        /*#__PURE__*/ jsx(ChevronDown, {
+                                            className: "ml-2 h-4 w-4"
+                                        })
+                                    ]
+                                })
+                            }),
+                            /*#__PURE__*/ jsx(DropdownMenuContent, {
+                                align: "end",
+                                children: table.getAllColumns().filter(function(column) {
+                                    return column.getCanHide();
+                                }).map(function(column) {
+                                    return /*#__PURE__*/ jsx(DropdownMenuCheckboxItem, {
+                                        className: "capitalize",
+                                        checked: column.getIsVisible(),
+                                        onCheckedChange: function(value) {
+                                            return column.toggleVisibility(!!value);
+                                        },
+                                        children: filterColumn[column.id]
+                                    }, column.id);
+                                })
+                            })
+                        ]
+                    })
+                ]
+            }),
+            /*#__PURE__*/ jsx("div", {
+                className: "rounded-md border",
+                children: /*#__PURE__*/ jsxs(Table, {
+                    children: [
+                        /*#__PURE__*/ jsx(TableHeader, {
+                            children: table.getHeaderGroups().map(function(headerGroup) {
+                                return /*#__PURE__*/ jsx(TableRow, {
+                                    children: headerGroup.headers.map(function(header) {
+                                        return /*#__PURE__*/ jsx(TableHead, {
+                                            children: header.isPlaceholder ? null : flexRender(header.column.columnDef.header, header.getContext())
+                                        }, header.id);
+                                    })
+                                }, headerGroup.id);
+                            })
+                        }),
+                        /*#__PURE__*/ jsx(TableBody, {
+                            children: ((_table_getRowModel_rows = table.getRowModel().rows) === null || _table_getRowModel_rows === void 0 ? void 0 : _table_getRowModel_rows.length) ? table.getRowModel().rows.map(function(row) {
+                                return /*#__PURE__*/ jsx(TableRow, {
+                                    "data-state": row.getIsSelected() && "selected",
+                                    children: row.getVisibleCells().map(function(cell) {
+                                        return /*#__PURE__*/ jsx(TableCell, {
+                                            className: "min-w-[2rem]",
+                                            children: flexRender(cell.column.columnDef.cell, cell.getContext())
+                                        }, cell.id);
+                                    })
+                                }, row.id);
+                            }) : /*#__PURE__*/ jsx(TableRow, {
+                                children: /*#__PURE__*/ jsx(TableCell, {
+                                    colSpan: columns.length,
+                                    className: "h-24 text-center",
+                                    children: "無資料"
+                                })
+                            })
+                        })
+                    ]
+                })
+            }),
+            hiddenPagination ? null : /*#__PURE__*/ jsx("div", {
+                className: "flex items-center justify-end space-x-2 py-4",
+                children: /*#__PURE__*/ jsx(TablePagination, {
+                    table: table
+                })
+            })
+        ]
+    });
+};
+
+var BasePagination = function(param) {
+    var table = param.table, total = param.total, handleLastPageClick = param.handleLastPageClick;
+    var setPageIndex = table.setPageIndex, getCanPreviousPage = table.getCanPreviousPage, getCanNextPage = table.getCanNextPage, getPageCount = table.getPageCount, previousPage = table.previousPage, nextPage = table.nextPage, getState = table.getState;
+    return /*#__PURE__*/ jsxs("div", {
+        className: "flex items-center flex-wrap",
+        children: [
+            /*#__PURE__*/ jsxs("div", {
+                className: "flex gap-2 items-center text-md font-medium",
+                children: [
+                    /*#__PURE__*/ jsx("span", {
+                        children: "每頁"
+                    }),
+                    /*#__PURE__*/ jsx("select", {
+                        name: "",
+                        id: "",
+                        onChange: function(e) {
+                            return table.setPageSize(e.target.value);
+                        },
+                        className: "border inline-flex gap-4 w-[70px] cursor-pointer rounded-md p-1",
+                        children: [
+                            "5",
+                            "10",
+                            "20",
+                            "50",
+                            "100"
+                        ].map(function(row) {
+                            return /*#__PURE__*/ jsx("option", {
+                                value: row,
+                                className: "mt-2",
+                                children: row
+                            }, row);
+                        })
+                    }),
+                    "筆"
+                ]
+            }),
+            /*#__PURE__*/ jsxs("div", {
+                className: "text-gray-400 text-sm pl-4",
+                children: [
+                    "共",
+                    total,
+                    "筆資料"
+                ]
+            }),
+            !total ? null : /*#__PURE__*/ jsxs("div", {
+                className: "flex gap-8 justify-end",
+                children: [
+                    /*#__PURE__*/ jsxs("div", {
+                        className: "flex w-[140px] items-center justify-start lg:justify-center text-md font-medium",
+                        children: [
+                            "頁數 \xa0 ",
+                            /*#__PURE__*/ jsx("strong", {
+                                children: getState().pagination.pageIndex + 1
+                            }),
+                            "\xa0 / ",
+                            getPageCount()
+                        ]
+                    }),
+                    /*#__PURE__*/ jsxs("div", {
+                        className: "flex gap-2 [&>button]:h-8 [&>button]:w-8 [&>button]:border [&>button]:border-gray-300 [&>button]:rounded-md [&>button]:grid [&>button]:place-items-center [&>button:disabled]:opacity-50 [&>button:disabled]:border-gray-200 ",
+                        children: [
+                            /*#__PURE__*/ jsx("button", {
+                                type: "button",
+                                disabled: !getCanPreviousPage(),
+                                onClick: function() {
+                                    return setPageIndex(0);
+                                },
+                                children: "<<"
+                            }),
+                            /*#__PURE__*/ jsx("button", {
+                                type: "button",
+                                disabled: !getCanPreviousPage(),
+                                onClick: previousPage,
+                                children: "<"
+                            }),
+                            /*#__PURE__*/ jsx("button", {
+                                type: "button",
+                                disabled: !getCanNextPage(),
+                                onClick: function() {
+                                    var nextPageIndex = getState().pagination.pageIndex + 1;
+                                    var lastPageIndex = getPageCount() - 1;
+                                    if (nextPageIndex === lastPageIndex && handleLastPageClick) {
+                                        handleLastPageClick();
+                                    } else {
+                                        nextPage();
+                                    }
+                                },
+                                children: ">"
+                            }),
+                            /*#__PURE__*/ jsx("button", {
+                                type: "button",
+                                disabled: !getCanNextPage(),
+                                onClick: function() {
+                                    return handleLastPageClick ? handleLastPageClick() : setPageIndex(getPageCount() - 1);
+                                },
+                                children: ">>"
+                            })
+                        ]
+                    })
+                ]
+            })
+        ]
+    });
+};
+
+function _array_like_to_array(arr, len) {
+    if (len == null || len > arr.length) len = arr.length;
+    for(var i = 0, arr2 = new Array(len); i < len; i++)arr2[i] = arr[i];
+    return arr2;
+}
+function _array_with_holes(arr) {
+    if (Array.isArray(arr)) return arr;
+}
+function _iterable_to_array_limit(arr, i) {
+    var _i = arr == null ? null : typeof Symbol !== "undefined" && arr[Symbol.iterator] || arr["@@iterator"];
+    if (_i == null) return;
+    var _arr = [];
+    var _n = true;
+    var _d = false;
+    var _s, _e;
+    try {
+        for(_i = _i.call(arr); !(_n = (_s = _i.next()).done); _n = true){
+            _arr.push(_s.value);
+            if (i && _arr.length === i) break;
+        }
+    } catch (err) {
+        _d = true;
+        _e = err;
+    } finally{
+        try {
+            if (!_n && _i["return"] != null) _i["return"]();
+        } finally{
+            if (_d) throw _e;
+        }
+    }
+    return _arr;
+}
+function _non_iterable_rest() {
+    throw new TypeError("Invalid attempt to destructure non-iterable instance.\\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
+}
+function _sliced_to_array(arr, i) {
+    return _array_with_holes(arr) || _iterable_to_array_limit(arr, i) || _unsupported_iterable_to_array(arr, i) || _non_iterable_rest();
+}
+function _unsupported_iterable_to_array(o, minLen) {
+    if (!o) return;
+    if (typeof o === "string") return _array_like_to_array(o, minLen);
+    var n = Object.prototype.toString.call(o).slice(8, -1);
+    if (n === "Object" && o.constructor) n = o.constructor.name;
+    if (n === "Map" || n === "Set") return Array.from(n);
+    if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _array_like_to_array(o, minLen);
+}
+var BaseTable = function(param) {
+    var data = param.data, mappingColumn = param.mappingColumn, columns = param.columns, searchData = param.searchData, paginationConfig = param.paginationConfig, SearchSelectCP = param.SearchSelectCP, _param_hiddenPagination = param.hiddenPagination, hiddenPagination = _param_hiddenPagination === void 0 ? false : _param_hiddenPagination, _param_hiddenSort = param.hiddenSort, hiddenSort = _param_hiddenSort === void 0 ? false : _param_hiddenSort;
+    var _table_getRowModel_rows, _table_getRowModel, _table_getRowModel_rows1, _table_getRowModel1;
+    var _useState = _sliced_to_array(useState([]), 2), sorting = _useState[0], setSorting = _useState[1];
+    var _useState1 = _sliced_to_array(useState([]), 2), columnFilters = _useState1[0], setColumnFilters = _useState1[1];
+    var _useState2 = _sliced_to_array(useState({}), 2), columnVisibility = _useState2[0], setColumnVisibility = _useState2[1];
+    var _useState3 = _sliced_to_array(useState({}), 2), rowSelection = _useState3[0], setRowSelection = _useState3[1];
+    var total = paginationConfig === null || paginationConfig === void 0 ? void 0 : paginationConfig.total;
+    var page = paginationConfig === null || paginationConfig === void 0 ? void 0 : paginationConfig.page;
+    var limit = paginationConfig === null || paginationConfig === void 0 ? void 0 : paginationConfig.limit;
+    var table = useReactTable({
+        data: data,
+        columns: columns,
+        onSortingChange: setSorting,
+        onColumnFiltersChange: setColumnFilters,
+        getCoreRowModel: getCoreRowModel(),
+        getPaginationRowModel: getPaginationRowModel(),
+        getSortedRowModel: getSortedRowModel(),
+        getFilteredRowModel: getFilteredRowModel(),
+        onColumnVisibilityChange: setColumnVisibility,
+        onRowSelectionChange: setRowSelection,
+        state: {
+            sorting: sorting,
+            columnFilters: columnFilters,
+            columnVisibility: columnVisibility,
+            rowSelection: rowSelection,
+            pagination: {
+                pageIndex: page - 1,
+                pageSize: limit
+            }
+        },
+        pageCount: Math.ceil(total / limit),
+        manualPagination: true,
+        onPaginationChange: function(updater) {
+            if (typeof updater === "function") {
+                paginationConfig.onPageChange(updater({
+                    pageIndex: page,
+                    pageSize: limit
+                }));
+            }
+        }
+    });
+    var handleLastPageClick = function() {
+        var lastPage = Math.ceil(total / limit);
+        paginationConfig.onPageChange({
+            pageIndex: lastPage,
+            pageSize: limit
+        });
+    };
+    return /*#__PURE__*/ jsxs("div", {
+        className: "w-full",
+        children: [
+            /*#__PURE__*/ jsxs("div", {
+                className: "flex items-center pb-4 gap-2 flex-wrap",
+                children: [
+                    (searchData === null || searchData === void 0 ? void 0 : searchData.length) ? searchData.map(function(item)  {
+                        var _table_getColumn;
+                        var _table_getColumn_getFilterValue;
+                        return jsx(Input, {
+                            placeholder: item === null || item === void 0 ? void 0 : item.label,
+                            value: (_table_getColumn_getFilterValue = (_table_getColumn = table.getColumn(item === null || item === void 0 ? void 0 : item.name)) === null || _table_getColumn === void 0 ? void 0 : _table_getColumn.getFilterValue()) !== null && _table_getColumn_getFilterValue !== void 0 ? _table_getColumn_getFilterValue : "",
+                            onChange: function(event) {
+                                var _table_getColumn;
+                                return (_table_getColumn = table.getColumn(item === null || item === void 0 ? void 0 : item.name)) === null || _table_getColumn === void 0 ? void 0 : _table_getColumn.setFilterValue(event.target.value);
+                            },
+                            className: "w-full lg:w-60"
+                        }, item === null || item === void 0 ? void 0 : item.name);
+                    }) : null,
+                    /*#__PURE__*/ jsx("div", {
+                        className: "w-64",
+                        children: SearchSelectCP
+                    }),
+                    hiddenSort ? null : /*#__PURE__*/ jsxs(DropdownMenu, {
+                        children: [
+                            /*#__PURE__*/ jsx(DropdownMenuTrigger, {
+                                asChild: true,
+                                children: /*#__PURE__*/ jsxs(Button, {
+                                    variant: "outline",
+                                    className: "ml-auto",
+                                    children: [
+                                        "欄位篩選 ",
+                                        /*#__PURE__*/ jsx(ChevronDown, {
+                                            className: "ml-2 h-4 w-4"
+                                        })
+                                    ]
+                                })
+                            }),
+                            /*#__PURE__*/ jsx(DropdownMenuContent, {
+                                align: "end",
+                                children: table.getAllColumns().filter(function(column) {
+                                    return column === null || column === void 0 ? void 0 : column.getCanHide();
+                                }).map(function(column) {
+                                    return /*#__PURE__*/ jsx(DropdownMenuCheckboxItem, {
+                                        className: "capitalize",
+                                        checked: column === null || column === void 0 ? void 0 : column.getIsVisible(),
+                                        onCheckedChange: function(value) {
+                                            return column === null || column === void 0 ? void 0 : column.toggleVisibility(!!value);
+                                        },
+                                        children: mappingColumn[column === null || column === void 0 ? void 0 : column.id]
+                                    }, column === null || column === void 0 ? void 0 : column.id);
+                                })
+                            })
+                        ]
+                    })
+                ]
+            }),
+            /*#__PURE__*/ jsx("div", {
+                className: "rounded-md border",
+                children: /*#__PURE__*/ jsxs(Table, {
+                    children: [
+                        /*#__PURE__*/ jsx(TableHeader, {
+                            children: table.getHeaderGroups().map(function(headerGroup) {
+                                return /*#__PURE__*/ jsx(TableRow, {
+                                    children: headerGroup === null || headerGroup === void 0 ? void 0 : headerGroup.headers.map(function(header) {
+                                        var _header_column_columnDef, _header_column;
+                                        return /*#__PURE__*/ jsx(TableHead, {
+                                            children: header.isPlaceholder ? null : flexRender(header === null || header === void 0 ? void 0 : (_header_column = header.column) === null || _header_column === void 0 ? void 0 : (_header_column_columnDef = _header_column.columnDef) === null || _header_column_columnDef === void 0 ? void 0 : _header_column_columnDef.header, header === null || header === void 0 ? void 0 : header.getContext())
+                                        }, header.id);
+                                    })
+                                }, headerGroup === null || headerGroup === void 0 ? void 0 : headerGroup.id);
+                            })
+                        }),
+                        /*#__PURE__*/ jsx(TableBody, {
+                            children: ((_table_getRowModel = table.getRowModel()) === null || _table_getRowModel === void 0 ? void 0 : (_table_getRowModel_rows = _table_getRowModel.rows) === null || _table_getRowModel_rows === void 0 ? void 0 : _table_getRowModel_rows.length) ? (_table_getRowModel1 = table.getRowModel()) === null || _table_getRowModel1 === void 0 ? void 0 : (_table_getRowModel_rows1 = _table_getRowModel1.rows) === null || _table_getRowModel_rows1 === void 0 ? void 0 : _table_getRowModel_rows1.map(function(row) {
+                                return /*#__PURE__*/ jsx(TableRow, {
+                                    "data-state": (row === null || row === void 0 ? void 0 : row.getIsSelected()) && "selected",
+                                    children: row === null || row === void 0 ? void 0 : row.getVisibleCells().map(function(cell) {
+                                        var _cell_column_columnDef, _cell_column;
+                                        return /*#__PURE__*/ jsx(TableCell, {
+                                            className: "min-w-[2rem]",
+                                            children: flexRender(cell === null || cell === void 0 ? void 0 : (_cell_column = cell.column) === null || _cell_column === void 0 ? void 0 : (_cell_column_columnDef = _cell_column.columnDef) === null || _cell_column_columnDef === void 0 ? void 0 : _cell_column_columnDef.cell, cell === null || cell === void 0 ? void 0 : cell.getContext())
+                                        }, cell === null || cell === void 0 ? void 0 : cell.id);
+                                    })
+                                }, row === null || row === void 0 ? void 0 : row.id);
+                            }) : /*#__PURE__*/ jsx(TableRow, {
+                                children: /*#__PURE__*/ jsx(TableCell, {
+                                    colSpan: columns === null || columns === void 0 ? void 0 : columns.length,
+                                    className: "h-24 text-center",
+                                    children: "無資料"
+                                })
+                            })
+                        })
+                    ]
+                })
+            }),
+            hiddenPagination ? null : /*#__PURE__*/ jsx("div", {
+                className: "flex items-center justify-end space-x-2 py-4",
+                children: /*#__PURE__*/ jsx(BasePagination, {
+                    table: table,
+                    total: total,
+                    handleLastPageClick: handleLastPageClick
+                })
+            })
+        ]
+    });
+};
+
+export { BaseTable, DataTable };