Jadual

Menyusun maklumat ke dalam baris dan lajur untuk kemudahan bacaan. Ia menampung pelbagai jenis data, termasuk teks, nombor, kod, panggilan untuk tindakan dan pautan, membolehkan penyampaian dan perbandingan yang cekap.

Log audit
Cap masa	Aktiviti	Tindakan Diambil
2021-09-01 12:00:00	Percubaan log masuk berjaya	Ali
2021-09-01 12:01:32	Halaman dilawati: /company-a/inventory	Ali
2021-09-01 12:02:03	Item inventori baru ditambah: MacBook Pro	Ali
2021-09-01 12:03:45	Inventori: Kiraan stok MacBook Pro dikemas kini: 100 unit	Ali

Source Storybook

Penggunaan

Import

import {
  Table,
  TableBody,
  TableCaption,
  TableCell,
  TableFooter,
  TableHead,
  TableHeader,
  TableRow,
} from "@govtechmy/myds-react/table";

Anatomi

export default () => (
  <Table>
    <TableHeader>
      <TableRow>
        <TableHead />
      </TableRow>
    </TableHeader>
    <TableBody>
      <TableRow>
        <TableCell />
      </TableRow>
    </TableBody>
    <TableCaption />
  </Table>
);

Contoh

Jadual Asas

Anda boleh menggunakan komponen Table untuk membuat jadual asas dengan tajuk, baris, dan sel. Konvensional table, th, td terpakai, jadi anda boleh menentukan colSpan, rowSpan, scope dan atribut asli lain.

Log audit
Cap masa	Aktiviti	Tindakan Diambil
2021-09-01 12:00:00	Percubaan log masuk berjaya	Ali
2021-09-01 12:01:32	Halaman dilawati: /company-a/inventory	Ali
2021-09-01 12:02:03	Item inventori baru ditambah: MacBook Pro	Ali
2021-09-01 12:03:45	Inventori: Kiraan stok MacBook Pro dikemas kini: 100 unit	Ali

Row Span dan Col Span

Anda boleh menggunakan atribut rowSpan dan colSpan untuk menggabungkan sel dalam baris atau lajur.

Penilaian Cukai Tahun 2023
Kategori	Pendapatan Bercukai	Pengiraan (RM)	Kadar	Cukai
A	0 - 5,000	Untuk 5,000 Pertama	0	RM 0
B	5,000 - 20,000	Untuk 5,000 Pertama	1%	RM 0
B	5,000 - 20,000	15,000 Seterusnya	1%	RM 150
C	20,001 - 35,000	Untuk 20,000 Pertama	3%	RM 150
C	20,001 - 35,000	15,000 Seterusnya	3%	RM 450

Dengan Footer

Anda boleh menambah footer pada jadual menggunakan komponen TableFooter.

Penilaian Cukai Tahun 2023
Kategori	Pendapatan Bercukai	Pengiraan (RM)	Kadar	Cukai
A	0 - 5,000	Untuk 5,000 Pertama	0	RM 0
B	5,000 - 20,000	Untuk 5,000 Pertama	1%	RM 0
B	5,000 - 20,000	15,000 Seterusnya	1%	RM 150
C	20,001 - 35,000	Untuk 20,000 Pertama	3%	RM 150
C	20,001 - 35,000	15,000 Seterusnya	3%	RM 450
Jumlah Cukai				RM 600

Skeleton Loading

Anda boleh menggunakan komponen TableSkeleton untuk membuat keadaan pemuatan rangka untuk jadual.

Log audit
Cap masa	Aktiviti	Tindakan Diambil

Jadual Kosong

Gunakan komponen TableEmpty untuk menunjukkan keadaan kosong.

Log audit
Cap masa	Aktiviti	Tindakan Diambil
No data available

Props

TableHead

Prop	Type	Default
`rowSpan`	`boolean`	`false`
`colSpan`	`boolean`	`false`
`scope`	`col \| row \| colgroup \| rowgroup`	-

TableCell

Prop	Type	Default
`rowSpan`	`boolean`	`false`
`colSpan`	`boolean`	`false`
`scope`	`col \| row \| colgroup \| rowgroup`	-

MYDS