The form, four ways: JavaScript Data Grid Demo

<link rel="stylesheet" href="https://cdn.latticegrid.dev/lattice-grid@1.103.2/lattice-grid.min.css">
<script src="https://cdn.latticegrid.dev/lattice-grid@1.103.2/lattice-grid.min.js"></script>

<div id="buttons" style="display: flex; gap: 8px; margin-bottom: 12px"></div>
<div style="display: flex; gap: 14px">
  <div id="grid" style="flex: 1; height: 520px"></div>
  <!-- Only the inline mode builds its form into this element; every other
       mode leaves it empty, so it carries its own placeholder until then. -->
  <div id="inline-form" style="width: 320px">Click "inline" to build the form here.</div>
</div>

<script>
  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' } },
  ];

  let grid;
  function build(mode) {
    grid?.destroy();
    grid = LatticeGrid.createGrid(document.getElementById('grid'), {
      rowKey: 'id', editable: true, rowForm: modes[mode], columns, rows,
    });
    grid.form.open(String(rows[0].id));  // open it so the placement shows
  }

  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>