Kind of display a working table in StatisticsForGroupTab.vue

aleksis/apps/alsijil/frontend/components/coursebook/statistics/StatisticsForGroupTab.vue

 <template>
-  <c-r-u-d-table
-    >
+  <c-r-u-d-list
     i18n-key="TODO"
     :headers="headers"
     :gql-query="gqlQuery"
@@ -8,57 +7,69 @@
     :enable-create="false"
     :enable-edit="false"
     :elevated="false"
+    :show-select="false"
     @items="items = $event"
   >
-    <template #header="{ }">
-      <thead>
-        <tr>
-          <!-- https://stackoverflow.com/questions/55702916/is-it-possible-to-create-a-multi-line-header-in-a-vuetify-datatable -->
-  </c-r-u-d-table>
+    <template #header.person="header">
+      Hello world
+      {{ header }}
+    </template>
+
+    <template #person="{ item }">
+      <v-avatar class="my-1 me-2">
+        <avatar-content :id="item.person.id" />
+      </v-avatar>
+      {{ item.person.fullName }}
+    </template>
+  </c-r-u-d-list>
 </template>
 
 <script>
 import groupOverviewTabMixin from "aleksis.core/mixins/groupOverviewTabMixin.js";
-import CRUDTable from "aleksis.core/components/generic/CRUDTable.vue";
+import CRUDList from "aleksis.core/components/generic/CRUDList.vue";
+import AvatarContent from "aleksis.core/components/person/AvatarContent.vue";
 
-import { documentationsByGroup } from "./statistics.graphql";
+import { statisticsByGroup } from "./statistics.graphql";
 
 export default {
   name: "StatisticsForGroupTab",
   mixins: [groupOverviewTabMixin],
   components: {
-    CRUDTable,
+    AvatarContent,
+    CRUDList,
   },
   data() {
     return {
-      gqlQuery: documentationsByGroup,
+      gqlQuery: statisticsByGroup,
       items: [],
     };
   },
   computed: {
     headers() {
       // TODO: i18n
-      {
-        text: "name",
-        value: "fullName",
-      },
-      ...[new Set(this.items.flatMap((person) => {
-        return person.absenceReasons.map((absence) => absence.absenceReason.shortName)
-      }))].map((name) => {
-        return {
-          text: name,
-        };
-      }),
-      ...[new Set(this.items.flatMap((person) => {
-        return person.extraMarks.map((extraMark) => extraMark.extraMark.shortName)
-      }))].map((name) => {
-        return {
-          text: name,
-        };
-      }),
-      {
-        text: "",
-      },
+      return [
+        {
+          text: this.$t("person.name"),
+          value: "person",
+        },
+          ...(this.items.length > 0 ? [new Set(this.items.flatMap((person) => {
+          return person.absenceReasons.map((absence) => absence.absenceReason.shortName)
+        }))].map((name) => {
+          return {
+            text: name,
+          };
+        }) : []),
+        ...(this.items.length > 0 ? [new Set(this.items.flatMap((person) => {
+          return person.extraMarks.map((extraMark) => extraMark.extraMark.shortName)
+        }))].map((name) => {
+          return {
+            text: name,
+          };
+        }) :  []),
+        {
+          text: "",
+        },
+      ];
     },
     gqlQueryArgs() {
       const term = this.schoolTerm

aleksis/apps/alsijil/frontend/components/coursebook/statistics/statistics.graphql

 fragment statistics on StatisticsByPersonType {
+  person {
+    id
+    fullName
+  }
   participationCount
   absenceCount
   absenceReasons {
@@ -71,11 +75,11 @@ query documentationsByPerson($person: ID!, $term: ID) {
 }
 
 query statisticsByGroup($group: ID!, $term: ID) {
-  statistics: statisticsByGroup(group: $group, term: $term) {
-    persons {
-      id
-      fullName
-      ...statistics
-    }
+  items: statisticsByGroup(group: $group, term: $term) {
+#    persons {
+#      id
+#      fullName
+    ...statistics
+#    }
   }
 }