diff --git a/packages/standard-components/components.json b/packages/standard-components/components.json
index 8464729993..ae547510d6 100644
--- a/packages/standard-components/components.json
+++ b/packages/standard-components/components.json
@@ -238,7 +238,10 @@
 					"material"
 				]
 			},
-			"height": "number",
+			"height": {
+				"type": "number",
+				"default": "500"
+			},
 			"pagination": "bool"
 		}
 	},
diff --git a/packages/standard-components/src/DataGrid/Component.svelte b/packages/standard-components/src/DataGrid/Component.svelte
index 3a0d13d35d..3656eb740a 100644
--- a/packages/standard-components/src/DataGrid/Component.svelte
+++ b/packages/standard-components/src/DataGrid/Component.svelte
@@ -18,7 +18,7 @@
   export let datasource = {}
   export let editable
   export let theme = "alpine"
-  export let height
+  export let height = 500
   export let pagination
 
   let dataLoaded = false
@@ -115,7 +115,7 @@
     href="https://cdn.jsdelivr.net/npm/flatpickr/dist/flatpickr.min.css" />
 </svelte:head>
 
-<div class="container" style="--grid-height: {height}px">
+<div style="--grid-height: {height}px">
   {#if dataLoaded}
     {#if editable}
       <div class="controls">
@@ -139,9 +139,6 @@
 </div>
 
 <style>
-  .container {
-    --grid-height: 800px;
-  }
   .container :global(form) {
     display: grid;
     grid-template-columns: repeat(2);