Cara Membuat Tabel Menggunakan shadcn-ui

Hallo, temen-temen developer web. Dalam artikel ini, kita akan membahas cara membuat tabel menggunakan shadcn-ui. Tidak perlu khawatir, karena dengan shadcn-ui, kamu bisa membuat tabel yang responsif dan keren tanpa harus pusing-pusing mengatur CSS sendiri.

Buat kamu yang belum melakukan instalasi shadcn-ui di Proyek, kamu bisa melakukan instalasi terlebih dahulu pada artikel sebelumnya, yaitu "Cara Install shadcn-ui Pada Project Next JS".

Yuk, simak terus artikel ini untuk belajar langkah-langkah instalasi shadcn-ui dan bagaimana kamu bisa menggunakannya untuk membuat tabel yang cepat dan responsif!

Instalasi Tabel

Untuk menggunakan komponen tabel pada shadcn-ui tentunya kamu harus instal terlebih dahulu. Kamu bisa menjalankan kode di bawah menggunakan terminal:

npx shadcn-ui@latest add table

Penggunaan Komponen Tabel

Sekarang, saatnya kita bahas bagaimana menggunakan tabel dari shadcn-ui. Ketika kamu sudah berhasil menginstalnya, langkah berikutnya adalah memulai penggunaannya.

1. Langkah Pertama: Import Semua Komponen dari Tabel

Jika kamu menggunakan Next JS versi App Router, kamu bisa memulai dari file page.tsx . Lalu import semua komponen dari tabel, kamu bisa copy dan paste kode di bawah ini dan simpan paling atas:

import {
  Table,
  TableBody,
  TableCaption,
  TableCell,
  TableHead,
  TableHeader,
  TableRow,
} from "@/components/ui/table"

2. Langkah Kedua: Membuat Data Tabel

Sebelum membuat tabel, kita harus membuat datanya terlebih dahulu. Semisal kita ingin membuat tabel yang berisikan data-data invoices berupa Invoice, Status, Method dan Amount. kamu bisa copy dan paste kode di bawah ini setelah kode import di atas:

const invoices = [
  {
    invoice: "INV001",
    paymentStatus: "Paid",
    totalAmount: "$250.00",
    paymentMethod: "Credit Card",
  },
  {
    invoice: "INV002",
    paymentStatus: "Pending",
    totalAmount: "$150.00",
    paymentMethod: "PayPal",
  },
  {
    invoice: "INV003",
    paymentStatus: "Unpaid",
    totalAmount: "$350.00",
    paymentMethod: "Bank Transfer",
  },
  {
    invoice: "INV004",
    paymentStatus: "Paid",
    totalAmount: "$450.00",
    paymentMethod: "Credit Card",
  },
  {
    invoice: "INV005",
    paymentStatus: "Paid",
    totalAmount: "$550.00",
    paymentMethod: "PayPal",
  },
  {
    invoice: "INV006",
    paymentStatus: "Pending",
    totalAmount: "$200.00",
    paymentMethod: "Bank Transfer",
  },
  {
    invoice: "INV007",
    paymentStatus: "Unpaid",
    totalAmount: "$300.00",
    paymentMethod: "Credit Card",
  },
]

3. Langkah Ketiga: Menggunakan Komponen Tabel Setelah kita membuat data dan meng-import komponen tabel, langkah selanjutnya adalah kita menggunakan komponen tersebut. Kamu bisa langsung copy kode di bawah ini:

export default function Home() {
  return <main className="h-screen w-full flex flex-col justify-center items-center">
    <div className="w-2/4 bg-gray-50">
      <Table>
        <TableCaption>A list of your recent invoices.</TableCaption>
        <TableHeader>
          <TableRow>
            <TableHead className="w-[100px]">Invoice</TableHead>
            <TableHead>Status</TableHead>
            <TableHead>Method</TableHead>
            <TableHead className="text-right">Amount</TableHead>
          </TableRow>
        </TableHeader>
        <TableBody>
          {invoices.map((invoice) => (
            <TableRow key={invoice.invoice}>
              <TableCell className="font-medium">{invoice.invoice}</TableCell>
              <TableCell>{invoice.paymentStatus}</TableCell>
              <TableCell>{invoice.paymentMethod}</TableCell>
              <TableCell className="text-right">{invoice.totalAmount}</TableCell>
            </TableRow>
          ))}
        </TableBody>
        <TableFooter>
          <TableRow>
            <TableCell colSpan={3}>Total</TableCell>
            <TableCell className="text-right">$2,500.00</TableCell>
          </TableRow>
        </TableFooter>
      </Table>
    </div>
  </main>;
}

Mari kita cari tau apa itu TableHeader , TableBody , dan TableFooter :

• TableHeader : Header tabel menunjukkan judul atau label untuk setiap kolom atau baris dalam label
• TableBody : Digunakan untuk mengelompokkan isi utama dari sebuah tabel
• TableFooter : Bagian ini biasanya digunakan untuk menyimpan informasi total, ringkasan, atau catatan yang berkaitan dengan data yang terdapat dalam tabel

Pada kode di atas kita melakukan sebuah mapping atau iterasi pada sebuah data array invoice agar datanya muncul semua pada sebuah user interface. Kamu bisa melihat hasil dari kode di atas seperti ini:

Dengan memanfaatkan shadcn-ui, proses pembuatan tabel menjadi lebih sederhana dan efisien. Kamu dapat dengan cepat mengintegrasikan tabel yang sesuai dengan kebutuhanmu tanpa harus memulainya dari awal.

Kesimpulan

Setelah mempelajari penggunaan komponen tabel shadcn-ui, sekarang kamu telah memiliki dasar yang kuat untuk membangun tabel yang menarik dan responsif dalam proyek web-mu. Dengan shadcn-ui, proses pembuatan tabel menjadi lebih mudah dan efisien.

Jangan ragu untuk menyesuaikan penggunaan komponen tabel shadcn-ui sesuai dengan kebutuhan spesifik proyekmu. Eksplorasi lebih lanjut tentang fitur-fitur yang tersedia dan jangan ragu untuk bereksperimen dengan desain dan fungsionalitas baru.

Dengan demikian, semoga artikel ini telah memberikan wawasan yang berguna bagi kamu tentang cara menggunakan komponen tabel shadcn-ui dalam pengembangan web.

Untuk memperbanyak skill kamu selain ini, di BuildWithAngga telah menyediakan berbagai kelas yang bisa meng-upgrade skill kamu. Salah satunya Kelas Online Mastering React JS: Progressive Web Apps (E-Commerce).

So, ayo menjadi expert bersama BuildWithAngga.

See you guys!