@conjointly-org/vue-editable-table v1.0.1

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

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

See list of components

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

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

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