Если вы знаете и любите angular, часто используйте angular 2 и просто решили использовать их материальные компоненты, продолжайте читать. Если вы теперь также осознали, что они несколько тонко разбросаны, в них отсутствуют некоторые ключевые элементы, такие как хорошая таблица, определенно продолжайте читать. Это для вас!

Проверка альтернатив

Хорошо, материал очень похож на Google. Это хорошо, они устанавливают общее использование и ощущения, клиенты будут чувствовать себя в вашем приложении как дома. Но теперь возникает вопрос: Angular ✔ а какой UI поверх? Bootstrap, PrimeNG, Материал,…? Ну, я выбрал Материал, но потом быстро оказался в затруднительном положении. А как насчет красивого стола? Нет, не готов. А как насчет крутых графиков и разноцветных пончиков? Неа. Хорошо, снова ищу альтернативы. Нашла Ковалент, она мне понравилась. Он не идеален, он молодой, но он включает в себя структуру Angular Material и не пытается заново изобрести то, что уже есть. Они создают те вещи, которые вы иначе построили бы из угловатого материала.

Они также предлагают некоторые интересные дополнительные функции, такие как http-оболочка, которая помогает вам создавать перехватчики для ваших http-вызовов. Я чувствую себя довольно глупо, создав сервис, который перехватывает вызовы http xhr для перехвата событий, зная, что кто-то уже это построил. Но не будем дальше отвлекаться, давайте заглянем в таблицу данных!

Построить стол

Я получил некоторые данные. Я хочу их показать. Поскольку легко может быть несколько сотен элементов, я хочу, чтобы их можно было сортировать и искать. Имеет смысл. Может быть, даже пейджинг, но это позже. А пока давайте воспользуемся этими сетями 4G и просто извлечем все данные.

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

columns: ITdDataTableColumn[] = [
    {name: 'offer.date', label: 'Date', tooltip: 'date ordered'},
    {name: 'offer.description', label: 'Description'},
    {name: 'amount', label: 'Price'},
    {name: 'offer.vegetarian', label: 'Vegetarian'},
    {name: 'paid', label: 'Paid'}
];

Это конфиг. Я не буду публиковать всю свою модель, но в любом случае это очевидно из моей конфигурации. Это выглядит примерно так

[{
    paid: false,
    //some more Props
    offer: {
        description: "foo",
        date: "2015-05-05",
        //...
    },
},
...
]

Простая таблица без поиска и сортировки теперь выглядит так

Довольно просто. Я передаю ему данные и структуру данных, используя columns. Затем я могу предоставить ему шаблоны для данных, которые я хочу отформатировать определенным образом. Добавьте евро после цены, чтобы дата отображалась правильно. В этом роде.

Подведение итогов

Я не стал объяснять весь API таблиц данных, у них есть документация для этого. Но вы поняли. И выглядит неплохо! На всех размерах экрана. Когда вы уменьшаете размер, он не превращается в список, но я этого не хочу. Это стол, он должен оставаться столом, даже если экран маленький. И это нормально, потому что на маленьких экранах можно прокручивать слева направо.

Я продолжу изучать проект, но он выглядит многообещающим. Он не так спроектирован, как угловой материал или материал-компоненты-паутина, но они более высокого уровня и готовы сегодня. Поэтому я начинаю создавать свое приложение с их помощью, заменяя элементы в будущем, когда официальные репозитории внедрили свои версии инструментов.

Оборотная сторона: я не думаю, что эти инструменты так же идеально протестированы или ориентированы на программы чтения с экрана и не соответствуют тем же стандартам доступности, что и материалы angular. Но это цена, которую вы платите за более быстрое развитие библиотеки.

В целом это выглядит многообещающе. Поместите это на GitHub и держите в своем наборе инструментов!