namirasoft-site-react 1.4.35 → 1.4.37

package/src/components/NSTable.tsx

@@ -1,425 +1,425 @@
-"use client";
-import React from "react";
-import { Component } from 'react';
-import { writeFile, utils } from 'xlsx';
-import { NSButton } from './NSButton';
-import { NSPagination } from './NSPagination';
-import { NSInfoDialog } from './NSInfoDialog';
-import { NSSpace, NSSpaceSizeType } from './NSSpace';
-import { NSPageSelectionModal } from './NSPageSelectionModal';
-import { NSLoading } from './NSLoading';
-import { NSNoData } from './NSNoData';
-import { IBaseComponentProps } from "../props/IBaseComponentProps";
-import { BaseColumnFormatter } from '../formatter/BaseColumnFormatter';
-import Styles from './NSTable.module.css';
-
-export interface TableColumnInfo
-{
-	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 INSTableProps<RowType> extends IBaseComponentProps
-{
-	checkbox: boolean;
-	// percentage: boolean;
-	columns: TableColumnInfo[];
-	getRows: (page: number, size: number) => Promise<{ rows: RowType[], count: number }>;
-	getRowKey: (row: TableRowInfo<RowType>) => string;
-	getColumnAttributes?: (column: TableColumnInfo) => { [key: string]: string };
-	getCellFormattedValue?: (value: any, column: TableColumnInfo, row: TableRowInfo<RowType>) => 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;
-}
-
-interface NSTableState<RowType>
-{
-	columns: TableColumnInfo[];
-	totalItems: number;
-	rows: RowType[] | null;
-	title?: string;
-	model: {
-		show: boolean;
-		description?: string;
-	};
-	selectedIDs: string[];
-	indeterminate: boolean;
-	pageSelectionMode: PageSelectionMode;
-}
-
-enum PageSelectionMode
-{
-	Hidden = "Hidden",
-	Print = "Print",
-	CSV = "CSV"
-}
-
-export class NSTable<RowType> extends Component<INSTableProps<RowType>, NSTableState<RowType>>
-{
-	NSPagination = React.createRef<NSPagination>();
-	constructor(props: INSTableProps<RowType>)
-	{
-		super(props);
-		this.state = {
-			columns: props.columns,
-			rows: null,
-			totalItems: 0,
-			model: { show: false },
-			selectedIDs: [],
-			indeterminate: false,
-			pageSelectionMode: PageSelectionMode.Hidden
-		};
-		this.setColumns = this.setColumns.bind(this);
-		this.setRows = this.setRows.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);
-	}
-
-	setColumns(columns: TableColumnInfo[])
-	{
-		this.setState({ columns });
-	}
-
-	setRows(rows: RowType[] | null, totalItems: number)
-	{
-		this.setState({ rows, totalItems });
-	}
-
-	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);
-	}
-	override componentDidMount(): void
-	{
-		this.reload(null, null);
-	}
-	public 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;
-		this.props.getRows(page, size).then(res =>
-		{
-			this.setRows(res.rows, res.count);
-		});
-	}
-	private toggleAllCheckboxes()
-	{
-		let selectedIDs: string[] = [];
-		if (this.getSelectedIDs().length === 0)
-			this.state.rows?.forEach((row, rowIndex) =>
-			{
-				let id = this.props.getRowKey({ index: rowIndex, value: row });
-				selectedIDs.push(id);
-			})
-		this.setSelectedIDs(selectedIDs);
-		this.setState({ indeterminate: false });
-	}
-
-	print(rows: RowType[])
-	{
-		const printWindow = window.open('', '', 'height=500,width=800');
-		printWindow!.document.write('<html><head><title>Print Table</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.state.columns.forEach(column =>
-		{
-			printWindow!.document.write('<th>' + column.text + '</th>');
-		});
-
-		printWindow!.document.write('</tr></thead><tbody>');
-
-		// Add table rows
-		rows.forEach(row =>
-		{
-			printWindow!.document.write('<tr>');
-			this.state.columns.forEach(column =>
-			{
-				printWindow!.document.write('<td>' + (row as any)[column.name] + '</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, "Table Data");
-		console.log(rows.length); // todo
-		writeFile(workbook, "TableData.xlsx");
-	}
-	getSelectedIDs(): string[]
-	{
-		return this.state.selectedIDs;
-	}
-	setSelectedIDs(ids: string[])
-	{
-		this.setState({ selectedIDs: ids }, () =>
-		{
-			if (this.props.onSelectedIDsChanged)
-				this.props.onSelectedIDsChanged();
-		});
-	}
-	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();
-	}
-	override render()
-	{
-		let getCellTableInfo = (column: TableColumnInfo, row: TableRowInfo<RowType>) =>
-		{
-			let value = (row.value as any)[column.name];
-			let formatted = getCellFormattedValue(value, column, row);
-			return { column, row, value, formatted };
-		}
-		let getColumnAttributes = (column: TableColumnInfo) =>
-		{
-			if (this.props.getColumnAttributes)
-				return this.props.getColumnAttributes(column);
-			return {};
-		}
-		let getCellFormattedValue = (value: any, column: TableColumnInfo, row: TableRowInfo<RowType>) =>
-		{
-			if (this.props.getCellFormattedValue)
-				return this.props.getCellFormattedValue(value, column, row);
-			return column.formatter.format(value, column, row);
-		}
-		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 = false;
-			if (this.props.onCellClick)
-			{
-				let res = this.props.onCellClick(e, cell);
-				if (res === undefined)
-				{
-					overided = true;
-				} else
-				{
-					overided = res;
-				}
-			}
-			if (!overided)
-			{
-				this.showModal(cell.formatted, cell.column.text);
-			}
-		};
-		let content;
-		if (this.state.rows === null)
-		{
-			content = (
-				<NSLoading />
-			);
-		}
-		else if (this.state.rows.length === 0)
-		{
-			content = (
-				<NSNoData lable='No Data' />
-			);
-		}
-		else
-		{
-			content = this.state.rows.map((rowValue, rowIndex) =>
-			{
-				let row = { index: rowIndex, value: rowValue };
-				return <tr
-					key={this.props.getRowKey(row)} onClick={(e) => { onRowClick(e, row); }}>
-					{
-						this.props.checkbox && <td >
-							<label htmlFor={`checkbox_device_${this.props.getRowKey(row)}`} className={Styles.ns_checkbox_label}>
-								<input className={Styles.ns_td_input} id={`checkbox_device_${this.props.getRowKey(row)}`} type="checkbox" checked={this.state.selectedIDs.includes(this.props.getRowKey(row))} onChange={(e) =>
-								{
-									let selectedIDs = this.state.selectedIDs;
-									let id = this.props.getRowKey(row);
-									if (e.currentTarget.checked)
-										selectedIDs.push(id);
-									else
-										selectedIDs = selectedIDs.filter(x => x !== id);
-									this.setSelectedIDs(selectedIDs)
-									this.setState({ selectedIDs }, () =>
-									{
-										this.setState({ indeterminate: this.isSomeChecked() });
-									});
-								}} />
-							</label>
-						</td>
-					}
-					{
-						this.props.columns.map((column, index) =>
-						{
-
-							column.index = index + (this.props.checkbox ? 1 : 0);
-							let cell = getCellTableInfo(column, row);
-							return (
-								<td className='py-3' {...getColumnAttributes(column)} key={column.index} data-label={`${column.text} : `} onClick={(e) =>
-								{
-									onColumnClick(e, column);
-									onCellClick(e, cell);
-								}}>
-
-									{
-										cell.formatted
-									}
-								</td>
-							);
-						})
-					}
-				</tr>
-			});
-		}
-		return (
-			<div id={this.props.id}
-				className={`${Styles.ns_project_list_container} ${this.props.classList?.join(" ")}`}
-				style={this.props.style} >
-				<NSSpace size={NSSpaceSizeType.SMALL} />
-				<table className={Styles.ns_table} >
-					<thead className={Styles.ns_thead}>
-						<tr>
-							{
-								this.props.checkbox && <th className={Styles.ns_check_box}>
-									<label htmlFor='checkbox' className={Styles.ns_checkbox_label}>
-										<input className={`${Styles.ns_check_box_input} ${this.state.indeterminate ? Styles.ns_indeterminate : ""}`} id='checkbox' type='checkbox' checked={this.getSelectedIDs().length > 0} onChange={this.toggleAllCheckboxes} ></input>
-									</label>
-								</th>
-							}
-							{
-								this.state.columns.map(column => <th className="py-3" key={column.name} scope="col">
-									{
-										column.text
-									}
-								</th>)
-							}
-						</tr>
-					</thead>
-					<tbody className={Styles.ns_tbody}>
-						{content}
-					</tbody >
-				</table>
-				<NSSpace size={NSSpaceSizeType.MICRO} />
-				<section className={Styles.ns_pagination_button}>
-					<NSPagination ref={this.NSPagination} totalItems={this.state.totalItems} onPageChange={this.onPageChange} />
-					<NSSpace size={NSSpaceSizeType.SMALL} />
-					<div className={Styles.ns_button}>
-						{
-							this.state.pageSelectionMode !== PageSelectionMode.Hidden &&
-							<NSPageSelectionModal<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={1}
-								max_page={1}
-								getItems={async (page, 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, this.NSPagination.current?.getCurrentPage() ?? 0);
-									return res.rows;
-								}}
-								onFinish={(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={() =>
-						{
-							this.showModal(" ", "This feature will be available soon in upcoming versions.");
-						}}
-							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={() => { this.setState({ pageSelectionMode: PageSelectionMode.Print }); }} 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={() => { this.setState({ pageSelectionMode: PageSelectionMode.CSV }); }} 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={() =>
-						{
-							this.reload(null, null);
-						}} style={{ border: '1px solid rgba(3, 119, 255, 1)', width: "128px" }} />
-					</div>
-				</section>
-				<NSSpace size={NSSpaceSizeType.SMALL} />
-				{
-					this.state.model.show &&
-					<NSInfoDialog
-						description={this.state.model.description}
-						onClose={() => { this.hideModal(); }}
-						title={this.state.title}
-					>
-						<></>
-					</NSInfoDialog>
-				}
-			</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 { NSInfoDialog } from './NSInfoDialog';
+import { NSSpace, NSSpaceSizeType } from './NSSpace';
+import { NSPageSelectionModal } from './NSPageSelectionModal';
+import { NSLoading } from './NSLoading';
+import { NSNoData } from './NSNoData';
+import { IBaseComponentProps } from "../props/IBaseComponentProps";
+import { BaseColumnFormatter } from '../formatter/BaseColumnFormatter';
+import Styles from './NSTable.module.css';
+
+export interface TableColumnInfo
+{
+	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 INSTableProps<RowType> extends IBaseComponentProps
+{
+	checkbox: boolean;
+	// percentage: boolean;
+	columns: TableColumnInfo[];
+	getRows: (page: number, size: number) => Promise<{ rows: RowType[], count: number }>;
+	getRowKey: (row: TableRowInfo<RowType>) => string;
+	getColumnAttributes?: (column: TableColumnInfo) => { [key: string]: string };
+	getCellFormattedValue?: (value: any, column: TableColumnInfo, row: TableRowInfo<RowType>) => 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;
+}
+
+interface NSTableState<RowType>
+{
+	columns: TableColumnInfo[];
+	totalItems: number;
+	rows: RowType[] | null;
+	title?: string;
+	model: {
+		show: boolean;
+		description?: string;
+	};
+	selectedIDs: string[];
+	indeterminate: boolean;
+	pageSelectionMode: PageSelectionMode;
+}
+
+enum PageSelectionMode
+{
+	Hidden = "Hidden",
+	Print = "Print",
+	CSV = "CSV"
+}
+
+export class NSTable<RowType> extends Component<INSTableProps<RowType>, NSTableState<RowType>>
+{
+	NSPagination = React.createRef<NSPagination>();
+	constructor(props: INSTableProps<RowType>)
+	{
+		super(props);
+		this.state = {
+			columns: props.columns,
+			rows: null,
+			totalItems: 0,
+			model: { show: false },
+			selectedIDs: [],
+			indeterminate: false,
+			pageSelectionMode: PageSelectionMode.Hidden
+		};
+		this.setColumns = this.setColumns.bind(this);
+		this.setRows = this.setRows.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);
+	}
+
+	setColumns(columns: TableColumnInfo[])
+	{
+		this.setState({ columns });
+	}
+
+	setRows(rows: RowType[] | null, totalItems: number)
+	{
+		this.setState({ rows, totalItems });
+	}
+
+	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);
+	}
+	override componentDidMount(): void
+	{
+		this.reload(null, null);
+	}
+	public 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;
+		this.props.getRows(page, size).then(res =>
+		{
+			this.setRows(res.rows, res.count);
+		});
+	}
+	private toggleAllCheckboxes()
+	{
+		let selectedIDs: string[] = [];
+		if (this.getSelectedIDs().length === 0)
+			this.state.rows?.forEach((row, rowIndex) =>
+			{
+				let id = this.props.getRowKey({ index: rowIndex, value: row });
+				selectedIDs.push(id);
+			})
+		this.setSelectedIDs(selectedIDs);
+		this.setState({ indeterminate: false });
+	}
+
+	print(rows: RowType[])
+	{
+		const printWindow = window.open('', '', 'height=500,width=800');
+		printWindow!.document.write('<html><head><title>Print Table</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.state.columns.forEach(column =>
+		{
+			printWindow!.document.write('<th>' + column.text + '</th>');
+		});
+
+		printWindow!.document.write('</tr></thead><tbody>');
+
+		// Add table rows
+		rows.forEach(row =>
+		{
+			printWindow!.document.write('<tr>');
+			this.state.columns.forEach(column =>
+			{
+				printWindow!.document.write('<td>' + (row as any)[column.name] + '</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, "Table Data");
+		console.log(rows.length); // todo
+		writeFile(workbook, "TableData.xlsx");
+	}
+	getSelectedIDs(): string[]
+	{
+		return this.state.selectedIDs;
+	}
+	setSelectedIDs(ids: string[])
+	{
+		this.setState({ selectedIDs: ids }, () =>
+		{
+			if (this.props.onSelectedIDsChanged)
+				this.props.onSelectedIDsChanged();
+		});
+	}
+	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();
+	}
+	override render()
+	{
+		let getCellTableInfo = (column: TableColumnInfo, row: TableRowInfo<RowType>) =>
+		{
+			let value = (row.value as any)[column.name];
+			let formatted = getCellFormattedValue(value, column, row);
+			return { column, row, value, formatted };
+		}
+		let getColumnAttributes = (column: TableColumnInfo) =>
+		{
+			if (this.props.getColumnAttributes)
+				return this.props.getColumnAttributes(column);
+			return {};
+		}
+		let getCellFormattedValue = (value: any, column: TableColumnInfo, row: TableRowInfo<RowType>) =>
+		{
+			if (this.props.getCellFormattedValue)
+				return this.props.getCellFormattedValue(value, column, row);
+			return column.formatter.format(value, column, row);
+		}
+		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 = false;
+			if (this.props.onCellClick)
+			{
+				let res = this.props.onCellClick(e, cell);
+				if (res === undefined)
+				{
+					overided = true;
+				} else
+				{
+					overided = res;
+				}
+			}
+			if (!overided)
+			{
+				this.showModal(cell.formatted, cell.column.text);
+			}
+		};
+		let content;
+		if (this.state.rows === null)
+		{
+			content = (
+				<NSLoading />
+			);
+		}
+		else if (this.state.rows.length === 0)
+		{
+			content = (
+				<NSNoData lable='No Data' />
+			);
+		}
+		else
+		{
+			content = this.state.rows.map((rowValue, rowIndex) =>
+			{
+				let row = { index: rowIndex, value: rowValue };
+				return <tr
+					key={this.props.getRowKey(row)} onClick={(e) => { onRowClick(e, row); }}>
+					{
+						this.props.checkbox && <td >
+							<label htmlFor={`checkbox_device_${this.props.getRowKey(row)}`} className={Styles.ns_checkbox_label}>
+								<input className={Styles.ns_td_input} id={`checkbox_device_${this.props.getRowKey(row)}`} type="checkbox" checked={this.state.selectedIDs.includes(this.props.getRowKey(row))} onChange={(e) =>
+								{
+									let selectedIDs = this.state.selectedIDs;
+									let id = this.props.getRowKey(row);
+									if (e.currentTarget.checked)
+										selectedIDs.push(id);
+									else
+										selectedIDs = selectedIDs.filter(x => x !== id);
+									this.setSelectedIDs(selectedIDs)
+									this.setState({ selectedIDs }, () =>
+									{
+										this.setState({ indeterminate: this.isSomeChecked() });
+									});
+								}} />
+							</label>
+						</td>
+					}
+					{
+						this.props.columns.map((column, index) =>
+						{
+
+							column.index = index + (this.props.checkbox ? 1 : 0);
+							let cell = getCellTableInfo(column, row);
+							return (
+								<td className='py-3' {...getColumnAttributes(column)} key={column.index} data-label={`${column.text} : `} onClick={(e) =>
+								{
+									onColumnClick(e, column);
+									onCellClick(e, cell);
+								}}>
+
+									{
+										cell.formatted
+									}
+								</td>
+							);
+						})
+					}
+				</tr>
+			});
+		}
+		return (
+			<div id={this.props.id}
+				className={`${Styles.ns_project_list_container} ${this.props.classList?.join(" ")}`}
+				style={this.props.style} >
+				<NSSpace size={NSSpaceSizeType.SMALL} />
+				<table className={Styles.ns_table} >
+					<thead className={Styles.ns_thead}>
+						<tr>
+							{
+								this.props.checkbox && <th className={Styles.ns_check_box}>
+									<label htmlFor='checkbox' className={Styles.ns_checkbox_label}>
+										<input className={`${Styles.ns_check_box_input} ${this.state.indeterminate ? Styles.ns_indeterminate : ""}`} id='checkbox' type='checkbox' checked={this.getSelectedIDs().length > 0} onChange={this.toggleAllCheckboxes} ></input>
+									</label>
+								</th>
+							}
+							{
+								this.state.columns.map(column => <th className="py-3" key={column.name} scope="col">
+									{
+										column.text
+									}
+								</th>)
+							}
+						</tr>
+					</thead>
+					<tbody className={Styles.ns_tbody}>
+						{content}
+					</tbody >
+				</table>
+				<NSSpace size={NSSpaceSizeType.MICRO} />
+				<section className={Styles.ns_pagination_button}>
+					<NSPagination ref={this.NSPagination} totalItems={this.state.totalItems} onPageChange={this.onPageChange} />
+					<NSSpace size={NSSpaceSizeType.SMALL} />
+					<div className={Styles.ns_button}>
+						{
+							this.state.pageSelectionMode !== PageSelectionMode.Hidden &&
+							<NSPageSelectionModal<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={1}
+								max_page={1}
+								getItems={async (page, 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, this.NSPagination.current?.getCurrentPage() ?? 0);
+									return res.rows;
+								}}
+								onFinish={(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={() =>
+						{
+							this.showModal(" ", "This feature will be available soon in upcoming versions.");
+						}}
+							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={() => { this.setState({ pageSelectionMode: PageSelectionMode.Print }); }} 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={() => { this.setState({ pageSelectionMode: PageSelectionMode.CSV }); }} 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={() =>
+						{
+							this.reload(null, null);
+						}} style={{ border: '1px solid rgba(3, 119, 255, 1)', width: "128px" }} />
+					</div>
+				</section>
+				<NSSpace size={NSSpaceSizeType.SMALL} />
+				{
+					this.state.model.show &&
+					<NSInfoDialog
+						description={this.state.model.description}
+						onClose={() => { this.hideModal(); }}
+						title={this.state.title}
+					>
+						<></>
+					</NSInfoDialog>
+				}
+			</div >
+		);
+	}
 }