adds rudimentary form to handle input of new rows

packages/standard-components/package.json

@@ -39,6 +39,7 @@
     "@budibase/bbui": "^1.34.6",
     "@budibase/svelte-ag-grid": "^0.0.6",
     "@fortawesome/fontawesome-free": "^5.14.0",
+    "@svelteschool/svelte-forms": "^0.7.0",
     "britecharts": "^2.16.1",
     "d3-selection": "^1.4.2",
     "fast-sort": "^2.2.0",

packages/standard-components/src/DataGrid/Component.svelte

@@ -1,9 +1,10 @@
 <script>
-  import fetchData from "./fetchData.js"
+  import fetchData from "../fetchData.js"
   import { isEmpty } from "lodash/fp"
   import { onMount } from "svelte"
 
   import AgGrid from "@budibase/svelte-ag-grid"
+  import InputForm from "./InputForm.svelte"
 
   export let datasource = {}
 
@@ -39,10 +40,26 @@
 
     return false
   }
+
+  const handleSubmit = e => {
+    // Send off data here and update to display in grid component
+    console.log("Submitting:", e.detail)
+  }
 </script>
 
-{#if dataLoaded}
+<div class="container">
-  <AgGrid bind:data {columnDefs} />
+  {#if dataLoaded}
-{/if}
+    <AgGrid bind:data {columnDefs} />
+    <InputForm fields={columnDefs} on:submit={handleSubmit} />
+  {/if}
+</div>
 
-<pre>{JSON.stringify(data, 0, 2)}</pre>
+<style>
+  .container {
+    --grid-height: 400px;
+  }
+  .container :global(form) {
+    display: grid;
+    grid-template-columns: repeat(2);
+  }
+</style>

packages/standard-components/src/DataGrid/InputForm.svelte

@@ -0,0 +1,22 @@
+<script>
+  import Form from "@svelteschool/svelte-forms"
+  import { Input } from "@budibase/bbui"
+  import { createEventDispatcher } from "svelte"
+  const dispatch = createEventDispatcher()
+  let values
+  export let fields
+
+  const handleSubmit = () => {
+    dispatch("submit", values)
+    values = {}
+  }
+</script>
+
+<Form bind:values>
+  {#each fields as { field, hide }}
+    {#if !hide}
+      <Input thin placeholder="Enter {field}" name={field} />
+    {/if}
+  {/each}
+  <button on:click|preventDefault={handleSubmit}>Add row</button>
+</Form>

packages/standard-components/src/index.js

@@ -15,7 +15,7 @@ export { default as saveRecordButton } from "./Templates/saveRecordButton"
 export { default as link } from "./Link.svelte"
 export { default as image } from "./Image.svelte"
 export { default as Navigation } from "./Navigation.svelte"
-export { default as datagrid } from "./DataGrid.svelte"
+export { default as datagrid } from "./DataGrid/Component.svelte"
 export { default as datatable } from "./DataTable.svelte"
 export { default as dataform } from "./DataForm.svelte"
 export { default as dataformwide } from "./DataFormWide.svelte"