budibase/packages/standard-components/src/RowDetail.svelte

<script>
  import { onMount, setContext } from "svelte"
  import {
    fetchTableDefinition,
    fetchTableData,
    fetchRow,
    screenStore,
    routeStore,
    DataProvider,
  } from "@budibase/component-sdk"

  export let table

  let headers = []
  let row

  setContext("foo", "bar")

  async function fetchFirstRow() {
    const rows = await fetchTableData(table)
    return Array.isArray(rows) && rows.length ? rows[0] : { tableId: table }
  }

  async function fetchData() {
    if (!table) {
      return
    }

    const pathParts = window.location.pathname.split("/")
    const routeParamId = $routeStore.routeParams.id

    // if srcdoc, then we assume this is the builder preview
    if ((pathParts.length === 0 || pathParts[0] === "srcdoc") && table) {
      row = await fetchFirstRow()
    } else if (routeParamId) {
      row = await fetchRow({ tableId: table, rowId: routeParamId })
    } else {
      throw new Error("Row ID was not supplied to RowDetail")
    }
  }

  onMount(fetchData)
</script>

{#if row}
  <DataProvider {row}>
    <slot />
  </DataProvider>
{/if}