Hm 28 (#8)

* HM-28 Добавил компонент таблицы

src/components/table-component/TableComponent.js

@@ -0,0 +1,56 @@
+import Component from '../component/index';
+import TestModal from '../test-modal/index';
+import ApiInfoComponent from '../api-info-component/index';
+import TableColumnComponent from '../table-column-component/index';
+import TableRowComponent from '../table-row-component/TableRowComponent';
+
+class TableComponent extends Component {
+    constructor () {
+        super('#main-table', document.body);
+
+        this.tableHead = this.mainNode.querySelector('.Table__head');
+        this.tableBody = this.mainNode.querySelector('.Table__body');
+        this.tableHeadRow = this.mainNode.querySelector('.Table__head-row');
+        this.modal = new TestModal();
+        this.infoBox = new ApiInfoComponent(this.modal.window);
+        this.columnArr = [];
+        this.rowArr = [];
+    }
+
+    render = (array) => {
+        this.columnArr.forEach((item) => {
+            item.destroy();
+        });
+        this.rowArr.forEach((item) => {
+            item.destroy();
+        });
+        this.array = array;
+        this.columns = Object.keys(array[0]);
+        this.columns.forEach((item, index) => {
+            const columnElement = new TableColumnComponent(this.tableHeadRow, item, index);
+            columnElement.subscribe('click', () => {
+                this.sort(item, array);
+            });
+            this.columnArr.push(columnElement);
+        });
+
+        this.array.forEach((item, index) => {
+            const newRow = new TableRowComponent(this.tableBody, item, index);
+            newRow.subscribe('click', () => {
+                this.showInfo(item, index);
+            });
+            this.rowArr.push(newRow);
+        });
+    }
+
+    sort = (item, array) => {
+        this.array.sort((a, b) => a[item] > b[item]);
+        this.render(array);
+    }
+
+    showInfo = (object, index) => {
+        this.modal.show();
+        this.infoBox.render(object, index);
+    }
+}
+export default TableComponent;

src/components/table-component/index.js

@@ -0,0 +1,3 @@
+import TableComponent from './TableComponent';
+
+export default TableComponent;