Introduction

image

Vuetable is a Vue 2.x reusable data table component that converts raw (JSON) data into HTML table format with ease and flexibility. And it should be able to work with any CSS framework because of the HTML table generated.

Fields definition is a unique feature in Vuetable that allows you to define which fields to be used and manipulated before displaying.

You begin by defining data fields for your JSON data structure that you want to present in HTML table. Then, progressively configuring it to display the data the way you want.

Ultimately, you can use it to create a wrapper component to contain the UI/UX of your own datatable component in one place to achieve consistant look and feel.

Features

  • Work with data from API endpont or existing data array/object
  • Define fields to map your JSON data structure for display
  • Customize your field data display with formatter if needed
  • Advanced field customization can be done via scoped slot and field component
  • Single sort or multi-sort if your API is supported
  • Pagination components included, swappable and extensible, or write your own
  • Optional detail row to display additional data for each row
  • Adaptable to any CSS framework if it supports HTML table.
  • And a lot more!

Contributions

NOTE

As this is still a beta version which lives in the next branch, you will need create a Pull Request from the next branch.

Please do not feel bad if your pull requests or contributions do not get merged or implemented into Vuetable.

Your contributions can, not only help make Vuetable better, but also push it away from what I intend to use it for. I just hope that you find it useful for your use or learn something useful from its source code. But remember, you can always fork it to make it work the way you want.

License

Vuetable is open-sourced software licensed under the MIT license.

Need Your Help!

Vuetable is an open source project and completely free. However, it does take a lot of work and time to keep it going.

If you find Vuetable useful and help saving your time in the development work. Please help support it by giving a small donation or tip to my PayPalaccount. I usually use it to pay for online courses and tools. If you can help, any amount is ok.

If you are using Vuetable in many of your commercial projects (which you charge money from your customers), it would be really nice if you could help tip/donate me per project (may be $10 per project). This is still a volutary basis. If you could help, it would really be appreciated. If not, that's fine.