В начальной версии компонента вы могли просто сказать, какое свойство заданных данных должно быть отображено в каком столбце. Вот небольшой пример:

<table-component
     :data="[
          { id: 1, firstName: 'John' },
          { id: 2, firstName: 'Paul' },
          { id: 3, firstName: 'George' },
          { id: 4, firstName: 'Ringo' },
     ]"
>
     <table-column show="firstName" label="First name"></table-column>
 </table-component>

Это будет отображать простую таблицу с одним столбцом (с заголовком «Имя») и строкой для каждого Beatle. Это хорошо для простых данных, но вы хотите отобразить изображение, которого нет непосредственно в данных. Например, ссылка на страницу редактирования. В предыдущей версии компонента вам приходилось вручную готовить этот html и помещать его в данные. Типа отстой.

В последней версии компонента вы можете использовать слоты с заданной областью для рендеринга данных. Вот как им пользоваться.

<table-component
     :data="[
          { id: 1, firstName: 'John' },
          { id: 2, firstName: 'Paul' },
          { id: 3, firstName: 'George' },
          { id: 4, firstName: 'Ringo' },
     ]"
>
     <table-column label="First name">
        <template scope="row">
           <a :href=`/edit${row.id}`>{{ row.firstName }}</a>
        </template>
     </table-column>
</table-component>

Намного лучше!

Асинхронная загрузка данных

В предыдущей версии табличного компонента единственным способом получить в него данные была передача объекта в data опоре table-component. Для проекта, над которым мы тогда работали, этого было достаточно. Но для следующего проекта нам нужно было загрузить данные, поступающие с сервера, поэтому мы решили добавить поддержку асинхронной загрузки данных.

В дополнение к принятию объектов опора data для table-component теперь может обрабатывать функцию. Эта функция получит объект с filter, sort и page. Вы можете использовать эти свойства этого объекта для получения нужных данных. Эта функция должна возвращать объект с ключом data, содержащий данные, которые должны отображаться. Если вы вернете свойство pagination, компонент также отобразит некоторые ссылки для пагинации.

Вот пример использования популярной библиотеки HTTP-запросов Axios для получения данных с сервера:

<template>
   <div id="app">
       <table-component :data="fetchData">
           <table-column show="firstName" label="First name"></table-column>
       </table-component>
   </div>
</template>

<script>
    import axios from 'axios';

    export default {
        methods: {
            async fetchData({ page, filter, sort }) {
                const response = await axios.get('/my-endpoint', { page });

                // An object that has a `data` and an optional `pagination` property
                return response;
            }
        }
    }
</script>

В заключение

Наша цель в этом компоненте - сделать его максимально удобным для разработчиков. Так что, возможно, у него не так много функций, но работать с ним определенно интересно. Если вы хотите узнать больше о нашем компоненте, загляните в readme на GitHub. Нужен компонент таблицы, но не нравится наш? Вот хороший список альтернатив.