Продолжая рисовать таблички вместе с Ember

Компонентная организация приложения и система дополнений Ember позволяют разнести логику отдельных частей приложения как можно дальше друг от друга и сделать их независимыми. Так их становится проще тестировать, отлаживать и расширять.

Простой пример — таблица. Приложению не нужно знать, как она организована внутри. Приложение лишь передает в нее данные, которые надо отобразить и конфигурирует их отображение через заданный интерфейс. Все остальное — уже «личное» дело таблицы. Над таким компонентом я начал работать еще в мае этого года. За 5 месяцев вышло 14 версий (само собой, что «мажорной» была всего одна), между которыми было лишь два breaking-change с моей стороны (это не касается переходов на новые версии Ember/ember-cli). Последняя на текущий момент версия (1.3.5) вышла буквально вчера.

Что ж такого появилось в этом компоненте с момента выхода первой версии и до сейчас?

Было:

  • Постраничная навигация (только «First | Prev | Next | Last»)
  • Сортировка по одной колонке
  • Возможность задать кол-во записей на одной странице
  • Возможность выводить html в ячейке (по сути, просто использовались {{{ }}} вместо {{ }})

Добавилось:

  • Нумерованная навигация
  • Кастомизация постраничной навигации (так как она вынесена в отдельный partial-шаблон)
  • Футер у таблицы может быть скрыт
  • Футер вынесен в отдельный partial-шаблон
  • Фильтрация по колонкам и глобальная фильтрация по всей таблице
  • Блок с глобальным фильтром вынесен в отдельный partial-шаблон
  • Фильтрация по колонкам может быть через список значений (select-box)
  • Фильтрацию можно отключить
  • Фильтрация может быть регистронезависимой
  • Колонки можно скрывать и показывать (по одной и всем скопом). Сделано в виде выпадающего списка
  • Этот список вынесен в partial-шаблон, что облегчает его кастомизацию
  • Изначально можно задавать, какие колонки видимые, а какие нет
  • Сортировка по нескольким колонкам одновременно
  • Выводимое значение в колонке и то, по которой она сортируется, могут быть разными
  • В ячейке таблицы можно выводить свой partial-шаблон (пришло на замену возможности просто выводить html в ячейке)
  • Bootstrap’овские классы для таблицы можно отключить (table-bordered, table-stripped, table-condensed)
  • Из таблицы можно бросать события «наверх»
  • Все вспомогательные сообщения, которые выводятся в таблице (когда данных нет, summary и т.д.), можно поменять на свои
  • К каждой ячейке в столбце можно добавить свой css-класс

Ну и конечно все это покрыто тестами.

Идеи по расширению функционала пока что закончились. Поживем — увидим.

Ссылки — репозиторий, демо.

, ,

Оставить комментарий

Top ↑ | Main page | Back