namirasoft-site-react 1.4.552 → 1.4.554

package/dist/components/NSRow.module.css

@@ -1,18 +1,18 @@
-.ns_row {
-    display: flex;
-    flex-direction: column;
-    align-items: flex-start;
-    gap: 16px;
-    margin: 0;
-    justify-content: center;
-    width: max-content;
-    max-width: 100%;
-    width: 100%;
-}
-
-@media only screen and (min-width: 768px) {
-    .ns_row {
-        flex-direction: row;
-        flex-wrap: wrap;
-    }
+.ns_row {
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+    gap: 16px;
+    margin: 0;
+    justify-content: center;
+    width: max-content;
+    max-width: 100%;
+    width: 100%;
+}
+
+@media only screen and (min-width: 768px) {
+    .ns_row {
+        flex-direction: row;
+        flex-wrap: wrap;
+    }
 }

package/dist/components/NSSection.d.ts

@@ -4,4 +4,4 @@ export interface NSSectionProps extends IBaseComponentProps {
     children: ReactNode;
     onEnterPressed?: () => void;
 }
-export declare function NSSection(props: NSSectionProps): import("react").JSX.Element;
+export declare function NSSection(props: NSSectionProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/NSSection.module.css

@@ -1,5 +1,5 @@
-.ns_section {
-	background-repeat: no-repeat;
-	background-size: cover;
-	background-position: center;
+.ns_section {
+	background-repeat: no-repeat;
+	background-size: cover;
+	background-position: center;
 }

package/dist/components/NSSectionCards.d.ts

@@ -10,4 +10,4 @@ export interface NSSectionCardsProps extends IBaseComponentProps {
     button?: ILinkProps;
     cards: NSCardProps[];
 }
-export declare function NSSectionCards(props: NSSectionCardsProps): import("react").JSX.Element;
+export declare function NSSectionCards(props: NSSectionCardsProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/NSSectionCards.module.css

@@ -1,39 +1,39 @@
-.ns_section_cards_holder {
-	display: flex;
-	flex-direction: column;
-	justify-content: center;
-	align-items: center;
-	margin-left: auto;
-	margin-right: auto;
-	padding-left: 1rem;
-	padding-right: 1rem;
-}
-
-.ns_section_cards_title_container {
-	margin-bottom: 32px;
-}
-
-.ns_card_container {
-	display: flex;
-	flex-direction: row;
-	flex-wrap: wrap;
-	justify-content: center;
-	gap: 24px;
-	width: 100%;
-}
-
-.ns_section_cards_link_container {
-	margin-top: 48px;
-	width: 100%;
-	text-align: center;
-}
-
-.ns_description {
-	text-align: center;
-	font-style: normal;
-	font-weight: inherit;
-	font-size: 16px;
-	font-family: inherit;
-	line-height: inherit;
-	margin-bottom: 16px;
+.ns_section_cards_holder {
+	display: flex;
+	flex-direction: column;
+	justify-content: center;
+	align-items: center;
+	margin-left: auto;
+	margin-right: auto;
+	padding-left: 1rem;
+	padding-right: 1rem;
+}
+
+.ns_section_cards_title_container {
+	margin-bottom: 32px;
+}
+
+.ns_card_container {
+	display: flex;
+	flex-direction: row;
+	flex-wrap: wrap;
+	justify-content: center;
+	gap: 24px;
+	width: 100%;
+}
+
+.ns_section_cards_link_container {
+	margin-top: 48px;
+	width: 100%;
+	text-align: center;
+}
+
+.ns_description {
+	text-align: center;
+	font-style: normal;
+	font-weight: inherit;
+	font-size: 16px;
+	font-family: inherit;
+	line-height: inherit;
+	margin-bottom: 16px;
 }

package/dist/components/NSSectionTiles.d.ts

@@ -4,4 +4,4 @@ export interface NSSectionTilesProps extends IBaseComponentProps {
     title?: string;
     tiles: NSTileProps[];
 }
-export declare function NSSectionTiles(props: NSSectionTilesProps): import("react").JSX.Element;
+export declare function NSSectionTiles(props: NSSectionTilesProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/NSSectionTiles.module.css

@@ -1,11 +1,11 @@
-.ns_entity_bar_container {
-	display: flex;
-	flex-direction: column;
-	justify-content: center;
-	align-items: center;
-	margin-left: auto;
-	margin-right: auto;
-	padding-left: 1rem;
-	padding-right: 1rem;
-	gap: 24px;
+.ns_entity_bar_container {
+	display: flex;
+	flex-direction: column;
+	justify-content: center;
+	align-items: center;
+	margin-left: auto;
+	margin-right: auto;
+	padding-left: 1rem;
+	padding-right: 1rem;
+	gap: 24px;
 }

package/dist/components/NSSectionTitle.d.ts

@@ -4,4 +4,4 @@ export interface NSSectionTitleProps extends IBaseComponentProps {
     title: string;
     children: ReactNode;
 }
-export declare function NSSectionTitle(props: NSSectionTitleProps): import("react").JSX.Element;
+export declare function NSSectionTitle(props: NSSectionTitleProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/NSSpace.d.ts

@@ -14,4 +14,4 @@ export declare enum NSSpaceSizeType {
     XXLARGE = "96px",
     XXXLARGE = "128px"
 }
-export declare function NSSpace(props: NSSpaceProps): import("react").JSX.Element;
+export declare function NSSpace(props: NSSpaceProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/NSSplitter.d.ts

@@ -12,5 +12,5 @@ export declare class NSSplitter extends Component<NSSplitterProps> {
     handleMouseDown(): void;
     handleMouseUp(): void;
     handleMouseMove(event: MouseEvent): void;
-    render(): import("react").JSX.Element;
+    render(): import("react/jsx-runtime").JSX.Element;
 }

package/dist/components/NSSplitter.module.css

@@ -1,59 +1,59 @@
-.ns_splitter_gutter {
-    display: none;
-}
-
-@media only screen and (min-width: 992px) {
-    .ns_splitter {
-        display: flex;
-        flex-direction: column;
-        overflow: hidden;
-    }
-
-    .ns_splitter.ns_splitter_resizing,
-    .ns_splitter.ns_splitter_resizing * {
-        cursor: row-resize !important;
-    }
-
-    .ns_splitter_master,
-    .ns_splitter_detail {
-        overflow: hidden;
-    }
-
-    .ns_splitter_gutter {
-        position: relative;
-        width: 100%;
-        outline: none;
-        border: none;
-        padding: 0.5rem 0;
-        display: flex;
-        justify-content: center;
-        align-items: center;
-        background-color: transparent;
-        cursor: row-resize !important;
-        z-index: 1
-    }
-
-    .ns_splitter_gutter::before {
-        content: "";
-        position: absolute;
-        top: 50%;
-        left: 0;
-        transform: translateY(-50%);
-        width: 100%;
-        height: 0.25rem;
-        border-radius: 0.125rem;
-        background: #f0f0f0;
-        z-index: -1;
-    }
-
-    .ns_splitter_gutter_handle {
-        width: 2rem;
-        height: 0.5rem;
-        border-radius: 0.25rem;
-        background-color: #aaa;
-    }
-
-    .ns_splitter_gutter:hover .ns_splitter_gutter_handle {
-        background-color: #888;
-    }
+.ns_splitter_gutter {
+    display: none;
+}
+
+@media only screen and (min-width: 992px) {
+    .ns_splitter {
+        display: flex;
+        flex-direction: column;
+        overflow: hidden;
+    }
+
+    .ns_splitter.ns_splitter_resizing,
+    .ns_splitter.ns_splitter_resizing * {
+        cursor: row-resize !important;
+    }
+
+    .ns_splitter_master,
+    .ns_splitter_detail {
+        overflow: hidden;
+    }
+
+    .ns_splitter_gutter {
+        position: relative;
+        width: 100%;
+        outline: none;
+        border: none;
+        padding: 0.5rem 0;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        background-color: transparent;
+        cursor: row-resize !important;
+        z-index: 1
+    }
+
+    .ns_splitter_gutter::before {
+        content: "";
+        position: absolute;
+        top: 50%;
+        left: 0;
+        transform: translateY(-50%);
+        width: 100%;
+        height: 0.25rem;
+        border-radius: 0.125rem;
+        background: #f0f0f0;
+        z-index: -1;
+    }
+
+    .ns_splitter_gutter_handle {
+        width: 2rem;
+        height: 0.5rem;
+        border-radius: 0.25rem;
+        background-color: #aaa;
+    }
+
+    .ns_splitter_gutter:hover .ns_splitter_gutter_handle {
+        background-color: #888;
+    }
 }

package/dist/components/NSTabPage.d.ts

@@ -21,5 +21,5 @@ export declare class NSTabPage extends Component<NSTabPageProps, NSTabPageState>
     ns_info: import("react").RefObject<NSInfo>;
     constructor(props: NSTabPageProps);
     setClicked(indices: number[], callback: () => void): void;
-    render(): import("react").JSX.Element;
+    render(): import("react/jsx-runtime").JSX.Element;
 }

package/dist/components/NSTabPage.module.css

@@ -1,60 +1,60 @@
-.ns_tab_page_panel {
-    border-radius: 8px;
-    overflow: hidden;
-    background: #141B5C;
-    padding: 16px;
-    width: 100%;
-}
-
-.ns_tab_page_panel ul.ns_tab_page_titles_container {
-    list-style-type: none;
-    margin: 0;
-    padding: 0;
-    display: flex;
-    overflow-x: auto;
-}
-
-.ns_tab_page_panel li.ns_tab_page_title {
-    text-align: center;
-    padding: 0px 16px;
-    cursor: pointer;
-    color: #fff;
-    font-size: 16px;
-    font-weight: 600;
-    border-right: 1px solid #fff;
-    margin: 14px 0;
-}
-
-.ns_tab_page_panel>ul.ns_tab_page_titles_container>li.ns_tab_page_title:last-child {
-    border-right: none;
-}
-
-.ns_tab_page_panel>ul.ns_tab_page_titles_container>li.ns_tab_page_title_active {
-    background-color: #fff;
-    border-radius: 8px 8px 0 0;
-    color: #141B5C;
-    margin: 0;
-    padding: 14px 16px;
-    box-shadow: 0px 2px 2px 2px #141B5C;
-}
-
-.ns_tab_content_column {
-    padding: 16px;
-    border-radius: 0 8px 8px 8px;
-    background-color: #fff;
-    gap: 0;
-    border-right: 1px solid #ccc;
-    display: flex;
-    flex-direction: row;
-    flex-wrap: wrap;
-    overflow-y: auto;
-}
-
-/* .ns_tab_content_grid {
-    padding: 16px;
-    border-radius: 0 8px 8px 8px;
-    background-color: #fff;
-    display: grid !important;
-    gap: 0;
-    border-right: 1px solid #ccc;
+.ns_tab_page_panel {
+    border-radius: 8px;
+    overflow: hidden;
+    background: #141B5C;
+    padding: 16px;
+    width: 100%;
+}
+
+.ns_tab_page_panel ul.ns_tab_page_titles_container {
+    list-style-type: none;
+    margin: 0;
+    padding: 0;
+    display: flex;
+    overflow-x: auto;
+}
+
+.ns_tab_page_panel li.ns_tab_page_title {
+    text-align: center;
+    padding: 0px 16px;
+    cursor: pointer;
+    color: #fff;
+    font-size: 16px;
+    font-weight: 600;
+    border-right: 1px solid #fff;
+    margin: 14px 0;
+}
+
+.ns_tab_page_panel>ul.ns_tab_page_titles_container>li.ns_tab_page_title:last-child {
+    border-right: none;
+}
+
+.ns_tab_page_panel>ul.ns_tab_page_titles_container>li.ns_tab_page_title_active {
+    background-color: #fff;
+    border-radius: 8px 8px 0 0;
+    color: #141B5C;
+    margin: 0;
+    padding: 14px 16px;
+    box-shadow: 0px 2px 2px 2px #141B5C;
+}
+
+.ns_tab_content_column {
+    padding: 16px;
+    border-radius: 0 8px 8px 8px;
+    background-color: #fff;
+    gap: 0;
+    border-right: 1px solid #ccc;
+    display: flex;
+    flex-direction: row;
+    flex-wrap: wrap;
+    overflow-y: auto;
+}
+
+/* .ns_tab_content_grid {
+    padding: 16px;
+    border-radius: 0 8px 8px 8px;
+    background-color: #fff;
+    display: grid !important;
+    gap: 0;
+    border-right: 1px solid #ccc;
 } */

package/dist/components/NSTable.d.ts

@@ -1,7 +1,8 @@
 import { SortItem } from "namirasoft-core";
-import React, { Component } from "react";
+import { Component, ReactNode } from "react";
 import { BaseColumnFormatter } from '../formatter/BaseColumnFormatter';
 import { IBaseComponentProps } from "../props/IBaseComponentProps";
+import { NSButtonProps } from './NSButton';
 import { NSPagination } from './NSPagination';
 export interface TableInfo {
     name: string;
@@ -50,6 +51,9 @@ export interface NSTableProps<RowType> extends IBaseComponentProps {
     onRowClick?: (e: React.MouseEvent<HTMLTableRowElement, MouseEvent>, row: TableRowInfo<RowType>) => void;
     onCellClick?: (e: React.MouseEvent<HTMLTableCellElement, MouseEvent>, cell: TableCellInfo<RowType>) => boolean | undefined;
     getRowCheckboxDisabled?: (row: TableRowInfo<RowType>) => boolean;
+    buttons?: NSButtonProps[];
+    children?: ReactNode;
+    headerChildren?: ReactNode;
     hierarchy?: {
         id: string;
         parent: string;
@@ -99,7 +103,7 @@ export declare class NSTable<RowType> extends Component<NSTableProps<RowType>, N
     private Table_Ref;
     private TableScrollbar_Ref;
     private TableScrollbarContent_Ref;
-    NSPagination: React.RefObject<NSPagination>;
+    NSPagination: import("react").RefObject<NSPagination>;
     private LastSelectedRowID;
     private resizeMoveHandler;
     private resizeUpHandler;
@@ -154,6 +158,6 @@ export declare class NSTable<RowType> extends Component<NSTableProps<RowType>, N
     private startResize;
     componentDidMount(): void;
     componentWillUnmount(): void;
-    render(): React.JSX.Element;
+    render(): import("react/jsx-runtime").JSX.Element;
 }
 export {};

package/dist/components/NSTable.js

@@ -10,7 +10,7 @@ var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, ge
 };
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { BaseMetaColumn, BaseMetaTable, IStorageLocal, SortItem } from "namirasoft-core";
-import React, { Component } from "react";
+import { Component, createRef } from "react";
 import { utils, writeFile } from 'xlsx';
 import { NSButton } from './NSButton';
 import { NSDialogInfo } from './NSDialogInfo';
@@ -18,7 +18,6 @@ import { NSDialogPageSelection } from './NSDialogPageSelection';
 import { NSLoading } from './NSLoading';
 import { NSNoData } from './NSNoData';
 import { NSPagination } from './NSPagination';
-import { NSSpace, NSSpaceSizeType } from './NSSpace';
 import Styles from './NSTable.module.css';
 var PageSelectionMode;
 (function (PageSelectionMode) {
@@ -29,10 +28,10 @@ var PageSelectionMode;
 export class NSTable extends Component {
     constructor(props) {
         super(props);
-        this.Table_Ref = React.createRef();
-        this.TableScrollbar_Ref = React.createRef();
-        this.TableScrollbarContent_Ref = React.createRef();
-        this.NSPagination = React.createRef();
+        this.Table_Ref = createRef();
+        this.TableScrollbar_Ref = createRef();
+        this.TableScrollbarContent_Ref = createRef();
+        this.NSPagination = createRef();
         this.LastSelectedRowID = null;
         this.resizeMoveHandler = null;
         this.resizeUpHandler = null;
@@ -448,7 +447,7 @@ export class NSTable extends Component {
             document.removeEventListener('mouseup', this.resizeUpHandler);
     }
     render() {
-        var _a, _b, _c, _d, _e, _f, _g, _h, _j;
+        var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k;
         let show_pagination = (_b = (_a = this.props.ui) === null || _a === void 0 ? void 0 : _a.pagination) !== null && _b !== void 0 ? _b : true;
         let show_button_panel = (_d = (_c = this.props.ui) === null || _c === void 0 ? void 0 : _c.button_panel) !== null && _d !== void 0 ? _d : true;
         let getRowAttributes = (row_value, row_index) => {
@@ -582,7 +581,7 @@ export class NSTable extends Component {
                                                     fontSize: 14,
                                                     fontWeight: "bold",
                                                     color: "rgba(20, 27, 92, 1)",
-                                                }, "aria-label": expanded ? "Collapse" : "Expand", children: expanded ? "−" : "+" })) : (_jsx("span", { style: { display: "inline-block", width: 18, height: 18 } })) }), _jsx("span", { children: (_a = cell.formatted) !== null && _a !== void 0 ? _a : "" })] })) : (_jsx("span", { children: (_b = cell.formatted) !== null && _b !== void 0 ? _b : "" })) }), column.index));
+                                                }, "aria-label": expanded ? "Collapse" : "Expand", children: expanded ? "−" : "+" })) : (_jsx("span", { style: { display: "inline-block", width: 18, height: 18 } })) }), (_a = cell.formatted) !== null && _a !== void 0 ? _a : ""] })) : (_jsx(_Fragment, { children: (_b = cell.formatted) !== null && _b !== void 0 ? _b : "" })) }), column.index));
                         })] }), reactKey));
                 if (hierarchical && hasChildren && expanded) {
                     let childAncestors = [...ancestorHasNext, !isLastChild];
@@ -624,7 +623,53 @@ export class NSTable extends Component {
             }
             return "";
         };
-        return (_jsxs("div", { id: this.props.id, className: [...(_e = this.props.classList) !== null && _e !== void 0 ? _e : [], Styles.ns_table_wrapper, this.state.fullscreen ? Styles.ns_fullscreen : ""].filter(Boolean).join(" "), style: Object.assign({}, this.props.style), children: [_jsxs("table", { ref: this.Table_Ref, className: Styles.ns_table, onScroll: () => {
+        let buttonPanel = show_button_panel && (_jsxs("div", { className: Styles.ns_button_panel, children: [this.state.pageSelectionMode !== PageSelectionMode.Hidden &&
+                    _jsx(NSDialogPageSelection, { icon: this.state.pageSelectionMode === PageSelectionMode.Print ? "https://static.namirasoft.com/image/concept/print/blue.svg" :
+                            this.state.pageSelectionMode === PageSelectionMode.CSV ? "https://static.namirasoft.com/image/concept/export/blue.svg" : "", current_page: (_f = (_e = this.NSPagination.current) === null || _e === void 0 ? void 0 : _e.getCurrentPage()) !== null && _f !== void 0 ? _f : 1, current_size: (_h = (_g = this.NSPagination.current) === null || _g === void 0 ? void 0 : _g.getPageSize()) !== null && _h !== void 0 ? _h : 0, max_page: this.state.totalItems, getItems: (page, size, selected) => __awaiter(this, void 0, void 0, function* () {
+                            if (selected) {
+                                let rows = [];
+                                if (this.state.rows)
+                                    for (let i = 0; i < this.state.rows.length; i++) {
+                                        const row = { index: i, value: this.state.rows[i] };
+                                        let id = this.props.getRowKey(row);
+                                        if (this.state.selectedIDs.includes(id))
+                                            rows.push(row.value);
+                                    }
+                                return rows;
+                            }
+                            let res = yield this.props.getRows(page, size, this.getSortItems());
+                            return res.rows;
+                        }), onFinish: (items) => __awaiter(this, void 0, void 0, function* () {
+                            if (this.state.pageSelectionMode === PageSelectionMode.Print)
+                                this.print(items);
+                            else if (this.state.pageSelectionMode === PageSelectionMode.CSV)
+                                this.exportCSV(items);
+                        }), onClose: () => this.setState({ pageSelectionMode: PageSelectionMode.Hidden }) }), (_j = this.props.buttons) === null || _j === void 0 ? void 0 : _j.map((button, index) => {
+                    var _a;
+                    return (_jsx(NSButton, Object.assign({}, button, { classList: [Styles.ns_table_button, ...((_a = button.classList) !== null && _a !== void 0 ? _a : [])] }), index));
+                }), _jsx(NSButton, { icon: { src: `https://static.namirasoft.com/image/concept/full-screen/blue.svg` }, classList: [Styles.ns_table_button, Styles.ns_fullscreen_button], onClick: {
+                        action: this.toggleFullscreen,
+                        showLoading: false
+                    }, attributes: { title: this.state.fullscreen ? 'Minimize' : 'Maximize' } }), _jsx(NSButton, { attributes: { title: 'Chart' }, icon: { src: "https://static.namirasoft.com/image/concept/chart/blue.svg" }, onClick: {
+                        action: () => {
+                            this.showModal(" ", "This feature will be available soon in upcoming versions.");
+                        },
+                        showLoading: false
+                    }, classList: [Styles.ns_table_button] }), _jsx(NSButton, { icon: { src: "https://static.namirasoft.com/image/concept/export/blue.svg" }, onClick: {
+                        action: () => { this.setState({ pageSelectionMode: PageSelectionMode.CSV }); },
+                        showLoading: false
+                    }, classList: [Styles.ns_table_button], attributes: { title: 'Export' } }), _jsx(NSButton, { attributes: { title: 'Print' }, icon: { src: "https://static.namirasoft.com/image/concept/print/blue.svg" }, onClick: {
+                        action: () => { this.setState({ pageSelectionMode: PageSelectionMode.Print }); },
+                        showLoading: false
+                    }, classList: [Styles.ns_table_button] }), _jsx(NSButton, { attributes: { title: 'Refresh' }, icon: { src: "https://static.namirasoft.com/image/concept/refresh/blue.svg" }, onClick: {
+                        action: (onFinished) => __awaiter(this, void 0, void 0, function* () {
+                            this.reload(null, null).then(onFinished).catch(onFinished);
+                        })
+                    }, classList: [Styles.ns_table_button], style: { border: '1px solid rgb(3, 119, 255)' } })] }));
+        return (_jsxs("div", { id: this.props.id, className: [...(_k = this.props.classList) !== null && _k !== void 0 ? _k : [], Styles.ns_table_wrapper, this.state.fullscreen ? Styles.ns_fullscreen : ""].filter(Boolean).join(" "), style: Object.assign({}, this.props.style), children: [_jsxs("div", { className: Styles.ns_table_topbar, children: [!this.state.fullscreen &&
+                            this.props.headerChildren, show_pagination &&
+                            _jsx(NSPagination, { ref: this.NSPagination, totalItems: this.state.totalItems, onPageChange: this.onPageChange, style: { marginRight: "auto" } }), buttonPanel] }), !this.state.fullscreen && this.props.children &&
+                    _jsx("div", { className: Styles.ns_table_children, children: this.props.children }), _jsxs("table", { ref: this.Table_Ref, className: Styles.ns_table, onScroll: () => {
                         var _a, _b;
                         if (this.TableScrollbar_Ref.current)
                             this.TableScrollbar_Ref.current.scrollLeft = (_b = (_a = this.Table_Ref.current) === null || _a === void 0 ? void 0 : _a.scrollLeft) !== null && _b !== void 0 ? _b : 0;
@@ -643,52 +688,11 @@ export class NSTable extends Component {
                                                 else
                                                     this.setSortItems(null);
                                             }
-                                        }, children: [_jsx("span", { children: column.text + " " + getSortSign(column) }), _jsx("div", { "data-resize-handle": "true", className: Styles.ns_resize_handle, onMouseDown: (e) => this.startResize(e, column), onClick: (e) => e.stopPropagation() })] }, column.name))] }) }), _jsx("tbody", { className: Styles.ns_tbody, children: content }), _jsx("tfoot", { className: !show_pagination && !show_button_panel ? Styles.padding_0 : "", children: _jsx("tr", { className: Styles.ns_tfoot_row, children: _jsxs("td", { className: Styles.ns_tfoot_cell, children: [_jsx("div", { ref: this.TableScrollbar_Ref, className: Styles.ns_table_scrollbar, style: { bottom: show_pagination || show_button_panel ? 80 : 0 }, onScroll: () => {
-                                                var _a, _b;
-                                                if (this.Table_Ref.current)
-                                                    this.Table_Ref.current.scrollLeft = (_b = (_a = this.TableScrollbar_Ref.current) === null || _a === void 0 ? void 0 : _a.scrollLeft) !== null && _b !== void 0 ? _b : 0;
-                                            }, children: _jsx("div", { ref: this.TableScrollbarContent_Ref, className: Styles.ns_table_scrollbar_content }) }), show_pagination &&
-                                            _jsx(NSPagination, { ref: this.NSPagination, totalItems: this.state.totalItems, onPageChange: this.onPageChange }), _jsx(NSSpace, { size: NSSpaceSizeType.MINI, classList: ["d-lg-none"] }), show_button_panel &&
-                                            _jsxs("div", { className: Styles.ns_button_panel, children: [this.state.pageSelectionMode !== PageSelectionMode.Hidden &&
-                                                        _jsx(NSDialogPageSelection, { icon: this.state.pageSelectionMode === PageSelectionMode.Print ? "https://static.namirasoft.com/image/concept/print/blue.svg" :
-                                                                this.state.pageSelectionMode === PageSelectionMode.CSV ? "https://static.namirasoft.com/image/concept/export/blue.svg" : "", current_page: (_g = (_f = this.NSPagination.current) === null || _f === void 0 ? void 0 : _f.getCurrentPage()) !== null && _g !== void 0 ? _g : 1, current_size: (_j = (_h = this.NSPagination.current) === null || _h === void 0 ? void 0 : _h.getPageSize()) !== null && _j !== void 0 ? _j : 0, max_page: this.state.totalItems, getItems: (page, size, selected) => __awaiter(this, void 0, void 0, function* () {
-                                                                if (selected) {
-                                                                    let rows = [];
-                                                                    if (this.state.rows)
-                                                                        for (let i = 0; i < this.state.rows.length; i++) {
-                                                                            const row = { index: i, value: this.state.rows[i] };
-                                                                            let id = this.props.getRowKey(row);
-                                                                            if (this.state.selectedIDs.includes(id))
-                                                                                rows.push(row.value);
-                                                                        }
-                                                                    return rows;
-                                                                }
-                                                                let res = yield this.props.getRows(page, size, this.getSortItems());
-                                                                return res.rows;
-                                                            }), onFinish: (items) => __awaiter(this, void 0, void 0, function* () {
-                                                                if (this.state.pageSelectionMode === PageSelectionMode.Print)
-                                                                    this.print(items);
-                                                                else if (this.state.pageSelectionMode === PageSelectionMode.CSV)
-                                                                    this.exportCSV(items);
-                                                            }), onClose: () => { this.setState({ pageSelectionMode: PageSelectionMode.Hidden }); } }), _jsx(NSButton, { title: 'Chart', icon: { src: "https://static.namirasoft.com/image/concept/chart/blue.svg" }, onClick: {
-                                                            action: () => {
-                                                                this.showModal(" ", "This feature will be available soon in upcoming versions.");
-                                                            },
-                                                            showLoading: false
-                                                        }, style: { border: '1px solid rgba(255, 148, 50, 1)', width: "128px" } }), _jsx(NSButton, { title: 'Print', icon: { src: "https://static.namirasoft.com/image/concept/print/blue.svg" }, onClick: {
-                                                            action: () => { this.setState({ pageSelectionMode: PageSelectionMode.Print }); },
-                                                            showLoading: false
-                                                        }, style: { border: '1px solid rgba(255, 148, 50, 1)', width: "128px" } }), _jsx(NSButton, { title: 'Export', icon: { src: "https://static.namirasoft.com/image/concept/export/blue.svg" }, onClick: {
-                                                            action: () => { this.setState({ pageSelectionMode: PageSelectionMode.CSV }); },
-                                                            showLoading: false
-                                                        }, style: { border: '1px solid rgba(255, 148, 50, 1)', width: "128px" } }), _jsx(NSButton, { title: this.state.fullscreen ? 'Minimize' : 'Maximize', icon: { src: `https://static.namirasoft.com/image/concept/${this.state.fullscreen ? 'minimize' : 'maximize'}/blue.svg` }, classList: [Styles.ns_fullscreen_button], onClick: {
-                                                            action: this.toggleFullscreen,
-                                                            showLoading: false
-                                                        }, style: { border: '1px solid rgba(255, 148, 50, 1)', width: "128px" } }), _jsx(NSButton, { title: 'Refresh', icon: { src: "https://static.namirasoft.com/image/concept/refresh/blue.svg" }, onClick: {
-                                                            action: (onFinished) => __awaiter(this, void 0, void 0, function* () {
-                                                                this.reload(null, null).then(onFinished).catch(onFinished);
-                                                            })
-                                                        }, style: { border: '1px solid rgba(3, 119, 255, 1)', width: "128px" } })] })] }) }) })] }), this.state.model.show &&
+                                        }, children: [_jsx("span", { children: column.text + " " + getSortSign(column) }), _jsx("div", { "data-resize-handle": "true", className: Styles.ns_resize_handle, onMouseDown: (e) => this.startResize(e, column), onClick: (e) => e.stopPropagation() })] }, column.name))] }) }), _jsx("tbody", { className: Styles.ns_tbody, children: content })] }), _jsx("div", { ref: this.TableScrollbar_Ref, className: Styles.ns_table_scrollbar, onScroll: () => {
+                        var _a, _b;
+                        if (this.Table_Ref.current)
+                            this.Table_Ref.current.scrollLeft = (_b = (_a = this.TableScrollbar_Ref.current) === null || _a === void 0 ? void 0 : _a.scrollLeft) !== null && _b !== void 0 ? _b : 0;
+                    }, children: _jsx("div", { ref: this.TableScrollbarContent_Ref, className: Styles.ns_table_scrollbar_content }) }), this.state.model.show &&
                     _jsx(NSDialogInfo, { description: this.state.model.description, onClose: () => { this.hideModal(); }, title: this.state.title, show_as_code: true, children: _jsx(_Fragment, {}) })] }));
     }
 }