TableRow.svelte

<script>
  import { createEventDispatcher } from "svelte";
  const dispatch = createEventDispatcher();

  export let name = "";
  export let duration = "";
  export let dependsOnNames = [];

  export let bufferDuration = NaN;
  export let earliestStartTime = NaN;
  export let earliestEndTime = NaN;
  export let latestStartTime = NaN;
  export let latestEndTime = NaN;

  let rawDependsOnNames = dependsOnNames.join(", ");
  $: dependsOnNames = rawDependsOnNames
    .split(",")
    .map((val) => val.trim())
    .filter((val) => val.length !== 0);

  function handleRemove() {
    dispatch("remove", name);
  }
</script>

<tr>
  <td class="tg-0lax">
    <input bind:value={name} />
  </td>
  <td class="tg-0lax">
    <input type="number" bind:value={duration} />
  </td>
  <td class="tg-0lax">
    <input bind:value={rawDependsOnNames} />
  </td>
  <td class="tg-0lax">{earliestStartTime}</td>
  <td class="tg-0lax">{latestStartTime}</td>
  <td class="tg-0lax" class:redText={bufferDuration === 0}>{bufferDuration}</td>
  <td class="tg-0lax">{earliestEndTime}</td>
  <td class="tg-0lax">{latestEndTime}</td>
  <td class="tg-0lax"><button on:click={handleRemove}>x</button></td>
</tr>

<style>
  td.redText {
    color: red;
  }
</style>