Limit results on preview

packages/builder/src/components/integration/QueryViewerSidePanel/PreviewPanel.svelte

@@ -4,13 +4,27 @@
 
   export let schema = {}
   export let rows = []
+  export let maxRowsToDisplay = 5
 
-  $: rowsCopy = cloneDeep(rows)
+  let rowsToDisplay
+  $: {
+    rowsToDisplay = [
+      ...cloneDeep(rows).slice(0, maxRowsToDisplay),
+      // { [Object.keys(schema)[0]]: "1" },
+    ]
 
+    if (rows.length - maxRowsToDisplay) {
+      rowsToDisplay.push({
+        [Object.keys(schema)[0]]: `...${
+          rows.length - maxRowsToDisplay
+        } further items`,
+      })
+    }
+  }
   // Cast field in query preview response to number if specified by schema
   $: {
-    for (let i = 0; i < rowsCopy.length; i++) {
-      let row = rowsCopy[i]
+    for (let i = 0; i < rowsToDisplay.length; i++) {
+      let row = rowsToDisplay[i]
       for (let fieldName of Object.keys(schema)) {
         if (schema[fieldName] === "number" && !isNaN(Number(row[fieldName]))) {
           row[fieldName] = Number(row[fieldName])
@@ -23,7 +37,7 @@
 </script>
 
 <div class="table">
-  <Table {schema} data={rowsCopy} allowEditing={false} />
+  <Table {schema} data={rowsToDisplay} allowEditing={false} />
 </div>
 
 <style>