Data Tables, Forms & Validation

Data tables and forms are so important, they get their own section. The boilerplate uses Tanstack Table v8 and VeeValidate together with Bootstrap 5 styles. These approach results in a highly flexible and customizable, form and table solution with a good developer experience.

Data Tables

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

Data tables are the critical element in a lot of applications. As such, we’ve spent a lot of time and effort researching data tables. The best one currently in our opinion is Tanstack Table v8. Tanstack Table v8 grew from React Table (which could be thought of as v7) but is now framework agnostic which means that it will work on any JS framework. Learn it once, use it everywhere. It’s the same data table library used in the React version of the UI. 

Tanstack Table is headless, which means that it only outputs data, and has no dictation of style. The table style is simply the Bootstrap 5 table classes. By formatting the cells or providing them with new components you can render tables with anything. As mentioned earlier, the tables obtain their column definitions from outside so that they are reusable.

Pagination, sorting, and filtering have been implemented on the data table components. One thing to note though is that the way these things are handled client-side or server-side is quite different. As such, we have created separate a table component for each use case: client-table and server-table. Sorting and filtering apply on all the data rows, not just the ones shown in the current page. To fully understand the data table, read the documentation from Tanstack Table v8.

A vanilla JS version of Tanstack Table v8 doesn’t exist. For this reason, the Razor UI of this boilerplate uses JQuery Datatables, which is the best data table library for a non JS framework environment like Razor pages.

Forms & Validation

Forms are another critical component. This boilerplate uses VeeValidate in conjunction with Bootstrap styled form inputs to handle any kind of form you need.

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

The problem with form libraries like Vue Formulate and FormKit is that they opinionate their styles and often make it a pain to lay things out exactly the way you want. They also can lack the one kind of input you end up needing later, then it’s a pain to collect the form as one object.

Next Steps

The next section covers the style and theme.