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 video series, we learned about integrations, specifically focusing on how we can link user interactions within DataTables to perform FileMaker scripts.
In this series, we will delve into the world of CSS to enhance the styling and rendering of our DataTable reports, making them not just functional but also aesthetically pleasing.
The Journey Begins
As we embark on this journey, it’s essential to understand that there are multiple ways to style and present DataTables. This series aims to share my knowledge, acquired through self-learning, and provide insights and potential pitfalls. My goal is to empower you with the skills to present data elegantly to clients, customers, and yourself.
Series Overview
Let’s take a sneak peek at what we’ll be covering in this series:
- CSS – Table Formatting
- CSS – DataTables Elements
- CSS – Column Formatting: Using Classes
- CSS – Column Formatting: Using Render Functions
- CSS – Formatting with Graphics & Conditional Formatting
CSS – Table Formatting
Our starting point is understanding the basic formatting of DataTables. We’ll focus on styling the table, header and body of our reports. We look into the difference of using native DataTables styling compared to Bootstrap 5, our default styling library. We’ll explore fonts, border options, and overall appearance, transforming a raw table into a polished presentation.
CSS – DataTables Elements
Moving forward, we’ll focus on designing elements such as pagination and search boxes. We have control over their appearance, positioning, and styling, allowing customization to meet specific customer needs.
CSS – Column Formatting: Using Classes
Next we will explore formatting our data using the new feature implemented in the Columns Builder. You will learn how to add classes in the CSS tab and assign them to one or more columns in your report. Examples will include text alignment, font, size and color attributes.
CSS – Column Formatting: Using Render Functions
Rendering our data is another way we can control the presentation of our DataTables reports. We continue learning about the new features implemented in the Columns Builder to render our data. In addition, we will add render functions in the tab, JS Function and learn about indexes and their importance in designing reports. Formatting will focus on modifying our data using date and time, number, and string rendering examples.
CSS – Formatting with Graphics & Conditional Formatting
We bring it all together in the final lessons as we add buttons, stylize them, incorporate icons, images, and explore advanced visualizations. Conditional formatting will be a highlight, allowing dynamic styling based on data conditions. Bonus content includes button grouping, new button actions and copying our report for external use.
What’s new?
I have made some necessary changes to the demo file since version 4.5 in order to support the CSS lessons of Mastering DataTables in FileMaker Pro. I have also included a new data set that is required for the lessons in this series. Therefore, if you are using an older version, I strongly recommend downloading and using version 5.0 to stay in sync with this series. This way, you will have access to all the latest features, enhancements, data and code changes that have been implemented.
What’s next?
In the next post, we will begin by exploring the styling of our DataTables ‘table’. Join me there, download the demo file and let’s get started on your journey on mastering the presentation layer of your reports.
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.
