title: Computed values in a object | Svelte
body: <p>I am coding some projects to learn Svelte and I have been trying to make something similar to a spreadsheet where a user type or change numbers and that reactively make some calculus with a predefined formula (the user can not change the formula). I have tried but I can not do it reactively.</p>
  
  <p>For this I have created a component call Spreadsheet that has two props, the data and the columns, similar to how Quasar do it for <a href="https://quasar.dev/vue-components/table#Example--Basic" rel="nofollow noreferrer">Tables</a>.</p>
  
  <p><a href="https://svelte.dev/repl/a87904776ebf4fe0813e6b190690ca77?version=3.16.0" rel="nofollow noreferrer">Here</a> is the REPL with the example.</p>
  
  <p>The idea is that a user change the values on the <code>females, males and area</code> columns and that change the value of the <code>density</code> column reactively with <code>poblationDensity</code> formula.</p>
  
  <pre><code>/* App.svelte */
  &lt;script&gt;
    import Spreadsheet from "./Spreadsheet.svelte";
  
      const poblationDensity = (females, males, area) =&gt; {
      return (females + males) / area;
    };
  
    let data = [
          {
        "id": 1,
        "animal": "White-mantled colobus",
        "females": 13,
        "males": 33,
        "area": 109
      },
      {
        "id": 2,
        "animal": "Woodpecker, red-headed",
        "females": 99,
        "males": 88,
        "area": 252
      },
      {
        "id": 3,
        "animal": "White-necked raven",
        "females": 34,
        "males": 36,
        "area": 362
      },
      {
        "id": 4,
        "animal": "Baleen whale",
        "females": 24,
        "males": 67,
        "area": 457
      },
      {
        "id": 5,
        "animal": "Tiger",
        "females": 89,
        "males": 20,
        "area": 476
      },
      {
        "id": 6,
        "animal": "White spoonbill",
        "females": 56,
        "males": 85,
        "area": 358
      },
      {
        "id": 7,
        "animal": "Giant anteater",
        "females": 83,
        "males": 98,
        "area": 236
      },
      {
        "id": 8,
        "animal": "White-fronted capuchin",
        "females": 72,
        "males": 44,
        "area": 163
      },
      {
        "id": 9,
        "animal": "Raccoon, crab-eating",
        "females": 78,
        "males": 61,
        "area": 410
      },
      {
        "id": 10,
        "animal": "Turtle, long-necked",
        "females": 5,
        "males": 77,
        "area": 472
      }
      ];
  
    const cols = [
      {
        name: "id",
        label: "#"
      },
      {
        name: "animal",
        label: "Animal"
      },
      {
        name: "females",
        label: "Females"
      },
      {
        name: "males",
        label: "Males"
      },
      {
        name: "area",
        label: "Area"
      },
      {
        name: "density",
        label: "Density",
        computed: {
          args: ["females", "males", "area"],
          method: poblationDensity
        }
      }
    ];
  &lt;/script&gt;
  
  &lt;main&gt;
      &lt;Spreadsheet {data} {cols} /&gt;
  &lt;/main&gt;
  </code></pre>
  
  <pre><code>/* Spreadsheet.svelte */
  &lt;script&gt;
      export let data = [];
    export let cols = [];
  &lt;/script&gt;
  
  &lt;style&gt;
      .numeric {
          width: 70px;
      }
  &lt;/style&gt;
  
  &lt;table&gt;
      &lt;tr&gt;
          {#each cols as col}
          &lt;th&gt;{col.label}&lt;/th&gt;
          {/each}
      &lt;/tr&gt;
      {#each data as item}
      &lt;tr&gt;
          {#each cols as col}
              &lt;td&gt;
                  &lt;input type="text" class="{col.name !== 'animal' &amp;&amp; 'numeric' }"
                               value={col.computed ? 0 : item[col.name]} 
                  /&gt;
                  &lt;/td&gt;
          {/each}
      &lt;/tr&gt;
      {/each}
  &lt;/table&gt;
  </code></pre>