Welcome to the multi-part video series that will teach you how to implement DataTables in your Claris FileMaker Pro solutions effectively. If you’re new to this series, we recommend starting from the introduction to maximize your learning experience. You can access the complete series here: Master DataTables with Claris FileMaker Pro.
In the previous post, we learned how to style our DataTable using both the default DataTables library and Bootstrap 5.
In this post, we will expand our understanding of how to style our DataTables report by focusing on the elements that surround and complement our DataTable. We will enhance the visual appeal of the native elements such as the search menu box, information display, pagination, and the table header in order to produce a more cohesive look to our report.
New Feature – Adding CSS Templates
A key concept in styling your DataTables report involves utilizing the CSS tab in the DataTables Builder. Here, new features have been introduced to assist you in understanding where to place specific classes and styling elements. This section allows you to enhance native libraries, offering flexibility in design and a platform for true customization.
Body and Header Styling
One key customization is the ability to alter the body of the table. This includes changes such as adjusting font size and table width. The demo showcases how simple it is to modify these properties, providing a quick way to establish a consistent look for your application.
We also explore how to change the background color, font color, and other styling attributes of the table header. The process involves creating a custom class and applying it to the correct HTML element. The demo illustrates how this approach can significantly alter the appearance of the table header and educates you on where and how to make this type of presentation change.
Wrapper Styling – Grouping Elements
The wrapper section of the DataTable is an essential element that holds various components together. We learn how to add a background color, padding, and other styling to this section, creating a distinct visual separation between the table and the native elements we are accustom to seeing on our reports.
Pagination Styling
The pagination area is often a challenge in maintaining a cohesive design. The demo walks us through the process of adding background color, padding, and aligning the pagination elements. Additionally, we explore how to style the active page and link elements for a consistent and visually appealing look.
Flexibility and Fine-tuning
Styling DataTables is a crucial aspect of creating a user-friendly and visually pleasing reports. Often times it takes small tweaks to the CSS to make the presentation appear seamless. It is important to experiment with styles, trying out different configurations, and making nimble adjustments.
The demo highlights this by showcasing text transformation, padding adjustments, and font changes as a way to illustrate how simple changes can make a big difference. By understanding the CSS and HTML customization options, we can elevate the design of our DataTables report to meet specific requirements set by our stakeholders.
What’s next?
In the next post of this series, we look into how we can begin stylizing the data in our table. We will look at the new features in the Columns Builder which help us assign classes to our data for even more control over our presentation.
Join the Training Series Now
Subscribe to our YouTube channel to keep up with the video training series. Comment on the YouTube videos to interact with us and share your thoughts and questions. Also, don’t forget to join our mailing list for updates on new videos and additional resources.
Built with you in mind
Speak to one of our expert consultants about making sense of your data today. During
this free consultation, we'll address your questions, learn more about your business, and
make some immediate recommendations.
