codebasecodebase · codebasecodebase · Apr 22, 2020 · retarcorp · Apr 24, 2020 · retarcorp
diff --git a/data.csv b/data.csv
@@ -0,0 +1,10 @@
+name, age, work, payd, boss
+Alex, 28, Nosilshik-Karomisla, 100$, Artsiom1
+Igor, 44, Shutnik, 101$, Artsiom2
+Alexand, 32, Lentyai, 100000000000000000000000000000$, Artsiom3
+Pavel, 29, Driver, 2400$, Artsiom4
+Maxim, 52, Pekar, 300$, Artsiom5
+Petya, 61, Progulshik, 1$, Artsiom6
+Ilya, 21, Bankir, 10999$, Artsiom7
+Artem, 33, Zolotayaribka, 100500$, Artsiom8
+MAiskiyJuk, 0.01, Jit3dnya, 0$, Veter
diff --git a/index.html b/index.html
@@ -0,0 +1,29 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <meta charset='utf-8'>
+    <meta http-equiv='X-UA-Compatible' content='IE=edge'>
+    <title>Page Title</title>
+    <meta name='viewport' content='width=device-width, initial-scale=1'>
+    <link rel="stylesheet" href="main.css">
+
+
+</head>
+<body>
+    <table class="table_sort">
+    <thead>
+        <tr>
+            <th>name</th>
+            <th>age</th>
+            <th>work</th>
+            <th>payd</th>
+            <th>boss</th>
+        </tr>
+    </thead>
+        <tbody id='data-table'>
+
+        </tbody>
+    </table>
+    <script src='main.js'></script>
+</body>
+</html>
diff --git a/main.css b/main.css
@@ -0,0 +1,40 @@
+.table_sort table {
+    border-collapse: collapse;
+}
+
+.table_sort th {
+    color: #ffebcd;
+    background: #008b8b;
+    cursor: pointer;
+}
+
+.table_sort td,
+.table_sort th {
+    width: 150px;
+    height: 40px;
+    text-align: center;
+    border: 2px solid #846868;
+}
+
+.table_sort tbody tr:nth-child(even) {
+    background: #e3e3e3;
+}
+
+th.sorted[data-order="1"],
+th.sorted[data-order="-1"] {
+    position: relative;
+}
+
+th.sorted[data-order="1"]::after,
+th.sorted[data-order="-1"]::after {
+    right: 8px;
+    position: absolute;
+}
+
+th.sorted[data-order="-1"]::after {
+	content: "▼"
+}
+
+th.sorted[data-order="1"]::after {
+	content: "▲"
+}
diff --git a/main.js b/main.js
@@ -0,0 +1,62 @@
+const onDataLoaded = (text) => {
+    console.log(text);
+     const lines = text.split('\n');
+     const names = lines.shift().trim().split(', ');
+
+     const items = lines.map(line => {
+         const splitted = line.split(', ');
+         const object = splitted.reduce((result, value, index) => ({
+             ...result,
+             [names[index]]: value
+         }), {});
+         console.log(object);
+         return object;
+    });
+    console.log(items);
+
+
+    const table = document.getElementById('data-table');
+     items.forEach((item) => {
+         table.insertAdjacentHTML('beforeend', `
+                <tr>
+                    <td>${item.name}</td>
+                    <td>${item.age}</td>
+                    <td>${item.work}</td>
+                    <td>${item.payd}</td>
+                    <td>${item.boss}</td>
+                </tr>
+         `);
+     });
+}
+
+document.addEventListener('DOMContentLoaded', () => {
+
+    const getSort = ({ target }) => {
+        const order = (target.dataset.order = -(target.dataset.order || -1));
+        const index = [...target.parentNode.cells].indexOf(target);
+        const collator = new Intl.Collator(['en', 'ru'], { numeric: true });
+        const comparator = (index, order) => (a, b) => order * collator.compare(
+            a.children[index].innerHTML,
+            b.children[index].innerHTML
+        );
+
+        for(const tBody of target.closest('table').tBodies)
+            tBody.append(...[...tBody.rows].sort(comparator(index, order)));
+
+        for(const cell of target.parentNode.cells)
+            cell.classList.toggle('sorted', cell === target);
+    };
+
+    document.querySelectorAll('.table_sort thead').forEach(tableTH => tableTH.addEventListener('click', () => getSort(event)));
+
+});
+
+
+
+
+const xhr = new XMLHttpRequest();
+xhr.open('GET', 'data.csv', true);
+xhr.onload = () => {
+    onDataLoaded(xhr.responseText);
+}
+xhr.send(null);