# Разработка расширенного конструктора таблицы
_Задание для фронт-енд разработчика в Conjoint.ly_

See [list of components](./src/components/README.md)

Результатом данного задания должен быть vue-компонент (с сетью вложенных компонентов) в виде конструктора таблицы, который принимает на вход данные и отрисовывает конструктор-таблицу. Часть задания уже выполнена.

<table>
  <thead>
    <tr>
      <th>Name</th>
      <th>Text</th>
      <th>Image</th>
      <th>Number</th>
      <th><i>[Add column]</i></th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Name 1</td>
      <td>Raw description text</td>
      <td><img height="15" src="https://cdn4.iconfinder.com/data/icons/ionicons/512/icon-image-512.png" alt="Image 1"></td>
      <td>42</td>
    </tr>
    <tr>
      <td>Name 2</td>
      <td>Raw description text 2</td>
      <td><img height="15" src="https://encrypted-tbn0.gstatic.com/images?q=tbn%3AANd9GcRIbx6cBvdznxOwpCO0RK5zhHhWh0x08azCGzCtjpNUNkJZtq46&usqp=CAU" alt="Image 2"></td>
      <td>21</td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <th>Total</th>
      <th></th>
      <th></th>
      <th>63 <i>[Sum]</i></th>
    </tr>
    <tr>
      <th><i>[Add row]</i></th>
    </tr>
  </tfoot>
</table>

## Примечания к компоненту

* Адаптивная вёрстка не нужна. Должно работать в Chrome, Edge, Firefox, Safari на десктопе (но не обязательно на таблетках; не надо проверять на мобильниках)
* При клике на ячейку в колонке, ячейка переходит в режим редактирования и пользователь может поменять ее значение. При потере фокуса происходит валидация значения по типу данных, если все ок, то режим редактирования отключается, иначе показывает ошибка
* Каждая колонка имеет один из типов данных:
   - **текст**
   - **ссылка на картинку** (url)
   - **число** (double). Формат отображения числа: `1,234,567.89`
   - **дата**. Формат даты: `3 July 2020`
   - **процент**
   - **JSON**. Формат отображения JSON в самой таблице - просто кусочек красивого кода. Но при нажатии показывается модалка, где есть красиво раскрываемый объект с возможностью редактироования
* Структура таблицы:
   * В заголовке таблицы справа есть кнопка **_[Add column]_** - это кнопка-дропдаун с выбором типа значений колонки для добавления, выбрав тип, в конец таблицы добавляется новая колонка с пустыми ячейками.
   * В первой колонке, в последней строчке, находится кнопка **_[Add row]_**, которая добавляет новую строчку
   * Предпоследняя строка таблицы идет Total, которая пока будет использоваться для колонки с числовым типом.
    **_[Sum]_** - это кнопка-дропдаун (sum по-умолчанию), который производит подсчеты значений в колонке с типом Число. Пока нужно реализовать следующие алгоритмы:
        - `sum` (нужна мягкая валидация: сумма процентов не должна быть больше 100)
        - `mean`
        - `median`
        - `min`
        - `max`
        - `count`
 * Поведение 
    -  Перетаскивание строк и столбцов
    -   Изменение ширины столбцов путём перетаскивания
 * Требования к технологиям
    * Фреймворк Vue.js (https://vuejs.org/)
    * CSS-фреймворк Bootstrap4 (https://bootstrap-vue.org/)

## Build Setup (уже готовой части проекта)

``` bash
# install dependencies
$ npm install # Or yarn install

# serve with hot reload at localhost:10388
$ npm run dev

# build for production and launch server
$ npm run build

```
