Search code examples
javascriptfirebase-realtime-databasehtml-tablefirebase-console

How should I design my table in Firebase Realtime Database if I want to display a table like this in HTML?

Sample table

I need each user to select the course name and automatically display the attendance marks of the students in different dates.

Solution

  • The most straightforward way would be to structure it like this:

    courses/
  {courseId}/
    attendance/
      {studentId}/
        {date}: {bool}

    This assumes you have all courses listed somewhere, it's not a good idea to use this as a source for that dropdown that only actually needs course's title and/or id.

    Once the user selects a course, you use that id to fetch the course's attendance data at courses/{selectedId}/attendance. Then parse the values for each student and date appropriately.

    You can add other course related info like this courses/{courseId}/title: "Firebase".