Jadual Data

Penggunaan

import { DataTable } from "@govtechmy/myds-react/data-table";

export default () => <DataTable />;

Contoh

Data & Lajur

Komponen DataTable terutamanya ditakrifkan oleh 2 prop penting: data dan columns.

• data menerima array objek, di mana setiap objek mewakili baris dalam jadual.
• columns menerima array ColumnDef, di mana setiap objek mewakili lajur dalam jadual.

Mengembangkan Lajur

Anda boleh mengembangkan saiz sel dalam lajur dengan menetapkan sifat expandable kepada true dalam objek meta definisi lajur.

Untuk menunjukkan ini, kami telah menetapkan sifat expandable kepada true untuk lajur Nama dan Jawatan. Anda boleh mengklik ikon pengembangan untuk melihat kandungan penuh sel.

Tooltip pada Tajuk Lajur

Anda boleh menambah tooltip pada tajuk lajur dengan menetapkan sifat tooltip dalam objek meta definisi lajur.

Untuk menunjukkan ini, kami telah menetapkan sifat tooltip kepada lajur Umur dan Jawatan. Arahkan kursor ke tajuk lajur untuk melihat tooltip.

Pengisihan

Anda boleh mengisih data dalam jadual dengan menetapkan sifat sortable kepada true dalam objek meta definisi lajur.

Untuk menunjukkan ini, kami telah menetapkan sifat sortable kepada lajur Jawatan. Klik ikon pengisihan untuk menukar pengisihan yang tersedia.

Skeleton Loading

Anda boleh mengaktifkan prop loading untuk mencetuskan keadaan pemuatan rangka untuk jadual.

Jadual Kosong

Menghantar array kosong kepada prop data akan memaparkan keadaan kosong untuk jadual.

Pemilihan Baris

Aktifkan mod pemilihan dengan menghantar prop selection kepada komponen DataTable. Prop selection menerima objek dengan sifat berikut:

• mode: Jenis pemilihan. Boleh sama ada checkbox atau radio.
• onSelectionChange: Fungsi panggilan balik yang dicetuskan apabila pemilihan berubah.
• rowId: Pengenal unik untuk setiap baris dalam jadual.

Tajuk Berkumpulan

Anda boleh mengumpulkan lajur bersama dengan menetapkan sifat columns kepada array objek ColumnGroupDef. Setiap objek ColumnGroupDef mewakili kumpulan lajur dalam jadual.

Berikut adalah contoh jadual dengan lajur berkumpulan:

Tajuk Melekat

Secara lalai, tajuk jadual adalah melekat, tetapi ia tidak pernah terwujud kerana jadual dalam contoh sebelumnya tidak mempunyai ketinggian tetap.

Untuk menunjukkan tajuk melekat, mari tetapkan ketinggian tetap untuk jadual. Hanya hantar prop className kepada komponen DataTable dengan kelas max-h-[300px].

Baris Bersarang

DataTable juga mampu menyarangkan baris. Untuk mengaktifkan ciri ini, keperluan berikut mesti dipenuhi:

1. data: Mengandungi objek array bersarang dengan kunci yang sepadan dengan sifat id_by dalam objek nest. (cth. children)
2. columns: Lajur yang bertanggungjawab untuk mengembangkan & meruntuhkan harus menghantar Cell.Expand dalam sifat cell.
3. nest: Prop objek yang mengandungi sifat berikut:
   • id_by: Kunci yang sepadan dengan objek array bersarang dalam sifat data.

Lajur Tersangkut

Anda boleh menyangkut lajur ke kiri atau kanan jadual dengan menetapkan sifat pin. Sifat pin menerima objek dengan sifat berikut:

• left: Array ID lajur untuk disangkut ke kiri.
• right: Array ID lajur untuk disangkut ke kanan.

Kaki Jadual

Anda boleh menambah kaki per lajur dengan menetapkan footer dalam objek ColumnDef definisi lajur. Berikut adalah contoh jadual dengan kaki:

Props

DataTable

DataTable ColumnDef