Table

The table is a very complex component that can be used in a variety of situations. You can use it to just display data, paginate it, edit it or event sort and filter it.

Example Usage

Example

Test	Punkte	Themenbereich
Algebra: Lineare Gleichungen	18/20	Lineare Gleichungen
Geometrie: Berechnung von Dreiecken	8/10	Dreiecksberechnung
Statistik: Wahrscheinlichkeitsrechnung	14/15	Wahrscheinlichkeitsrechnung
Algebra: Quadratische Gleichungen	17/18	Quadratische Gleichungen
Geometrie: Volumenberechnung	10/12	Volumenberechnung
Algebra: Polynomdivision	19/22	Polynomdivision

Test	Punkte	Themenbereich
Algebra: Lineare Gleichungen	18/20	Lineare Gleichungen
Geometrie: Berechnung von Dreiecken	8/10	Dreiecksberechnung
Statistik: Wahrscheinlichkeitsrechnung	14/15	Wahrscheinlichkeitsrechnung
Algebra: Quadratische Gleichungen	17/18	Quadratische Gleichungen
Geometrie: Volumenberechnung	10/12	Volumenberechnung
Algebra: Polynomdivision	19/22	Polynomdivision

<template>
  <SkTable :value="values">
    <Column field="testName" header="Test"></Column>
    <Column field="studentScore" header="Punkte">
      <template #body="slotProps">
        <span class="text-textcolor-meta"
          >{{ slotProps.data.studentScore }}/{{ slotProps.data.testScore }}</span
        >
      </template>
    </Column>
    <Column field="topic" header="Themenbereich"></Column>
    <Column field="checked" header="">
      <template #body="slotProps">
        <SkIcon v-if="!slotProps.data.checked" name="edit-2" :active="true" fill="yellow" />
        <SkIcon v-else name="checkmark-circle-2" :active="true" fill="green" />
      </template>
    </Column>
  </SkTable>

  <SkTable :value="values" striped-rows>
    <Column field="testName" header="Test"></Column>
    <Column field="studentScore" header="Punkte">
      <template #body="slotProps">
        <span class="text-textcolor-meta"
          >{{ slotProps.data.studentScore }}/{{ slotProps.data.testScore }}</span
        >
      </template>
    </Column>
    <Column field="topic" header="Themenbereich"></Column>
    <Column field="checked" header="">
      <template #body="slotProps">
        <SkIcon v-if="!slotProps.data.checked" name="edit-2" :active="true" fill="yellow" />
        <SkIcon v-else name="checkmark-circle-2" :active="true" fill="green" />
      </template>
    </Column>
  </SkTable>
</template>

<script setup>
import Column from 'primevue/column';

import { ref } from 'vue';

const values = ref([
  {
    testName: 'Algebra: Lineare Gleichungen',
    testScore: 20,
    studentScore: 18,
    percentageGrade: 90,
    type: 'Test',
    session: '1. Stunde',
    date: '2023-02-15T00:00:00Z',
    checked: true,
    topic: 'Lineare Gleichungen',
  },
  {
    testName: 'Geometrie: Berechnung von Dreiecken',
    testScore: 10,
    studentScore: 8,
    percentageGrade: 80,
    type: 'Übung',
    session: '2. Stunde',
    date: '2023-03-01T00:00:00Z',
    checked: false,
    topic: 'Dreiecksberechnung',
  },
  {
    testName: 'Statistik: Wahrscheinlichkeitsrechnung',
    testScore: 15,
    studentScore: 14,
    percentageGrade: 93.33,
    type: 'Quiz',
    session: '3. Stunde',
    date: '2023-02-22T00:00:00Z',
    checked: true,
    topic: 'Wahrscheinlichkeitsrechnung',
  },
  {
    testName: 'Algebra: Quadratische Gleichungen',
    testScore: 18,
    studentScore: 17,
    percentageGrade: 94.44,
    type: 'Test',
    session: '1. Stunde',
    date: '2023-03-08T00:00:00Z',
    checked: true,
    topic: 'Quadratische Gleichungen',
  },
  {
    testName: 'Geometrie: Volumenberechnung',
    testScore: 12,
    studentScore: 10,
    percentageGrade: 83.33,
    type: 'Übung',
    session: '2. Stunde',
    date: '2023-03-15T00:00:00Z',
    checked: false,
    topic: 'Volumenberechnung',
  },
  {
    testName: 'Algebra: Polynomdivision',
    testScore: 22,
    studentScore: 19,
    percentageGrade: 86.36,
    type: 'Test',
    session: '1. Stunde',
    date: '2023-03-22T00:00:00Z',
    checked: true,
    topic: 'Polynomdivision',
  },
]);
</script>

Reference

See the PrimeVue documentation for more information about the props, events and slots.