namirasoft-account-react 1.4.430 → 1.4.431

package/src/components/NSATable.tsx

@@ -1,490 +1,490 @@
-import { FilterItem, FilterItemColumnType, NamingConvention, ObjectService, SearchOperation, SortItem } from "namirasoft-core";
-import { CategoryRow, FieldRow } from "namirasoft-field";
-import { FilterItemColumnTypeBuilder, VariableType } from "namirasoft-schema";
-import { IBaseComponentProps, NSButtonProps, NSFilterBox, NSFilterBoxItems, NSFilterBoxProps_Table, NSTable, TableColumnInfo, TableRowInfo } from "namirasoft-site-react";
-import { Component, ReactNode, createRef } from "react";
-import { IEntityInfo } from "../IEntityInfo";
-import { NSACacheService } from "../NSACacheService";
-import { NSAQuickFilterBar } from "./quickfilter/NSAQuickFilterBar";
-import { NSAQuickFilterDialog, QuickFilterConfig } from "./quickfilter/NSAQuickFilterDialog";
-import { NSAReorderDialog } from "./NSAReorderDialog";
-import { NSASortDialog } from "./NSASortDialog";
-
-export interface NSATableUIProps<RowType>
-{
-	getRowAttributes?: (row_value: RowType, row_index: number, res: { rows: RowType[]; count: number; } | null) => { [key: string]: any };
-	getColumnAttributes?: (column: TableColumnInfo) => { [key: string]: any };
-	getCellFormattedValue?: (value: any, column: TableColumnInfo, row: TableRowInfo<RowType>) => any;
-	search_box?: {
-		exclude?: {
-			show?: {
-				table?: (table: string) => boolean;
-				column?: (table: string, column: string) => boolean;
-			},
-			load_value?: (table: string, column: string) => boolean;
-		}
-	};
-}
-
-export interface NSATableProps<RowType extends { id: string }, RowTypeInput = RowType> extends IBaseComponentProps
-{
-	entity: IEntityInfo<RowType, RowTypeInput>;
-	ctf: {
-		enabled: boolean;
-		fields: FieldRow[] | null;
-		categories: CategoryRow[] | null;
-	};
-	url: { getQuery(name: string, base64?: boolean, remove?: boolean): string };
-	ui?: NSATableUIProps<RowType>;
-	checkbox?: boolean;
-	buttons?: NSButtonProps[];
-	onSelectionChanged?: () => void;
-}
-
-interface NSATableState<RowType>
-{
-	res: { rows: RowType[]; count: number; } | null;
-	sorts: SortItem[];
-	visible_column_keys: string[];
-	quick_filter_configs: QuickFilterConfig[];
-	show_sort_dialog: boolean;
-	show_reorder_dialog: boolean;
-	show_quick_filter_dialog: boolean;
-	filter_revision: number;
-}
-
-export class NSATable<RowType extends { id: string }, RowTypeInput = RowType>
-	extends Component<NSATableProps<RowType, RowTypeInput>, NSATableState<RowType>>
-{
-	public NSTable_Main = createRef<NSTable<RowType>>();
-	public NSFilterBox_Top = createRef<NSFilterBox>();
-	public NSAQuickFilterBar_Ref = createRef<NSAQuickFilterBar>();
-
-	constructor(props: NSATableProps<RowType, RowTypeInput>)
-	{
-		super(props);
-		this.state = {
-			res: null,
-			sorts: [],
-			visible_column_keys: [],
-			quick_filter_configs: [],
-			show_sort_dialog: false,
-			show_reorder_dialog: false,
-			show_quick_filter_dialog: false,
-			filter_revision: 0,
-		};
-	}
-
-	override componentDidMount()
-	{
-		const visible = this.NSTable_Main.current?.getVisibleColumns() ?? [];
-		if (visible.length > 0)
-			this.setState({ visible_column_keys: visible.map(v => v.table + "." + v.column) });
-
-		let quick_filter_configs = NSACacheService.loadQuickFilters(this.props.entity.name);
-		if (quick_filter_configs.length === 0)
-			quick_filter_configs = this.buildDefaultQuickFilters();
-		// Re-render so the filter chips reflect any incoming filter items.
-		this.setState(prev => ({ quick_filter_configs, filter_revision: prev.filter_revision + 1 }));
-	}
-
-	private getColumns(): TableColumnInfo[]
-	{
-		let columns = Object.values(this.props.entity.client.getColumns()).flat();
-		columns.forEach(col =>
-		{
-			col.text = NamingConvention.auto.convert(col.text, NamingConvention.Pascal_Case_Space);
-		});
-		return columns;
-	}
-
-	private buildDefaultQuickFilters(): QuickFilterConfig[]
-	{
-		const getDefaults = this.props.entity.client.getQuickFilters;
-		if (!getDefaults)
-			return [];
-
-		const columns = this.getColumns();
-		const ans: QuickFilterConfig[] = [];
-		for (const def of getDefaults())
-		{
-			const col = columns.find(c => c.name === def.column);
-			if (!col)
-				continue;
-			const columnType = new ObjectService(col.type).getEnum(VariableType, VariableType.Any);
-			ans.push({
-				id: `default-${col.table.name}-${col.name}`,
-				column: {
-					table: { name: col.table.name, text: col.table.text },
-					name: col.name,
-					text: col.text,
-					type: col.type,
-					columnType,
-				},
-				operatorName: (def as { operator?: string }).operator,
-			});
-		}
-		return ans;
-	}
-
-	private filterItemTypeConverter(type: string): FilterItemColumnType
-	{
-		let t = new ObjectService(type).getEnum(VariableType, VariableType.Any);
-		let builder = new FilterItemColumnTypeBuilder(t);
-		return builder.runSynch(() => { }) ?? FilterItemColumnType.Unknown;
-	}
-
-	private getIncomingFilterItems(): FilterItem[] | undefined
-	{
-		try
-		{
-			let encoded = this.props.url.getQuery("filters");
-			if (encoded)
-				return FilterItem.decode(encoded) ?? undefined;
-		} catch (error)
-		{
-		}
-		return undefined;
-	}
-
-	public reload(page: number | null, size: number | null): Promise<void> | undefined
-	{
-		return this.NSTable_Main.current?.reload(page, size);
-	}
-	public getSelectedIDs(): string[]
-	{
-		return this.NSTable_Main.current?.getSelectedIDs() ?? [];
-	}
-	public getSelectedRows(): RowType[]
-	{
-		return this.NSTable_Main.current?.getSelectedRows() ?? [];
-	}
-	public setSelectedIDs(ids: string[], rows: RowType[], callback?: () => void)
-	{
-		this.NSTable_Main.current?.setSelectedIDs(ids, rows, callback);
-	}
-	public getSortItems(): SortItem[]
-	{
-		return this.NSTable_Main.current?.getSortItems() ?? [];
-	}
-	public setSortItems(items: SortItem[] | null)
-	{
-		this.NSTable_Main.current?.setSortItems(items);
-	}
-	public getVisibleColumns(): { table: string, column: string }[]
-	{
-		return this.NSTable_Main.current?.getVisibleColumns() ?? [];
-	}
-	public setVisibleColumns(visible_columns: { table: string, column: string }[])
-	{
-		this.NSTable_Main.current?.setVisibleColumns(visible_columns);
-	}
-	public getFilterBoxItems(): FilterItem[]
-	{
-		return this.NSFilterBox_Top.current?.getFilterItems() ?? [];
-	}
-	public getQuickFilterItems(): FilterItem[]
-	{
-		return this.NSAQuickFilterBar_Ref.current?.getFilterItems() ?? [];
-	}
-	public getFilterItems(): FilterItem[]
-	{
-		return [...this.getFilterBoxItems(), ...this.getQuickFilterItems()];
-	}
-
-	private reloadFromFilters()
-	{
-		this.NSTable_Main.current?.setSelectedIDs([], []);
-		this.NSTable_Main.current?.reload(null, null);
-	}
-
-	private onFilterBoxChanged = () =>
-	{
-		this.reloadFromFilters();
-		this.setState(prev => ({ filter_revision: prev.filter_revision + 1 }));
-	};
-
-	private buildButtons(): NSButtonProps[]
-	{
-		const buttons: NSButtonProps[] = [
-			{
-				title: "",
-				icon: { src: "https://static.namirasoft.com/image/concept/grip-vertical/blue.svg", alt: "reorder" },
-				attributes: { title: "Reorder" },
-				onClick: {
-					action: () => this.setState({ show_reorder_dialog: true, visible_column_keys: this.getVisibleColumns().map(c => c.table + "." + c.column) }),
-					showLoading: false,
-				},
-			},
-			{
-				title: "",
-				icon: { src: "https://static.namirasoft.com/image/concept/arrow-down-short-wide/blue.svg", alt: "sort" },
-				attributes: { title: "Sort" },
-				onClick: {
-					action: () => this.setState({ show_sort_dialog: true, sorts: this.getSortItems() }),
-					showLoading: false,
-				},
-			},
-			{
-				title: "",
-				icon: { src: "https://static.namirasoft.com/image/concept/sliders/blue.svg", alt: "filter" },
-				attributes: { title: "Quick Filters" },
-				onClick: {
-					action: () => this.setState({ show_quick_filter_dialog: true }),
-					showLoading: false,
-				},
-			},
-		];
-		return [...buttons, ...(this.props.buttons ?? [])];
-	}
-
-	private renderFilterHeader(): ReactNode
-	{
-		return (
-			<NSFilterBox
-				ref={this.NSFilterBox_Top}
-				filterItems={this.getIncomingFilterItems()}
-				getTables={() =>
-				{
-					return this.props.entity.tables.map(table =>
-					{
-						let columns = table.table.getColumns().map(c => ({ id: c.name, ...c, type: this.filterItemTypeConverter(c.type) }));
-						columns = columns.filter(c =>
-						{
-							if (this.props.ui?.search_box?.exclude?.show?.column)
-								if (this.props.ui?.search_box?.exclude.show?.column(table.table.name, c.name))
-									return false;
-							return true;
-						});
-						return { name: table.table.name, text: table.table.text, columns, required: table.required };
-					}).filter(t =>
-					{
-						if (this.props.ui?.search_box?.exclude?.show?.table)
-							if (this.props.ui?.search_box?.exclude.show.table(t.name))
-								return false;
-						return true;
-					});
-				}}
-				getMoreTables={async () =>
-				{
-					let ans: NSFilterBoxProps_Table[] = [];
-					if (this.props.ctf.enabled)
-						try
-						{
-							if (this.props.ctf.fields)
-								if (this.props.ctf.fields.length > 0)
-								{
-									let name = this.props.entity.name + "_field";
-									ans.push({
-										name,
-										text: "Fields",
-										columns: [{
-											id: "field_id",
-											name: "field_id",
-											text: "ID",
-											type: FilterItemColumnType.Unknown,
-											getValues: async (search) =>
-											{
-												return this.props.ctf.fields?.filter(c => SearchOperation.match(c.id, search)).map(c => { return { value: c.id, title: c.id } }) ?? [];
-											}
-										}, {
-											id: "field_name",
-											name: "field_id",
-											text: "Name",
-											type: FilterItemColumnType.Unknown,
-											getValues: async (search) =>
-											{
-												return this.props.ctf.fields?.filter(c => SearchOperation.match(c.name, search)).map(c => { return { value: c.id, title: c.name } }) ?? [];
-											}
-										}, {
-											id: "field_value",
-											name: "value",
-											text: "Value",
-											type: FilterItemColumnType.Unknown
-										},
-										...this.props.ctf.fields.map(f =>
-										{
-											return {
-												id: f.id,
-												name: f.id,
-												text: f.name,
-												type: this.filterItemTypeConverter(f.type.type.type),
-												getValues: async (search: string) =>
-												{
-													let values = await this.props.entity.server.value_list(name, "value", search, f.id, null);
-													return values.map(v => { return { value: v, title: v } });
-												}
-											};
-										}),],
-										required: false
-									});
-								}
-
-							if (this.props.ctf.categories)
-								if (this.props.ctf.categories.length > 0)
-									ans.push({
-										name: this.props.entity.name + "_category",
-										text: "Categories",
-										columns: [{
-											id: "category_id",
-											name: "category_id",
-											text: "ID",
-											type: FilterItemColumnType.Unknown,
-											getValues: async (search) =>
-											{
-												return this.props.ctf.categories?.filter(c => SearchOperation.match(c.id, search)).map(c => { return { value: c.id, title: c.id } }) ?? [];
-											}
-										}, {
-											id: "category_name",
-											name: "category_id",
-											text: "Name",
-											type: FilterItemColumnType.Unknown,
-											getValues: async (search) =>
-											{
-												return this.props.ctf.categories?.filter(c => SearchOperation.match(c.name, search)).map(c => { return { value: c.id, title: c.name } }) ?? [];
-											}
-										}],
-										required: false
-									});
-
-						} catch (error)
-						{
-						}
-					// todo add tags
-					return ans;
-				}}
-				getValues={async (table, column, value) =>
-				{
-					if (this.props.ui?.search_box?.exclude?.load_value)
-						if (this.props.ui?.search_box?.exclude?.load_value(table.name, column.name))
-							return [];
-					let values = await this.props.entity.server.value_list(table.name, column.name, value, null, null);
-					return values.map(v => { return { value: v, title: v } });
-				}}
-				onChanged={this.onFilterBoxChanged}
-			/>
-		);
-	}
-
-	private getOrderedColumns(): TableColumnInfo[]
-	{
-		const all = this.getColumns();
-		const vk = this.state.visible_column_keys;
-		if (vk.length === 0)
-			return all;
-		const ordered = vk.map(k => all.find(c => c.table.name + "." + c.name === k)).filter((c): c is TableColumnInfo => !!c);
-		const rest = all.filter(c => !vk.includes(c.table.name + "." + c.name));
-		return [...ordered, ...rest];
-	}
-
-	override render(): ReactNode
-	{
-		const filterBoxItems = this.NSFilterBox_Top.current?.getFilterItems() ?? [];
-		const filterChips = filterBoxItems.length > 0 && (
-			<NSFilterBoxItems
-				filterItems={filterBoxItems}
-				onClearFilterItems={() => this.NSFilterBox_Top.current?.setFilterItems([])}
-				onRemoveFilterItem={(item) => this.NSFilterBox_Top.current?.removeFilterItem(item)}
-			/>
-		);
-
-		const quickFilterBar = this.state.quick_filter_configs.length > 0 && (
-			<NSAQuickFilterBar
-				key={this.state.quick_filter_configs.map(c => c.id).join("-")}
-				ref={this.NSAQuickFilterBar_Ref}
-				configs={this.state.quick_filter_configs}
-				getValues={async (tableName, columnName, search) =>
-				{
-					const values = await this.props.entity.server.value_list(tableName, columnName, search, null, null);
-					const col = this.getColumns().find(c => c.table.name === tableName && c.name === columnName);
-					return values.map(v =>
-					{
-						const formatted = col ? col.formatter.format(v, col, { value: {} } as any, true) : null;
-						return { value: v, title: formatted != null ? String(formatted) : v };
-					});
-				}}
-				onChanged={() => this.reloadFromFilters()}
-			/>
-		);
-
-		return (
-			<>
-				<NSTable<RowType>
-					id={this.props.id}
-					classList={this.props.classList}
-					style={this.props.style}
-					ref={this.NSTable_Main}
-					name={NamingConvention.lower_case_dash.convert(this.props.entity.name, NamingConvention.Pascal_Case_Space)}
-					checkbox={this.props.checkbox ?? true}
-					headerChildren={this.renderFilterHeader()}
-					buttons={this.buildButtons()}
-					columns={this.getOrderedColumns()}
-					getRows={async (page, size, sorts) =>
-					{
-						let res: { rows: RowType[], count: number } = { rows: [], count: 0 };
-						if (this.props.entity.server.list)
-							res = await this.props.entity.server.list(this.getFilterItems(), page, size, sorts, null);
-						this.setState({ res });
-						return res;
-					}}
-					getRowKey={(row) => row.value.id.toString()}
-					getRowAttributes={(row_value, row_index) => this.props.ui?.getRowAttributes?.(row_value, row_index, this.state.res) ?? {}}
-					getColumnAttributes={this.props.ui?.getColumnAttributes}
-					getCellFormattedValue={this.props.ui?.getCellFormattedValue}
-					onVisibleColumnsChanged={(visible_columns) => this.setState({ visible_column_keys: visible_columns.map(c => c.table + "." + c.column) })}
-					onSelectedIDsChanged={() => this.props.onSelectionChanged?.()}
-				>
-					{filterChips}
-					{quickFilterBar}
-				</NSTable>
-				{
-					this.state.show_sort_dialog &&
-					<NSASortDialog
-						sorts={this.state.sorts}
-						getColumns={() => this.getColumns()}
-						onCancel={() => this.setState({ show_sort_dialog: false })}
-						onApply={sorts =>
-						{
-							this.setSortItems(sorts);
-							this.setState({ show_sort_dialog: false, sorts: sorts ?? [] });
-						}}
-					/>
-				}
-				{
-					this.state.show_reorder_dialog &&
-					<NSAReorderDialog
-						visibleColumnKeys={this.state.visible_column_keys}
-						getColumns={() => this.getColumns()}
-						onCancel={() => this.setState({ show_reorder_dialog: false })}
-						onApply={orderedKeys =>
-						{
-							const cs_all = this.getColumns();
-							const cs = orderedKeys.map((v: string) => cs_all.find((c: TableColumnInfo) => v === c.table.name + "." + c.name)).filter(Boolean) as TableColumnInfo[];
-							this.setVisibleColumns(cs.map(c => ({ table: c.table.name, column: c.name })));
-							this.setState({ show_reorder_dialog: false, visible_column_keys: orderedKeys });
-						}}
-					/>
-				}
-				{
-					this.state.show_quick_filter_dialog &&
-					<NSAQuickFilterDialog
-						configs={this.state.quick_filter_configs}
-						getColumns={() => this.getColumns()}
-						typeConverter={(type: string) => new ObjectService(type).getEnum(VariableType, VariableType.Any)}
-						onSave={configs =>
-						{
-							NSACacheService.saveQuickFilters(this.props.entity.name, configs);
-							this.setState({ quick_filter_configs: configs }, () => this.reloadFromFilters());
-						}}
-						onConfirm={configs =>
-						{
-							NSACacheService.saveQuickFilters(this.props.entity.name, configs);
-							this.setState({ quick_filter_configs: configs, show_quick_filter_dialog: false }, () => this.reloadFromFilters());
-						}}
-						onClose={() => this.setState({ show_quick_filter_dialog: false })}
-					/>
-				}
-			</>
-		);
-	}
+import { FilterItem, FilterItemColumnType, NamingConvention, ObjectService, SearchOperation, SortItem } from "namirasoft-core";
+import { CategoryRow, FieldRow } from "namirasoft-field";
+import { FilterItemColumnTypeBuilder, VariableType } from "namirasoft-schema";
+import { IBaseComponentProps, NSButtonProps, NSFilterBox, NSFilterBoxItems, NSFilterBoxProps_Table, NSTable, TableColumnInfo, TableRowInfo } from "namirasoft-site-react";
+import { Component, ReactNode, createRef } from "react";
+import { IEntityInfo } from "../IEntityInfo";
+import { NSACacheService } from "../NSACacheService";
+import { NSAQuickFilterBar } from "./quickfilter/NSAQuickFilterBar";
+import { NSAQuickFilterDialog, QuickFilterConfig } from "./quickfilter/NSAQuickFilterDialog";
+import { NSAReorderDialog } from "./NSAReorderDialog";
+import { NSASortDialog } from "./NSASortDialog";
+
+export interface NSATableUIProps<RowType>
+{
+	getRowAttributes?: (row_value: RowType, row_index: number, res: { rows: RowType[]; count: number; } | null) => { [key: string]: any };
+	getColumnAttributes?: (column: TableColumnInfo) => { [key: string]: any };
+	getCellFormattedValue?: (value: any, column: TableColumnInfo, row: TableRowInfo<RowType>) => any;
+	search_box?: {
+		exclude?: {
+			show?: {
+				table?: (table: string) => boolean;
+				column?: (table: string, column: string) => boolean;
+			},
+			load_value?: (table: string, column: string) => boolean;
+		}
+	};
+}
+
+export interface NSATableProps<RowType extends { id: string }, RowTypeInput = RowType> extends IBaseComponentProps
+{
+	entity: IEntityInfo<RowType, RowTypeInput>;
+	ctf: {
+		enabled: boolean;
+		fields: FieldRow[] | null;
+		categories: CategoryRow[] | null;
+	};
+	url: { getQuery(name: string, base64?: boolean, remove?: boolean): string };
+	ui?: NSATableUIProps<RowType>;
+	checkbox?: boolean;
+	buttons?: NSButtonProps[];
+	onSelectionChanged?: () => void;
+}
+
+interface NSATableState<RowType>
+{
+	res: { rows: RowType[]; count: number; } | null;
+	sorts: SortItem[];
+	visible_column_keys: string[];
+	quick_filter_configs: QuickFilterConfig[];
+	show_sort_dialog: boolean;
+	show_reorder_dialog: boolean;
+	show_quick_filter_dialog: boolean;
+	filter_revision: number;
+}
+
+export class NSATable<RowType extends { id: string }, RowTypeInput = RowType>
+	extends Component<NSATableProps<RowType, RowTypeInput>, NSATableState<RowType>>
+{
+	public NSTable_Main = createRef<NSTable<RowType>>();
+	public NSFilterBox_Top = createRef<NSFilterBox>();
+	public NSAQuickFilterBar_Ref = createRef<NSAQuickFilterBar>();
+
+	constructor(props: NSATableProps<RowType, RowTypeInput>)
+	{
+		super(props);
+		this.state = {
+			res: null,
+			sorts: [],
+			visible_column_keys: [],
+			quick_filter_configs: [],
+			show_sort_dialog: false,
+			show_reorder_dialog: false,
+			show_quick_filter_dialog: false,
+			filter_revision: 0,
+		};
+	}
+
+	override componentDidMount()
+	{
+		const visible = this.NSTable_Main.current?.getVisibleColumns() ?? [];
+		if (visible.length > 0)
+			this.setState({ visible_column_keys: visible.map(v => v.table + "." + v.column) });
+
+		let quick_filter_configs = NSACacheService.loadQuickFilters(this.props.entity.name);
+		if (quick_filter_configs.length === 0)
+			quick_filter_configs = this.buildDefaultQuickFilters();
+		// Re-render so the filter chips reflect any incoming filter items.
+		this.setState(prev => ({ quick_filter_configs, filter_revision: prev.filter_revision + 1 }));
+	}
+
+	private getColumns(): TableColumnInfo[]
+	{
+		let columns = Object.values(this.props.entity.client.getColumns()).flat();
+		columns.forEach(col =>
+		{
+			col.text = NamingConvention.auto.convert(col.text, NamingConvention.Pascal_Case_Space);
+		});
+		return columns;
+	}
+
+	private buildDefaultQuickFilters(): QuickFilterConfig[]
+	{
+		const getDefaults = this.props.entity.client.getQuickFilters;
+		if (!getDefaults)
+			return [];
+
+		const columns = this.getColumns();
+		const ans: QuickFilterConfig[] = [];
+		for (const def of getDefaults())
+		{
+			const col = columns.find(c => c.name === def.column);
+			if (!col)
+				continue;
+			const columnType = new ObjectService(col.type).getEnum(VariableType, VariableType.Any);
+			ans.push({
+				id: `default-${col.table.name}-${col.name}`,
+				column: {
+					table: { name: col.table.name, text: col.table.text },
+					name: col.name,
+					text: col.text,
+					type: col.type,
+					columnType,
+				},
+				operatorName: (def as { operator?: string }).operator,
+			});
+		}
+		return ans;
+	}
+
+	private filterItemTypeConverter(type: string): FilterItemColumnType
+	{
+		let t = new ObjectService(type).getEnum(VariableType, VariableType.Any);
+		let builder = new FilterItemColumnTypeBuilder(t);
+		return builder.runSynch(() => { }) ?? FilterItemColumnType.Unknown;
+	}
+
+	private getIncomingFilterItems(): FilterItem[] | undefined
+	{
+		try
+		{
+			let encoded = this.props.url.getQuery("filters");
+			if (encoded)
+				return FilterItem.decode(encoded) ?? undefined;
+		} catch (error)
+		{
+		}
+		return undefined;
+	}
+
+	public reload(page: number | null, size: number | null): Promise<void> | undefined
+	{
+		return this.NSTable_Main.current?.reload(page, size);
+	}
+	public getSelectedIDs(): string[]
+	{
+		return this.NSTable_Main.current?.getSelectedIDs() ?? [];
+	}
+	public getSelectedRows(): RowType[]
+	{
+		return this.NSTable_Main.current?.getSelectedRows() ?? [];
+	}
+	public setSelectedIDs(ids: string[], rows: RowType[], callback?: () => void)
+	{
+		this.NSTable_Main.current?.setSelectedIDs(ids, rows, callback);
+	}
+	public getSortItems(): SortItem[]
+	{
+		return this.NSTable_Main.current?.getSortItems() ?? [];
+	}
+	public setSortItems(items: SortItem[] | null)
+	{
+		this.NSTable_Main.current?.setSortItems(items);
+	}
+	public getVisibleColumns(): { table: string, column: string }[]
+	{
+		return this.NSTable_Main.current?.getVisibleColumns() ?? [];
+	}
+	public setVisibleColumns(visible_columns: { table: string, column: string }[])
+	{
+		this.NSTable_Main.current?.setVisibleColumns(visible_columns);
+	}
+	public getFilterBoxItems(): FilterItem[]
+	{
+		return this.NSFilterBox_Top.current?.getFilterItems() ?? [];
+	}
+	public getQuickFilterItems(): FilterItem[]
+	{
+		return this.NSAQuickFilterBar_Ref.current?.getFilterItems() ?? [];
+	}
+	public getFilterItems(): FilterItem[]
+	{
+		return [...this.getFilterBoxItems(), ...this.getQuickFilterItems()];
+	}
+
+	private reloadFromFilters()
+	{
+		this.NSTable_Main.current?.setSelectedIDs([], []);
+		this.NSTable_Main.current?.reload(null, null);
+	}
+
+	private onFilterBoxChanged = () =>
+	{
+		this.reloadFromFilters();
+		this.setState(prev => ({ filter_revision: prev.filter_revision + 1 }));
+	};
+
+	private buildButtons(): NSButtonProps[]
+	{
+		const buttons: NSButtonProps[] = [
+			{
+				title: "",
+				icon: { src: "https://static.namirasoft.com/image/concept/grip-vertical/blue.svg", alt: "reorder" },
+				attributes: { title: "Reorder" },
+				onClick: {
+					action: () => this.setState({ show_reorder_dialog: true, visible_column_keys: this.getVisibleColumns().map(c => c.table + "." + c.column) }),
+					showLoading: false,
+				},
+			},
+			{
+				title: "",
+				icon: { src: "https://static.namirasoft.com/image/concept/arrow-down-short-wide/blue.svg", alt: "sort" },
+				attributes: { title: "Sort" },
+				onClick: {
+					action: () => this.setState({ show_sort_dialog: true, sorts: this.getSortItems() }),
+					showLoading: false,
+				},
+			},
+			{
+				title: "",
+				icon: { src: "https://static.namirasoft.com/image/concept/sliders/blue.svg", alt: "filter" },
+				attributes: { title: "Quick Filters" },
+				onClick: {
+					action: () => this.setState({ show_quick_filter_dialog: true }),
+					showLoading: false,
+				},
+			},
+		];
+		return [...buttons, ...(this.props.buttons ?? [])];
+	}
+
+	private renderFilterHeader(): ReactNode
+	{
+		return (
+			<NSFilterBox
+				ref={this.NSFilterBox_Top}
+				filterItems={this.getIncomingFilterItems()}
+				getTables={() =>
+				{
+					return this.props.entity.tables.map(table =>
+					{
+						let columns = table.table.getColumns().map(c => ({ id: c.name, ...c, type: this.filterItemTypeConverter(c.type) }));
+						columns = columns.filter(c =>
+						{
+							if (this.props.ui?.search_box?.exclude?.show?.column)
+								if (this.props.ui?.search_box?.exclude.show?.column(table.table.name, c.name))
+									return false;
+							return true;
+						});
+						return { name: table.table.name, text: table.table.text, columns, required: table.required };
+					}).filter(t =>
+					{
+						if (this.props.ui?.search_box?.exclude?.show?.table)
+							if (this.props.ui?.search_box?.exclude.show.table(t.name))
+								return false;
+						return true;
+					});
+				}}
+				getMoreTables={async () =>
+				{
+					let ans: NSFilterBoxProps_Table[] = [];
+					if (this.props.ctf.enabled)
+						try
+						{
+							if (this.props.ctf.fields)
+								if (this.props.ctf.fields.length > 0)
+								{
+									let name = this.props.entity.name + "_field";
+									ans.push({
+										name,
+										text: "Fields",
+										columns: [{
+											id: "field_id",
+											name: "field_id",
+											text: "ID",
+											type: FilterItemColumnType.Unknown,
+											getValues: async (search) =>
+											{
+												return this.props.ctf.fields?.filter(c => SearchOperation.match(c.id, search)).map(c => { return { value: c.id, title: c.id } }) ?? [];
+											}
+										}, {
+											id: "field_name",
+											name: "field_id",
+											text: "Name",
+											type: FilterItemColumnType.Unknown,
+											getValues: async (search) =>
+											{
+												return this.props.ctf.fields?.filter(c => SearchOperation.match(c.name, search)).map(c => { return { value: c.id, title: c.name } }) ?? [];
+											}
+										}, {
+											id: "field_value",
+											name: "value",
+											text: "Value",
+											type: FilterItemColumnType.Unknown
+										},
+										...this.props.ctf.fields.map(f =>
+										{
+											return {
+												id: f.id,
+												name: f.id,
+												text: f.name,
+												type: this.filterItemTypeConverter(f.type.type.type),
+												getValues: async (search: string) =>
+												{
+													let values = await this.props.entity.server.value_list(name, "value", search, f.id, null);
+													return values.map(v => { return { value: v, title: v } });
+												}
+											};
+										}),],
+										required: false
+									});
+								}
+
+							if (this.props.ctf.categories)
+								if (this.props.ctf.categories.length > 0)
+									ans.push({
+										name: this.props.entity.name + "_category",
+										text: "Categories",
+										columns: [{
+											id: "category_id",
+											name: "category_id",
+											text: "ID",
+											type: FilterItemColumnType.Unknown,
+											getValues: async (search) =>
+											{
+												return this.props.ctf.categories?.filter(c => SearchOperation.match(c.id, search)).map(c => { return { value: c.id, title: c.id } }) ?? [];
+											}
+										}, {
+											id: "category_name",
+											name: "category_id",
+											text: "Name",
+											type: FilterItemColumnType.Unknown,
+											getValues: async (search) =>
+											{
+												return this.props.ctf.categories?.filter(c => SearchOperation.match(c.name, search)).map(c => { return { value: c.id, title: c.name } }) ?? [];
+											}
+										}],
+										required: false
+									});
+
+						} catch (error)
+						{
+						}
+					// todo add tags
+					return ans;
+				}}
+				getValues={async (table, column, value) =>
+				{
+					if (this.props.ui?.search_box?.exclude?.load_value)
+						if (this.props.ui?.search_box?.exclude?.load_value(table.name, column.name))
+							return [];
+					let values = await this.props.entity.server.value_list(table.name, column.name, value, null, null);
+					return values.map(v => { return { value: v, title: v } });
+				}}
+				onChanged={this.onFilterBoxChanged}
+			/>
+		);
+	}
+
+	private getOrderedColumns(): TableColumnInfo[]
+	{
+		const all = this.getColumns();
+		const vk = this.state.visible_column_keys;
+		if (vk.length === 0)
+			return all;
+		const ordered = vk.map(k => all.find(c => c.table.name + "." + c.name === k)).filter((c): c is TableColumnInfo => !!c);
+		const rest = all.filter(c => !vk.includes(c.table.name + "." + c.name));
+		return [...ordered, ...rest];
+	}
+
+	override render(): ReactNode
+	{
+		const filterBoxItems = this.NSFilterBox_Top.current?.getFilterItems() ?? [];
+		const filterChips = filterBoxItems.length > 0 && (
+			<NSFilterBoxItems
+				filterItems={filterBoxItems}
+				onClearFilterItems={() => this.NSFilterBox_Top.current?.setFilterItems([])}
+				onRemoveFilterItem={(item) => this.NSFilterBox_Top.current?.removeFilterItem(item)}
+			/>
+		);
+
+		const quickFilterBar = this.state.quick_filter_configs.length > 0 && (
+			<NSAQuickFilterBar
+				key={this.state.quick_filter_configs.map(c => c.id).join("-")}
+				ref={this.NSAQuickFilterBar_Ref}
+				configs={this.state.quick_filter_configs}
+				getValues={async (tableName, columnName, search) =>
+				{
+					const values = await this.props.entity.server.value_list(tableName, columnName, search, null, null);
+					const col = this.getColumns().find(c => c.table.name === tableName && c.name === columnName);
+					return values.map(v =>
+					{
+						const formatted = col ? col.formatter.format(v, col, { value: {} } as any, true) : null;
+						return { value: v, title: formatted != null ? String(formatted) : v };
+					});
+				}}
+				onChanged={() => this.reloadFromFilters()}
+			/>
+		);
+
+		return (
+			<>
+				<NSTable<RowType>
+					id={this.props.id}
+					classList={this.props.classList}
+					style={this.props.style}
+					ref={this.NSTable_Main}
+					name={NamingConvention.lower_case_dash.convert(this.props.entity.name, NamingConvention.Pascal_Case_Space)}
+					checkbox={this.props.checkbox ?? true}
+					headerChildren={this.renderFilterHeader()}
+					buttons={this.buildButtons()}
+					columns={this.getOrderedColumns()}
+					getRows={async (page, size, sorts) =>
+					{
+						let res: { rows: RowType[], count: number } = { rows: [], count: 0 };
+						if (this.props.entity.server.list)
+							res = await this.props.entity.server.list(this.getFilterItems(), page, size, sorts, null);
+						this.setState({ res });
+						return res;
+					}}
+					getRowKey={(row) => row.value.id.toString()}
+					getRowAttributes={(row_value, row_index) => this.props.ui?.getRowAttributes?.(row_value, row_index, this.state.res) ?? {}}
+					getColumnAttributes={this.props.ui?.getColumnAttributes}
+					getCellFormattedValue={this.props.ui?.getCellFormattedValue}
+					onVisibleColumnsChanged={(visible_columns) => this.setState({ visible_column_keys: visible_columns.map(c => c.table + "." + c.column) })}
+					onSelectedIDsChanged={() => this.props.onSelectionChanged?.()}
+				>
+					{filterChips}
+					{quickFilterBar}
+				</NSTable>
+				{
+					this.state.show_sort_dialog &&
+					<NSASortDialog
+						sorts={this.state.sorts}
+						getColumns={() => this.getColumns()}
+						onCancel={() => this.setState({ show_sort_dialog: false })}
+						onApply={sorts =>
+						{
+							this.setSortItems(sorts);
+							this.setState({ show_sort_dialog: false, sorts: sorts ?? [] });
+						}}
+					/>
+				}
+				{
+					this.state.show_reorder_dialog &&
+					<NSAReorderDialog
+						visibleColumnKeys={this.state.visible_column_keys}
+						getColumns={() => this.getColumns()}
+						onCancel={() => this.setState({ show_reorder_dialog: false })}
+						onApply={orderedKeys =>
+						{
+							const cs_all = this.getColumns();
+							const cs = orderedKeys.map((v: string) => cs_all.find((c: TableColumnInfo) => v === c.table.name + "." + c.name)).filter(Boolean) as TableColumnInfo[];
+							this.setVisibleColumns(cs.map(c => ({ table: c.table.name, column: c.name })));
+							this.setState({ show_reorder_dialog: false, visible_column_keys: orderedKeys });
+						}}
+					/>
+				}
+				{
+					this.state.show_quick_filter_dialog &&
+					<NSAQuickFilterDialog
+						configs={this.state.quick_filter_configs}
+						getColumns={() => this.getColumns()}
+						typeConverter={(type: string) => new ObjectService(type).getEnum(VariableType, VariableType.Any)}
+						onSave={configs =>
+						{
+							NSACacheService.saveQuickFilters(this.props.entity.name, configs);
+							this.setState({ quick_filter_configs: configs }, () => this.reloadFromFilters());
+						}}
+						onConfirm={configs =>
+						{
+							NSACacheService.saveQuickFilters(this.props.entity.name, configs);
+							this.setState({ quick_filter_configs: configs, show_quick_filter_dialog: false }, () => this.reloadFromFilters());
+						}}
+						onClose={() => this.setState({ show_quick_filter_dialog: false })}
+					/>
+				}
+			</>
+		);
+	}
 }