namirasoft-site-react 1.4.403 → 1.4.404

package/src/components/NSTable.tsx

@@ -1,637 +1,637 @@
-"use client";
-import React from "react";
-import { Component } from 'react';
-import { writeFile, utils } from 'xlsx';
-import { NSButton } from './NSButton';
-import { NSPagination } from './NSPagination';
-import { NSDialogInfo } from './NSDialogInfo';
-import { NSSpace, NSSpaceSizeType } from './NSSpace';
-import { NSDialogPageSelection } from './NSDialogPageSelection';
-import { NSLoading } from './NSLoading';
-import { NSNoData } from './NSNoData';
-import { IBaseComponentProps } from "../props/IBaseComponentProps";
-import { BaseColumnFormatter } from '../formatter/BaseColumnFormatter';
-import Styles from './NSTable.module.css';
-import { BaseMetaColumn, BaseMetaTable, IStorageLocal, SortItem } from "namirasoft-core";
-
-export interface TableInfo
-{
-	name: string;
-	text: string;
-}
-
-export interface TableColumnInfo
-{
-	table: TableInfo;
-	index: number;
-	name: string;
-	text: string;
-	formatter: BaseColumnFormatter;
-}
-
-export interface TableRowInfo<RowType>
-{
-	index: number;
-	value: RowType;
-}
-
-export interface TableCellInfo<RowType>
-{
-	column: TableColumnInfo;
-	row: TableRowInfo<RowType>;
-	value: any;
-	formatted: any;
-}
-
-export interface NSTableProps<RowType> extends IBaseComponentProps
-{
-	name: string;
-	checkbox: boolean;
-	columns: TableColumnInfo[];
-	getRows: (page: number, size: number, sorts: SortItem[]) => Promise<{ rows: RowType[], count: number }>;
-	getRowKey: (row: TableRowInfo<RowType>) => string;
-	getRowAttributes?: (row_value: RowType, row_index: number) => { [key: string]: any };
-	getColumnAttributes?: (column: TableColumnInfo) => { [key: string]: any };
-	getCellFormattedValue?: (value: any, column: TableColumnInfo, row: TableRowInfo<RowType>, printable: boolean) => any;
-	onColumnClick?: (e: React.MouseEvent<HTMLTableDataCellElement, MouseEvent>, column: TableColumnInfo) => void;
-	onRowClick?: (e: React.MouseEvent<HTMLTableRowElement, MouseEvent>, row: TableRowInfo<RowType>) => void;
-	onCellClick?: (e: React.MouseEvent<HTMLTableDataCellElement, MouseEvent>, cell: TableCellInfo<RowType>) => boolean | undefined;
-	onSelectedIDsChanged?: () => void;
-	onSortChanged?: (items: SortItem[] | null) => void;
-	onVisibleColumnsChanged?: (visible_columns: { table: string, column: string }[]) => void;
-	ui?: {
-		pagination?: boolean;
-	};
-}
-
-interface NSTableState<RowType>
-{
-	columns: TableColumnInfo[];
-	visible_columns: { table: string, column: string }[];
-	totalItems: number;
-	rows: RowType[] | null;
-	title?: string;
-	model: {
-		show: boolean;
-		description?: string;
-	};
-	selectedIDs: string[];
-	selectedRows: RowType[];
-	pageSelectionMode: PageSelectionMode;
-	sortItems: SortItem[] | null;
-}
-
-enum PageSelectionMode
-{
-	Hidden = "Hidden",
-	Print = "Print",
-	CSV = "CSV"
-}
-
-export class NSTable<RowType> extends Component<NSTableProps<RowType>, NSTableState<RowType>>
-{
-	private nstable_top_div = React.createRef<HTMLDivElement>();
-	NSPagination = React.createRef<NSPagination>();
-	constructor(props: NSTableProps<RowType>)
-	{
-		super(props);
-		this.state = {
-			columns: props.columns,
-			visible_columns: this.getVisibleColumns(),
-			rows: null,
-			totalItems: 0,
-			model: { show: false },
-			selectedIDs: [],
-			selectedRows: [],
-			pageSelectionMode: PageSelectionMode.Hidden,
-			sortItems: this.getSortItems(),
-		};
-		this.getSortItemsKey = this.getSortItemsKey.bind(this);
-		this.getSortItems = this.getSortItems.bind(this);
-		this.setSortItems = this.setSortItems.bind(this);
-		this.getVisibleColumnsKey = this.getVisibleColumnsKey.bind(this);
-		this.getVisibleColumns = this.getVisibleColumns.bind(this);
-		this.setVisibleColumns = this.setVisibleColumns.bind(this);
-		this.setColumns = this.setColumns.bind(this);
-		this.setColumns = this.setColumns.bind(this);
-		this.setRows = this.setRows.bind(this);
-		this.foreachColumn = this.foreachColumn.bind(this);
-		this.getColumns = this.getColumns.bind(this);
-		this.showModal = this.showModal.bind(this);
-		this.hideModal = this.hideModal.bind(this);
-		this.onPageChange = this.onPageChange.bind(this);
-		this.isSomeChecked = this.isSomeChecked.bind(this);
-		this.toggleAllCheckboxes = this.toggleAllCheckboxes.bind(this);
-		this.print = this.print.bind(this);
-		this.exportCSV = this.exportCSV.bind(this);
-		this.isAllChecked = this.isAllChecked.bind(this);
-		this.reload = this.reload.bind(this);
-	}
-	private getSortItemsKey(): string
-	{
-		return "ns_table_" + this.props.name + "_sort_items";
-	}
-	getSortItems(): SortItem[]
-	{
-		let storage = new IStorageLocal();
-		let item = storage.get(this.getSortItemsKey(), "");
-		try
-		{
-			return SortItem.parse(item);
-		} catch (error)
-		{
-		}
-		return [];
-	}
-	setSortItems(items: SortItem[] | null)
-	{
-		let storage = new IStorageLocal();
-		storage.set(this.getSortItemsKey(), SortItem.stringify(items));
-		this.setState({ sortItems: items }, () =>
-		{
-			this.props.onSortChanged?.(items);
-			this.reload(null, null);
-		});
-	}
-	private getVisibleColumnsKey(): string
-	{
-		return "ns_table_" + this.props.name + "_visible_columns";
-	}
-	getVisibleColumns(): { table: string, column: string }[]
-	{
-		let storage = new IStorageLocal();
-		let item = storage.get(this.getVisibleColumnsKey(), "");
-		try
-		{
-			return JSON.parse(item);
-		} catch (error)
-		{
-		}
-		return [];
-	}
-	setVisibleColumns(visible_columns: { table: string, column: string }[])
-	{
-		let storage = new IStorageLocal();
-		storage.set(this.getVisibleColumnsKey(), JSON.stringify(visible_columns));
-		this.setState({ visible_columns }, () =>
-		{
-			this.props.onVisibleColumnsChanged?.(visible_columns);
-		});
-	}
-	setColumns(columns: TableColumnInfo[])
-	{
-		this.setState({ columns });
-	}
-	setRows(rows: RowType[] | null, totalItems: number)
-	{
-		this.setState({ rows, totalItems }, () =>
-		{
-			this.nstable_top_div.current?.scrollIntoView({ behavior: 'smooth', block: 'center' });
-		});
-	}
-	foreachColumn(visible: boolean | null, handler: (column: TableColumnInfo) => void)
-	{
-		let vs = this.getVisibleColumns();
-		let shouldBeVisible = (c: TableColumnInfo) =>
-		{
-			if (vs.length === 0)
-				return true;
-			return vs.filter(v => v.table === c.table.name && v.column === c.name).length > 0;
-		};
-		this.state.columns.forEach(c =>
-		{
-			if (visible === null || shouldBeVisible(c) === visible)
-				handler(c);
-		})
-	}
-	getColumns(visible: boolean | null): TableColumnInfo[]
-	{
-		let columns: TableColumnInfo[] = [];
-		this.foreachColumn(visible, c => columns.push(c));
-		return columns;
-	}
-	private showModal(description: string, title?: string)
-	{
-		this.setState({ model: { show: true, description }, title });
-	}
-	private hideModal()
-	{
-		this.setState({ model: { show: false } });
-	}
-	private onPageChange(page: number, size: number) 
-	{
-		this.reload(page, size);
-	}
-	public async reload(page: number | null, size: number | null)
-	{
-		this.setRows(null, 0);
-		if (page === null)
-			page = this.NSPagination.current?.getCurrentPage() ?? 0;
-		if (size === null)
-			size = this.NSPagination.current?.getPageSize() ?? 0;
-		try
-		{
-			let sorts = this.getSortItems();
-			let res = await this.props.getRows(page, size, sorts);
-			this.setRows(res.rows, res.count);
-		} catch (error)
-		{
-		}
-	}
-	private toggleAllCheckboxes()
-	{
-		let selectedIDs: string[] = [];
-		let selectedRows: RowType[] = [];
-		if (this.getSelectedIDs().length === 0)
-			this.state.rows?.forEach((row, rowIndex) =>
-			{
-				let id = this.props.getRowKey({ index: rowIndex, value: row });
-				selectedIDs.push(id);
-				selectedRows.push(row);
-			})
-		this.setSelectedIDs(selectedIDs, selectedRows);
-	}
-	print(rows: RowType[])
-	{
-		const printWindow = window.open('', '', 'height=500,width=800');
-		printWindow!.document.write(`<html><head><title>${this.props.name}</title>`);
-		printWindow!.document.write('<style>table { width: 100%; border-collapse: collapse; } th, td { border: 1px solid black; padding: 8px; text-align: left; }</style>');
-		printWindow!.document.write('</head><body>');
-		printWindow!.document.write('<table>');
-		printWindow!.document.write('<thead><tr>');
-
-		this.foreachColumn(true, column =>
-		{
-			printWindow!.document.write('<th>' + column.text + '</th>');
-		});
-
-		printWindow!.document.write('</tr></thead><tbody>');
-
-		// Add table rows
-		rows.forEach((rowValue, rowIndex) =>
-		{
-			let row = { index: rowIndex, value: rowValue };
-			printWindow!.document.write('<tr>');
-			this.foreachColumn(true, column =>
-			{
-				let cell = this.getCellTableInfo(column, row, true);
-				printWindow!.document.write('<td>' + (cell.formatted ?? "") + '</td>');
-			});
-			printWindow!.document.write('</tr>');
-		});
-
-		printWindow!.document.write('</tbody></table>');
-		printWindow!.document.write('</body></html>');
-		printWindow!.document.close();
-		printWindow!.print();
-	}
-	exportCSV(rows: RowType[])
-	{
-		const worksheet = utils.json_to_sheet(rows || []);
-		const workbook = utils.book_new();
-		utils.book_append_sheet(workbook, worksheet, this.props.name);
-		writeFile(workbook, this.props.name + ".xlsx");
-	}
-	getSelectedIDs(): string[]
-	{
-		return this.state.selectedIDs;
-	}
-	getSelectedRows(): RowType[]
-	{
-		return this.state.selectedRows;
-	}
-	setSelectedIDs(ids: string[], rows: RowType[], callback?: () => void)
-	{
-		this.setState({ selectedIDs: ids, selectedRows: rows }, () =>
-		{
-			if (this.props.onSelectedIDsChanged)
-				this.props.onSelectedIDsChanged();
-			if (callback)
-				callback();
-		});
-	}
-	private isAllChecked(): boolean
-	{
-		return this.state.rows !== null && this.state.rows.length > 0 && this.state.selectedIDs.length === this.state.rows.length;
-	}
-
-	private isSomeChecked(): boolean
-	{
-		return this.state.selectedIDs.length > 0 && !this.isAllChecked();
-	}
-
-	private getCellTableInfo(column: TableColumnInfo, row: TableRowInfo<RowType>, printable: boolean) 
-	{
-		let value = (row.value as any)[column.name];
-		let formatted = this.getCellFormattedValue(value, column, row, printable);
-		return { column, row, value, formatted };
-	}
-	private getCellFormattedValue(value: any, column: TableColumnInfo, row: TableRowInfo<RowType>, printable: boolean) 
-	{
-		if (this.props.getCellFormattedValue)
-			return this.props.getCellFormattedValue(value, column, row, printable);
-		return column.formatter.format(value, column, row, printable);
-	}
-	override componentDidMount(): void
-	{
-		if (!this.NSPagination.current)
-			this.reload(null, null);
-	}
-	override render()
-	{
-		let getRowAttributes = (row_value: RowType, row_index: number) =>
-		{
-			if (this.props.getRowAttributes)
-				return this.props.getRowAttributes(row_value, row_index);
-			return {};
-		}
-		let getColumnAttributes = (column: TableColumnInfo) =>
-		{
-			if (this.props.getColumnAttributes)
-				return this.props.getColumnAttributes(column);
-			return {};
-		}
-		let onColumnClick = (e: React.MouseEvent<HTMLTableDataCellElement, MouseEvent>, column: TableColumnInfo) =>
-		{
-			if (this.props.onColumnClick)
-				this.props.onColumnClick(e, column);
-		}
-		let onRowClick = (e: React.MouseEvent<HTMLTableRowElement, MouseEvent>, row: TableRowInfo<RowType>) =>
-		{
-			if (this.props.onRowClick)
-				this.props.onRowClick(e, row);
-		};
-		let onCellClick = (e: React.MouseEvent<HTMLTableDataCellElement, MouseEvent>, cell: TableCellInfo<RowType>) =>
-		{
-			let overided = cell.column.formatter.onclick_overrided;
-			if (this.props.onCellClick)
-				overided = this.props.onCellClick(e, cell) ?? true;
-			if (!overided)
-				this.showModal(cell.formatted, cell.column.text);
-		};
-		let content;
-		if (this.state.rows === null)
-		{
-			content = (
-				<tr className="d-flex justify-content-center align-items-center p-0">
-					<td className="w-100 h-100 m-0 mh-100">
-						<NSLoading />
-					</td>
-				</tr>
-			);
-		}
-		else if (this.state.rows.length === 0)
-		{
-			content = (
-				<tr className="d-flex justify-content-center align-items-center p-0">
-					<td className="w-100 h-100 m-0 mh-100">
-						<NSNoData lable='No Data' classList={["p-3"]} />
-					</td>
-				</tr>
-			);
-		}
-		else
-		{
-			content = this.state.rows.map((rowValue, rowIndex) =>
-			{
-				let row = { index: rowIndex, value: rowValue };
-				return <tr
-					key={this.props.getRowKey(row)}
-					{...getRowAttributes(rowValue, rowIndex)}
-					onClick={(e) => { onRowClick(e, row); }}
-				>
-					{
-						this.props.checkbox &&
-						<td>
-							<label
-								htmlFor={`checkbox_device_${this.props.getRowKey(row)}`}
-								className={Styles.ns_check_box_label}
-							>
-								<input
-									id={`checkbox_device_${this.props.getRowKey(row)}`}
-									type="checkbox"
-									className={Styles.ns_check_box}
-									checked={this.state.selectedIDs.includes(this.props.getRowKey(row))}
-									onChange={(e) =>
-									{
-										let selectedIDs = this.state.selectedIDs;
-										let selectedRows = this.state.selectedRows;
-										let id = this.props.getRowKey(row);
-										if (e.currentTarget.checked)
-										{
-											selectedIDs.push(id);
-											selectedRows.push(row.value);
-										}
-										else
-										{
-											selectedIDs = selectedIDs.filter(x => x !== id);
-											selectedRows = selectedRows.filter(x => this.props.getRowKey({ index: -1, value: x }) !== id);
-										}
-										this.setSelectedIDs(selectedIDs, selectedRows);
-									}}
-								/>
-							</label>
-						</td>
-					}
-					{
-						this.getColumns(true).map((column, index) =>
-						{
-							column.index = index + (this.props.checkbox ? 1 : 0);
-							let cell = this.getCellTableInfo(column, row, false);
-							return (
-								<td className='py-3' width={column.formatter.width} {...getColumnAttributes(column)} key={column.index} data-label={`${column.text}: `} onClick={(e) =>
-								{
-									onColumnClick(e, column);
-									onCellClick(e, cell);
-								}}>
-
-									{
-										cell.formatted ?? ""
-									}
-								</td>
-							);
-						})
-					}
-				</tr>
-			});
-		}
-		let getSortSign = (column: TableColumnInfo) =>
-		{
-			if (this.state.sortItems)
-			{
-				let c = this.state.sortItems.filter(c => c.table.name === column.table.name && c.column.name === column.name)[0]
-				if (c)
-				{
-					if (c.ascending)
-						return "↑"
-					return "↓";
-				}
-			}
-			return "";
-		};
-
-		return (
-			<>
-				<div ref={this.nstable_top_div} />
-				<div
-					id={this.props.id}
-					className={this.props.classList?.join(" ") ?? ""}
-					style={this.props.style}
-				>
-					<table className={Styles.ns_table} >
-						<thead>
-							<tr>
-								{
-									this.props.checkbox &&
-									<th style={{ width: "24px", height: "24px" }}>
-										<label
-											htmlFor='checkbox'
-											className={Styles.ns_checkbox_label}
-										>
-											<input
-												id="checkbox"
-												type="checkbox"
-												className={`${Styles.ns_check_box} ${this.isSomeChecked() ? Styles.ns_indeterminate : ""}`}
-												checked={this.getSelectedIDs().length > 0}
-												onChange={this.toggleAllCheckboxes}
-											></input>
-										</label>
-									</th>
-								}
-								{
-									this.getColumns(true).map(column => <th
-										key={column.name}
-										scope="col"
-										style={{ width: column.formatter.width, cursor: "pointer" }}
-										onClick={() =>
-										{
-											let t = new BaseMetaTable(null, column.table.name, column.table.text);
-											let c = new BaseMetaColumn(t, column.name, column.text, "", false);
-											let items = this.getSortItems();
-											if (!items || items.length === 0 || items[0].table.name !== t.name || items[0].column.name !== c.name)
-												this.setSortItems([new SortItem(t, c, true)]);
-											else
-											{
-												if (items[0].ascending)
-													this.setSortItems([new SortItem(t, c, false)]);
-												else
-													this.setSortItems(null);
-											}
-										}}
-									>
-										{
-											column.text + " " + getSortSign(column)
-										}
-									</th>)
-								}
-							</tr>
-						</thead>
-						<tbody className={Styles.ns_tbody}>
-							{content}
-						</tbody>
-					</table>
-					<NSSpace size={NSSpaceSizeType.MINI} />
-					<section className={Styles.ns_table_footer}>
-						{
-							(this.props.ui?.pagination ?? true) &&
-							<NSPagination ref={this.NSPagination} totalItems={this.state.totalItems} onPageChange={this.onPageChange} />
-						}
-						<NSSpace size={NSSpaceSizeType.MINI} classList={["d-lg-none"]} />
-						<div className={Styles.ns_button_panel}>
-							{
-								this.state.pageSelectionMode !== PageSelectionMode.Hidden &&
-								<NSDialogPageSelection<RowType>
-									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={this.NSPagination.current?.getCurrentPage() ?? 1}
-									current_size={this.NSPagination.current?.getPageSize() ?? 0}
-									max_page={1}
-									getItems={async (page, size, selected) =>
-									{
-										if (selected)
-										{
-											let rows: RowType[] = [];
-											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 = await this.props.getRows(page, size, this.getSortItems());
-										return res.rows;
-									}}
-									onFinish={async (items: RowType[]) =>
-									{
-										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 }); }
-									}
-								/>
-							}
-							<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" }}
-							/>
-							<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" }}
-							/>
-							<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" }}
-							/>
-							<NSButton
-								title='Refresh'
-								icon={{ src: "https://static.namirasoft.com/image/concept/refresh/blue.svg" }}
-								onClick={{
-									action: async (onFinished) =>
-									{
-										this.reload(null, null).then(onFinished).catch(onFinished);
-									}
-								}}
-								style={{ border: '1px solid rgba(3, 119, 255, 1)', width: "128px" }} />
-						</div>
-					</section>
-					{
-						this.state.model.show &&
-						<NSDialogInfo
-							description={this.state.model.description}
-							onClose={() => { this.hideModal(); }}
-							title={this.state.title}
-							show_as_code={true}
-						>
-							<></>
-						</NSDialogInfo>
-					}
-				</div >
-			</>
-		);
-	}
+"use client";
+import React from "react";
+import { Component } from 'react';
+import { writeFile, utils } from 'xlsx';
+import { NSButton } from './NSButton';
+import { NSPagination } from './NSPagination';
+import { NSDialogInfo } from './NSDialogInfo';
+import { NSSpace, NSSpaceSizeType } from './NSSpace';
+import { NSDialogPageSelection } from './NSDialogPageSelection';
+import { NSLoading } from './NSLoading';
+import { NSNoData } from './NSNoData';
+import { IBaseComponentProps } from "../props/IBaseComponentProps";
+import { BaseColumnFormatter } from '../formatter/BaseColumnFormatter';
+import Styles from './NSTable.module.css';
+import { BaseMetaColumn, BaseMetaTable, IStorageLocal, SortItem } from "namirasoft-core";
+
+export interface TableInfo
+{
+	name: string;
+	text: string;
+}
+
+export interface TableColumnInfo
+{
+	table: TableInfo;
+	index: number;
+	name: string;
+	text: string;
+	formatter: BaseColumnFormatter;
+}
+
+export interface TableRowInfo<RowType>
+{
+	index: number;
+	value: RowType;
+}
+
+export interface TableCellInfo<RowType>
+{
+	column: TableColumnInfo;
+	row: TableRowInfo<RowType>;
+	value: any;
+	formatted: any;
+}
+
+export interface NSTableProps<RowType> extends IBaseComponentProps
+{
+	name: string;
+	checkbox: boolean;
+	columns: TableColumnInfo[];
+	getRows: (page: number, size: number, sorts: SortItem[]) => Promise<{ rows: RowType[], count: number }>;
+	getRowKey: (row: TableRowInfo<RowType>) => string;
+	getRowAttributes?: (row_value: RowType, row_index: number) => { [key: string]: any };
+	getColumnAttributes?: (column: TableColumnInfo) => { [key: string]: any };
+	getCellFormattedValue?: (value: any, column: TableColumnInfo, row: TableRowInfo<RowType>, printable: boolean) => any;
+	onColumnClick?: (e: React.MouseEvent<HTMLTableDataCellElement, MouseEvent>, column: TableColumnInfo) => void;
+	onRowClick?: (e: React.MouseEvent<HTMLTableRowElement, MouseEvent>, row: TableRowInfo<RowType>) => void;
+	onCellClick?: (e: React.MouseEvent<HTMLTableDataCellElement, MouseEvent>, cell: TableCellInfo<RowType>) => boolean | undefined;
+	onSelectedIDsChanged?: () => void;
+	onSortChanged?: (items: SortItem[] | null) => void;
+	onVisibleColumnsChanged?: (visible_columns: { table: string, column: string }[]) => void;
+	ui?: {
+		pagination?: boolean;
+	};
+}
+
+interface NSTableState<RowType>
+{
+	columns: TableColumnInfo[];
+	visible_columns: { table: string, column: string }[];
+	totalItems: number;
+	rows: RowType[] | null;
+	title?: string;
+	model: {
+		show: boolean;
+		description?: string;
+	};
+	selectedIDs: string[];
+	selectedRows: RowType[];
+	pageSelectionMode: PageSelectionMode;
+	sortItems: SortItem[] | null;
+}
+
+enum PageSelectionMode
+{
+	Hidden = "Hidden",
+	Print = "Print",
+	CSV = "CSV"
+}
+
+export class NSTable<RowType> extends Component<NSTableProps<RowType>, NSTableState<RowType>>
+{
+	private nstable_top_div = React.createRef<HTMLDivElement>();
+	NSPagination = React.createRef<NSPagination>();
+	constructor(props: NSTableProps<RowType>)
+	{
+		super(props);
+		this.state = {
+			columns: props.columns,
+			visible_columns: this.getVisibleColumns(),
+			rows: null,
+			totalItems: 0,
+			model: { show: false },
+			selectedIDs: [],
+			selectedRows: [],
+			pageSelectionMode: PageSelectionMode.Hidden,
+			sortItems: this.getSortItems(),
+		};
+		this.getSortItemsKey = this.getSortItemsKey.bind(this);
+		this.getSortItems = this.getSortItems.bind(this);
+		this.setSortItems = this.setSortItems.bind(this);
+		this.getVisibleColumnsKey = this.getVisibleColumnsKey.bind(this);
+		this.getVisibleColumns = this.getVisibleColumns.bind(this);
+		this.setVisibleColumns = this.setVisibleColumns.bind(this);
+		this.setColumns = this.setColumns.bind(this);
+		this.setColumns = this.setColumns.bind(this);
+		this.setRows = this.setRows.bind(this);
+		this.foreachColumn = this.foreachColumn.bind(this);
+		this.getColumns = this.getColumns.bind(this);
+		this.showModal = this.showModal.bind(this);
+		this.hideModal = this.hideModal.bind(this);
+		this.onPageChange = this.onPageChange.bind(this);
+		this.isSomeChecked = this.isSomeChecked.bind(this);
+		this.toggleAllCheckboxes = this.toggleAllCheckboxes.bind(this);
+		this.print = this.print.bind(this);
+		this.exportCSV = this.exportCSV.bind(this);
+		this.isAllChecked = this.isAllChecked.bind(this);
+		this.reload = this.reload.bind(this);
+	}
+	private getSortItemsKey(): string
+	{
+		return "ns_table_" + this.props.name + "_sort_items";
+	}
+	getSortItems(): SortItem[]
+	{
+		let storage = new IStorageLocal();
+		let item = storage.get(this.getSortItemsKey(), "");
+		try
+		{
+			return SortItem.parse(item);
+		} catch (error)
+		{
+		}
+		return [];
+	}
+	setSortItems(items: SortItem[] | null)
+	{
+		let storage = new IStorageLocal();
+		storage.set(this.getSortItemsKey(), SortItem.stringify(items));
+		this.setState({ sortItems: items }, () =>
+		{
+			this.props.onSortChanged?.(items);
+			this.reload(null, null);
+		});
+	}
+	private getVisibleColumnsKey(): string
+	{
+		return "ns_table_" + this.props.name + "_visible_columns";
+	}
+	getVisibleColumns(): { table: string, column: string }[]
+	{
+		let storage = new IStorageLocal();
+		let item = storage.get(this.getVisibleColumnsKey(), "");
+		try
+		{
+			return JSON.parse(item);
+		} catch (error)
+		{
+		}
+		return [];
+	}
+	setVisibleColumns(visible_columns: { table: string, column: string }[])
+	{
+		let storage = new IStorageLocal();
+		storage.set(this.getVisibleColumnsKey(), JSON.stringify(visible_columns));
+		this.setState({ visible_columns }, () =>
+		{
+			this.props.onVisibleColumnsChanged?.(visible_columns);
+		});
+	}
+	setColumns(columns: TableColumnInfo[])
+	{
+		this.setState({ columns });
+	}
+	setRows(rows: RowType[] | null, totalItems: number)
+	{
+		this.setState({ rows, totalItems }, () =>
+		{
+			this.nstable_top_div.current?.scrollIntoView({ behavior: 'smooth', block: 'center' });
+		});
+	}
+	foreachColumn(visible: boolean | null, handler: (column: TableColumnInfo) => void)
+	{
+		let vs = this.getVisibleColumns();
+		let shouldBeVisible = (c: TableColumnInfo) =>
+		{
+			if (vs.length === 0)
+				return true;
+			return vs.filter(v => v.table === c.table.name && v.column === c.name).length > 0;
+		};
+		this.state.columns.forEach(c =>
+		{
+			if (visible === null || shouldBeVisible(c) === visible)
+				handler(c);
+		})
+	}
+	getColumns(visible: boolean | null): TableColumnInfo[]
+	{
+		let columns: TableColumnInfo[] = [];
+		this.foreachColumn(visible, c => columns.push(c));
+		return columns;
+	}
+	private showModal(description: string, title?: string)
+	{
+		this.setState({ model: { show: true, description }, title });
+	}
+	private hideModal()
+	{
+		this.setState({ model: { show: false } });
+	}
+	private onPageChange(page: number, size: number) 
+	{
+		this.reload(page, size);
+	}
+	public async reload(page: number | null, size: number | null)
+	{
+		this.setRows(null, 0);
+		if (page === null)
+			page = this.NSPagination.current?.getCurrentPage() ?? 0;
+		if (size === null)
+			size = this.NSPagination.current?.getPageSize() ?? 0;
+		try
+		{
+			let sorts = this.getSortItems();
+			let res = await this.props.getRows(page, size, sorts);
+			this.setRows(res.rows, res.count);
+		} catch (error)
+		{
+		}
+	}
+	private toggleAllCheckboxes()
+	{
+		let selectedIDs: string[] = [];
+		let selectedRows: RowType[] = [];
+		if (this.getSelectedIDs().length === 0)
+			this.state.rows?.forEach((row, rowIndex) =>
+			{
+				let id = this.props.getRowKey({ index: rowIndex, value: row });
+				selectedIDs.push(id);
+				selectedRows.push(row);
+			})
+		this.setSelectedIDs(selectedIDs, selectedRows);
+	}
+	print(rows: RowType[])
+	{
+		const printWindow = window.open('', '', 'height=500,width=800');
+		printWindow!.document.write(`<html><head><title>${this.props.name}</title>`);
+		printWindow!.document.write('<style>table { width: 100%; border-collapse: collapse; } th, td { border: 1px solid black; padding: 8px; text-align: left; }</style>');
+		printWindow!.document.write('</head><body>');
+		printWindow!.document.write('<table>');
+		printWindow!.document.write('<thead><tr>');
+
+		this.foreachColumn(true, column =>
+		{
+			printWindow!.document.write('<th>' + column.text + '</th>');
+		});
+
+		printWindow!.document.write('</tr></thead><tbody>');
+
+		// Add table rows
+		rows.forEach((rowValue, rowIndex) =>
+		{
+			let row = { index: rowIndex, value: rowValue };
+			printWindow!.document.write('<tr>');
+			this.foreachColumn(true, column =>
+			{
+				let cell = this.getCellTableInfo(column, row, true);
+				printWindow!.document.write('<td>' + (cell.formatted ?? "") + '</td>');
+			});
+			printWindow!.document.write('</tr>');
+		});
+
+		printWindow!.document.write('</tbody></table>');
+		printWindow!.document.write('</body></html>');
+		printWindow!.document.close();
+		printWindow!.print();
+	}
+	exportCSV(rows: RowType[])
+	{
+		const worksheet = utils.json_to_sheet(rows || []);
+		const workbook = utils.book_new();
+		utils.book_append_sheet(workbook, worksheet, this.props.name);
+		writeFile(workbook, this.props.name + ".xlsx");
+	}
+	getSelectedIDs(): string[]
+	{
+		return this.state.selectedIDs;
+	}
+	getSelectedRows(): RowType[]
+	{
+		return this.state.selectedRows;
+	}
+	setSelectedIDs(ids: string[], rows: RowType[], callback?: () => void)
+	{
+		this.setState({ selectedIDs: ids, selectedRows: rows }, () =>
+		{
+			if (this.props.onSelectedIDsChanged)
+				this.props.onSelectedIDsChanged();
+			if (callback)
+				callback();
+		});
+	}
+	private isAllChecked(): boolean
+	{
+		return this.state.rows !== null && this.state.rows.length > 0 && this.state.selectedIDs.length === this.state.rows.length;
+	}
+
+	private isSomeChecked(): boolean
+	{
+		return this.state.selectedIDs.length > 0 && !this.isAllChecked();
+	}
+
+	private getCellTableInfo(column: TableColumnInfo, row: TableRowInfo<RowType>, printable: boolean) 
+	{
+		let value = (row.value as any)[column.name];
+		let formatted = this.getCellFormattedValue(value, column, row, printable);
+		return { column, row, value, formatted };
+	}
+	private getCellFormattedValue(value: any, column: TableColumnInfo, row: TableRowInfo<RowType>, printable: boolean) 
+	{
+		if (this.props.getCellFormattedValue)
+			return this.props.getCellFormattedValue(value, column, row, printable);
+		return column.formatter.format(value, column, row, printable);
+	}
+	override componentDidMount(): void
+	{
+		if (!this.NSPagination.current)
+			this.reload(null, null);
+	}
+	override render()
+	{
+		let getRowAttributes = (row_value: RowType, row_index: number) =>
+		{
+			if (this.props.getRowAttributes)
+				return this.props.getRowAttributes(row_value, row_index);
+			return {};
+		}
+		let getColumnAttributes = (column: TableColumnInfo) =>
+		{
+			if (this.props.getColumnAttributes)
+				return this.props.getColumnAttributes(column);
+			return {};
+		}
+		let onColumnClick = (e: React.MouseEvent<HTMLTableDataCellElement, MouseEvent>, column: TableColumnInfo) =>
+		{
+			if (this.props.onColumnClick)
+				this.props.onColumnClick(e, column);
+		}
+		let onRowClick = (e: React.MouseEvent<HTMLTableRowElement, MouseEvent>, row: TableRowInfo<RowType>) =>
+		{
+			if (this.props.onRowClick)
+				this.props.onRowClick(e, row);
+		};
+		let onCellClick = (e: React.MouseEvent<HTMLTableDataCellElement, MouseEvent>, cell: TableCellInfo<RowType>) =>
+		{
+			let overided = cell.column.formatter.onclick_overrided;
+			if (this.props.onCellClick)
+				overided = this.props.onCellClick(e, cell) ?? true;
+			if (!overided)
+				this.showModal(cell.formatted, cell.column.text);
+		};
+		let content;
+		if (this.state.rows === null)
+		{
+			content = (
+				<tr className="d-flex justify-content-center align-items-center p-0">
+					<td className="w-100 h-100 m-0 mh-100">
+						<NSLoading />
+					</td>
+				</tr>
+			);
+		}
+		else if (this.state.rows.length === 0)
+		{
+			content = (
+				<tr className="d-flex justify-content-center align-items-center p-0">
+					<td className="w-100 h-100 m-0 mh-100">
+						<NSNoData lable='No Data' classList={["p-3"]} />
+					</td>
+				</tr>
+			);
+		}
+		else
+		{
+			content = this.state.rows.map((rowValue, rowIndex) =>
+			{
+				let row = { index: rowIndex, value: rowValue };
+				return <tr
+					key={this.props.getRowKey(row)}
+					{...getRowAttributes(rowValue, rowIndex)}
+					onClick={(e) => { onRowClick(e, row); }}
+				>
+					{
+						this.props.checkbox &&
+						<td>
+							<label
+								htmlFor={`checkbox_device_${this.props.getRowKey(row)}`}
+								className={Styles.ns_check_box_label}
+							>
+								<input
+									id={`checkbox_device_${this.props.getRowKey(row)}`}
+									type="checkbox"
+									className={Styles.ns_check_box}
+									checked={this.state.selectedIDs.includes(this.props.getRowKey(row))}
+									onChange={(e) =>
+									{
+										let selectedIDs = this.state.selectedIDs;
+										let selectedRows = this.state.selectedRows;
+										let id = this.props.getRowKey(row);
+										if (e.currentTarget.checked)
+										{
+											selectedIDs.push(id);
+											selectedRows.push(row.value);
+										}
+										else
+										{
+											selectedIDs = selectedIDs.filter(x => x !== id);
+											selectedRows = selectedRows.filter(x => this.props.getRowKey({ index: -1, value: x }) !== id);
+										}
+										this.setSelectedIDs(selectedIDs, selectedRows);
+									}}
+								/>
+							</label>
+						</td>
+					}
+					{
+						this.getColumns(true).map((column, index) =>
+						{
+							column.index = index + (this.props.checkbox ? 1 : 0);
+							let cell = this.getCellTableInfo(column, row, false);
+							return (
+								<td className='py-3' width={column.formatter.width} {...getColumnAttributes(column)} key={column.index} data-label={`${column.text}: `} onClick={(e) =>
+								{
+									onColumnClick(e, column);
+									onCellClick(e, cell);
+								}}>
+
+									{
+										cell.formatted ?? ""
+									}
+								</td>
+							);
+						})
+					}
+				</tr>
+			});
+		}
+		let getSortSign = (column: TableColumnInfo) =>
+		{
+			if (this.state.sortItems)
+			{
+				let c = this.state.sortItems.filter(c => c.table.name === column.table.name && c.column.name === column.name)[0]
+				if (c)
+				{
+					if (c.ascending)
+						return "↑"
+					return "↓";
+				}
+			}
+			return "";
+		};
+
+		return (
+			<>
+				<div ref={this.nstable_top_div} />
+				<div
+					id={this.props.id}
+					className={this.props.classList?.join(" ") ?? ""}
+					style={this.props.style}
+				>
+					<table className={Styles.ns_table} >
+						<thead>
+							<tr>
+								{
+									this.props.checkbox &&
+									<th style={{ width: "24px", height: "24px" }}>
+										<label
+											htmlFor='checkbox'
+											className={Styles.ns_checkbox_label}
+										>
+											<input
+												id="checkbox"
+												type="checkbox"
+												className={`${Styles.ns_check_box} ${this.isSomeChecked() ? Styles.ns_indeterminate : ""}`}
+												checked={this.getSelectedIDs().length > 0}
+												onChange={this.toggleAllCheckboxes}
+											></input>
+										</label>
+									</th>
+								}
+								{
+									this.getColumns(true).map(column => <th
+										key={column.name}
+										scope="col"
+										style={{ width: column.formatter.width, cursor: "pointer" }}
+										onClick={() =>
+										{
+											let t = new BaseMetaTable(null, column.table.name, column.table.text);
+											let c = new BaseMetaColumn(t, column.name, column.text, "", false);
+											let items = this.getSortItems();
+											if (!items || items.length === 0 || items[0].table.name !== t.name || items[0].column.name !== c.name)
+												this.setSortItems([new SortItem(t, c, true)]);
+											else
+											{
+												if (items[0].ascending)
+													this.setSortItems([new SortItem(t, c, false)]);
+												else
+													this.setSortItems(null);
+											}
+										}}
+									>
+										{
+											column.text + " " + getSortSign(column)
+										}
+									</th>)
+								}
+							</tr>
+						</thead>
+						<tbody className={Styles.ns_tbody}>
+							{content}
+						</tbody>
+					</table>
+					<NSSpace size={NSSpaceSizeType.MINI} />
+					<section className={Styles.ns_table_footer}>
+						{
+							(this.props.ui?.pagination ?? true) &&
+							<NSPagination ref={this.NSPagination} totalItems={this.state.totalItems} onPageChange={this.onPageChange} />
+						}
+						<NSSpace size={NSSpaceSizeType.MINI} classList={["d-lg-none"]} />
+						<div className={Styles.ns_button_panel}>
+							{
+								this.state.pageSelectionMode !== PageSelectionMode.Hidden &&
+								<NSDialogPageSelection<RowType>
+									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={this.NSPagination.current?.getCurrentPage() ?? 1}
+									current_size={this.NSPagination.current?.getPageSize() ?? 0}
+									max_page={1}
+									getItems={async (page, size, selected) =>
+									{
+										if (selected)
+										{
+											let rows: RowType[] = [];
+											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 = await this.props.getRows(page, size, this.getSortItems());
+										return res.rows;
+									}}
+									onFinish={async (items: RowType[]) =>
+									{
+										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 }); }
+									}
+								/>
+							}
+							<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" }}
+							/>
+							<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" }}
+							/>
+							<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" }}
+							/>
+							<NSButton
+								title='Refresh'
+								icon={{ src: "https://static.namirasoft.com/image/concept/refresh/blue.svg" }}
+								onClick={{
+									action: async (onFinished) =>
+									{
+										this.reload(null, null).then(onFinished).catch(onFinished);
+									}
+								}}
+								style={{ border: '1px solid rgba(3, 119, 255, 1)', width: "128px" }} />
+						</div>
+					</section>
+					{
+						this.state.model.show &&
+						<NSDialogInfo
+							description={this.state.model.description}
+							onClose={() => { this.hideModal(); }}
+							title={this.state.title}
+							show_as_code={true}
+						>
+							<></>
+						</NSDialogInfo>
+					}
+				</div >
+			</>
+		);
+	}
 }