stufflog/svelte-ui/src/components/tables/SubActivityTable.svelte

<script>
	import { createEventDispatcher } from 'svelte';
  import pluralize from "pluralize";

  import Link from "../Link.svelte";
  import Table from "../Table.svelte";

  export let activity = {subActivities: []}

  const dispatch = createEventDispatcher();

  function onOption(name, subId) {
    const subActivity = activity.subActivities.find(s => s.id === subId);

    dispatch("option", {name, activity, subActivity})
  }
</script>

<Table headers={["Sub-Activity", "Value", "Options"]} percentages={[50, 25, 25]}>
  {#each activity.subActivities as subActivtiy (subActivtiy.id)}
    <tr>
      <td>{subActivtiy.name}</td>
      <td>{subActivtiy.value} per {pluralize(subActivtiy.unitName, 1)}</td>
      <td>
        <Link on:click={() => onOption("subactivity.edit", subActivtiy.id)}>Edit</Link>,
        <Link on:click={() => onOption("subactivity.remove", subActivtiy.id)}>Delete</Link>
      </td>
    </tr>
  {/each}
</Table>