add simple trace grid

package.json

@@ -14,6 +14,7 @@
     "@emotion/styled": "^11.11.0",
     "@mui/icons-material": "^5.14.16",
     "@mui/material": "^5.14.17",
+    "@mui/x-data-grid": "^6.18.1",
     "@mui/x-tree-view": "^6.17.0",
     "@tauri-apps/api": "^1.5.0",
     "react": "^18.2.0",

src/components/TraceGrid.tsx

@@ -0,0 +1,21 @@
+import { DataGrid, GridRowsProp, GridColDef } from '@mui/x-data-grid';
+
+const rows: GridRowsProp = [
+  { id: 1, col1: 'Hello', col2: 'World' },
+  { id: 2, col1: 'DataGridPro', col2: 'is Awesome' },
+  { id: 3, col1: 'MUI', col2: 'is Amazing' },
+];
+
+const columns: GridColDef[] = [
+  { field: 'col1', headerName: 'Column 1', width: 150 },
+  { field: 'col2', headerName: 'Column 2', width: 150 },
+];
+
+function TraceGrid() {
+  return (
+    <div style={{ height: 300, width: '100%' }}>
+      <DataGrid rows={rows} columns={columns} />
+    </div>
+  );
+}
+export default TraceGrid

src/pages/DebugPanel.tsx

@@ -3,9 +3,16 @@ import ExpandMoreIcon from '@mui/icons-material/ExpandMore';
 import ChevronRightIcon from '@mui/icons-material/ChevronRight';
 import { TreeView } from '@mui/x-tree-view/TreeView';
 import { TreeItem } from '@mui/x-tree-view/TreeItem';
+import TraceGrid from "../components/TraceGrid";
 
 function DebugPanel() {
-    return (<><FirstComponent/> <RandomNumber/> </>);
+    return (
+        <>
+            <FirstComponent/> 
+            <RandomNumber/> 
+            <TraceGrid />
+        </>
+    );
 };
 
 export default DebugPanel;