how do you create a grouped rows table in svelte?

I am trying to group my table rows to look like this with svelte. The svelte template code below is not working.

svelte template pseudocode

			{#each cities as city}
				{#if city.name != currentCity}
					{@const currentCity = city.name}
					<tr><th colspan="5" scope="colgroup">{currentCity}</th></tr>
				{/if}
				<tr><td>{city.person} - ({city.jobTitle})</td></tr>
            {/each}

The best way is to preprocess the data to split it along the groups,
Something like this could do

const grouped = data.reduce((acc, cur) => {
  if (!acc[cur.city]) acc[cur.city] = []
	acc[cur.city].push(cur)
	return acc
}, {})

This will make an object with the cities as keys and an array of all the people in this city as the value for the key.

Then you can use Object.entries to loop over those keys and with an inner loop render all the people:

{#each Object.entries(grouped) as [city, people]}
  <tr>
    <td colspan="5" scope="colgroup">{city}</td>
  </tr>
  {#each people as person}
	<tr>
      <td>{person.name}</td>
	  <td>{person.role}</td>
	</tr>
  {/each}
{/each}

One benefit of this is that it will still group the people correct even if they are not sorted by city (like if you with Edinburgh, London, Edinburgh)

Do not try to mutate state within the template, it is not supposed to. Set up data in a functional way or ahead of time.

I.e. run a reduce on cities to create groups and iterate over the groups or, if you want to do the grouping iteratively, do so in the script and store it in a separate variable.