title: Effective way to create transposing table from three objects
body: <p>I have three objects:</p>
  
  <p><strong>Users</strong></p>
  
  <pre><code>[
      {
          id: 1,
          name: 'User'
      },
      {
          id:2,
          name: 'User2'
      }
  ]
  </code></pre>
  
  <p><strong>Pages</strong></p>
  
  <pre><code>[
      {
          id: 1,
          name: 'Page'
      },
      {
          id:2,
          name: 'Page2'
      }
  ]
  </code></pre>
  
  <p><strong>Rights</strong></p>
  
  <pre><code>[
      {
          user_id: 1,
          page_id: 1,
          access: 'rw'
      },
      {
          user_id: 1,
          page_id: 2,
          access: 'ro'
      },
      {
          user_id: 2,
          page_id: 1,
          access: 'rw'
      },
  ]
  </code></pre>
  
  <p>What I need to do is display single table combining the data BUT the table has to be able to transpose AND I need to be able to edit values of each cell (rights) and the change should be reflected everywhere.</p>
  
  <p>Here is current prototype so you see how it should look like:</p>
  
  <p><img src="https://i.stack.imgur.com/yzrk5.jpg" alt="enter image description here"><img src="https://i.stack.imgur.com/kEi7b.jpg" alt="enter image description here"></p>
  
  <p>At the moment I create two separate objects with data that fill each table and then simply show/hide the tables (transposing). This is rather complicated and not easy to wok with since I need to be able to edit values in cells and need the change to reflect in transposing. </p>
  
  <p>I will appreciate any suggestion how to make this better.</p>