https://github.com/conjoint-ly/vue-bootstrap-editable-table

A Vue Bootstrap component for editable tables
https://github.com/conjoint-ly/vue-bootstrap-editable-table

bootstrap-vue bootstrap4 flexbox table vue vuex

Last synced: about 1 month ago
JSON representation

A Vue Bootstrap component for editable tables

• Host: GitHub
• URL: https://github.com/conjoint-ly/vue-bootstrap-editable-table
• Owner: Conjoint-ly
• License: unlicense
• Created: 2020-06-09T04:15:15.000Z (over 4 years ago)
• Default Branch: master
• Last Pushed: 2023-03-29T08:26:48.000Z (almost 2 years ago)
• Last Synced: 2024-11-28T18:05:55.444Z (about 1 month ago)
• Topics: bootstrap-vue, bootstrap4, flexbox, table, vue, vuex
• Language: JavaScript
• Homepage:
• Size: 319 KB
• Stars: 0
• Watchers: 11
• Forks: 7
• Open Issues: 2
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

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

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

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

Результатом данного задания должен быть 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 (уже готовой части проекта)

``` 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

```