@ballistix.digital/react-components 0.4.57 → 0.4.59

package/dist/index.d.ts

@@ -1,8 +1,8 @@
-import React, { FC, ReactNode, RefObject, ReactElement, HTMLInputTypeAttribute, ElementType, Dispatch, SetStateAction } from 'react';
+import React, { FC, ReactNode, RefObject, ReactElement, HTMLInputTypeAttribute, Dispatch, SetStateAction, ElementType } from 'react';
 import { DeepPartial as DeepPartial$1 } from 'types/DeepPartial';
 import { Menu } from '@headlessui/react';
 import { IconName } from '@fortawesome/fontawesome-svg-core';
-import { ColumnDef, SortingState, ColumnOrderState } from '@tanstack/react-table';
+import { ColumnDef, SortingState, ColumnOrderState, Table } from '@tanstack/react-table';
 import { TButtonElementStyles as TButtonElementStyles$1 } from 'components/Element/Button';
 import { TDropdownElementStyles as TDropdownElementStyles$1 } from 'components/Element/Dropdown';
 import { TPagePaginationNavigationStyles as TPagePaginationNavigationStyles$1 } from 'components/Navigation/PagePagination';
@@ -246,11 +246,11 @@ declare const LayoutPanel: {
     Section: React.FC<TSectionProps>;
 };
 
-type TData = any;
-type VisibilityState = {
+type TData$1 = any;
+type VisibilityState$1 = {
     [key: string]: boolean;
 };
-type TTableListProps<TData> = {
+type TTableListProps$1<TData> = {
     id: string;
     columns: ColumnDef<TData>[];
     data: TData[];
@@ -282,12 +282,12 @@ type TTableListProps<TData> = {
     };
     onChange?: ({ sorting, visibility, order, }: {
         sorting: SortingState;
-        visibility: VisibilityState;
+        visibility: VisibilityState$1;
         order: ColumnOrderState;
     }) => void;
     onPaginate?: (current: number) => void;
 };
-declare const TableList: FC<TTableListProps<TData>>;
+declare const TableList: FC<TTableListProps$1<TData$1>>;
 
 declare const base$7: {
     container: string;
@@ -345,6 +345,44 @@ declare const base$7: {
 };
 type TTableListStyles = DeepPartial$1<typeof base$7>;
 
+type TData = any;
+type VisibilityState = {
+    [key: string]: boolean;
+};
+type Params = {
+    table: Table<any>;
+    sorting: SortingState;
+    columnVisibility: VisibilityState;
+    columnOrder: ColumnOrderState;
+    setSorting: Dispatch<SetStateAction<SortingState>>;
+    setColumnVisibility: Dispatch<SetStateAction<VisibilityState>>;
+    setColumnOrder: Dispatch<SetStateAction<ColumnOrderState>>;
+};
+type TTableListProps<TData> = {
+    id: string;
+    table: {
+        columns: ColumnDef<TData>[];
+        data: TData[];
+        pages: {
+            current: number;
+            total: number;
+        };
+        options?: {
+            defaultOrder?: string[];
+            defaultVisibility?: string[];
+            excelExportFileName?: string;
+            isStriped?: boolean;
+            hasStickyHeader?: boolean;
+            hasVerticalSeparators?: boolean;
+        };
+    };
+    isLoading?: boolean;
+    head?: (params: Params) => ReactNode;
+    foot?: (params: Params) => ReactNode;
+    onChange?: (params: Params) => void;
+};
+declare const TableList2: FC<TTableListProps<TData>>;
+
 declare const base$6: {
     container: string;
     list: string;
@@ -707,4 +745,4 @@ type TProps = {
 };
 declare const SlideOverOverlay: FC<TProps>;
 
-export { AvatarElement, BadgeElement, BreadcrumbsNavigation, ButtonElement, ButtonGroupElement, ContainerLayout, DividerLayout, DropdownElement, IconElement, InputGroupForm, ListContainerLayout, MediaObjectLayout, ModalOverlay, NotificationOverlay, PagePaginationNavigation, LayoutPanel as PanelLayout, PanelPaginationNavigation, SlideOverOverlay, TInputGroupFormProps, TInputGroupStyles, TTableListProps, TTableListStyles, TabNavigation, TableList, VerticalNavigation };
+export { AvatarElement, BadgeElement, BreadcrumbsNavigation, ButtonElement, ButtonGroupElement, ContainerLayout, DividerLayout, DropdownElement, IconElement, InputGroupForm, ListContainerLayout, MediaObjectLayout, ModalOverlay, NotificationOverlay, PagePaginationNavigation, LayoutPanel as PanelLayout, PanelPaginationNavigation, SlideOverOverlay, TInputGroupFormProps, TInputGroupStyles, TTableListProps$1 as TTableListProps, TTableListStyles, TabNavigation, TableList, TableList2, VerticalNavigation };

package/dist/index.esm.js

@@ -76,10 +76,10 @@ var deepCopyObject = function (object) {
 var AvatarElement = function (props) {
     var src = props.src, placeholder = props.placeholder, children = props.children, url = props.url, _a = props.size, size = _a === void 0 ? 'md' : _a, _b = props.figure, figure = _b === void 0 ? 'block' : _b, status = props.status, isDisabled = props.isDisabled, isLoading = props.isLoading, stylesOverrides = props.styles;
     var handleGenerateStyle = function () {
-        var result = deepCopyObject(styles$j.base);
-        var keys = calculateNestedKeys(styles$j.base);
+        var result = deepCopyObject(styles$k.base);
+        var keys = calculateNestedKeys(styles$k.base);
         keys.forEach(function (key) {
-            set(result, key, toClassName(get(styles$j.base, key), size && get(styles$j[size], key), figure && get(styles$j[figure], key), status && get(styles$j[status], key), isDisabled && get(styles$j.disabled, key), isLoading && get(styles$j.loading, key), get(stylesOverrides, key)));
+            set(result, key, toClassName(get(styles$k.base, key), size && get(styles$k[size], key), figure && get(styles$k[figure], key), status && get(styles$k[status], key), isDisabled && get(styles$k.disabled, key), isLoading && get(styles$k.loading, key), get(stylesOverrides, key)));
         });
         return result;
     };
@@ -175,7 +175,7 @@ var online = {
 var blocked = {
     indicator: 'bg-red-400',
 };
-var styles$j = {
+var styles$k = {
     base: base$i,
     xs: xs$4,
     sm: sm$5,
@@ -194,10 +194,10 @@ var styles$j = {
 var BadgeElement = function (props) {
     var children = props.children, _a = props.color, color = _a === void 0 ? 'gray' : _a, _b = props.type, type = _b === void 0 ? 'normal' : _b, _c = props.size, size = _c === void 0 ? 'sm' : _c, _d = props.figure, figure = _d === void 0 ? 'block' : _d, isDisabled = props.isDisabled, isLoading = props.isLoading, onClose = props.onClose, stylesOverrides = props.styles;
     var handleGenerateStyle = function () {
-        var result = deepCopyObject(styles$i.base);
-        var keys = calculateNestedKeys(styles$i.base);
+        var result = deepCopyObject(styles$j.base);
+        var keys = calculateNestedKeys(styles$j.base);
         keys.forEach(function (key) {
-            set(result, key, toClassName(get(styles$i.base, key), type && get(styles$i[type], key), color && get(styles$i[color], key), size && get(styles$i[size], key), figure && get(styles$i[figure], key), isDisabled && get(styles$i.disabled, key), isLoading && get(styles$i.loading, key), get(stylesOverrides, key)));
+            set(result, key, toClassName(get(styles$j.base, key), type && get(styles$j[type], key), color && get(styles$j[color], key), size && get(styles$j[size], key), figure && get(styles$j[figure], key), isDisabled && get(styles$j.disabled, key), isLoading && get(styles$j.loading, key), get(stylesOverrides, key)));
         });
         return result;
     };
@@ -292,7 +292,7 @@ var disabled$2 = {
 var loading$1 = {
     container: 'cursor-progress',
 };
-var styles$i = {
+var styles$j = {
     base: base$h,
     normal: normal$3,
     indicator: indicator,
@@ -319,10 +319,10 @@ var styles$i = {
 var ButtonElement = function (props) {
     var children = props.children, innerRef = props.innerRef, _a = props.htmlType, htmlType = _a === void 0 ? 'button' : _a, _b = props.type, type = _b === void 0 ? 'primary' : _b, _c = props.size, size = _c === void 0 ? 'md' : _c, _d = props.figure, figure = _d === void 0 ? 'block' : _d, _e = props.status, status = _e === void 0 ? 'idle' : _e, isDisabled = props.isDisabled, stylesOverrides = props.styles, onClick = props.onClick;
     var handleGenerateStyle = function () {
-        var result = deepCopyObject(styles$h.base);
-        var keys = calculateNestedKeys(styles$h.base);
+        var result = deepCopyObject(styles$i.base);
+        var keys = calculateNestedKeys(styles$i.base);
         keys.forEach(function (key) {
-            set(result, key, toClassName(get(styles$h.base, key), type && get(styles$h[type], key), size && get(styles$h[size], key), figure && get(styles$h[figure], key), status && get(styles$h[status], key), isDisabled && get(styles$h.disabled, key), get(stylesOverrides, key)));
+            set(result, key, toClassName(get(styles$i.base, key), type && get(styles$i[type], key), size && get(styles$i[size], key), figure && get(styles$i[figure], key), status && get(styles$i[status], key), isDisabled && get(styles$i.disabled, key), get(stylesOverrides, key)));
         });
         return result;
     };
@@ -382,7 +382,7 @@ var error = {
 var disabled$1 = {
     container: '!opacity-20 !cursor-not-allowed',
 };
-var styles$h = {
+var styles$i = {
     base: base$g,
     primary: primary,
     secondary: secondary,
@@ -404,10 +404,10 @@ var styles$h = {
 var ButtonGroupElement = function (props) {
     var children = props.children, stylesOverrides = props.styles;
     var handleGenerateStyle = function () {
-        var result = deepCopyObject(styles$g.base);
-        var keys = calculateNestedKeys(styles$g.base);
+        var result = deepCopyObject(styles$h.base);
+        var keys = calculateNestedKeys(styles$h.base);
         keys.forEach(function (key) {
-            set(result, key, toClassName(get(styles$g.base, key), get(stylesOverrides, key)));
+            set(result, key, toClassName(get(styles$h.base, key), get(stylesOverrides, key)));
         });
         return result;
     };
@@ -431,17 +431,17 @@ var base$f = {
     button: '-ml-px relative inline-flex items-center px-4 py-2 border border-gray-300 bg-white text-sm font-medium text-gray-700 hover:bg-gray-50 focus:z-10 focus:outline-none focus:ring-1 focus:ring-primary-500 focus:border-primary-500',
     lastButton: '-ml-px relative inline-flex items-center px-4 py-2 rounded-r-md border border-gray-300 bg-white text-sm font-medium text-gray-700 hover:bg-gray-50 focus:z-10 focus:outline-none focus:ring-1 focus:ring-primary-500 focus:border-primary-500',
 };
-var styles$g = {
+var styles$h = {
     base: base$f,
 };
 
 var Container$3 = function (props) {
     var children = props.children, label = props.label, _a = props.type, type = _a === void 0 ? 'button' : _a, _b = props.direction, direction = _b === void 0 ? 'bottom-left' : _b, stylesOverrides = props.styles;
     var handleGenerateStyle = function () {
-        var result = deepCopyObject(styles$f.base);
-        var keys = calculateNestedKeys(styles$f.base);
+        var result = deepCopyObject(styles$g.base);
+        var keys = calculateNestedKeys(styles$g.base);
         keys.forEach(function (key) {
-            set(result, key, toClassName(get(styles$f.base, key), type && get(styles$f[type], key), direction && get(styles$f[direction], key), get(stylesOverrides, key)));
+            set(result, key, toClassName(get(styles$g.base, key), type && get(styles$g[type], key), direction && get(styles$g[direction], key), get(stylesOverrides, key)));
         });
         return result;
     };
@@ -474,7 +474,7 @@ var topLeft = {
 var topRight = {
     items: 'origin-bottom-left left-0 bottom-0',
 };
-var styles$f = {
+var styles$g = {
     base: base$e,
     button: button,
     compact: compact,
@@ -525,10 +525,10 @@ var InputGroupForm = function (props) {
         replacement: (_a = {}, _a[(_b = mask === null || mask === void 0 ? void 0 : mask.replacementCharacter) !== null && _b !== void 0 ? _b : 'X'] = /\d|\D/, _a),
     });
     var handleGenerateStyle = function () {
-        var result = deepCopyObject(styles$e.base);
-        var keys = calculateNestedKeys(styles$e.base);
+        var result = deepCopyObject(styles$f.base);
+        var keys = calculateNestedKeys(styles$f.base);
         keys.forEach(function (key) {
-            set(result, key, toClassName(get(styles$e.base, key), leading !== undefined && get(styles$e.leading, key), trailing !== undefined && get(styles$e.trailing, key), type && get(styles$e[type], key), isTouched === true && !isValid && get(styles$e.invalid, key), isDisabled && get(styles$e.disabled, key), get(stylesOverrides, key)));
+            set(result, key, toClassName(get(styles$f.base, key), leading !== undefined && get(styles$f.leading, key), trailing !== undefined && get(styles$f.trailing, key), type && get(styles$f[type], key), isTouched === true && !isValid && get(styles$f.invalid, key), isDisabled && get(styles$f.disabled, key), get(stylesOverrides, key)));
         });
         return result;
     };
@@ -598,7 +598,7 @@ var invalid = {
 var disabled = {
     input: 'block w-full rounded-md border-0 text-gray-900 shadow-sm ring-1 ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-primary-600 disabled:cursor-not-allowed disabled:bg-gray-50 disabled:text-gray-500 disabled:ring-gray-200 sm:text-sm sm:leading-6',
 };
-var styles$e = {
+var styles$f = {
     base: base$d,
     leading: leading,
     trailing: trailing,
@@ -614,10 +614,10 @@ var styles$e = {
 var ContainerLayout = function (props) {
     var children = props.children, _a = props.type, type = _a === void 0 ? 'break' : _a, stylesOverrides = props.styles;
     var handleGenerateStyle = function () {
-        var result = deepCopyObject(styles$d.base);
-        var keys = calculateNestedKeys(styles$d.base);
+        var result = deepCopyObject(styles$e.base);
+        var keys = calculateNestedKeys(styles$e.base);
         keys.forEach(function (key) {
-            set(result, key, toClassName(get(styles$d.base, key), type && get(styles$d[type], key), get(stylesOverrides, key)));
+            set(result, key, toClassName(get(styles$e.base, key), type && get(styles$e[type], key), get(stylesOverrides, key)));
         });
         return result;
     };
@@ -654,7 +654,7 @@ var center$3 = {
 var fill$1 = {
     container: 'max-w-7xl mx-auto sm:px-6 lg:px-8',
 };
-var styles$d = {
+var styles$e = {
     base: base$c,
     break: breakStyles,
     center: center$3,
@@ -664,10 +664,10 @@ var styles$d = {
 var DividerLayout = function (props) {
     var children = props.children, _a = props.type, type = _a === void 0 ? 'left' : _a, stylesOverrides = props.styles;
     var handleGenerateStyle = function () {
-        var result = deepCopyObject(styles$c.base);
-        var keys = calculateNestedKeys(styles$c.base);
+        var result = deepCopyObject(styles$d.base);
+        var keys = calculateNestedKeys(styles$d.base);
         keys.forEach(function (key) {
-            set(result, key, toClassName(get(styles$c.base, key), type && get(styles$c[type], key), get(stylesOverrides, key)));
+            set(result, key, toClassName(get(styles$d.base, key), type && get(styles$d[type], key), get(stylesOverrides, key)));
         });
         return result;
     };
@@ -691,7 +691,7 @@ var center$2 = {
 var right = {
     body: 'justify-end',
 };
-var styles$c = {
+var styles$d = {
     base: base$b,
     left: left,
     center: center$2,
@@ -701,10 +701,10 @@ var styles$c = {
 var ListContainerLayout = function (props) {
     var children = props.children, _a = props.type, type = _a === void 0 ? 'fill' : _a, stylesOverrides = props.styles;
     var handleGenerateStyle = function () {
-        var result = deepCopyObject(styles$b.base);
-        var keys = calculateNestedKeys(styles$b.base);
+        var result = deepCopyObject(styles$c.base);
+        var keys = calculateNestedKeys(styles$c.base);
         keys.forEach(function (key) {
-            set(result, key, toClassName(get(styles$b.base, key), type && get(styles$b[type], key), get(stylesOverrides, key)));
+            set(result, key, toClassName(get(styles$c.base, key), type && get(styles$c[type], key), get(stylesOverrides, key)));
         });
         return result;
     };
@@ -746,7 +746,7 @@ var cardSticky = {
     list: 'space-y-3',
     item: 'bg-white shadow overflow-hidden px-4 py-4 sm:px-6 sm:rounded-md',
 };
-var styles$b = {
+var styles$c = {
     base: base$a,
     fill: fill,
     'fill-sticky': fillSticky,
@@ -759,10 +759,10 @@ var styles$b = {
 var MediaObjectLayout = function (props) {
     var title = props.title, paragraph = props.paragraph, customFigure = props.figure, _a = props.type, type = _a === void 0 ? 'top' : _a, stylesOverrides = props.styles;
     var handleGenerateStyle = function () {
-        var result = deepCopyObject(styles$a.base);
-        var keys = calculateNestedKeys(styles$a.base);
+        var result = deepCopyObject(styles$b.base);
+        var keys = calculateNestedKeys(styles$b.base);
         keys.forEach(function (key) {
-            set(result, key, toClassName(get(styles$a.base, key), type && get(styles$a[type], key), get(stylesOverrides, key)));
+            set(result, key, toClassName(get(styles$b.base, key), type && get(styles$b[type], key), get(stylesOverrides, key)));
         });
         return result;
     };
@@ -835,7 +835,7 @@ var wideReversed = {
     figure: 'mb-4 md:mb-0 sm:mr-4 sm:mb-4',
     svg: 'h-32 w-full sm:w-32',
 };
-var styles$a = {
+var styles$b = {
     base: base$9,
     top: top,
     'top-reversed': topReversed,
@@ -854,10 +854,10 @@ var styles$a = {
 var Container$2 = function (props) {
     var children = props.children, _a = props.type, type = _a === void 0 ? 'normal' : _a, stylesOverrides = props.styles;
     var handleGenerateStyle = function () {
-        var result = deepCopyObject(styles$9.base);
-        var keys = calculateNestedKeys(styles$9.base);
+        var result = deepCopyObject(styles$a.base);
+        var keys = calculateNestedKeys(styles$a.base);
         keys.forEach(function (key) {
-            set(result, key, toClassName(get(styles$9.base, key), type && get(styles$9[type], key), get(stylesOverrides, key)));
+            set(result, key, toClassName(get(styles$a.base, key), type && get(styles$a[type], key), get(stylesOverrides, key)));
         });
         return result;
     };
@@ -867,10 +867,10 @@ var Container$2 = function (props) {
 var Section = function (props) {
     var children = props.children, stylesOverrides = props.styles;
     var handleGenerateStyle = function () {
-        var result = deepCopyObject(styles$9.base);
-        var keys = calculateNestedKeys(styles$9.base);
+        var result = deepCopyObject(styles$a.base);
+        var keys = calculateNestedKeys(styles$a.base);
         keys.forEach(function (key) {
-            set(result, key, toClassName(get(styles$9.base, key), get(stylesOverrides, key)));
+            set(result, key, toClassName(get(styles$a.base, key), get(stylesOverrides, key)));
         });
         return result;
     };
@@ -892,7 +892,7 @@ var normal$1 = {
 var sticky$1 = {
     container: 'sm:rounded-lg',
 };
-var styles$9 = {
+var styles$a = {
     base: base$8,
     normal: normal$1,
     sticky: sticky$1,
@@ -998,10 +998,10 @@ var PanelPaginationNavigation = function (props) {
         }
     }, [defaultValue]);
     var handleGenerateStyle = function () {
-        var result = deepCopyObject(styles$8.base);
-        var keys = calculateNestedKeys(styles$8.base);
+        var result = deepCopyObject(styles$9.base);
+        var keys = calculateNestedKeys(styles$9.base);
         keys.forEach(function (key) {
-            set(result, key, toClassName(get(styles$8.base, key), get(stylesOverrides, key)));
+            set(result, key, toClassName(get(styles$9.base, key), get(stylesOverrides, key)));
         });
         return result;
     };
@@ -1062,7 +1062,7 @@ var base$7 = {
     label: 'sr-only',
     icon: 'w-5 h-5',
 };
-var styles$8 = {
+var styles$9 = {
     base: base$7,
 };
 
@@ -1071,10 +1071,10 @@ var TableList = function (props) {
     var id = props.id, columns = props.columns, data = props.data, page = props.page, children = props.children, defaultOrder = props.defaultOrder, defaultVisibility = props.defaultVisibility, _f = props.type, type = _f === void 0 ? 'normal' : _f, isLoading = props.isLoading, _g = props.isStriped, isStriped = _g === void 0 ? false : _g, _h = props.hasStickyHeader, hasStickyHeader = _h === void 0 ? false : _h, _j = props.hasVerticalSeparators, hasVerticalSeparators = _j === void 0 ? false : _j, _k = props.areControlsVisible, areControlsVisible = _k === void 0 ? true : _k, customControls = props.customControls, _l = props.exportFileName, exportFileName = _l === void 0 ? 'table-export' : _l, stylesOverrides = props.styles, onChange = props.onChange, onPaginate = props.onPaginate;
     var _m = useExcel(), generate = _m.generate, write = _m.write;
     var handleGenerateStyle = function () {
-        var result = deepCopyObject(styles$7.base);
-        var keys = calculateNestedKeys(styles$7.base);
+        var result = deepCopyObject(styles$8.base);
+        var keys = calculateNestedKeys(styles$8.base);
         keys.forEach(function (key) {
-            set(result, key, toClassName(get(styles$7.base, key), type && get(styles$7[type], key), hasStickyHeader && get(styles$7.sticky, key), hasVerticalSeparators && get(styles$7.separated, key), areControlsVisible && get(styles$7.controlled, key), get(stylesOverrides, key)));
+            set(result, key, toClassName(get(styles$8.base, key), type && get(styles$8[type], key), hasStickyHeader && get(styles$8.sticky, key), hasVerticalSeparators && get(styles$8.separated, key), areControlsVisible && get(styles$8.controlled, key), get(stylesOverrides, key)));
         });
         return result;
     };
@@ -1311,7 +1311,7 @@ var controlled = {
         container: '!flex',
     },
 };
-var styles$7 = {
+var styles$8 = {
     base: base$6,
     normal: normal,
     panel: panel$1,
@@ -1321,6 +1321,98 @@ var styles$7 = {
     controlled: controlled,
 };
 
+var TableList2 = function (props) {
+    var config = props.table, head = props.head, foot = props.foot, isLoading = props.isLoading, onChange = props.onChange;
+    var _a = useState([]), sorting = _a[0], setSorting = _a[1];
+    var _b = useState({}), columnVisibility = _b[0], setColumnVisibility = _b[1];
+    var _c = useState([]), columnOrder = _c[0], setColumnOrder = _c[1];
+    var table = useReactTable({
+        getCoreRowModel: getCoreRowModel(),
+        columns: config.columns,
+        data: config.data,
+        state: {
+            sorting: sorting,
+            columnVisibility: columnVisibility,
+            columnOrder: columnOrder,
+        },
+        manualPagination: true,
+        manualSorting: true,
+        onSortingChange: setSorting,
+        onColumnVisibilityChange: setColumnVisibility,
+        onColumnOrderChange: setColumnOrder,
+    });
+    var state = useMemo(function () { return ({
+        table: table,
+        //
+        sorting: sorting,
+        columnVisibility: columnVisibility,
+        columnOrder: columnOrder,
+        //
+        setSorting: setSorting,
+        setColumnVisibility: setColumnVisibility,
+        setColumnOrder: setColumnOrder,
+    }); }, [columnOrder, columnVisibility, sorting, table]);
+    // Trigger onChange handler when state changes.
+    useEffect(function () {
+        if (state) {
+            onChange && onChange(state);
+        }
+    }, [onChange, state]);
+    return (jsxs("div", __assign({ className: styles$7.container }, { children: [jsx("div", __assign({ className: styles$7.head }, { children: head && head(state) })), jsx("div", __assign({ className: "" }, { children: jsx("div", __assign({ className: "mt-8 flow-root" }, { children: jsx("div", __assign({ className: "" }, { children: jsxs("div", __assign({ className: "inline-block min-w-full py-2 align-middle" }, { children: [jsxs("table", __assign({ className: "min-w-full border-separate border-spacing-0" }, { children: [jsx("thead", { children: table === null || table === void 0 ? void 0 : table.getHeaderGroups().map(function (headerGroup) { return (jsx("tr", { children: headerGroup.headers.map(function (header) { return (jsxs("th", __assign({ colSpan: header.colSpan, className: toClassName(styles$7.body.table.head.cell, header.column.getCanSort() && 'cursor-pointer'), onClick: header.column.getToggleSortingHandler() }, { children: [header.isPlaceholder
+                                                            ? null
+                                                            : flexRender(header.column.columnDef.header, header.getContext()), header.column.getCanSort() && (jsx("span", __assign({ className: toClassName(styles$7.sortIndicator.container, header.column.getIsSorted()
+                                                                ? styles$7.sortIndicator.isSorted
+                                                                : styles$7.sortIndicator.isNotSorted) }, { children: jsx(ChevronDownIcon, { className: toClassName(styles$7.sortIndicator.icon.container, header.column.getIsSorted() === 'asc' &&
+                                                                    '-scale-100'), "aria-hidden": "true" }) })))] }), header.id)); }) }, headerGroup.id)); }) }), !isLoading && (jsx("tbody", __assign({ className: styles$7.body.table.body.container }, { children: table === null || table === void 0 ? void 0 : table.getRowModel().rows.map(function (row, index) {
+                                                var _a;
+                                                return (jsx("tr", __assign({ className: toClassName(styles$7.body.table.body.row, ((_a = config.options) === null || _a === void 0 ? void 0 : _a.isStriped) &&
+                                                        index % 2 === 0 &&
+                                                        'bg-gray-50') }, { children: row.getVisibleCells().map(function (cell) {
+                                                        var _a, _b, _c;
+                                                        return (jsx("td", __assign({ className: toClassName(styles$7.body.table.body.cell, ((_a = config === null || config === void 0 ? void 0 : config.options) === null || _a === void 0 ? void 0 : _a.hasStickyHeader) &&
+                                                                index !==
+                                                                    ((_c = (_b = table === null || table === void 0 ? void 0 : table.getState()) === null || _b === void 0 ? void 0 : _b.pagination) === null || _c === void 0 ? void 0 : _c.pageSize) - 1 &&
+                                                                'border-b border-gray-200') }, { children: flexRender(cell.column.columnDef.cell, cell.getContext()) }), cell.id));
+                                                    }) }), row.id));
+                                            }) })))] })), isLoading && (jsx("div", __assign({ className: "flex flex-col gap-y-2 w-full pt-5" }, { children: new Array(8).fill(undefined).map(function (index) { return (jsxs("div", __assign({ className: "flex gap-2" }, { children: [jsx("div", { className: "w-20 h-14 rounded-md bg-gray-100 animate-pulse" }), jsx("div", { className: "w-full h-14 rounded-md bg-gray-100 animate-pulse" })] }), index)); }) })))] })) })) })) })), jsx("div", __assign({ className: styles$7.foot }, { children: foot && foot(state) }))] })));
+};
+
+var styles$7 = {
+    container: '',
+    head: '',
+    body: {
+        container: 'flex flex-col',
+        wrapper: '-my-2',
+        content: '',
+        styleWrapper: 'overflow-scroll w-screen md:w-auto md:overflow-auto pr-12 md:pr-0',
+        table: {
+            container: 'min-w-full divide-y divide-gray-300 ',
+            head: {
+                container: '',
+                row: '',
+                cell: 'py-3.5 px-3 text-left text-sm font-semibold text-gray-900 group',
+                checkbox: 'absolute left-4 top-1/2 -mt-2 h-4 w-4 rounded border-gray-300 text-primary-600 focus:ring-primary-500 sm:left-6',
+            },
+            body: {
+                container: 'divide-y divide-gray-200',
+                row: '',
+                cell: 'whitespace-nowrap py-4 px-3 text-sm text-gray-500',
+                checkbox: 'absolute left-4 top-1/2 -mt-2 h-4 w-4 rounded border-gray-300 text-primary-600 focus:ring-primary-500 sm:left-6',
+                indicator: 'absolute inset-y-0 left-0 w-0.5 bg-primary-600',
+            },
+        },
+    },
+    foot: '',
+    sortIndicator: {
+        container: 'ml-2 translate-y-1 inline-flex items-center flex-none rounded',
+        isSorted: 'bg-gray-100 text-gray-900 group-hover:bg-gray-200',
+        isNotSorted: 'invisible text-gray-400 group-hover:visible group-focus:visible',
+        icon: {
+            container: 'h-5 w-5',
+        },
+    },
+};
+
 var createColumnHelper = function () {
     return createColumnHelper$1();
 };
@@ -1990,5 +2082,5 @@ var styles = {
     xl: xl,
 };
 
-export { AvatarElement, BadgeElement, BreadcrumbsNavigation, ButtonElement, ButtonGroupElement, ContainerLayout, DividerLayout, DropdownElement, IconElement, InputGroupForm, ListContainerLayout, MediaObjectLayout, ModalOverlay, NotificationOverlay, PagePaginationNavigation, LayoutPanel as PanelLayout, PanelPaginationNavigation, SlideOverOverlay, TabNavigation, TableList, VerticalNavigation, createColumnHelper };
+export { AvatarElement, BadgeElement, BreadcrumbsNavigation, ButtonElement, ButtonGroupElement, ContainerLayout, DividerLayout, DropdownElement, IconElement, InputGroupForm, ListContainerLayout, MediaObjectLayout, ModalOverlay, NotificationOverlay, PagePaginationNavigation, LayoutPanel as PanelLayout, PanelPaginationNavigation, SlideOverOverlay, TabNavigation, TableList, TableList2, VerticalNavigation, createColumnHelper };
 //# sourceMappingURL=index.esm.js.map