The form, four ways

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@toclocoinc/lattice-grid@1.28.0/lattice-grid.min.css">

<script type="module">
  import { defineLatticeGrid } from 'https://cdn.jsdelivr.net/npm/@toclocoinc/lattice-grid@1.28.0/modules/webcomponent.esm.js';
  defineLatticeGrid();
</script>

<div id="buttons" style="display: flex; gap: 8px; margin-bottom: 12px"></div>
<div style="display: flex; gap: 14px">
  <div id="host" style="flex: 1; height: 520px"></div>
  <div id="inline-form" style="width: 320px"></div>
</div>

<script type="module">
  const fields = [
    { field: 'service', label: 'Service' },
    { field: 'team', label: 'Team' },
    { field: 'region', label: 'Region' },
    { field: 'tier', label: 'Tier' },
    { field: 'instances', label: 'Instances' },
    { field: 'monthlyCost', label: 'Monthly cost' },
    { field: 'notes', label: 'Notes', editor: 'textarea' },
  ];

  // The same form, placed four ways. Only the rowForm option differs:
  //   drawer  - a right-hand panel (the default)
  //   dialog  - a centred modal
  //   inline  - built into an element of your own; a region, not a modal
  //   curated - the drawer with a chosen few fields
  const modes = {
    drawer:  { mode: 'drawer', title: 'Edit service', fields },
    dialog:  { mode: 'dialog', title: 'Edit service', fields },
    inline:  { fields, container: '#inline-form' },
    curated: { mode: 'drawer', title: 'Quick edit',
      fields: [{ field: 'tier', label: 'Tier' }, { field: 'instances', label: 'Instances' },
               { field: 'notes', label: 'Notes', editor: 'textarea' }] },
  };

  const columns = [
    { field: 'service', title: 'Service', layout: { pin: 'start', width: 150 } },
    { field: 'team', title: 'Team', filter: { type: 'set' } },
    { field: 'region', title: 'Region', filter: { type: 'set' } },
    { field: 'tier', title: 'Tier' },
    { field: 'instances', title: 'Instances', type: 'number' },
    { field: 'monthlyCost', title: 'Monthly cost', type: 'number', format: { style: 'currency', currency: 'USD' } },
  ];

  // rowForm is read when the grid is built, so each mode builds a fresh
  // <lattice-grid> in place of the last, then opens the form to show its placement.
  const host = document.getElementById('host');
  function build(mode) {
    host.replaceChildren();
    const el = document.createElement('lattice-grid');
    el.setAttribute('row-key', 'id');
    el.style.cssText = 'display: block; height: 100%';
    el.config = { editable: true, rowForm: modes[mode], columns };
    el.rows = rows;  // service records
    host.append(el);
    // el.grid, the live grid inside the element, is ready on the next frame.
    requestAnimationFrame(() => el.grid?.form.open(String(rows[0].id)));
  }

  for (const mode of Object.keys(modes)) {
    const b = document.createElement('button');
    b.textContent = mode;
    b.onclick = () => build(mode);
    document.getElementById('buttons').append(b);
  }
  build('drawer');
</script>