Material Design Lite - DataTable
MDL menyediakan berbagai kelas CSS untuk menerapkan berbagai peningkatan visual dan perilaku yang telah ditentukan sebelumnya dan menampilkan tabel sebagai tabel data. Tabel berikut mencantumkan kelas yang tersedia dan efeknya.
| Sr.No. | Nama & Deskripsi Kelas |
|---|---|
| 1 | mdl-data-table Mengidentifikasi tabel sebagai komponen MDL dan diperlukan pada elemen tabel. |
| 2 | mdl-js-data-table Menetapkan perilaku MDL dasar ke tabel dan diperlukan pada elemen tabel. |
| 3 | mdl-data-table--selectable Menetapkan semua / perilaku individu yang dapat dipilih (kotak centang) dan bersifat opsional; berjalan pada elemen tabel. |
| 4 | mdl-data-table__cell--non-numeric Mengatur pemformatan teks ke sel data dan bersifat opsional; berjalan di header tabel dan sel data tabel. |
| 5 | (none) Secara default, setel pemformatan numerik ke header atau sel data. |
Contoh
Contoh berikut akan membantu Anda memahami penggunaan file mdl-data-table kelas untuk menunjukkan tabel data.
mdl_data_tables.htm
<html>
<head>
<script
src = "https://storage.googleapis.com/code.getmdl.io/1.0.6/material.min.js">
</script>
<link rel = "stylesheet"
href = "https://storage.googleapis.com/code.getmdl.io/1.0.6/material.indigo-pink.min.css">
<link rel = "stylesheet"
href = "https://fonts.googleapis.com/icon?family=Material+Icons">
</head>
<body>
<table class = "mdl-data-table mdl-js-data-table mdl-data-table--selectable mdl-shadow--2dp">
<thead>
<tr><th class = "mdl-data-table__cell--non-numeric">Student</th>
<th>Class</th><th>Grade</th></tr>
</thead>
<tbody>
<tr><td class = "mdl-data-table__cell--non-numeric">Mahesh Parashar</td>
<td>VI</td><td>A</td></tr>
<tr><td class = "mdl-data-table__cell--non-numeric">Rahul Sharma</td>
<td>VI</td><td>B</td></tr>
<tr><td class = "mdl-data-table__cell--non-numeric">Mohan Sood</td>
<td>VI</td><td>A</td></tr>
</tbody>
</table>
</body>
</html>Hasil
Verifikasi hasilnya.