title: Vue.js – How to build a table like Doodle with Vuetify?
body: <p>I’m developing an app with <code>Vue.js</code> that’s using <code>Vuetify</code> for some nice material design components. My data is stored in <code>Firebase Cloud Firestore</code>. I want to create a <code>Vuetify</code> table that is optimized for the following usage.</p>
  <h3>Functionality</h3>
  <p>The table is used to check availability for multiple event dates. Users are listed on the left side and are grouped by their position in the company (e.g. consultant, manager etc.). These groups should be visible but can be hidden by tapping on the arrow. It should also be possible to hide position groups completely. The event availability status is shown in three colors (green, red or blue). Later I want to add buttons or icons to the cells for more features. If the user taps on their cell a dialog should open to change the availability. If you tap on the event in the header a dialog should open that shows more event details.</p>
  <p><strong>The table should look like this mockup:</strong>
  <a href="https://i.stack.imgur.com/b3F2p.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/b3F2p.png" alt="Mockup" /></a></p>
  <p>The table is scrollable up/down to see all users, left/right to check future events. However the event header and the user bar on the right should be fixed.</p>
  <p><strong>Data in Firebase Cloud Firestore:</strong></p>
  <pre><code>events
      —&gt; [event_id] // every event has an unique id 
          title: String
          startdate: Date
          enddate: Date
          —&gt; [availability] // every [event] contains the availability of users
              —&gt; [user_id]
                  status: String // attendance, no attendance, not sure
                  comment: String // details that users adds to their response
  </code></pre>
  <p>What's the best way to start developing the table?</p>
  <p>Here is some dummy data in JSON format to get a feeling of what to work with:</p>
  <pre><code>    {
    &quot;events&quot;: {
      &quot;event1&quot;: {
        &quot;id&quot;: &quot;event1&quot;,
        &quot;title&quot;: &quot;Lunch with Santa Claus&quot;,
        &quot;startdate&quot;: &quot;03/11/2020 13:00&quot;,
        &quot;enddate&quot;: &quot;03/11/2020 14:00&quot;,
        &quot;availability&quot;: {
          &quot;user100&quot;: {
            &quot;userID&quot;: &quot;user100&quot;,
            &quot;status&quot;: &quot;not sure&quot;
          },
          &quot;user103&quot;: {
            &quot;userID&quot;: &quot;user103&quot;,
            &quot;status&quot;: &quot;attendance&quot;,
            &quot;comment&quot;: &quot;Looking forward to lunch with Santa&quot;
          },
          &quot;user108&quot;: {
            &quot;userID&quot;: &quot;user108&quot;,
            &quot;status&quot;: &quot;attendance&quot;
          }
        }
      },
      &quot;event2&quot;: {
        &quot;id&quot;: &quot;event2&quot;,
        &quot;title&quot;: &quot;Meeting with Robin Hood&quot;,
        &quot;startdate&quot;: &quot;08/11/2020 10:00&quot;,
        &quot;enddate&quot;: &quot;08/11/2020 12:00&quot;,
        &quot;availability&quot;: {
          &quot;user100&quot;: {
            &quot;userID&quot;: &quot;user100&quot;,
            &quot;status&quot;: &quot;attendance&quot;,
            &quot;comment&quot;: &quot;Will be late&quot;
          },
          &quot;user101&quot;: {
            &quot;userID&quot;: &quot;user101&quot;,
            &quot;status&quot;: &quot;no attendance&quot;
          },
          &quot;user102&quot;: {
            &quot;userID&quot;: &quot;user102&quot;,
            &quot;status&quot;: &quot;not sure&quot;
          },
          &quot;user103&quot;: {
            &quot;userID&quot;: &quot;user103&quot;,
            &quot;status&quot;: &quot;attendance&quot;,
            &quot;comment&quot;: &quot;Robin Hood is great!&quot;
          },
          &quot;user108&quot;: {
            &quot;userID&quot;: &quot;user108&quot;,
            &quot;status&quot;: &quot;attendance&quot;
          }
        }
      },
      &quot;event3&quot;: {
        &quot;id&quot;: &quot;event3&quot;,
        &quot;title&quot;: &quot;Team Meeting&quot;,
        &quot;startdate&quot;: &quot;10/11/2020 09:00&quot;,
        &quot;enddate&quot;: &quot;10/11/2020 10:00&quot;,
        &quot;availability&quot;: {
          &quot;user108&quot;: {
            &quot;userID&quot;: &quot;user108&quot;,
            &quot;status&quot;: &quot;no attendance&quot;
          },
          &quot;user105&quot;: {
            &quot;userID&quot;: &quot;user105&quot;,
            &quot;status&quot;: &quot;not sure&quot;
          },
          &quot;user102&quot;: {
            &quot;userID&quot;: &quot;user102&quot;,
            &quot;status&quot;: &quot;not sure&quot;
          },
          &quot;user103&quot;: {
            &quot;userID&quot;: &quot;user103&quot;,
            &quot;status&quot;: &quot;attendance&quot;,
            &quot;comment&quot;: &quot;Looking forward to lunch with Santa&quot;
          },
          &quot;user109&quot;: {
            &quot;userID&quot;: &quot;user109&quot;,
            &quot;status&quot;: &quot;attendance&quot;
          }
        }
      }
    },
    &quot;users&quot;: {
      &quot;user100&quot;: {
        &quot;id&quot;: &quot;user100&quot;,
        &quot;name&quot;: &quot;John Doe&quot;,
        &quot;position&quot;: &quot;Manager&quot;
      },
      &quot;user101&quot;: {
        &quot;id&quot;: &quot;user101&quot;,
        &quot;name&quot;: &quot;Anna Black&quot;,
        &quot;position&quot;: &quot;Consultant&quot;
      },
      &quot;user102&quot;: {
        &quot;id&quot;: &quot;user102&quot;,
        &quot;name&quot;: &quot;Tom Green&quot;,
        &quot;position&quot;: &quot;Associate&quot;
      },
      &quot;user103&quot;: {
        &quot;id&quot;: &quot;user103&quot;,
        &quot;name&quot;: &quot;Matt White&quot;,
        &quot;position&quot;: &quot;Senior Consultant&quot;
      },
      &quot;user104&quot;: {
        &quot;id&quot;: &quot;user104&quot;,
        &quot;name&quot;: &quot;Peter Blue&quot;,
        &quot;position&quot;: &quot;Manager&quot;
      },
      &quot;user105&quot;: {
        &quot;id&quot;: &quot;user105&quot;,
        &quot;name&quot;: &quot;Ted Yellow&quot;,
        &quot;position&quot;: &quot;Associate&quot;
      },
      &quot;user106&quot;: {
        &quot;id&quot;: &quot;user106&quot;,
        &quot;name&quot;: &quot;Lewis Elefant&quot;,
        &quot;position&quot;: &quot;Associate&quot;
      },
      &quot;user107&quot;: {
        &quot;id&quot;: &quot;user107&quot;,
        &quot;name&quot;: &quot;Matt Shark&quot;,
        &quot;position&quot;: &quot;Senior Consultant&quot;
      },
      &quot;user108&quot;: {
        &quot;id&quot;: &quot;user108&quot;,
        &quot;name&quot;: &quot;Donald Duck&quot;,
        &quot;position&quot;: &quot;Associate&quot;
      },
      &quot;user109&quot;: {
        &quot;id&quot;: &quot;user109&quot;,
        &quot;name&quot;: &quot;Lisa Bird&quot;,
        &quot;position&quot;: &quot;Manager&quot;
      },
      &quot;user110&quot;: {
        &quot;id&quot;: &quot;user110&quot;,
        &quot;name&quot;: &quot;Bailey Wolf&quot;,
        &quot;position&quot;: &quot;Manager&quot;
      }
    }
  }
  </code></pre>
  <p>Any help is very much appreciated, thanks!</p>