Advanced Table Kit Data Structure

The AdvancedTable Kit’s tableData prop consumes the data that will render the table and as such has a specific structure. It must be an array of objects, where the key/value pairs will become the values rendered within each column. If children are present, they must also take the form of an array of objects. The kit will automatically render children as subRows.

Here is the data structure being used within the kits doc examples:

const MOCK_DATA = [
  {
    year: "2021",
    quarter: null,
    month: null,
    day: null,
    newEnrollments: "20",
    scheduledMeetings: "10",
    attendanceRate: "51%",
    completedClasses: "3",
    classCompletionRate: "33%",
    graduatedStudents: "19",
    children: [
      {
        year: "2021",
        quarter: "Q1",
        month: null,
        day: null,
        newEnrollments: "2",
        scheduledMeetings: "35",
        attendanceRate: "32%",
        completedClasses: "15",
        classCompletionRate: "52%",
        graduatedStudents: "36",
        children: [
          {
            year: "2021",
            quarter: "Q1",
            month: "January",
            day: null,
            newEnrollments: "16",
            scheduledMeetings: "20",
            attendanceRate: "11%",
            completedClasses: "13",
            classCompletionRate: "47%",
            graduatedStudents: "28",
            children: [
              {
                year: "2021",
                quarter: "Q1",
                month: "January",
                day: "10",
                newEnrollments: "34",
                scheduledMeetings: "28",
                attendanceRate: "97%",
                completedClasses: "20",
                classCompletionRate: "15%",
                graduatedStudents: "17",
              },
              {
                year: "2021",
                quarter: "Q1",
                month: "January",
                day: "20",
                newEnrollments: "43",
                scheduledMeetings: "23",
                attendanceRate: "66%",
                completedClasses: "26",
                classCompletionRate: "47%",
                graduatedStudents: "9",
              },
            ],
          },
          {
            year: "2021",
            quarter: "Q1",
            month: "February",
            day: null,
            newEnrollments: "20",
            scheduledMeetings: "41",
            attendanceRate: "95%",
            completedClasses: "26",
            classCompletionRate: "83%",
            graduatedStudents: "43",
            children: [
              {
                year: "2021",
                quarter: "Q1",
                month: "February",
                day: "15",
                newEnrollments: "19",
                scheduledMeetings: "35",
                attendanceRate: "69%",
                completedClasses: "8",
                classCompletionRate: "75%",
                graduatedStudents: "23",
              },
            ],
          },
        ],
      },
    ],
  },
  {
    year: "2022",
    quarter: null,
    month: null,
    day: null,
    newEnrollments: "25",
    scheduledMeetings: "17",
    attendanceRate: "75%",
    completedClasses: "5",
    classCompletionRate: "45%",
    graduatedStudents: "32",
    children: [
      {
        year: "2022",
        quarter: "Q1",
        month: null,
        day: null,
        newEnrollments: "2",
        scheduledMeetings: "35",
        attendanceRate: "32%",
        completedClasses: "15",
        classCompletionRate: "52%",
        graduatedStudents: "36",
        children: [
          {
            year: "2022",
            quarter: "Q1",
            month: "January",
            day: null,
            newEnrollments: "16",
            scheduledMeetings: "20",
            attendanceRate: "11%",
            completedClasses: "13",
            classCompletionRate: "47%",
            graduatedStudents: "28",
            children: [
              {
                year: "2022",
                quarter: "Q1",
                month: "January",
                day: "15",
                newEnrollments: "34",
                scheduledMeetings: "28",
                attendanceRate: "97%",
                completedClasses: "20",
                classCompletionRate: "15%",
                graduatedStudents: "17",
              },
              {
                year: "2022",
                quarter: "Q1",
                month: "January",
                day: "25",
                newEnrollments: "43",
                scheduledMeetings: "23",
                attendanceRate: "66%",
                completedClasses: "26",
                classCompletionRate: "47%",
                graduatedStudents: "9",
              },
            ],
          },
          {
            year: "2022",
            quarter: "Q1",
            month: "May",
            day: null,
            newEnrollments: "20",
            scheduledMeetings: "41",
            attendanceRate: "95%",
            completedClasses: "26",
            classCompletionRate: "83%",
            graduatedStudents: "43",
            children: [
              {
                year: "2022",
                quarter: "Q1",
                month: "May",
                day: "2",
                newEnrollments: "19",
                scheduledMeetings: "35",
                attendanceRate: "69%",
                completedClasses: "8",
                classCompletionRate: "75%",
                graduatedStudents: "23",
              },
            ],
          },
        ],
      },
    ],
  },
  {
    year: "2023",
    quarter: null,
    month: null,
    day: null,
    newEnrollments: "10",
    scheduledMeetings: "15",
    attendanceRate: "65%",
    completedClasses: "4",
    classCompletionRate: "49%",
    graduatedStudents: "29",
    children: [
      {
        year: "2023",
        quarter: "Q1",
        month: null,
        day: null,
        newEnrollments: "2",
        scheduledMeetings: "35",
        attendanceRate: "32%",
        completedClasses: "15",
        classCompletionRate: "52%",
        graduatedStudents: "36",
        children: [
          {
            year: "2023",
            quarter: "Q1",
            month: "March",
            day: null,
            newEnrollments: "16",
            scheduledMeetings: "20",
            attendanceRate: "11%",
            completedClasses: "13",
            classCompletionRate: "47%",
            graduatedStudents: "28",
            children: [
              {
                year: "2023",
                quarter: "Q1",
                month: "March",
                day: "10",
                newEnrollments: "34",
                scheduledMeetings: "28",
                attendanceRate: "97%",
                completedClasses: "20",
                classCompletionRate: "15%",
                graduatedStudents: "17",
              },
              {
                year: "2023",
                quarter: "Q1",
                month: "March",
                day: "11",
                newEnrollments: "43",
                scheduledMeetings: "23",
                attendanceRate: "66%",
                completedClasses: "26",
                classCompletionRate: "47%",
                graduatedStudents: "9",
              },
            ],
          },
          {
            year: "2023",
            quarter: "Q1",
            month: "April",
            day: null,
            newEnrollments: "20",
            scheduledMeetings: "41",
            attendanceRate: "95%",
            completedClasses: "26",
            classCompletionRate: "83%",
            graduatedStudents: "43",
            children: [
              {
                year: "2023",
                quarter: "Q1",
                month: "April",
                day: "15",
                newEnrollments: "19",
                scheduledMeetings: "35",
                attendanceRate: "69%",
                completedClasses: "8",
                classCompletionRate: "75%",
                graduatedStudents: "23",
              },
            ],
          },
        ],
      },
    ],
  },
];