glowbyte

Project setup

Задание. Средствами Vue.js реализовать табличный компонент. Данные для заполнения таблицы приложены в файле data.json. 
	
Описание тестовых данных: Тестовые данные представляют из себя массив с информацией о тегах, где

{
    tag_id - id тега
    tag_name - имя тега
    tag_attributes - атрибуты тега
        { 
            attribute_id - id атрибута
            attribute_value - значение атрибута
        }		
}	

Колонки в табличном блоке должны быть расположены в следующем порядке:

Id тега | Имя тега | Атрибут 1 | Атрибут 2 | ...

В табличном блоке необходимо реализовать функционал:

1) Фильтрация по имени тега. 

Выше таблицы необходимо разместить текстовое поле при вводе в 
которое реактивно в таблице, должны фильтроваться данные по имени тега. То есть только те у которых есть 
совпадение по введенным буквам в текстовом поле.

2) Сортировка по колонкам.

В заголовке каждого атрибута необходимо разместить кнопку, имеющую 3 состояния (без сортировки, сортировка 
по убыванию, сортировка по возрастанию). Нажатия поочередно на эту кнопку меняют эти состояния. 
При состояниях сортировка по убыванию и сортировка по возрастанию, 
теги в таблице сортируются по атрибуту соответственно. Если теги уже отсортированы по одному атрибуту, 
и пользователь нажимает кнопку сортировки другого атрибута, состояние первого должно поменяться на 
“без сортировки" и сортироваться уже по второму атрибуту.

Фильтрация и сортировка должны работать как по отдельности, так и вместе.

Ограничения. Разрешается использование любых визуальных библиотек. 
Запрещается использование уже готовых табличных компонентов.