UIPackage
Menu

Framework

VueReactAngularSvelteWeb Components

Change language

GitHub repo

Student Gradebook Table

blockeducation
Boilerplate repo

Academic gradebook ledger with course header, weighted assignment categories (homework, midterm, labs, final project), class GPA & enrollment metric cards, overall percentage, letter grade badges, attendance tags, and student action menus.

Installation

$npx shadcn@latest add https://uipkge.dev/r/react/student-gradebook-table.json
Named registry:npx shadcn@latest add @uipkge-react/student-gradebook-tableInstalls to:components/blocks/

Variants

Loading interactive previews…

Schema

Type aliases exported from this item's source. Use these to shape the data you pass in.

StudentGradeRecord
interface StudentGradeRecord {
  id: string
  name: string
  studentId: string
  homework: string
  midterm: string
  labProjects: string
  finalProject: string
  overallGrade: string
  letterGrade: LetterGrade
  attendanceRate: string
  absences: number
}

npm dependencies

lucide-react

Files installed (1)

  • components/blocks/StudentGradebookTable.tsx11.9 kB
    'use client'

import {
  CalendarCheck,
  ClipboardCheck,
  Download,
  GraduationCap,
  Mail,
  MoreHorizontal,
  Pencil,
  Plus,
  User,
  Users,
} from 'lucide-react'
import { cn } from '@/lib/utils'
import { Avatar, AvatarFallback } from '@/components/ui/avatar'
import { Badge } from '@/components/ui/badge'
import { Button } from '@/components/ui/button'
import { Card, CardContent } from '@/components/ui/card'
import {
  DropdownMenu,
  DropdownMenuContent,
  DropdownMenuItem,
  DropdownMenuSeparator,
  DropdownMenuTrigger,
} from '@/components/ui/dropdown-menu'
import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from '@/components/ui/table'

export type LetterGrade = 'A+' | 'A' | 'A-' | 'B+' | 'B' | 'B-'

export interface StudentGradeRecord {
  id: string
  name: string
  studentId: string
  homework: string
  midterm: string
  labProjects: string
  finalProject: string
  overallGrade: string
  letterGrade: LetterGrade
  attendanceRate: string
  absences: number
}

const metrics = [
  {
    title: 'Class GPA',
    value: '3.62 / 4.0',
    description: '+0.18 vs departmental target',
    icon: GraduationCap,
    iconClass: 'bg-success/10 text-success',
    valueClass: 'text-success',
  },
  {
    title: 'Total Enrolled Students',
    value: '28 students',
    description: '100% active roster',
    icon: Users,
    iconClass: 'bg-info/10 text-info',
    valueClass: 'text-foreground',
  },
  {
    title: 'Assignments Graded',
    value: '12 / 14 assignments',
    description: '2 pending final submissions',
    icon: ClipboardCheck,
    iconClass: 'bg-chart-1/10 text-chart-1',
    valueClass: 'text-foreground',
  },
  {
    title: 'Class Attendance Rate',
    value: '96.2% average',
    description: '36 lectures & labs logged',
    icon: CalendarCheck,
    iconClass: 'bg-warning/10 text-warning',
    valueClass: 'text-foreground',
  },
]

const gradeBadgeConfig: Record<LetterGrade, { className: string }> = {
  'A+': {
    className: 'bg-success/10 text-success border-success/20 font-semibold',
  },
  A: {
    className: 'bg-success/10 text-success border-success/20 font-semibold',
  },
  'A-': {
    className: 'bg-success/10 text-success border-success/20 font-semibold',
  },
  'B+': {
    className: 'bg-info/10 text-info border-info/20 font-semibold',
  },
  B: {
    className: 'bg-warning/10 text-warning border-warning/20 font-semibold',
  },
  'B-': {
    className: 'bg-warning/10 text-warning border-warning/20 font-semibold',
  },
}

const students: StudentGradeRecord[] = [
  {
    id: 's1',
    name: 'Elena Rostova',
    studentId: '#STU-84920',
    homework: '95.0%',
    midterm: '92.0%',
    labProjects: '98.0%',
    finalProject: '94.0%',
    overallGrade: '94.5%',
    letterGrade: 'A',
    attendanceRate: '100%',
    absences: 0,
  },
  {
    id: 's2',
    name: 'David Chen',
    studentId: '#STU-84921',
    homework: '88.0%',
    midterm: '91.0%',
    labProjects: '86.0%',
    finalProject: '89.0%',
    overallGrade: '88.6%',
    letterGrade: 'B+',
    attendanceRate: '96%',
    absences: 1,
  },
  {
    id: 's3',
    name: 'Sarah Jenkins',
    studentId: '#STU-84922',
    homework: '98.0%',
    midterm: '96.0%',
    labProjects: '100.0%',
    finalProject: '95.0%',
    overallGrade: '97.1%',
    letterGrade: 'A',
    attendanceRate: '100%',
    absences: 0,
  },
  {
    id: 's4',
    name: 'Marcus Vance',
    studentId: '#STU-84923',
    homework: '82.0%',
    midterm: '79.0%',
    labProjects: '85.0%',
    finalProject: '80.0%',
    overallGrade: '81.4%',
    letterGrade: 'B',
    attendanceRate: '92%',
    absences: 2,
  },
  {
    id: 's5',
    name: 'Sofia Rossi',
    studentId: '#STU-84924',
    homework: '91.0%',
    midterm: '88.0%',
    labProjects: '94.0%',
    finalProject: '90.0%',
    overallGrade: '90.6%',
    letterGrade: 'A-',
    attendanceRate: '98%',
    absences: 1,
  },
  {
    id: 's6',
    name: 'Alex Rivera',
    studentId: '#STU-84925',
    homework: '84.0%',
    midterm: '86.0%',
    labProjects: '82.0%',
    finalProject: '85.0%',
    overallGrade: '84.3%',
    letterGrade: 'B',
    attendanceRate: '94%',
    absences: 2,
  },
]

function initials(name: string) {
  return name
    .split(' ')
    .map((part) => part[0])
    .slice(0, 2)
    .join('')
    .toUpperCase()
}

export function StudentGradebookTable({ className }: { className?: string }) {
  return (
    <div data-slot="student-gradebook-table" className={cn('w-full space-y-6', className)}>
      {/* Header */}
      <div className="flex flex-col gap-4 sm:flex-row sm:items-center sm:justify-between">
        <div>
          <div className="flex flex-wrap items-center gap-2.5">
            <h2 className="text-2xl font-bold tracking-tight">CS 301: Advanced Software Systems &amp; Compilers</h2>
            <Badge variant="outline" className="font-mono text-xs">
              CS-301-B
            </Badge>
          </div>
          <div className="text-muted-foreground mt-1.5 flex flex-wrap items-center gap-2 text-sm">
            <span>Fall 2026 · Section B</span>
            <span className="text-foreground inline-flex items-center gap-1 font-medium">
              Class Average: <span className="tabular-nums">88.4%</span> · Grade B+
            </span>
          </div>
        </div>
        <div className="flex flex-wrap items-center gap-2.5">
          <Button aria-label="Download attachment" variant="outline">
            <Download aria-hidden="true" />
            Export Grades CSV
          </Button>
          <Button>
            <Plus aria-hidden="true" />
            New Grade Entry
          </Button>
        </div>
      </div>

      {/* 4 Class Overview Metric Cards */}
      <div className="grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-4">
        {metrics.map((metric) => {
          const Icon = metric.icon
          return (
            <Card key={metric.title} className="shadow-xs">
              <CardContent className="space-y-2 p-5">
                <div className="flex items-center justify-between">
                  <p className="text-muted-foreground text-sm font-medium">{metric.title}</p>
                  <div className={cn('flex size-8 items-center justify-center rounded-md', metric.iconClass)}>
                    <Icon aria-hidden="true" className="size-4" />
                  </div>
                </div>
                <div>
                  <p className={cn('text-2xl font-bold tracking-tight tabular-nums', metric.valueClass)}>
                    {metric.value}
                  </p>
                  <p className="text-muted-foreground mt-1 text-xs">{metric.description}</p>
                </div>
              </CardContent>
            </Card>
          )
        })}
      </div>

      {/* Gradebook Table */}
      <div className="bg-card overflow-x-auto rounded-lg border shadow-xs">
        <Table>
          <TableHeader>
            <TableRow>
              <TableHead>Student</TableHead>
              <TableHead className="text-right">Homework (25%)</TableHead>
              <TableHead className="text-right">Midterm (30%)</TableHead>
              <TableHead className="text-right">Lab Projects (25%)</TableHead>
              <TableHead className="text-right">Final Project (20%)</TableHead>
              <TableHead className="text-right font-semibold">Overall Grade</TableHead>
              <TableHead className="text-center">Letter Grade</TableHead>
              <TableHead>Attendance</TableHead>
              <TableHead className="w-12 text-right">
                <span className="sr-only">Actions</span>
              </TableHead>
            </TableRow>
          </TableHeader>
          <TableBody>
            {students.map((student) => (
              <TableRow key={student.id} className="hover:bg-muted/50">
                <TableCell>
                  <div className="flex items-center gap-3">
                    <Avatar className="size-8">
                      <AvatarFallback className="text-xs font-medium">{initials(student.name)}</AvatarFallback>
                    </Avatar>
                    <div className="min-w-0">
                      <p className="truncate text-sm font-semibold">{student.name}</p>
                      <p className="text-muted-foreground font-mono text-xs">{student.studentId}</p>
                    </div>
                  </div>
                </TableCell>
                <TableCell className="text-right font-medium tabular-nums">{student.homework}</TableCell>
                <TableCell className="text-right font-medium tabular-nums">{student.midterm}</TableCell>
                <TableCell className="text-right font-medium tabular-nums">{student.labProjects}</TableCell>
                <TableCell className="text-right font-medium tabular-nums">{student.finalProject}</TableCell>
                <TableCell className="text-foreground text-right font-bold tabular-nums">
                  {student.overallGrade}
                </TableCell>
                <TableCell className="text-center">
                  <Badge
                    variant="outline"
                    className={cn('font-semibold', gradeBadgeConfig[student.letterGrade].className)}
                  >
                    {student.letterGrade}
                  </Badge>
                </TableCell>
                <TableCell>
                  <div className="inline-flex items-center gap-1.5 text-xs">
                    <span
                      className={cn(
                        'inline-block size-1.5 rounded-full',
                        student.absences === 0 ? 'bg-success' : 'bg-warning',
                      )}
                      aria-hidden="true"
                    />
                    <span className="text-foreground font-medium tabular-nums">{student.attendanceRate}</span>
                    <span className="text-muted-foreground">
                      ·{' '}
                      {student.absences === 0
                        ? '0 absences'
                        : `${student.absences} absence${student.absences > 1 ? 's' : ''}`}
                    </span>
                  </div>
                </TableCell>
                <TableCell className="text-right">
                  <DropdownMenu>
                    <DropdownMenuTrigger asChild>
                      <Button variant="ghost" size="icon-sm" className="text-muted-foreground">
                        <MoreHorizontal aria-hidden="true" />
                        <span className="sr-only">Open actions for {student.name}</span>
                      </Button>
                    </DropdownMenuTrigger>
                    <DropdownMenuContent align="end" className="w-48">
                      <DropdownMenuItem>
                        <Pencil aria-hidden="true" />
                        Edit Grades
                      </DropdownMenuItem>
                      <DropdownMenuItem>
                        <User aria-hidden="true" />
                        View Student Profile
                      </DropdownMenuItem>
                      <DropdownMenuSeparator />
                      <DropdownMenuItem>
                        <Mail aria-hidden="true" />
                        Send Email Alert
                      </DropdownMenuItem>
                    </DropdownMenuContent>
                  </DropdownMenu>
                </TableCell>
              </TableRow>
            ))}
          </TableBody>
        </Table>
      </div>

      {/* Table Footer / Pagination */}
      <div className="flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between">
        <p className="text-muted-foreground text-sm">
          Showing <span className="text-foreground font-medium">6</span> of{' '}
          <span className="text-foreground font-medium">28</span> enrolled students
        </p>
        <div className="flex items-center gap-2">
          <Button variant="outline" size="sm" disabled>
            Previous
          </Button>
          <Button variant="outline" size="sm">
            Next
          </Button>
        </div>
      </div>
    </div>
  )
}

Raw manifest:https://uipkge.dev/r/react/student-gradebook-table.json