React Tables, Forms & Validation
This boilerplate uses Tanstack Table v8 and Formik with Bootstrap 5 styling to deliver an efficient and flexible solution for managing react table components and forms. Tanstack Table v8, formerly React Table v7, provides a robust and reusable headless framework for building data tables, enabling client-side and server-side pagination, sorting, and filtering.
On the form side, Formik in React simplifies form handling while offering seamless integration with Yup for validation. Whether you’re working in React or adapting features for React Native, this combination ensures efficient form validation with Yup and a smooth developer experience.
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 in any given applications. The best one currently is Tanstack Table v8, which 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 Vue version of the UI.
Tanstack Table is headless; it only outputs data, and has no styles. In this case the Bootstrap 5 table classes are used for 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, which is the most popular data table library for a non JS framework environment like Razor pages.
Forms & Validation
This boilerplate uses Formik in conjunction with Bootstrap styled form inputs to handle any kind of form input. Read the Formik documentation or follow along with any of the forms in the boilerplate to see how to work with forms. Formik can use a validation rule library like Yup to make writing validation rules easy.
Next Steps
The next section covers the style and theme.