Table (Tabel Data Responsif)

<div class="mjl-table-wrapper" role="region" aria-label="Daftar permohonan" tabindex="0">
  <table class="mjl-table">
    <caption>Permohonan masuk minggu ini</caption>
    <thead>
      <tr><th scope="col">No. Resi</th><th scope="col">Pemohon</th><th scope="col" class="mjl-num">Hari Proses</th></tr>
    </thead>
    <tbody>
      <tr><td>MJL-8821</td><td>Asep Sunandar</td><td class="mjl-num">2</td></tr>
      <tr><td>MJL-8822</td><td>Euis Komalasari</td><td class="mjl-num">1</td></tr>
    </tbody>
  </table>
</div>

<script setup lang="ts">
import { MjlTable } from '@majalengka/vue';

const kolom = [
  { key: 'resi', label: 'No. Resi' },
  { key: 'nama', label: 'Pemohon' },
  { key: 'hari', label: 'Hari Proses', numeric: true },
];
const baris = [
  { resi: 'MJL-8821', nama: 'Asep Sunandar', hari: 2 },
  { resi: 'MJL-8822', nama: 'Euis Komalasari', hari: 1 },
];
</script>

<template>
  <MjlTable :columns="kolom" :rows="baris" caption="Permohonan masuk minggu ini" />
</template>

type Kolom<T> = { key: keyof T & string; label: string; numeric?: boolean };

export function MjlTable<T extends Record<string, unknown>>({ columns, rows, caption }: { columns: Kolom<T>[]; rows: T[]; caption: string }) {
  return (
    <div className="mjl-table-wrapper" role="region" aria-label={caption} tabIndex={0}>
      <table className="mjl-table">
        <caption>{caption}</caption>
        <thead>
          <tr>{columns.map((c) => <th key={c.key} scope="col" className={c.numeric ? 'mjl-num' : undefined}>{c.label}</th>)}</tr>
        </thead>
        <tbody>
          {rows.map((r, i) => (
            <tr key={i}>{columns.map((c) => <td key={c.key} className={c.numeric ? 'mjl-num' : undefined}>{String(r[c.key])}</td>)}</tr>
          ))}
        </tbody>
      </table>
    </div>
  );
}

import { Component, input } from '@angular/core';

@Component({
  selector: 'mjl-table',
  standalone: true,
  template: `
    <div class="mjl-table-wrapper" role="region" [attr.aria-label]="caption()" tabindex="0">
      <table class="mjl-table">
        <caption>{{ caption() }}</caption>
        <thead>
          <tr>@for (c of columns(); track c.key) { <th scope="col" [class.mjl-num]="c.numeric">{{ c.label }}</th> }</tr>
        </thead>
        <tbody>
          @for (r of rows(); track $index) {
            <tr>@for (c of columns(); track c.key) { <td [class.mjl-num]="c.numeric">{{ r[c.key] }}</td> }</tr>
          }
        </tbody>
      </table>
    </div>
  `,
})
export class MjlTable {
  caption = input.required<string>();
  columns = input.required<{ key: string; label: string; numeric?: boolean }[]>();
  rows = input.required<Record<string, unknown>[]>();
}

<div class="mjl-table-wrapper" role="region" aria-label="Daftar permohonan" tabindex="0">
  <table class="mjl-table">
    <caption>Permohonan masuk minggu ini</caption>
    <thead>
      <tr><th scope="col">No. Resi</th><th scope="col">Pemohon</th><th scope="col" class="mjl-num">Hari Proses</th></tr>
    </thead>
    <tbody>
      @foreach ($permohonan as $p)
        <tr>
          <td>{{ $p->nomor_resi }}</td>
          <td>{{ $p->pemohon->nama }}</td>
          <td class="mjl-num">{{ $p->created_at->diffInDays() }}</td>
        </tr>
      @endforeach
    </tbody>
  </table>
</div>
{{ $permohonan->links('vendor.pagination.mjl') }}

<div class="mjl-table-wrapper" role="region" aria-label="Daftar permohonan" tabindex="0">
  <table class="mjl-table">
    <caption>Permohonan masuk minggu ini</caption>
    <thead>
      <tr><th scope="col">No. Resi</th><th scope="col">Pemohon</th><th scope="col" class="mjl-num">Hari Proses</th></tr>
    </thead>
    <tbody>
      <?php foreach ($daftar as $baris): ?>
        <tr>
          <td><?= htmlspecialchars($baris['resi']) ?></td>
          <td><?= htmlspecialchars($baris['nama']) ?></td>
          <td class="mjl-num"><?= (int) $baris['hari'] ?></td>
        </tr>
      <?php endforeach; ?>
    </tbody>
  </table>
</div>