Разработка расширенного конструктора таблицы

Задание для фронт-енд разработчика в Conjoint.ly

See list of components

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

Name	Text	Image	Number	[Add column]
Name 1	Raw description text		42
Name 2	Raw description text 2		21
Total			63 [Sum]
[Add row]

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

• Адаптивная вёрстка не нужна. Должно работать в 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 (уже готовой части проекта)

# 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