namirasoft-site-react 1.3.355 → 1.3.356

package/src/components/NSTable.tsx

@@ -1,362 +1,362 @@
-"use client";
-
-import NSButton from './NSButton';
-import { NSPagination } from './NSPagination';
-import { NSSpace, NSSpaceSizeType } from './NSSpace';
-import Styles from './NSTable.module.css';
-import { Component } from 'react';
-import { IBaseComponentProps } from "../props/IBaseComponentProps";
-import React from "react";
-import { NSModal } from './NSModal';
-import { NSPageSelectionModal } from './NSPageSelectionModal';
-import { NSLoading } from './NSLoading';
-import { NSNoData } from './NSNoData';
-import { writeFile, utils } from 'xlsx';
-
-export interface INSTableProps<RowType> extends IBaseComponentProps
-{
-	columns: { [key: string]: string };
-	checkbox: boolean;
-	getRows: (page: number, size: number) => Promise<{ rows: RowType[], count: number }>;
-	getRowKey: (row: RowType, rowIndex: number) => string;
-	getColumnAttributes?: (column: string, columnIndex: number) => { [key: string]: string };
-	getCell?: (row: RowType, column: string, rowIndex: number, columnIndex: number, value: any) => any;
-	onRowClick?: (e: React.MouseEvent<HTMLTableRowElement, MouseEvent>, row: RowType, rowIndex: number) => void;
-	onCellClick?: (e: React.MouseEvent<HTMLTableDataCellElement, MouseEvent>, row: RowType, column: string, rowIndex: number, columnIndex: number) => boolean | undefined;
-	onSelectedIDsChanged?: () => void;
-}
-
-interface NSTableState<RowType>
-{
-	columns: { [key: string]: string };
-	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: { [key: string]: string })
-	{
-		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?.map((row, rowIndex) =>
-			{
-				let id = this.props.getRowKey(row, rowIndex);
-				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>');
-
-		Object.keys(this.state.columns).forEach(column =>
-		{
-			printWindow!.document.write('<th>' + this.state.columns[column] + '</th>');
-		});
-
-		printWindow!.document.write('</tr></thead><tbody>');
-
-		// Add table rows
-		rows.forEach(row =>
-		{
-			printWindow!.document.write('<tr>');
-			Object.keys(this.state.columns).forEach(column =>
-			{
-				printWindow!.document.write('<td>' + (row as any)[column] + '</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 column_keys = Object.keys(this.state.columns);
-		let getColumnAttributes = (column: string, columnIndex: number) =>
-		{
-			if (this.props.getColumnAttributes)
-				return this.props.getColumnAttributes(column, columnIndex);
-			return {};
-		}
-		let getCell = (row: RowType, column: string, rowIndex: number, columnIndex: number) =>
-		{
-			let value = (row as any)[column];
-			if (this.props.getCell)
-				return this.props.getCell(row, column, rowIndex, columnIndex, value);
-			return value + "";
-		}
-		let onRowClick = (e: React.MouseEvent<HTMLTableRowElement, MouseEvent>, row: RowType, rowIndex: number) =>
-		{
-			if (this.props.onRowClick)
-				this.props.onRowClick(e, row, rowIndex);
-		};
-		let onCellClick = (e: React.MouseEvent<HTMLTableDataCellElement, MouseEvent>, row: RowType, column: string, rowIndex: number, columnIndex: number) =>
-		{
-			let overided = false;
-			if (this.props.onCellClick)
-			{
-				let res = this.props.onCellClick(e, row, column, rowIndex, columnIndex);
-				if (res === undefined)
-				{
-					overided = true;
-				} else
-				{
-					overided = res;
-				}
-			}
-			if (!overided)
-			{
-				this.showModal(getCell(row, column, rowIndex, columnIndex), this.state.columns[column]);
-			}
-		};
-		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((row, rowIndex) =>
-				<tr key={this.props.getRowKey(row, rowIndex)} onClick={(e) => { onRowClick(e, row, rowIndex); }}>
-					{
-						this.props.checkbox && <td >
-							<label htmlFor={`checkbox_device_${this.props.getRowKey(row, rowIndex)}`} className={Styles.ns_checkbox_label}>
-								<input className={Styles.ns_td_input} id={`checkbox_device_${this.props.getRowKey(row, rowIndex)}`} type="checkbox" checked={this.state.selectedIDs.includes(this.props.getRowKey(row, rowIndex))} onChange={(e) =>
-								{
-									let selectedIDs = this.state.selectedIDs;
-									let id = this.props.getRowKey(row, rowIndex);
-									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>
-					}
-					{
-						column_keys.map((column, columnIndex) => (
-							<td className='py-3' {...getColumnAttributes(column, columnIndex + 1)} key={columnIndex + 1} data-label={`${this.state.columns[column]} : `} onClick={(e) => { onCellClick(e, row, column, rowIndex, columnIndex + 1); }}>
-								{getCell(row, column, rowIndex, columnIndex + 1)}
-							</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' onChange={this.toggleAllCheckboxes} checked={this.getSelectedIDs().length > 0}></input>
-									</label>
-								</th>
-							}
-							{
-								column_keys.map(column_key => <th className="py-3" key={column_key} scope="col">
-									{this.state.columns[column_key]}
-								</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>
-								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 = this.state.rows[i];
-												let id = this.props.getRowKey(row, i);
-												if (this.state.selectedIDs.includes(id))
-													rows.push(row);
-											}
-										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={() => { }} 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} />
-				<NSModal
-					show={this.state.model.show}
-					description={this.state.model.description}
-					onClose={() => { this.hideModal(); }}
-					title={this.state.title}
-				/>
-			</div >
-		);
-	}
+"use client";
+
+import NSButton from './NSButton';
+import { NSPagination } from './NSPagination';
+import { NSSpace, NSSpaceSizeType } from './NSSpace';
+import Styles from './NSTable.module.css';
+import { Component } from 'react';
+import { IBaseComponentProps } from "../props/IBaseComponentProps";
+import React from "react";
+import { NSModal } from './NSModal';
+import { NSPageSelectionModal } from './NSPageSelectionModal';
+import { NSLoading } from './NSLoading';
+import { NSNoData } from './NSNoData';
+import { writeFile, utils } from 'xlsx';
+
+export interface INSTableProps<RowType> extends IBaseComponentProps
+{
+	columns: { [key: string]: string };
+	checkbox: boolean;
+	getRows: (page: number, size: number) => Promise<{ rows: RowType[], count: number }>;
+	getRowKey: (row: RowType, rowIndex: number) => string;
+	getColumnAttributes?: (column: string, columnIndex: number) => { [key: string]: string };
+	getCell?: (row: RowType, column: string, rowIndex: number, columnIndex: number, value: any) => any;
+	onRowClick?: (e: React.MouseEvent<HTMLTableRowElement, MouseEvent>, row: RowType, rowIndex: number) => void;
+	onCellClick?: (e: React.MouseEvent<HTMLTableDataCellElement, MouseEvent>, row: RowType, column: string, rowIndex: number, columnIndex: number) => boolean | undefined;
+	onSelectedIDsChanged?: () => void;
+}
+
+interface NSTableState<RowType>
+{
+	columns: { [key: string]: string };
+	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: { [key: string]: string })
+	{
+		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?.map((row, rowIndex) =>
+			{
+				let id = this.props.getRowKey(row, rowIndex);
+				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>');
+
+		Object.keys(this.state.columns).forEach(column =>
+		{
+			printWindow!.document.write('<th>' + this.state.columns[column] + '</th>');
+		});
+
+		printWindow!.document.write('</tr></thead><tbody>');
+
+		// Add table rows
+		rows.forEach(row =>
+		{
+			printWindow!.document.write('<tr>');
+			Object.keys(this.state.columns).forEach(column =>
+			{
+				printWindow!.document.write('<td>' + (row as any)[column] + '</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 column_keys = Object.keys(this.state.columns);
+		let getColumnAttributes = (column: string, columnIndex: number) =>
+		{
+			if (this.props.getColumnAttributes)
+				return this.props.getColumnAttributes(column, columnIndex);
+			return {};
+		}
+		let getCell = (row: RowType, column: string, rowIndex: number, columnIndex: number) =>
+		{
+			let value = (row as any)[column];
+			if (this.props.getCell)
+				return this.props.getCell(row, column, rowIndex, columnIndex, value);
+			return value + "";
+		}
+		let onRowClick = (e: React.MouseEvent<HTMLTableRowElement, MouseEvent>, row: RowType, rowIndex: number) =>
+		{
+			if (this.props.onRowClick)
+				this.props.onRowClick(e, row, rowIndex);
+		};
+		let onCellClick = (e: React.MouseEvent<HTMLTableDataCellElement, MouseEvent>, row: RowType, column: string, rowIndex: number, columnIndex: number) =>
+		{
+			let overided = false;
+			if (this.props.onCellClick)
+			{
+				let res = this.props.onCellClick(e, row, column, rowIndex, columnIndex);
+				if (res === undefined)
+				{
+					overided = true;
+				} else
+				{
+					overided = res;
+				}
+			}
+			if (!overided)
+			{
+				this.showModal(getCell(row, column, rowIndex, columnIndex), this.state.columns[column]);
+			}
+		};
+		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((row, rowIndex) =>
+				<tr key={this.props.getRowKey(row, rowIndex)} onClick={(e) => { onRowClick(e, row, rowIndex); }}>
+					{
+						this.props.checkbox && <td >
+							<label htmlFor={`checkbox_device_${this.props.getRowKey(row, rowIndex)}`} className={Styles.ns_checkbox_label}>
+								<input className={Styles.ns_td_input} id={`checkbox_device_${this.props.getRowKey(row, rowIndex)}`} type="checkbox" checked={this.state.selectedIDs.includes(this.props.getRowKey(row, rowIndex))} onChange={(e) =>
+								{
+									let selectedIDs = this.state.selectedIDs;
+									let id = this.props.getRowKey(row, rowIndex);
+									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>
+					}
+					{
+						column_keys.map((column, columnIndex) => (
+							<td className='py-3' {...getColumnAttributes(column, columnIndex + 1)} key={columnIndex + 1} data-label={`${this.state.columns[column]} : `} onClick={(e) => { onCellClick(e, row, column, rowIndex, columnIndex + 1); }}>
+								{getCell(row, column, rowIndex, columnIndex + 1)}
+							</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' onChange={this.toggleAllCheckboxes} checked={this.getSelectedIDs().length > 0}></input>
+									</label>
+								</th>
+							}
+							{
+								column_keys.map(column_key => <th className="py-3" key={column_key} scope="col">
+									{this.state.columns[column_key]}
+								</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>
+								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 = this.state.rows[i];
+												let id = this.props.getRowKey(row, i);
+												if (this.state.selectedIDs.includes(id))
+													rows.push(row);
+											}
+										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={() => { }} 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} />
+				<NSModal
+					show={this.state.model.show}
+					description={this.state.model.description}
+					onClose={() => { this.hideModal(); }}
+					title={this.state.title}
+				/>
+			</div >
+		);
+	}
 }