namirasoft-site-react 1.4.553 → 1.4.554

package/src/components/NSTable.tsx

@@ -1,1119 +1,1121 @@
-"use client";
-import { BaseMetaColumn, BaseMetaTable, IStorageLocal, SortItem } from "namirasoft-core";
-import { Component, createRef, ReactNode } from "react";
-import { utils, writeFile } from 'xlsx';
-import { BaseColumnFormatter } from '../formatter/BaseColumnFormatter';
-import { IBaseComponentProps } from "../props/IBaseComponentProps";
-import { NSButton, NSButtonProps } from './NSButton';
-import { NSDialogInfo } from './NSDialogInfo';
-import { NSDialogPageSelection } from './NSDialogPageSelection';
-import { NSLoading } from './NSLoading';
-import { NSNoData } from './NSNoData';
-import { NSPagination } from './NSPagination';
-import Styles from './NSTable.module.css';
-
-export interface TableInfo
-{
-	name: string;
-	text: string;
-}
-
-export interface TableColumnInfo
-{
-	table: TableInfo;
-	index: number;
-	type: string;
-	name: string;
-	text: string;
-	formatter: BaseColumnFormatter;
-	group?: string;
-	defaults?: {
-		hidden?: boolean;
-	};
-}
-
-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;
-	scroll?: 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<HTMLTableCellElement, MouseEvent>, column: TableColumnInfo) => void;
-	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, group?: string[] };
-	defaultExpanded?: boolean;
-	onSelectedIDsChanged?: () => void;
-	onSortChanged?: (items: SortItem[] | null) => void;
-	onVisibleColumnsChanged?: (visible_columns: { table: string, column: string }[]) => void;
-	ui?: {
-		pagination?: boolean;
-		button_panel?: 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[];
-	expandedIDs: string[];
-	pageSelectionMode: PageSelectionMode;
-	sortItems: SortItem[] | null;
-	columnWidths: { [key: string]: number };
-	fullscreen: boolean;
-}
-
-enum PageSelectionMode
-{
-	Hidden = "Hidden",
-	Print = "Print",
-	CSV = "CSV"
-}
-
-export class NSTable<RowType> extends Component<NSTableProps<RowType>, NSTableState<RowType>>
-{
-	private Table_Ref = createRef<HTMLTableElement>();
-	private TableScrollbar_Ref = createRef<HTMLDivElement>();
-	private TableScrollbarContent_Ref = createRef<HTMLDivElement>();
-	NSPagination = createRef<NSPagination>();
-
-	private LastSelectedRowID: number | null = null;
-	private resizeMoveHandler: ((e: MouseEvent) => void) | null = null;
-	private resizeUpHandler: (() => void) | null = null;
-
-	constructor(props: NSTableProps<RowType>)
-	{
-		super(props);
-		this.state = {
-			columns: props.columns,
-			visible_columns: this.getVisibleColumns(),
-			rows: null,
-			totalItems: 0,
-			model: { show: false },
-			selectedIDs: [],
-			selectedRows: [],
-			expandedIDs: [],
-			pageSelectionMode: PageSelectionMode.Hidden,
-			sortItems: this.getSortItems(),
-			columnWidths: this.loadColumnWidths(),
-			fullscreen: false,
-		};
-		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.isSomeSelected = this.isSomeSelected.bind(this);
-		this.toggleAllSelections = this.toggleAllSelections.bind(this);
-		this.print = this.print.bind(this);
-		this.exportCSV = this.exportCSV.bind(this);
-		this.isAllSelected = this.isAllSelected.bind(this);
-		this.reload = this.reload.bind(this);
-		this.toggleFullscreen = this.toggleFullscreen.bind(this);
-	}
-	private toggleFullscreen()
-	{
-		this.setState({ fullscreen: !this.state.fullscreen }, () => this.syncScrollbarWidth());
-	}
-	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 });
-	}
-	private syncScrollbarWidth()
-	{
-		if (this.TableScrollbarContent_Ref.current)
-			this.TableScrollbarContent_Ref.current.style.width = (this.Table_Ref.current?.scrollWidth ?? 0) + "px";
-	}
-	setRows(rows: RowType[] | null, totalItems: number)
-	{
-		this.setState({ rows, totalItems }, () =>
-		{
-			if (this.props.scroll !== false)
-				this.Table_Ref.current?.scrollIntoView({ behavior: 'smooth', block: 'center' });
-			this.syncScrollbarWidth();
-		});
-	}
-	foreachColumn(visible: boolean | null, handler: (column: TableColumnInfo) => void)
-	{
-		let vs = this.getVisibleColumns();
-		let shouldBeVisible = (c: TableColumnInfo) =>
-		{
-			if (vs.length === 0)
-				return !c.defaults?.hidden;
-			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));
-		if (visible === true)
-		{
-			let vs = this.getVisibleColumns();
-			if (vs.length > 0)
-				columns.sort((a, b) =>
-				{
-					let ai = vs.findIndex(v => v.table === a.table.name && v.column === a.name);
-					let bi = vs.findIndex(v => v.table === b.table.name && v.column === b.name);
-					return ai - bi;
-				});
-		}
-		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 toggleAllSelections()
-	{
-		let selectedIDs: string[] = [];
-		let selectedRows: RowType[] = [];
-		this.LastSelectedRowID = null;
-
-		if (this.getSelectedIDs().length === 0)
-		{
-			this.state.rows?.forEach((row, rowIndex) =>
-			{
-				let rowInfo = { index: rowIndex, value: row };
-				if (this.props.getRowCheckboxDisabled?.(rowInfo))
-					return;
-				let id = this.props.getRowKey(rowInfo);
-				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");
-	}
-
-	handleSelectRow(row: TableRowInfo<RowType>, selected: boolean, ctrlKey: boolean, shiftKey: boolean)
-	{
-		let selectedIDs = this.state.selectedIDs;
-		let selectedRows = this.state.selectedRows;
-		let rowID = this.props.getRowKey(row);
-
-		if (shiftKey)
-		{
-			selectedRows = this.getRowsInRange(this.LastSelectedRowID ?? 0, row.index);
-			selectedIDs = selectedRows.map(row => this.props.getRowKey({ index: -1, value: row }));
-		}
-		else if (selected)
-		{
-			if (this.isMultipleSelected() && !ctrlKey)
-			{
-				selectedIDs = [rowID];
-				selectedRows = [row.value];
-				this.LastSelectedRowID = row.index;
-			}
-			else
-			{
-				selectedIDs = selectedIDs.filter(x => x !== rowID);
-				selectedRows = selectedRows.filter(x => this.props.getRowKey({ index: -1, value: x }) !== rowID);
-				this.LastSelectedRowID = ctrlKey ? row.index : null;
-			}
-		}
-		else
-		{
-			if (ctrlKey)
-			{
-				selectedIDs.push(rowID);
-				selectedRows.push(row.value);
-			}
-			else
-			{
-				selectedIDs = [rowID];
-				selectedRows = [row.value];
-			}
-			this.LastSelectedRowID = row.index;
-		}
-
-		this.setSelectedIDs(selectedIDs, selectedRows);
-	}
-	getRowsInRange(fromIndex: number, toIndex: number)
-	{
-		if (!this.state.rows)
-			return [];
-
-		let start = Math.min(fromIndex, toIndex);
-		let end = Math.max(fromIndex, toIndex);
-
-		return this.state.rows?.slice(start, end + 1);
-	}
-	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 getGroupKey(row: RowType): string
-	{
-		let h = this.props.hierarchy;
-		if (!h || !h.group || h.group.length === 0)
-			return "";
-		return h.group.map(g =>
-		{
-			let v = (row as any)[g];
-			return v === null || v === undefined ? "" : String(v);
-		}).join("
");
-	}
-	private buildChildrenMap(): Map<string, RowType[]> | null
-	{
-		let h = this.props.hierarchy;
-		if (!h || !this.state.rows)
-			return null;
-		let map = new Map<string, RowType[]>();
-		for (let r of this.state.rows)
-		{
-			let pid = (r as any)[h.parent];
-			let pidKey = pid === null || pid === undefined ? "" : String(pid);
-			let key = pidKey + "" + this.getGroupKey(r);
-			let arr = map.get(key);
-			if (!arr) { arr = []; map.set(key, arr); }
-			arr.push(r);
-		}
-		return map;
-	}
-	private getRowIdValue(row: RowType): string
-	{
-		let h = this.props.hierarchy;
-		if (!h) return "";
-		let v = (row as any)[h.id];
-		return v === null || v === undefined ? "" : String(v);
-	}
-	private getRowChildLookupKey(row: RowType): string
-	{
-		return this.getRowIdValue(row) + "" + this.getGroupKey(row);
-	}
-	private isExpanded(rowKey: string): boolean
-	{
-		let inList = this.state.expandedIDs.includes(rowKey);
-		return this.props.defaultExpanded ? !inList : inList;
-	}
-	private toggleExpanded(rowKey: string)
-	{
-		let ids = this.state.expandedIDs;
-		if (ids.includes(rowKey))
-			ids = ids.filter(x => x !== rowKey);
-		else
-			ids = [...ids, rowKey];
-		this.setState({ expandedIDs: ids });
-	}
-	private isAllSelected(): boolean
-	{
-		if (!this.state.rows || this.state.rows.length === 0)
-			return false;
-		const selectableCount = this.state.rows.filter((row, i) =>
-			!this.props.getRowCheckboxDisabled?.({ index: i, value: row })
-		).length;
-		return selectableCount > 0 && this.state.selectedIDs.length === selectableCount;
-	}
-	private isSomeSelected(): boolean
-	{
-		return this.state.selectedIDs.length > 0 && !this.isAllSelected();
-	}
-	private isMultipleSelected(): boolean
-	{
-		return this.state.selectedIDs.length > 1;
-	}
-	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);
-	}
-	private getColumnWidthsKey(): string
-	{
-		return "ns_table_" + this.props.name + "_column_widths";
-	}
-	private loadColumnWidths(): { [key: string]: number }
-	{
-		let storage = new IStorageLocal();
-		let item = storage.get(this.getColumnWidthsKey(), "");
-		try
-		{
-			return JSON.parse(item);
-		} 
-        catch
-		{
-			return {};
-		}
-	}
-	private saveColumnWidths(widths: { [key: string]: number })
-	{
-		let storage = new IStorageLocal();
-		storage.set(this.getColumnWidthsKey(), JSON.stringify(widths));
-	}
-	private getColumnKey(column: TableColumnInfo): string
-	{
-		return column.table.name + "_" + column.name;
-	}
-	private getColumnWidth(column: TableColumnInfo): number
-	{
-		let key = this.getColumnKey(column);
-		if (this.state.columnWidths[key] !== undefined)
-			return this.state.columnWidths[key];
-		let w = column.formatter.width;
-		if (typeof w === 'number') return w;
-		if (typeof w === 'string')
-		{
-			let parsed = parseInt(w, 10);
-			if (!isNaN(parsed)) return parsed;
-		}
-		return 120;
-	}
-	private getGridTemplateColumns(): string
-	{
-		let parts: string[] = [];
-		if (this.props.checkbox)
-			parts.push("40px");
-		this.getColumns(true).forEach(column =>
-		{
-			parts.push(this.getColumnWidth(column) + "px");
-		});
-		return parts.join(" ");
-	}
-	private startResize(e: React.MouseEvent, column: TableColumnInfo)
-	{
-		e.preventDefault();
-		e.stopPropagation();
-		let key = this.getColumnKey(column);
-		let startX = e.clientX;
-		let startWidth = this.getColumnWidth(column);
-		let currentWidths = { ...this.state.columnWidths };
-		document.body.style.cursor = 'col-resize';
-		document.body.style.userSelect = 'none';
-		const onMouseMove = (ev: MouseEvent) =>
-		{
-			let delta = ev.clientX - startX;
-			let newWidth = Math.max(80, startWidth + delta);
-			currentWidths = { ...currentWidths, [key]: newWidth };
-			this.setState({ columnWidths: currentWidths }, () => this.syncScrollbarWidth());
-		};
-		const onMouseUp = () =>
-		{
-			document.body.style.cursor = '';
-			document.body.style.userSelect = '';
-			document.removeEventListener('mousemove', onMouseMove);
-			document.removeEventListener('mouseup', onMouseUp);
-			this.resizeMoveHandler = null;
-			this.resizeUpHandler = null;
-			this.saveColumnWidths(currentWidths);
-		};
-		this.resizeMoveHandler = onMouseMove;
-		this.resizeUpHandler = onMouseUp;
-		document.addEventListener('mousemove', onMouseMove);
-		document.addEventListener('mouseup', onMouseUp);
-	}
-	override componentDidMount(): void
-	{
-		if (!this.NSPagination.current)
-			this.reload(null, null);
-
-		this.syncScrollbarWidth();
-	}
-	override componentWillUnmount(): void
-	{
-		if (this.resizeMoveHandler)
-			document.removeEventListener('mousemove', this.resizeMoveHandler);
-		if (this.resizeUpHandler)
-			document.removeEventListener('mouseup', this.resizeUpHandler);
-	}
-	override render()
-	{
-
-		let show_pagination = this.props.ui?.pagination ?? true;
-		let show_button_panel = this.props.ui?.button_panel ?? true;
-		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<HTMLTableCellElement, MouseEvent>, column: TableColumnInfo) =>
-		{
-			if ((e.target as HTMLElement).tagName !== "SPAN")
-				return;
-
-			if (this.props.onColumnClick)
-				this.props.onColumnClick(e, column);
-		}
-		let onRowClick = (e: React.MouseEvent<HTMLTableRowElement, MouseEvent>, row: TableRowInfo<RowType>, selected: boolean) =>
-		{
-			const target = e.target as HTMLElement;
-
-			if (target.tagName === "TR" || target.tagName === "TD" || target.closest("td")?.dataset.cellType === "checkbox")
-				this.handleSelectRow(row, selected, e.ctrlKey, e.shiftKey);
-
-			if (this.props.onRowClick)
-				this.props.onRowClick(e, row);
-		};
-		let onCellClick = (e: React.MouseEvent<HTMLTableCellElement, MouseEvent>, cell: TableCellInfo<RowType>) =>
-		{
-			if ((e.target as HTMLElement).tagName !== "SPAN")
-				return;
-
-			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 gridTemplateColumns = this.getGridTemplateColumns();
-		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
-		{
-			let hierarchical = !!this.props.hierarchy;
-			let childrenMap = this.buildChildrenMap();
-			let indexOfRow = new Map<RowType, number>();
-			this.state.rows.forEach((r, i) => indexOfRow.set(r, i));
-			let INDENT = 16;
-			let lineColor = "rgba(20, 27, 92, 0.35)";
-			let renderRow = (rowValue: RowType, rowIndex: number, depth: number, parentKey: string, ancestorHasNext: boolean[], isLastChild: boolean): React.ReactNode[] =>
-			{
-				let row = { index: rowIndex, value: rowValue };
-				let rowKey = this.props.getRowKey(row);
-				let reactKey = parentKey ? `${parentKey}>${rowKey}` : rowKey;
-				let isSelected = this.state.selectedIDs.includes(rowKey);
-				let isLastSelected = this.LastSelectedRowID === row.index;
-				let isCheckboxDisabled = this.props.getRowCheckboxDisabled?.(row) ?? false;
-				let children: RowType[] = [];
-				if (hierarchical && childrenMap)
-				{
-					let lookupKey = this.getRowChildLookupKey(rowValue);
-					children = childrenMap.get(lookupKey) ?? [];
-				}
-				let hasChildren = children.length > 0;
-				let expanded = this.isExpanded(rowKey);
-				let rowAttrs = getRowAttributes(rowValue, rowIndex);
-				let nodes: React.ReactNode[] = [];
-				nodes.push(
-					<tr
-						key={reactKey}
-						{...rowAttrs}
-						style={{ ...(rowAttrs.style || {}), gridTemplateColumns }}
-						className={`${isSelected ? Styles.ns_selected : ""} ${isLastSelected ? Styles.ns_last_selected : ""}`.trim()}
-						onClick={(e) => !isCheckboxDisabled && onRowClick(e, row, isSelected)}
-					>
-						{
-							this.props.checkbox &&
-							<td data-cell-type="checkbox">
-								<label
-									htmlFor={`checkbox_device_${rowKey}`}
-									className={Styles.ns_check_box_label}
-								>
-									<input
-										id={`checkbox_device_${rowKey}`}
-										type="checkbox"
-										checked={isSelected}
-										disabled={isCheckboxDisabled}
-										className={Styles.ns_check_box}
-										onChange={() => { }}
-									/>
-								</label>
-							</td>
-						}
-						{
-							this.getColumns(true).map((column, index) =>
-							{
-								column.index = index + (this.props.checkbox ? 1 : 0);
-								let cell = this.getCellTableInfo(column, row, false);
-								let isFirstDataColumn = index === 0;
-								return (
-									<td
-										key={column.index}
-										{...getColumnAttributes(column)}
-										data-label={`${column.text}: `}
-										width={column.formatter.width}
-										className=''
-										style={isFirstDataColumn && hierarchical ? { overflow: "visible" } : undefined}
-										onClick={(e) =>
-										{
-											onColumnClick(e, column);
-											onCellClick(e, cell);
-										}}
-									>
-										{isFirstDataColumn && hierarchical ? (
-											<div
-												style={{
-													display: "flex",
-													alignItems: "center",
-												}}
-											>
-												{Array.from({ length: depth }).map((_, i) =>
-												{
-													let isLastLevel = i === depth - 1;
-													let drawVerticalTop = i < depth - 1 ? ancestorHasNext[i] : true;
-													let drawVerticalBottom = i < depth - 1 ? ancestorHasNext[i] : !isLastChild;
-													let drawHorizontal = isLastLevel;
-													return (
-														<span
-															key={i}
-															style={{
-																position: "relative",
-																display: "inline-block",
-																width: INDENT,
-																alignSelf: "stretch",
-																flex: "0 0 auto",
-															}}
-														>
-															{drawVerticalTop && (
-																<span style={{
-																	position: "absolute",
-																	left: INDENT / 2,
-																	top: -24,
-																	height: "calc(50% + 24px)",
-																	width: 1,
-																	background: lineColor,
-																}} />
-															)}
-															{drawVerticalBottom && (
-																<span style={{
-																	position: "absolute",
-																	left: INDENT / 2,
-																	top: "50%",
-																	height: "calc(50% + 24px)",
-																	width: 1,
-																	background: lineColor,
-																}} />
-															)}
-															{drawHorizontal && (
-																<span style={{
-																	position: "absolute",
-																	left: INDENT / 2,
-																	top: "50%",
-																	width: INDENT / 2,
-																	height: 1,
-																	background: lineColor,
-																}} />
-															)}
-														</span>
-													);
-												})}
-												<span
-													data-cell-type="tree-toggle"
-													style={{
-														display: "inline-flex",
-														alignItems: "center",
-														justifyContent: "center",
-														marginRight: 6,
-													}}
-													onClick={(e) => e.stopPropagation()}
-												>
-													{hasChildren ? (
-														<button
-															type="button"
-															onClick={(e) =>
-															{
-																e.stopPropagation();
-																this.toggleExpanded(rowKey);
-															}}
-															style={{
-																width: 18,
-																height: 18,
-																lineHeight: "16px",
-																padding: 0,
-																border: "1px solid rgba(20, 27, 92, 0.4)",
-																borderRadius: 3,
-																background: "#fff",
-																cursor: "pointer",
-																fontSize: 14,
-																fontWeight: "bold",
-																color: "rgba(20, 27, 92, 1)",
-															}}
-															aria-label={expanded ? "Collapse" : "Expand"}
-														>
-															{expanded ? "−" : "+"}
-														</button>
-													) : (
-														<span style={{ display: "inline-block", width: 18, height: 18 }} />
-													)}
-												</span>
-												<span>{cell.formatted ?? ""}</span>
-											</div>
-										) : (
-											<span>{cell.formatted ?? ""}</span>
-										)}
-									</td>
-								);
-							})
-						}
-					</tr>
-				);
-				if (hierarchical && hasChildren && expanded)
-				{
-					let childAncestors = [...ancestorHasNext, !isLastChild];
-					children.forEach((child, ci2) =>
-					{
-						let ci = indexOfRow.get(child) ?? -1;
-						let lastChild = ci2 === children.length - 1;
-						renderRow(child, ci, depth + 1, reactKey, childAncestors, lastChild).forEach(n => nodes.push(n));
-					});
-				}
-				return nodes;
-			};
-			let topLevel: RowType[];
-			if (hierarchical && this.props.hierarchy)
-			{
-				let parentCol = this.props.hierarchy.parent;
-				let ids = new Set<string>();
-				this.state.rows.forEach(r => ids.add(this.getRowIdValue(r) + "" + this.getGroupKey(r)));
-				topLevel = this.state.rows.filter(r =>
-				{
-					let pid = (r as any)[parentCol];
-					let pidKey = pid === null || pid === undefined ? "" : String(pid);
-					if (pidKey === "")
-						return true;
-					return !ids.has(pidKey + "" + this.getGroupKey(r));
-				});
-			}
-			else
-			{
-				topLevel = this.state.rows;
-			}
-			content = topLevel.flatMap((rowValue, i) => renderRow(rowValue, indexOfRow.get(rowValue) ?? 0, 0, "", [], i === topLevel.length - 1));
-		}
-
-		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 "";
-		};
-
-		let buttonPanel = show_button_panel && (
-			<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={this.state.totalItems}
-						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 })}
-					/>
-				}
-				{
-					this.props.buttons?.map((button, index) => (
-						<NSButton
-							key={index}
-							{...button}
-							classList={[Styles.ns_table_button, ...(button.classList ?? [])]}
-						/>
-					))
-				}
-                <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' }}
-                />
-				<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]}
-				/>
-				<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' }}
-				/>
-                <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]}
-                />
-				<NSButton
-					attributes={{ 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);
-						}
-					}}
-					classList={[Styles.ns_table_button]}
-                    style={{ border: '1px solid rgb(3, 119, 255)' }}
-                />
-			</div>
-		);
-
-		return (
-			<div
-				id={this.props.id}
-				className={[...this.props.classList ?? [], Styles.ns_table_wrapper, this.state.fullscreen ? Styles.ns_fullscreen : ""].filter(Boolean).join(" ")}
-				style={{ ...this.props.style }}
-			>
-				<div className={Styles.ns_table_topbar}>
-                    {
-                        !this.state.fullscreen &&
-                        this.props.headerChildren
-                    }
-					{
-						show_pagination &&
-                        <NSPagination ref={this.NSPagination} totalItems={this.state.totalItems} onPageChange={this.onPageChange} style={{ marginRight: "auto" }} />
-					}
-					{buttonPanel}
-				</div>
-				{
-					!this.state.fullscreen && this.props.children &&
-					<div className={Styles.ns_table_children}>
-						{this.props.children}
-					</div>
-				}
-				<table
-					ref={this.Table_Ref}
-					className={Styles.ns_table}
-					onScroll={() =>
-					{
-						if (this.TableScrollbar_Ref.current)
-							this.TableScrollbar_Ref.current.scrollLeft = this.Table_Ref.current?.scrollLeft ?? 0;
-					}}
-				>
-					<thead>
-						<tr style={{ gridTemplateColumns }}>
-							{
-								this.props.checkbox &&
-								<th data-cell-type="checkbox" style={{ width: "24px", height: "24px", padding: 0 }}>
-									<label
-										htmlFor='checkbox'
-										className={Styles.ns_checkbox_label}
-									>
-										<input
-											id="checkbox"
-											type="checkbox"
-											className={`${Styles.ns_check_box} ${this.isSomeSelected() ? Styles.ns_indeterminate : ""}`}
-											checked={this.getSelectedIDs().length > 0}
-											onChange={this.toggleAllSelections}
-										></input>
-									</label>
-								</th>
-							}
-							{
-								this.getColumns(true).map(column => <th
-									key={column.name}
-									scope="col"
-									style={{ width: this.getColumnWidth(column), cursor: "pointer", position: "relative", userSelect: "none" }}
-									onClick={(e) =>
-									{
-										if ((e.target as HTMLElement).closest('[data-resize-handle]')) return;
-										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);
-										}
-									}}
-								>
-									<span>{column.text + " " + getSortSign(column)}</span>
-									<div
-										data-resize-handle="true"
-										className={Styles.ns_resize_handle}
-										onMouseDown={(e) => this.startResize(e, column)}
-										onClick={(e) => e.stopPropagation()}
-									/>
-								</th>)
-							}
-						</tr>
-					</thead>
-
-					<tbody className={Styles.ns_tbody}>
-						{content}
-					</tbody>
-				</table>
-
-				<div
-					ref={this.TableScrollbar_Ref}
-					className={Styles.ns_table_scrollbar}
-					onScroll={() =>
-					{
-						if (this.Table_Ref.current)
-							this.Table_Ref.current.scrollLeft = this.TableScrollbar_Ref.current?.scrollLeft ?? 0;
-					}}
-				>
-					<div
-						ref={this.TableScrollbarContent_Ref}
-						className={Styles.ns_table_scrollbar_content}>
-					</div>
-				</div>
-
-				{
-					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 { BaseMetaColumn, BaseMetaTable, IStorageLocal, SortItem } from "namirasoft-core";
+import { Component, createRef, ReactNode } from "react";
+import { utils, writeFile } from 'xlsx';
+import { BaseColumnFormatter } from '../formatter/BaseColumnFormatter';
+import { IBaseComponentProps } from "../props/IBaseComponentProps";
+import { NSButton, NSButtonProps } from './NSButton';
+import { NSDialogInfo } from './NSDialogInfo';
+import { NSDialogPageSelection } from './NSDialogPageSelection';
+import { NSLoading } from './NSLoading';
+import { NSNoData } from './NSNoData';
+import { NSPagination } from './NSPagination';
+import Styles from './NSTable.module.css';
+
+export interface TableInfo
+{
+	name: string;
+	text: string;
+}
+
+export interface TableColumnInfo
+{
+	table: TableInfo;
+	index: number;
+	type: string;
+	name: string;
+	text: string;
+	formatter: BaseColumnFormatter;
+	group?: string;
+	defaults?: {
+		hidden?: boolean;
+	};
+}
+
+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;
+	scroll?: 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<HTMLTableCellElement, MouseEvent>, column: TableColumnInfo) => void;
+	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, group?: string[] };
+	defaultExpanded?: boolean;
+	onSelectedIDsChanged?: () => void;
+	onSortChanged?: (items: SortItem[] | null) => void;
+	onVisibleColumnsChanged?: (visible_columns: { table: string, column: string }[]) => void;
+	ui?: {
+		pagination?: boolean;
+		button_panel?: 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[];
+	expandedIDs: string[];
+	pageSelectionMode: PageSelectionMode;
+	sortItems: SortItem[] | null;
+	columnWidths: { [key: string]: number };
+	fullscreen: boolean;
+}
+
+enum PageSelectionMode
+{
+	Hidden = "Hidden",
+	Print = "Print",
+	CSV = "CSV"
+}
+
+export class NSTable<RowType> extends Component<NSTableProps<RowType>, NSTableState<RowType>>
+{
+	private Table_Ref = createRef<HTMLTableElement>();
+	private TableScrollbar_Ref = createRef<HTMLDivElement>();
+	private TableScrollbarContent_Ref = createRef<HTMLDivElement>();
+	NSPagination = createRef<NSPagination>();
+
+	private LastSelectedRowID: number | null = null;
+	private resizeMoveHandler: ((e: MouseEvent) => void) | null = null;
+	private resizeUpHandler: (() => void) | null = null;
+
+	constructor(props: NSTableProps<RowType>)
+	{
+		super(props);
+		this.state = {
+			columns: props.columns,
+			visible_columns: this.getVisibleColumns(),
+			rows: null,
+			totalItems: 0,
+			model: { show: false },
+			selectedIDs: [],
+			selectedRows: [],
+			expandedIDs: [],
+			pageSelectionMode: PageSelectionMode.Hidden,
+			sortItems: this.getSortItems(),
+			columnWidths: this.loadColumnWidths(),
+			fullscreen: false,
+		};
+		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.isSomeSelected = this.isSomeSelected.bind(this);
+		this.toggleAllSelections = this.toggleAllSelections.bind(this);
+		this.print = this.print.bind(this);
+		this.exportCSV = this.exportCSV.bind(this);
+		this.isAllSelected = this.isAllSelected.bind(this);
+		this.reload = this.reload.bind(this);
+		this.toggleFullscreen = this.toggleFullscreen.bind(this);
+	}
+	private toggleFullscreen()
+	{
+		this.setState({ fullscreen: !this.state.fullscreen }, () => this.syncScrollbarWidth());
+	}
+	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 });
+	}
+	private syncScrollbarWidth()
+	{
+		if (this.TableScrollbarContent_Ref.current)
+			this.TableScrollbarContent_Ref.current.style.width = (this.Table_Ref.current?.scrollWidth ?? 0) + "px";
+	}
+	setRows(rows: RowType[] | null, totalItems: number)
+	{
+		this.setState({ rows, totalItems }, () =>
+		{
+			if (this.props.scroll !== false)
+				this.Table_Ref.current?.scrollIntoView({ behavior: 'smooth', block: 'center' });
+			this.syncScrollbarWidth();
+		});
+	}
+	foreachColumn(visible: boolean | null, handler: (column: TableColumnInfo) => void)
+	{
+		let vs = this.getVisibleColumns();
+		let shouldBeVisible = (c: TableColumnInfo) =>
+		{
+			if (vs.length === 0)
+				return !c.defaults?.hidden;
+			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));
+		if (visible === true)
+		{
+			let vs = this.getVisibleColumns();
+			if (vs.length > 0)
+				columns.sort((a, b) =>
+				{
+					let ai = vs.findIndex(v => v.table === a.table.name && v.column === a.name);
+					let bi = vs.findIndex(v => v.table === b.table.name && v.column === b.name);
+					return ai - bi;
+				});
+		}
+		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 toggleAllSelections()
+	{
+		let selectedIDs: string[] = [];
+		let selectedRows: RowType[] = [];
+		this.LastSelectedRowID = null;
+
+		if (this.getSelectedIDs().length === 0)
+		{
+			this.state.rows?.forEach((row, rowIndex) =>
+			{
+				let rowInfo = { index: rowIndex, value: row };
+				if (this.props.getRowCheckboxDisabled?.(rowInfo))
+					return;
+				let id = this.props.getRowKey(rowInfo);
+				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");
+	}
+
+	handleSelectRow(row: TableRowInfo<RowType>, selected: boolean, ctrlKey: boolean, shiftKey: boolean)
+	{
+		let selectedIDs = this.state.selectedIDs;
+		let selectedRows = this.state.selectedRows;
+		let rowID = this.props.getRowKey(row);
+
+		if (shiftKey)
+		{
+			selectedRows = this.getRowsInRange(this.LastSelectedRowID ?? 0, row.index);
+			selectedIDs = selectedRows.map(row => this.props.getRowKey({ index: -1, value: row }));
+		}
+		else if (selected)
+		{
+			if (this.isMultipleSelected() && !ctrlKey)
+			{
+				selectedIDs = [rowID];
+				selectedRows = [row.value];
+				this.LastSelectedRowID = row.index;
+			}
+			else
+			{
+				selectedIDs = selectedIDs.filter(x => x !== rowID);
+				selectedRows = selectedRows.filter(x => this.props.getRowKey({ index: -1, value: x }) !== rowID);
+				this.LastSelectedRowID = ctrlKey ? row.index : null;
+			}
+		}
+		else
+		{
+			if (ctrlKey)
+			{
+				selectedIDs.push(rowID);
+				selectedRows.push(row.value);
+			}
+			else
+			{
+				selectedIDs = [rowID];
+				selectedRows = [row.value];
+			}
+			this.LastSelectedRowID = row.index;
+		}
+
+		this.setSelectedIDs(selectedIDs, selectedRows);
+	}
+	getRowsInRange(fromIndex: number, toIndex: number)
+	{
+		if (!this.state.rows)
+			return [];
+
+		let start = Math.min(fromIndex, toIndex);
+		let end = Math.max(fromIndex, toIndex);
+
+		return this.state.rows?.slice(start, end + 1);
+	}
+	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 getGroupKey(row: RowType): string
+	{
+		let h = this.props.hierarchy;
+		if (!h || !h.group || h.group.length === 0)
+			return "";
+		return h.group.map(g =>
+		{
+			let v = (row as any)[g];
+			return v === null || v === undefined ? "" : String(v);
+		}).join("
");
+	}
+	private buildChildrenMap(): Map<string, RowType[]> | null
+	{
+		let h = this.props.hierarchy;
+		if (!h || !this.state.rows)
+			return null;
+		let map = new Map<string, RowType[]>();
+		for (let r of this.state.rows)
+		{
+			let pid = (r as any)[h.parent];
+			let pidKey = pid === null || pid === undefined ? "" : String(pid);
+			let key = pidKey + "" + this.getGroupKey(r);
+			let arr = map.get(key);
+			if (!arr) { arr = []; map.set(key, arr); }
+			arr.push(r);
+		}
+		return map;
+	}
+	private getRowIdValue(row: RowType): string
+	{
+		let h = this.props.hierarchy;
+		if (!h) return "";
+		let v = (row as any)[h.id];
+		return v === null || v === undefined ? "" : String(v);
+	}
+	private getRowChildLookupKey(row: RowType): string
+	{
+		return this.getRowIdValue(row) + "" + this.getGroupKey(row);
+	}
+	private isExpanded(rowKey: string): boolean
+	{
+		let inList = this.state.expandedIDs.includes(rowKey);
+		return this.props.defaultExpanded ? !inList : inList;
+	}
+	private toggleExpanded(rowKey: string)
+	{
+		let ids = this.state.expandedIDs;
+		if (ids.includes(rowKey))
+			ids = ids.filter(x => x !== rowKey);
+		else
+			ids = [...ids, rowKey];
+		this.setState({ expandedIDs: ids });
+	}
+	private isAllSelected(): boolean
+	{
+		if (!this.state.rows || this.state.rows.length === 0)
+			return false;
+		const selectableCount = this.state.rows.filter((row, i) =>
+			!this.props.getRowCheckboxDisabled?.({ index: i, value: row })
+		).length;
+		return selectableCount > 0 && this.state.selectedIDs.length === selectableCount;
+	}
+	private isSomeSelected(): boolean
+	{
+		return this.state.selectedIDs.length > 0 && !this.isAllSelected();
+	}
+	private isMultipleSelected(): boolean
+	{
+		return this.state.selectedIDs.length > 1;
+	}
+	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);
+	}
+	private getColumnWidthsKey(): string
+	{
+		return "ns_table_" + this.props.name + "_column_widths";
+	}
+	private loadColumnWidths(): { [key: string]: number }
+	{
+		let storage = new IStorageLocal();
+		let item = storage.get(this.getColumnWidthsKey(), "");
+		try
+		{
+			return JSON.parse(item);
+		}
+		catch
+		{
+			return {};
+		}
+	}
+	private saveColumnWidths(widths: { [key: string]: number })
+	{
+		let storage = new IStorageLocal();
+		storage.set(this.getColumnWidthsKey(), JSON.stringify(widths));
+	}
+	private getColumnKey(column: TableColumnInfo): string
+	{
+		return column.table.name + "_" + column.name;
+	}
+	private getColumnWidth(column: TableColumnInfo): number
+	{
+		let key = this.getColumnKey(column);
+		if (this.state.columnWidths[key] !== undefined)
+			return this.state.columnWidths[key];
+		let w = column.formatter.width;
+		if (typeof w === 'number') return w;
+		if (typeof w === 'string')
+		{
+			let parsed = parseInt(w, 10);
+			if (!isNaN(parsed)) return parsed;
+		}
+		return 120;
+	}
+	private getGridTemplateColumns(): string
+	{
+		let parts: string[] = [];
+		if (this.props.checkbox)
+			parts.push("40px");
+		this.getColumns(true).forEach(column =>
+		{
+			parts.push(this.getColumnWidth(column) + "px");
+		});
+		return parts.join(" ");
+	}
+	private startResize(e: React.MouseEvent, column: TableColumnInfo)
+	{
+		e.preventDefault();
+		e.stopPropagation();
+		let key = this.getColumnKey(column);
+		let startX = e.clientX;
+		let startWidth = this.getColumnWidth(column);
+		let currentWidths = { ...this.state.columnWidths };
+		document.body.style.cursor = 'col-resize';
+		document.body.style.userSelect = 'none';
+		const onMouseMove = (ev: MouseEvent) =>
+		{
+			let delta = ev.clientX - startX;
+			let newWidth = Math.max(80, startWidth + delta);
+			currentWidths = { ...currentWidths, [key]: newWidth };
+			this.setState({ columnWidths: currentWidths }, () => this.syncScrollbarWidth());
+		};
+		const onMouseUp = () =>
+		{
+			document.body.style.cursor = '';
+			document.body.style.userSelect = '';
+			document.removeEventListener('mousemove', onMouseMove);
+			document.removeEventListener('mouseup', onMouseUp);
+			this.resizeMoveHandler = null;
+			this.resizeUpHandler = null;
+			this.saveColumnWidths(currentWidths);
+		};
+		this.resizeMoveHandler = onMouseMove;
+		this.resizeUpHandler = onMouseUp;
+		document.addEventListener('mousemove', onMouseMove);
+		document.addEventListener('mouseup', onMouseUp);
+	}
+	override componentDidMount(): void
+	{
+		if (!this.NSPagination.current)
+			this.reload(null, null);
+
+		this.syncScrollbarWidth();
+	}
+	override componentWillUnmount(): void
+	{
+		if (this.resizeMoveHandler)
+			document.removeEventListener('mousemove', this.resizeMoveHandler);
+		if (this.resizeUpHandler)
+			document.removeEventListener('mouseup', this.resizeUpHandler);
+	}
+	override render()
+	{
+
+		let show_pagination = this.props.ui?.pagination ?? true;
+		let show_button_panel = this.props.ui?.button_panel ?? true;
+		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<HTMLTableCellElement, MouseEvent>, column: TableColumnInfo) =>
+		{
+			if ((e.target as HTMLElement).tagName !== "SPAN")
+				return;
+
+			if (this.props.onColumnClick)
+				this.props.onColumnClick(e, column);
+		}
+		let onRowClick = (e: React.MouseEvent<HTMLTableRowElement, MouseEvent>, row: TableRowInfo<RowType>, selected: boolean) =>
+		{
+			const target = e.target as HTMLElement;
+
+			if (target.tagName === "TR" || target.tagName === "TD" || target.closest("td")?.dataset.cellType === "checkbox")
+				this.handleSelectRow(row, selected, e.ctrlKey, e.shiftKey);
+
+			if (this.props.onRowClick)
+				this.props.onRowClick(e, row);
+		};
+		let onCellClick = (e: React.MouseEvent<HTMLTableCellElement, MouseEvent>, cell: TableCellInfo<RowType>) =>
+		{
+			if ((e.target as HTMLElement).tagName !== "SPAN")
+				return;
+
+			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 gridTemplateColumns = this.getGridTemplateColumns();
+		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
+		{
+			let hierarchical = !!this.props.hierarchy;
+			let childrenMap = this.buildChildrenMap();
+			let indexOfRow = new Map<RowType, number>();
+			this.state.rows.forEach((r, i) => indexOfRow.set(r, i));
+			let INDENT = 16;
+			let lineColor = "rgba(20, 27, 92, 0.35)";
+			let renderRow = (rowValue: RowType, rowIndex: number, depth: number, parentKey: string, ancestorHasNext: boolean[], isLastChild: boolean): React.ReactNode[] =>
+			{
+				let row = { index: rowIndex, value: rowValue };
+				let rowKey = this.props.getRowKey(row);
+				let reactKey = parentKey ? `${parentKey}>${rowKey}` : rowKey;
+				let isSelected = this.state.selectedIDs.includes(rowKey);
+				let isLastSelected = this.LastSelectedRowID === row.index;
+				let isCheckboxDisabled = this.props.getRowCheckboxDisabled?.(row) ?? false;
+				let children: RowType[] = [];
+				if (hierarchical && childrenMap)
+				{
+					let lookupKey = this.getRowChildLookupKey(rowValue);
+					children = childrenMap.get(lookupKey) ?? [];
+				}
+				let hasChildren = children.length > 0;
+				let expanded = this.isExpanded(rowKey);
+				let rowAttrs = getRowAttributes(rowValue, rowIndex);
+				let nodes: React.ReactNode[] = [];
+				nodes.push(
+					<tr
+						key={reactKey}
+						{...rowAttrs}
+						style={{ ...(rowAttrs.style || {}), gridTemplateColumns }}
+						className={`${isSelected ? Styles.ns_selected : ""} ${isLastSelected ? Styles.ns_last_selected : ""}`.trim()}
+						onClick={(e) => !isCheckboxDisabled && onRowClick(e, row, isSelected)}
+					>
+						{
+							this.props.checkbox &&
+							<td data-cell-type="checkbox">
+								<label
+									htmlFor={`checkbox_device_${rowKey}`}
+									className={Styles.ns_check_box_label}
+								>
+									<input
+										id={`checkbox_device_${rowKey}`}
+										type="checkbox"
+										checked={isSelected}
+										disabled={isCheckboxDisabled}
+										className={Styles.ns_check_box}
+										onChange={() => { }}
+									/>
+								</label>
+							</td>
+						}
+						{
+							this.getColumns(true).map((column, index) =>
+							{
+								column.index = index + (this.props.checkbox ? 1 : 0);
+								let cell = this.getCellTableInfo(column, row, false);
+								let isFirstDataColumn = index === 0;
+								return (
+									<td
+										key={column.index}
+										{...getColumnAttributes(column)}
+										data-label={`${column.text}: `}
+										width={column.formatter.width}
+										className=''
+										style={isFirstDataColumn && hierarchical ? { overflow: "visible" } : undefined}
+										onClick={(e) =>
+										{
+											onColumnClick(e, column);
+											onCellClick(e, cell);
+										}}
+									>
+										{isFirstDataColumn && hierarchical ? (
+											<div
+												style={{
+													display: "flex",
+													alignItems: "center",
+												}}
+											>
+												{Array.from({ length: depth }).map((_, i) =>
+												{
+													let isLastLevel = i === depth - 1;
+													let drawVerticalTop = i < depth - 1 ? ancestorHasNext[i] : true;
+													let drawVerticalBottom = i < depth - 1 ? ancestorHasNext[i] : !isLastChild;
+													let drawHorizontal = isLastLevel;
+													return (
+														<span
+															key={i}
+															style={{
+																position: "relative",
+																display: "inline-block",
+																width: INDENT,
+																alignSelf: "stretch",
+																flex: "0 0 auto",
+															}}
+														>
+															{drawVerticalTop && (
+																<span style={{
+																	position: "absolute",
+																	left: INDENT / 2,
+																	top: -24,
+																	height: "calc(50% + 24px)",
+																	width: 1,
+																	background: lineColor,
+																}} />
+															)}
+															{drawVerticalBottom && (
+																<span style={{
+																	position: "absolute",
+																	left: INDENT / 2,
+																	top: "50%",
+																	height: "calc(50% + 24px)",
+																	width: 1,
+																	background: lineColor,
+																}} />
+															)}
+															{drawHorizontal && (
+																<span style={{
+																	position: "absolute",
+																	left: INDENT / 2,
+																	top: "50%",
+																	width: INDENT / 2,
+																	height: 1,
+																	background: lineColor,
+																}} />
+															)}
+														</span>
+													);
+												})}
+												<span
+													data-cell-type="tree-toggle"
+													style={{
+														display: "inline-flex",
+														alignItems: "center",
+														justifyContent: "center",
+														marginRight: 6,
+													}}
+													onClick={(e) => e.stopPropagation()}
+												>
+													{hasChildren ? (
+														<button
+															type="button"
+															onClick={(e) =>
+															{
+																e.stopPropagation();
+																this.toggleExpanded(rowKey);
+															}}
+															style={{
+																width: 18,
+																height: 18,
+																lineHeight: "16px",
+																padding: 0,
+																border: "1px solid rgba(20, 27, 92, 0.4)",
+																borderRadius: 3,
+																background: "#fff",
+																cursor: "pointer",
+																fontSize: 14,
+																fontWeight: "bold",
+																color: "rgba(20, 27, 92, 1)",
+															}}
+															aria-label={expanded ? "Collapse" : "Expand"}
+														>
+															{expanded ? "−" : "+"}
+														</button>
+													) : (
+														<span style={{ display: "inline-block", width: 18, height: 18 }} />
+													)}
+												</span>
+												{cell.formatted ?? ""}
+											</div>
+										) : (
+											<>
+												{cell.formatted ?? ""}
+											</>
+										)}
+									</td>
+								);
+							})
+						}
+					</tr>
+				);
+				if (hierarchical && hasChildren && expanded)
+				{
+					let childAncestors = [...ancestorHasNext, !isLastChild];
+					children.forEach((child, ci2) =>
+					{
+						let ci = indexOfRow.get(child) ?? -1;
+						let lastChild = ci2 === children.length - 1;
+						renderRow(child, ci, depth + 1, reactKey, childAncestors, lastChild).forEach(n => nodes.push(n));
+					});
+				}
+				return nodes;
+			};
+			let topLevel: RowType[];
+			if (hierarchical && this.props.hierarchy)
+			{
+				let parentCol = this.props.hierarchy.parent;
+				let ids = new Set<string>();
+				this.state.rows.forEach(r => ids.add(this.getRowIdValue(r) + "" + this.getGroupKey(r)));
+				topLevel = this.state.rows.filter(r =>
+				{
+					let pid = (r as any)[parentCol];
+					let pidKey = pid === null || pid === undefined ? "" : String(pid);
+					if (pidKey === "")
+						return true;
+					return !ids.has(pidKey + "" + this.getGroupKey(r));
+				});
+			}
+			else
+			{
+				topLevel = this.state.rows;
+			}
+			content = topLevel.flatMap((rowValue, i) => renderRow(rowValue, indexOfRow.get(rowValue) ?? 0, 0, "", [], i === topLevel.length - 1));
+		}
+
+		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 "";
+		};
+
+		let buttonPanel = show_button_panel && (
+			<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={this.state.totalItems}
+						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 })}
+					/>
+				}
+				{
+					this.props.buttons?.map((button, index) => (
+						<NSButton
+							key={index}
+							{...button}
+							classList={[Styles.ns_table_button, ...(button.classList ?? [])]}
+						/>
+					))
+				}
+				<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' }}
+				/>
+				<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]}
+				/>
+				<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' }}
+				/>
+				<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]}
+				/>
+				<NSButton
+					attributes={{ 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);
+						}
+					}}
+					classList={[Styles.ns_table_button]}
+					style={{ border: '1px solid rgb(3, 119, 255)' }}
+				/>
+			</div>
+		);
+
+		return (
+			<div
+				id={this.props.id}
+				className={[...this.props.classList ?? [], Styles.ns_table_wrapper, this.state.fullscreen ? Styles.ns_fullscreen : ""].filter(Boolean).join(" ")}
+				style={{ ...this.props.style }}
+			>
+				<div className={Styles.ns_table_topbar}>
+					{
+						!this.state.fullscreen &&
+						this.props.headerChildren
+					}
+					{
+						show_pagination &&
+						<NSPagination ref={this.NSPagination} totalItems={this.state.totalItems} onPageChange={this.onPageChange} style={{ marginRight: "auto" }} />
+					}
+					{buttonPanel}
+				</div>
+				{
+					!this.state.fullscreen && this.props.children &&
+					<div className={Styles.ns_table_children}>
+						{this.props.children}
+					</div>
+				}
+				<table
+					ref={this.Table_Ref}
+					className={Styles.ns_table}
+					onScroll={() =>
+					{
+						if (this.TableScrollbar_Ref.current)
+							this.TableScrollbar_Ref.current.scrollLeft = this.Table_Ref.current?.scrollLeft ?? 0;
+					}}
+				>
+					<thead>
+						<tr style={{ gridTemplateColumns }}>
+							{
+								this.props.checkbox &&
+								<th data-cell-type="checkbox" style={{ width: "24px", height: "24px", padding: 0 }}>
+									<label
+										htmlFor='checkbox'
+										className={Styles.ns_checkbox_label}
+									>
+										<input
+											id="checkbox"
+											type="checkbox"
+											className={`${Styles.ns_check_box} ${this.isSomeSelected() ? Styles.ns_indeterminate : ""}`}
+											checked={this.getSelectedIDs().length > 0}
+											onChange={this.toggleAllSelections}
+										></input>
+									</label>
+								</th>
+							}
+							{
+								this.getColumns(true).map(column => <th
+									key={column.name}
+									scope="col"
+									style={{ width: this.getColumnWidth(column), cursor: "pointer", position: "relative", userSelect: "none" }}
+									onClick={(e) =>
+									{
+										if ((e.target as HTMLElement).closest('[data-resize-handle]')) return;
+										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);
+										}
+									}}
+								>
+									<span>{column.text + " " + getSortSign(column)}</span>
+									<div
+										data-resize-handle="true"
+										className={Styles.ns_resize_handle}
+										onMouseDown={(e) => this.startResize(e, column)}
+										onClick={(e) => e.stopPropagation()}
+									/>
+								</th>)
+							}
+						</tr>
+					</thead>
+
+					<tbody className={Styles.ns_tbody}>
+						{content}
+					</tbody>
+				</table>
+
+				<div
+					ref={this.TableScrollbar_Ref}
+					className={Styles.ns_table_scrollbar}
+					onScroll={() =>
+					{
+						if (this.Table_Ref.current)
+							this.Table_Ref.current.scrollLeft = this.TableScrollbar_Ref.current?.scrollLeft ?? 0;
+					}}
+				>
+					<div
+						ref={this.TableScrollbarContent_Ref}
+						className={Styles.ns_table_scrollbar_content}>
+					</div>
+				</div>
+
+				{
+					this.state.model.show &&
+					<NSDialogInfo
+						description={this.state.model.description}
+						onClose={() => { this.hideModal(); }}
+						title={this.state.title}
+						show_as_code={true}
+					>
+						<></>
+					</NSDialogInfo>
+				}
+			</div>
+		);
+	}
 }