event 03: sortable-table 100%

Author: EmptyWork

2-ui/2-events/03-event-delegation/3-sortable-table/solution.view/index.html

@@ -25,8 +25,8 @@
   <table id="grid">
     <thead>
       <tr>
-        <th data-type="number">Age</th>
-        <th data-type="string">Name</th>
+        <th data-type="number">Umur</th>
+        <th data-type="string">Nama</th>
       </tr>
     </thead>
     <tbody>
@@ -59,10 +59,10 @@
       if (e.target.tagName != 'TH') return;
 
       let th = e.target;
-      // if TH, then sort
-      // cellIndex is the number of th:
-      //   0 for the first column
-      //   1 for the second column, etc
+      // Jika TH, maka urutkan
+      // cellIndex adalah nomor dari th:
+      //   0 untuk kolom pertama
+      //   1 untuk kolom kedua, dan seterusnya
       sortGrid(th.cellIndex, th.dataset.type);
     };
 
@@ -71,7 +71,7 @@
 
       let rowsArray = Array.from(tbody.rows);
 
-      // compare(a, b) compares two rows, need for sorting
+      // bandingkan(a, b) bandikna kedua baris, untuk di urutkan
       let compare;
 
       switch (type) {
@@ -87,7 +87,7 @@
           break;
       }
 
-      // sort
+      // urutkan
       rowsArray.sort(compare);
 
       tbody.append(...rowsArray);

2-ui/2-events/03-event-delegation/3-sortable-table/source.view/index.html

@@ -25,8 +25,8 @@
   <table id="grid">
     <thead>
       <tr>
-        <th data-type="number">Age</th>
-        <th data-type="string">Name</th>
+        <th data-type="number">Umur</th>
+        <th data-type="string">Nama</th>
       </tr>
     </thead>
     <tbody>
@@ -54,7 +54,7 @@
   </table>
 
   <script>
-    // ...your code...
+    // ...Kode kamu...
   </script>
 
 </body>

2-ui/2-events/03-event-delegation/3-sortable-table/task.md

@@ -2,19 +2,19 @@ importance: 4
 
 ---
 
-# Sortable table
+# Tabel yang bisa diurutkan
 
-Make the table sortable: clicks on `<th>` elements should sort it by corresponding column.
+Buat sebuah table yang dapat diurutkan: klik pada elemen `<th>` harus mengurutkan kolom dibawahnya.
 
-Each `<th>` has the type in the attribute, like this:
+Setiap `<th>` memiliki tipe pada atribut, seperti ini:
 
 ```html
 <table id="grid">
   <thead>
     <tr>
 *!*
-      <th data-type="number">Age</th>
-      <th data-type="string">Name</th>
+      <th data-type="number">Umur</th>
+      <th data-type="string">Nama</th>
 */!*
     </tr>
   </thead>
@@ -32,12 +32,12 @@ Each `<th>` has the type in the attribute, like this:
 </table>
 ```
 
-In the example above the first column has numbers, and the second one -- strings. The sorting function should handle sort according to the type.
+Pada contoh diatas kolom memiliki nomor, dan kolom kedua - string (teks). Fungsi pengurutan harus menanggani pengurutan berdasarkan tipenya.
 
-Only `"string"` and `"number"` types should be supported.
+Hanya tipe `"string"` dan `"number"` yang bisa di urutkan.
 
-The working example:
+Contoh yang sudah jadi:
 
 [iframe border=1 src="solution" height=190]
 
-P.S. The table can be big, with any number of rows and columns.
+Tambahan: Tabel bisa besar, dengan banyak baris dan kolom.