@elyx-code/editor-ui 0.0.2

package/src/components/resources/relational-database/DatabaseTable.tsx

@@ -0,0 +1,905 @@
+import React, { useEffect, useState, useRef } from 'react';
+import axios from 'axios';
+import Table from '../../../lib/table/Table';
+import Button from '../../../lib/button/Button';
+import { getAccessToken } from '../../../auth';
+import {
+	IDeleteQuery,
+	IInsertQuery,
+	ISelectQuery,
+	IUpdateQuery,
+	QueryValue,
+	QueryWhereOperator,
+} from '../query';
+import { popupNotification } from '../../../popup-notification';
+import { useLocation, useNavigate, useParams } from 'react-router-dom';
+import {
+	ICallbackValues,
+	IndexedTableRowSelection,
+	ITableColumnUI,
+	ITableRow,
+	ITableRowDataPoint,
+	ITableSearch,
+	ITableSort,
+	PrimaryKeyTableRowSelection,
+	TableCellValue,
+	TableColumnType,
+	TableRowSelection,
+	TableSortType,
+} from '../../../lib/table/types';
+import { EditorService } from '../../../services/editor';
+import { CircularProgress, MenuItem, Select } from '@mui/material';
+import { ExplicitDataTypeIcon } from '../../draggable-entity-card/DataTypeIcon';
+import {
+	BaseEntityNames,
+	capitalizeFirstLetter,
+} from '@elyx-code/project-logic-tree';
+import { Logger } from '@elyx-code/common-ts-utils';
+import { envConfig } from '../../../config';
+
+const NUMBER_OF_ROWS = 5;
+
+// Raw shapes returned by the relational-db-service.
+// These mirror the types declared in
+// `relational-db-service/src/services/database.ts` (IRawSQLColumn et al.)
+// and `relational-db-service/src/http/v1/database/get-details.ts`
+// (IDatabaseDetailsResponseBody). Keep them in sync.
+
+export interface ISQLForeignKeyReference {
+	tableName: string;
+	columnName: string;
+}
+
+export interface IRawSQLColumn {
+	column_name: string;
+	data_type: string;
+	is_nullable: 'YES' | 'NO';
+	is_primary_key: boolean;
+	foreign_key: ISQLForeignKeyReference | null;
+}
+
+export type IRawSQLRow = Record<string, TableCellValue>;
+
+export interface IRawSQLTable {
+	tableName: string;
+	columns: IRawSQLColumn[];
+}
+
+export interface ISQLDatabaseDetailsResponse {
+	items: { tables: IRawSQLTable[] }[];
+	data: {
+		tableName?: string;
+		columns?: IRawSQLColumn[];
+		rows: IRawSQLRow[];
+		total: number;
+	};
+}
+
+// UI-shaped equivalents, after `mapColumns` enriches the raw payload.
+
+interface IDatabaseUITable {
+	tableName: string;
+	columns: ITableColumnUI[];
+}
+
+interface IDatabaseUIDetails {
+	tables: IDatabaseUITable[];
+}
+
+interface IQueryErrorLike {
+	response?: { data?: { message?: string }; message?: string };
+	message?: string;
+}
+
+function createQueryErrorMessage(
+	error: unknown,
+	tables: IDatabaseUITable[],
+): string {
+	const err = error as IQueryErrorLike;
+	let message =
+		err?.response?.data?.message ||
+		err?.response?.message ||
+		err?.message ||
+		'Something went wrong';
+
+	if (message.includes('SequelizeForeignKeyConstraintError')) {
+		// Postgres phrasing distinguishes the two cases:
+		//   "update or delete on table ..."  → referenced row is being removed/modified
+		//   "insert or update on table ..."  → the row being written points to a missing target
+		if (/update or delete on table/.test(message)) {
+			const referencingTableName = message
+				.split('on table "')[2]
+				?.split('"')[0];
+			const referencingTable = tables.find(
+				(t) => t.tableName === referencingTableName,
+			);
+
+			return `This row is referenced by an entry on ${
+				referencingTable?.tableName
+					? 'the ' + referencingTable.tableName + ' table'
+					: 'another table'
+			}. Delete the row from that table first.`;
+		}
+
+		if (/insert or update on table/.test(message)) {
+			const constraintName = message.match(
+				/foreign key constraint "([^"]+)"/,
+			)?.[1];
+			const columnName = constraintName?.match(/^.+_(.+)_fkey$/)?.[1];
+
+			return columnName
+				? `The value provided for "${columnName}" doesn't match any existing row in the referenced table.`
+				: 'The value provided for a foreign-key column doesn\'t match any existing row in the referenced table.';
+		}
+	}
+
+	message = message.replace('Something went wrong: ', '');
+	message = message.replace(
+		'SequelizeUniqueConstraintError: ',
+		'Field should be unique. ',
+	);
+	message = message.replace('SequelizeForeignKeyConstraintError: ', '');
+	message = message.replace('SequelizeDatabaseError: ', '');
+	message = message.replace('SequelizeValidationError: ', '');
+
+	return capitalizeFirstLetter(message);
+}
+
+function fromSQLResponseTypeToUIColumnType(
+	column: IRawSQLColumn,
+): TableColumnType {
+	switch (column.data_type) {
+		case 'character varying':
+			return TableColumnType.String;
+		case 'integer':
+			return TableColumnType.Number;
+		case 'boolean':
+			return TableColumnType.Boolean;
+		case 'date':
+			return TableColumnType.Date;
+		case 'uuid':
+			return TableColumnType.UUID;
+		default:
+			return TableColumnType.String;
+	}
+}
+
+function toRowCellString(value: TableCellValue): string | null {
+	if (value === null || value === undefined) return null;
+	return String(value);
+}
+
+const DatabaseTable: React.FC<{ project: EditorService }> = ({
+	project,
+}: {
+	project: EditorService;
+}) => {
+	const isMountedRef = useRef(true);
+	const [databaseDetails, setDatabaseDetails] =
+		useState<IDatabaseUIDetails | null>(null);
+	const [isLoading, setIsLoading] = useState<boolean>(false);
+	const [rows, setRows] = useState<ITableRow[]>([]);
+	const [columns, setColumns] = useState<ITableColumnUI[]>([]);
+	const [selectedTable, setSelectedTable] = useState<string | null>(null);
+	const [currentPage, setCurrentPage] = useState<number>(1);
+	const [totalItems, setTotalItems] = useState<number>(0);
+	const [sorts, setSorts] = useState<ITableSort[]>([]);
+	const [searches, setSearches] = useState<ITableSearch[]>([]);
+	const { resourceId } = useParams<{
+		resourceId: string;
+	}>();
+	const navigate = useNavigate();
+	const location = useLocation();
+
+	const updateSelectedTableQueryParam = (tableName: string | null) => {
+		if (!isMountedRef.current) return;
+		if (!window.location.pathname.includes(`/resources/relational-database/${resourceId}`)) {
+			return;
+		}
+
+		const params = new URLSearchParams(location.search);
+		if (tableName) {
+			params.set('selectedTable', tableName);
+		} else {
+			params.delete('selectedTable');
+		}
+		const search = params.toString();
+		navigate(`${location.pathname}${search ? `?${search}` : ''}`, {
+			replace: true,
+		});
+	};
+
+	let primaryKeyIndex: number = 0;
+	const primaryKeyName = columns.find((col, ind) => {
+		if (col.primaryKey) {
+			primaryKeyIndex = ind;
+			return true;
+		}
+		return false;
+	})?.value;
+
+	const getDatabaseDetails =
+		async (): Promise<ISQLDatabaseDetailsResponse> => {
+			Logger.log('Fetching database details');
+			const { data } = await axios.get<ISQLDatabaseDetailsResponse>(
+				`${envConfig.API_BASE_URL}/relational-db-service/v1/${project.projectId}/database/${resourceId}?limit=${NUMBER_OF_ROWS}`,
+				{
+					headers: {
+						Authorization: `Bearer ${await getAccessToken()}`,
+					},
+				},
+			);
+
+			Logger.log('Database details: ', data);
+			return data;
+		};
+
+	const mapColumns = (cols: IRawSQLColumn[]): ITableColumnUI[] => {
+		return cols.map((column): ITableColumnUI => ({
+			value: column.column_name,
+			label: column.column_name,
+			size: 'lg',
+			type: fromSQLResponseTypeToUIColumnType(column),
+			sort: null,
+			primaryKey: column.is_primary_key,
+			sortable: true,
+			searchable: true,
+			editable: !column.is_primary_key,
+			hidden: false,
+			dataTypeLabel: column.foreign_key
+				? `→ ${column.foreign_key.tableName}.${column.foreign_key.columnName}`
+				: undefined,
+			foreignKey: column.foreign_key
+				? {
+						table: column.foreign_key.tableName,
+						key: column.foreign_key.columnName,
+				  }
+				: null,
+			nullable: column.is_nullable === 'YES',
+		}));
+	};
+
+	const diggestDetails = (det: {
+		tables: IRawSQLTable[];
+	}): IDatabaseUIDetails => ({
+		tables: det.tables.map((t) => ({
+			tableName: t.tableName,
+			columns: mapColumns(t.columns),
+		})),
+	});
+
+	const mapAndSortRowColumns = (
+		row: IRawSQLRow,
+		tableColumns: ITableColumnUI[],
+	): ITableRow => {
+		const sortedColumnValues: ITableRowDataPoint[] = [];
+
+		Object.keys(row).forEach((columnName) => {
+			const columnIndex = tableColumns.findIndex(
+				(column) => column.label === columnName,
+			);
+			if (columnIndex === -1) return;
+			sortedColumnValues[columnIndex] = {
+				value: toRowCellString(row[columnName]),
+			};
+		});
+
+		return { data: sortedColumnValues };
+	};
+
+	const init = async () => {
+		setIsLoading(true);
+
+		try {
+			const requestedTable = new URLSearchParams(
+				window.location.search,
+			).get('selectedTable');
+
+			const databaseResponse = await getDatabaseDetails();
+			if (!isMountedRef.current) return;
+
+			const digested = diggestDetails(databaseResponse.items[0]);
+			setDatabaseDetails(digested);
+
+			const availableTables = digested.tables;
+			const requestedTableDef = requestedTable
+				? availableTables.find((t) => t.tableName === requestedTable)
+				: undefined;
+
+			if (requestedTableDef) {
+				const mappedCols = requestedTableDef.columns;
+				setColumns(mappedCols);
+				setSelectedTable(requestedTableDef.tableName);
+				setRows([]);
+				setTotalItems(0);
+				await loadMore({
+					tableName: requestedTableDef.tableName,
+					columns: mappedCols,
+				});
+			} else {
+				const cols = databaseResponse.data.columns || [];
+				const mappedCols = mapColumns(cols);
+				setColumns(mappedCols);
+
+				const newRows = (databaseResponse.data.rows || []).map((row) =>
+					mapAndSortRowColumns(row, mappedCols),
+				);
+				setRows(newRows);
+
+				const defaultTableName = databaseResponse.data.tableName || null;
+				setSelectedTable(defaultTableName);
+				setTotalItems(databaseResponse.data.total);
+
+				if (defaultTableName) {
+					updateSelectedTableQueryParam(defaultTableName);
+				}
+			}
+		} catch (error) {
+			if (!isMountedRef.current) return;
+			Logger.error('Error fetching database details: ', error);
+			popupNotification({
+				text: 'Error fetching database details. Please try again later.',
+				color: 'error',
+			});
+		}
+
+		if (isMountedRef.current) {
+			setIsLoading(false);
+		}
+	};
+
+	useEffect(() => {
+		isMountedRef.current = true;
+		init();
+		return () => {
+			isMountedRef.current = false;
+		};
+	}, []);
+
+	const resolveSearchOperator = (
+		column: ITableColumnUI | undefined,
+	): QueryWhereOperator | undefined => {
+		if (!column) return undefined;
+		return column.type === TableColumnType.String
+			? QueryWhereOperator.ILIKE
+			: undefined;
+	};
+
+	const loadMore = async (
+		options: { tableName?: string; columns?: ITableColumnUI[] } = {},
+	) => {
+		const selectedTableName = options.tableName || selectedTable;
+		if (!selectedTableName) return;
+
+		setIsLoading(true);
+		setTotalItems(0);
+
+		const effectiveColumns = options.columns || columns;
+		const offset = (currentPage - 1) * NUMBER_OF_ROWS;
+
+		const selectQueryRequest: ISelectQuery = {
+			from: {
+				name: selectedTableName,
+			},
+			items: [{ name: '*' }],
+			where: searches.map((search) => {
+				const searchedColumn = effectiveColumns.find(
+					(column) => column.value === search.column,
+				);
+				return {
+					name: search.column,
+					value: search.value,
+					operator: resolveSearchOperator(searchedColumn),
+				};
+			}),
+			limit: NUMBER_OF_ROWS,
+			offset,
+			sorts: sorts.map((sort) => ({
+				name: sort.column,
+				direction: sort.direction,
+			})),
+		};
+
+		const { data } = await axios.post<{
+			items: IRawSQLRow[];
+			total: number;
+		}>(
+			`${envConfig.API_BASE_URL}/relational-db-service/v1/${project.projectId}/query/${resourceId}`,
+			{
+				query: {
+					select: selectQueryRequest,
+				},
+			},
+			{
+				headers: {
+					Authorization: `Bearer ${await getAccessToken()}`,
+				},
+			},
+		);
+
+		if (!isMountedRef.current) return;
+
+		const newRows = (data.items || []).map((row) =>
+			mapAndSortRowColumns(row, effectiveColumns),
+		);
+		setRows(newRows);
+		setTotalItems(data.total);
+
+		setIsLoading(false);
+	};
+
+	const insertRow = async (values: ICallbackValues) => {
+		if (!selectedTable) return;
+
+		const insertQueryRequest: IInsertQuery = {
+			into: { name: selectedTable },
+			items: values.map((entry) => ({
+				name: entry.column,
+				value: entry.value,
+			})),
+		};
+
+		try {
+			await axios.post(
+				`${envConfig.API_BASE_URL}/relational-db-service/v1/${project.projectId}/query/${resourceId}`,
+				{
+					query: {
+						insert: insertQueryRequest,
+					},
+				},
+				{
+					headers: {
+						Authorization: `Bearer ${await getAccessToken()}`,
+					},
+				},
+			);
+			loadMore();
+		} catch (error) {
+			const message = createQueryErrorMessage(
+				error,
+				databaseDetails?.tables || [],
+			);
+			popupNotification({ text: message, color: 'error' });
+		}
+	};
+
+	const updateRow = async (values: ICallbackValues) => {
+		if (!selectedTable || !primaryKeyName) return;
+
+		const idValue = values.find(
+			(entry) => entry.column === primaryKeyName,
+		)?.value;
+
+		if (idValue === undefined) return;
+
+		const filteredValues = values.filter((entry) => {
+			const foundColumn = columns.find(
+				(tableColumn) => tableColumn.value === entry.column,
+			);
+			return foundColumn?.editable;
+		});
+
+		const updateQueryRequest: IUpdateQuery = {
+			table: { name: selectedTable },
+			set: filteredValues.map((entry) => ({
+				name: entry.column,
+				value: entry.value,
+			})),
+			where: [
+				{
+					name: primaryKeyName,
+					value: idValue,
+				},
+			],
+		};
+
+		try {
+			await axios.post(
+				`${envConfig.API_BASE_URL}/relational-db-service/v1/${project.projectId}/query/${resourceId}`,
+				{
+					query: {
+						update: updateQueryRequest,
+					},
+				},
+				{
+					headers: {
+						Authorization: `Bearer ${await getAccessToken()}`,
+					},
+				},
+			);
+			loadMore();
+		} catch (error) {
+			const message = createQueryErrorMessage(
+				error,
+				databaseDetails?.tables || [],
+			);
+			popupNotification({ text: message, color: 'error' });
+		}
+	};
+
+	const resolveRow = (
+		value: TableRowSelection,
+		currentRows: ITableRow[],
+	): ITableRow | undefined => {
+		const asPk = value as PrimaryKeyTableRowSelection;
+		if (asPk.primaryKey !== undefined) {
+			return currentRows.find(
+				(row) => row.data[primaryKeyIndex]?.value === String(asPk.primaryKey),
+			);
+		}
+		return currentRows[(value as IndexedTableRowSelection).index];
+	};
+
+	const deleteRow = async (value: TableRowSelection) => {
+		if (!selectedTable || !primaryKeyName) return;
+
+		const foundRow = resolveRow(value, rows);
+		if (!foundRow) return;
+
+		const rowId: QueryValue = foundRow.data[primaryKeyIndex].value;
+
+		const deleteQueryRequest: IDeleteQuery = {
+			from: { name: selectedTable },
+			where: [
+				{
+					name: primaryKeyName,
+					value: rowId,
+				},
+			],
+		};
+
+		try {
+			await axios.post(
+				`${envConfig.API_BASE_URL}/relational-db-service/v1/${project.projectId}/query/${resourceId}`,
+				{
+					query: {
+						delete: deleteQueryRequest,
+					},
+				},
+				{
+					headers: {
+						Authorization: `Bearer ${await getAccessToken()}`,
+					},
+				},
+			);
+			loadMore();
+		} catch (error) {
+			const message = createQueryErrorMessage(
+				error,
+				databaseDetails?.tables || [],
+			);
+			popupNotification({ text: message, color: 'error' });
+		}
+	};
+
+	const deleteRows = async (values: TableRowSelection[]) => {
+		if (!selectedTable || !primaryKeyName) return;
+
+		const rowIds: QueryValue[] = values
+			.map((value) => resolveRow(value, rows))
+			.filter((row): row is ITableRow => Boolean(row))
+			.map((row) => row.data[primaryKeyIndex].value);
+
+		if (!rowIds.length) return;
+
+		const [firstRow, ...rest] = rowIds;
+
+		const deleteQueryRequest: IDeleteQuery = {
+			from: { name: selectedTable },
+			where: [
+				{
+					name: primaryKeyName,
+					value: firstRow,
+					or: rest.map((rowId) => ({
+						name: primaryKeyName,
+						value: rowId,
+					})),
+				},
+			],
+		};
+
+		try {
+			await axios.post(
+				`${envConfig.API_BASE_URL}/relational-db-service/v1/${project.projectId}/query/${resourceId}`,
+				{
+					query: {
+						delete: deleteQueryRequest,
+					},
+				},
+				{
+					headers: {
+						Authorization: `Bearer ${await getAccessToken()}`,
+					},
+				},
+			);
+			loadMore();
+		} catch (error) {
+			const message = createQueryErrorMessage(
+				error,
+				databaseDetails?.tables || [],
+			);
+			popupNotification({ text: message, color: 'error' });
+		}
+	};
+
+	const deleteAllRows = async () => {
+		if (!selectedTable) return;
+
+		const deleteQueryRequest: IDeleteQuery = {
+			from: { name: selectedTable },
+			where: searches.map((search) => ({
+				name: search.column,
+				value: search.value,
+			})),
+		};
+
+		try {
+			await axios.post(
+				`${envConfig.API_BASE_URL}/relational-db-service/v1/${project.projectId}/query/${resourceId}`,
+				{
+					query: {
+						delete: deleteQueryRequest,
+					},
+				},
+				{
+					headers: {
+						Authorization: `Bearer ${await getAccessToken()}`,
+					},
+				},
+			);
+			loadMore();
+		} catch (error) {
+			const message = createQueryErrorMessage(
+				error,
+				databaseDetails?.tables || [],
+			);
+			popupNotification({ text: message, color: 'error' });
+		}
+	};
+
+	const handleTableSelection = (table: IDatabaseUITable | undefined) => {
+		if (!table) return;
+		setSelectedTable(table.tableName);
+		setColumns(table.columns);
+		updateSelectedTableQueryParam(table.tableName);
+		loadMore({ tableName: table.tableName, columns: table.columns });
+	};
+
+	const handleCreate = (values: ICallbackValues) => {
+		insertRow(values);
+	};
+
+	const handleUpdate = (values: ICallbackValues) => {
+		updateRow(values);
+	};
+
+	const handleSearch = (column: string, value: string) => {
+		const newSearches = [...searches];
+		const searchIndex = newSearches.findIndex(
+			(search) => search.column === column,
+		);
+
+		if (searchIndex === -1) {
+			newSearches.push({ column, value });
+		} else {
+			if (newSearches[searchIndex].value === value) {
+				return;
+			}
+			newSearches[searchIndex] = { column, value };
+		}
+
+		setSearches(newSearches);
+		loadMore();
+	};
+
+	const handleSearchesUpdate = (newSearches: ITableSearch[]) => {
+		setSearches(newSearches);
+		loadMore();
+	};
+
+	const handleSort = (column: string, direction: TableSortType) => {
+		setSorts([{ column, direction }]);
+		loadMore();
+	};
+
+	const handleSortsUpdate = (newSorts: ITableSort[]) => {
+		setSorts(newSorts);
+		loadMore();
+	};
+
+	const handlePaginationChange = (page: number) => {
+		setCurrentPage(page);
+		loadMore();
+	};
+
+	const totalPages = Math.ceil(totalItems / NUMBER_OF_ROWS) || 1;
+	const availableTables: IDatabaseUITable[] = databaseDetails?.tables || [];
+
+	return (
+		<div>
+			<div
+				style={{
+					marginLeft: '80px',
+					marginRight: '30px',
+				}}
+			>
+				<div
+					style={{
+						display: 'flex',
+						alignItems: 'center',
+						gap: 16,
+					}}
+				>
+					<div
+						style={{
+							display: 'flex',
+							flexDirection: 'column',
+							gap: 4,
+						}}
+					>
+						<h2
+							style={{
+								margin: 0,
+								fontSize: 16,
+								fontWeight: 400,
+							}}
+						>
+							Explore database
+						</h2>
+						<p
+							style={{
+								margin: 0,
+								fontSize: 10,
+								color: 'rgba(0,0,0,0.54)',
+							}}
+						>
+							The final results, found by your search statement
+						</p>
+					</div>
+				</div>
+
+				<br />
+
+				<span
+					style={{
+						display: 'flex',
+						justifyContent: 'space-between',
+						alignItems: 'center',
+						width: '100%',
+					}}
+				>
+					<div style={{ display: 'flex', alignItems: 'center', gap: '8px' }}>
+						<Select
+							value={selectedTable ?? ''}
+							size='small'
+							disabled={!databaseDetails}
+							onChange={(e) => {
+								handleTableSelection(
+									availableTables.find(
+										(table) => table.tableName === e.target.value,
+									),
+								);
+							}}
+							displayEmpty
+							inputProps={{ 'aria-label': 'Without label' }}
+							renderValue={(selected) => {
+								if (!databaseDetails) {
+									return (
+										<span
+											style={{
+												display: 'flex',
+												gap: '12px',
+												alignItems: 'center',
+												color: 'rgba(0, 0, 0, 0.54)',
+											}}
+										>
+											<CircularProgress size={14} thickness={5} />
+											Loading tables…
+										</span>
+									);
+								}
+
+								if (!selected) {
+									return <span>Select a resource</span>;
+								}
+
+								const selectedOption = availableTables.find(
+									(option) => option.tableName === selected,
+								);
+
+								return (
+									<span
+										style={{ display: 'flex', gap: '12px', alignItems: 'center' }}
+									>
+										<ExplicitDataTypeIcon
+											icon={BaseEntityNames.PERSISTED_ENTITY}
+											id={
+												'literal-value-type-selector-value--' +
+												(selectedOption?.tableName || selected)
+											}
+										/>
+										{selectedOption?.tableName || selected}
+									</span>
+								);
+							}}
+						>
+							{!databaseDetails && (
+								<MenuItem disabled value=''>
+									<span
+										style={{ display: 'flex', gap: '12px', alignItems: 'center' }}
+									>
+										<CircularProgress size={14} thickness={5} />
+										Loading tables…
+									</span>
+								</MenuItem>
+							)}
+							{!!databaseDetails && !availableTables.length && (
+								<MenuItem disabled value=''>
+									<span
+										style={{ display: 'flex', gap: '12px', alignItems: 'center' }}
+									>
+										This database has no tables available
+									</span>
+								</MenuItem>
+							)}
+							{availableTables.map((table) => (
+								<MenuItem key={table.tableName} value={table.tableName}>
+									<span
+										style={{ display: 'flex', gap: '12px', alignItems: 'center' }}
+									>
+										<ExplicitDataTypeIcon
+											icon={BaseEntityNames.PERSISTED_ENTITY}
+											id={'literal-value-type-selector-value--' + table.tableName}
+										/>
+										{table.tableName}
+									</span>
+								</MenuItem>
+							))}
+						</Select>
+						{!!selectedTable && (
+							<Button
+								variant='outlined'
+								size='small'
+								iconStart={isLoading ? 'fa-solid fa-spinner fa-spin' : 'fa-solid fa-rotate-right'}
+								onClick={() => loadMore()}
+								disabled={isLoading}
+							/>
+						)}
+					</div>
+				</span>
+
+				<br />
+			</div>
+			<div style={{ marginLeft: '30px', marginRight: '30px', minWidth: 0 }}>
+				<Table
+					project={project}
+					totalItems={totalItems}
+					tableKey={selectedTable || ''}
+					searches={searches}
+					sorts={sorts}
+					footerHelperText='Modifying the database directly bypasses the code. No events or actions are triggered.'
+					loading={isLoading}
+					columns={columns}
+					onSearch={handleSearch}
+					onSearchesUpdate={handleSearchesUpdate}
+					hideCreate={!selectedTable}
+					rows={rows}
+					onCreate={handleCreate}
+					onUpdate={handleUpdate}
+					onDelete={deleteRow}
+					onDeleteMany={deleteRows}
+					onDeleteAll={deleteAllRows}
+					onSort={handleSort}
+					onSortsUpdate={handleSortsUpdate}
+					pagination={{
+						onChange: handlePaginationChange,
+						total: totalPages,
+						page: currentPage,
+					}}
+				/>
+			</div>
+		</div>
+	);
+};
+
+export default DatabaseTable;