Home

Tutorial Content

The tutorial has been designed to be followed along, so you could start from the beginning through the end. At the end of each lesson, there will be a link to the whole code on GitHub.

Note
If you're using Bootstrap 3 CSS, clone the code from vuetable-2-tutorial-bootstrap instead.

If you're using Bulma CSS, clone the code from vuetable-2-tutorial-bulma.

Prerequisite

• Install the required tools
• Create a tutorial project with Vue-CLI
• Sample API endpoint

Lessons

1. Your first Vuetable

2. Displaying more fields

3. Cleaning up code

4. Make change to field title

5. Column alignment

6. Format fields using callback option

7. Adding pagination

8. Displaying pagination information

9. Customizing Vuetable

10. Make columns sortable

11. Using special fields

12. Adding Detail Row

13. Adding Search Filter

14. Moving Field Definitions to another file

15. Passing Props to MyVuetable

    • Defining Props
    • API URL
    • Field Definitions
    • Sort Order
    • Detail Row

16. Passing Scoped Slot to MyVuetable

    • The Problem
    • The Solution: render function
    • Converting <template> to render function

17. Converting to Bootstrap CSS

    • The css property
    • Table Styling
    • Pagination Styling
    • Using the icon-render property

Contributions

You can PR on any error you've encountered. No matter you think how small it is, please do not worry. :)