diff --git a/frontend/src/components/DataGrid.tsx b/frontend/src/components/DataGrid.tsx index 80d9433..49458a5 100644 --- a/frontend/src/components/DataGrid.tsx +++ b/frontend/src/components/DataGrid.tsx @@ -5,6 +5,7 @@ import { ReloadOutlined, ImportOutlined, ExportOutlined, DownOutlined, PlusOutli import { Resizable } from 'react-resizable'; import { ImportData, ExportTable, ExportData, ApplyChanges } from '../../wailsjs/go/app/App'; import { useStore } from '../store'; +import { v4 as uuidv4 } from 'uuid'; import 'react-resizable/css/styles.css'; // --- Helper: Format Value --- @@ -214,6 +215,7 @@ const DataGrid: React.FC = ({ const addSqlLog = useStore(state => state.addSqlLog); const [form] = Form.useForm(); const [modal, contextHolder] = Modal.useModal(); + const gridId = useMemo(() => `grid-${uuidv4()}`, []); // Helper to export specific data const exportData = async (rows: any[], format: string) => { @@ -234,16 +236,26 @@ const DataGrid: React.FC = ({ useEffect(() => { if (!containerRef.current) return; + + let rafId: number; const resizeObserver = new ResizeObserver(entries => { - for (let entry of entries) { - // Subtract header height (~40px) - // Ensure minimum height to prevent collapse loop - const h = Math.max(100, entry.contentRect.height - 42); - setTableHeight(h); - } + rafId = requestAnimationFrame(() => { + for (let entry of entries) { + // Use boundingClientRect for more accurate render size (including padding if any) + const height = entry.contentRect.height; + if (height < 50) return; + // Subtract header (~42px) and a buffer + const h = Math.max(100, height - 42); + setTableHeight(h); + } + }); }); + resizeObserver.observe(containerRef.current); - return () => resizeObserver.disconnect(); + return () => { + resizeObserver.disconnect(); + cancelAnimationFrame(rafId); + }; }, []); const [selectedRowKeys, setSelectedRowKeys] = useState([]); @@ -685,7 +697,7 @@ const DataGrid: React.FC = ({ const totalWidth = columns.reduce((sum, col) => sum + (col.width as number || 200), 0); return ( -
+
{/* Toolbar */}
{onReload &&
)} -
+
{contextHolder}
@@ -794,9 +806,9 @@ const DataGrid: React.FC = ({ )}