Data tables and form validation are essential features of any Vue 3 application and this boilerplate uses Tanstack Table v8 and VeeValidate together with Bootstrap 5 styles. These tools provide a good developer experience and a flexible solution for forms and data tables.

For managing tabular data, Vue data tables are implemented using Tanstack Table v8, a headless and framework-agnostic library that supports both client-side and server-side pagination, sorting, and filtering. Styled with Bootstrap 5, these Vue 3 data tables offer a clean and reusable solution for displaying and interacting with data. Developers can configure tables dynamically using external column definitions, ensuring adaptability for various use cases. Whether you’re building a Vuejs datatable for simple client-side tasks or a robust Vue 3 easy data table for server-side operations, this setup ensures performance and scalability.

Form validation in this boilerplate is powered by VeeValidate Vue 3 alongside Bootstrap-styled form components. This combination allows for seamless and customizable form validation. Using the Composition API, developers gain greater control over their forms while maintaining a straightforward approach to defining validation rules. Unlike more opinionated libraries, VeeValidate provides flexibility in styling and layout, making it ideal for diverse application requirements.

Data Tables

The data tables have two implementations: a client-table for client-side pagination, sorting, and filtering and a server-table for server-side pagination, sorting, and filtering.

Data tables are critical elements any given application. The best one currently is Tanstack Table v8. Tanstack Table v8 started as React Table (v7) but is now framework agnostic so it will work on any JS framework. It’s the same data table library used in the React version of the UI. 

Tanstack Table is headless; it only outputs data, and has no styles. The table classes from Bootstrap 5 provide styling. Tables can be rendered with any data or component in their cells. Tables obtain column definitions from an external configuration component so they can be reused.

The data table components have pagination, sorting, and filtering functionality. The implementation of these functions are handled differently for client-side and server-side. A separate a table component exists for each use-case: client-table and server-table. Read the documentation from Tanstack Table v8 to learn more.

A vanilla JS version of Tanstack Table v8 doesn’t exist. For this reason, the Razor UI of this boilerplate uses JQuery Datatables, the most popular data table library for a traditional front-ends like Razor pages.

Forms & Validation

This boilerplate uses VeeValidate in conjunction with Bootstrap styled form inputs to handle any kind of form input.

It’s recommended to use the Composition API over the Components method whenever possible for better control on your forms, but either can be used. Read the VeeValidate documentation or follow along with any of the forms in the boilerplate to see how forms are handled. VeeValidate can use a validation rule library like Yup to make writing validation rules easy.

The problem with form libraries like Vue Formulate and FormKit is that they opinionate their styles and often make it difficult to lay things out exactly the way you want. They also don’t have every kind of form input you may need

Next Steps

The next section covers the style and theme.