Master DataTables Series: 5.3 CSS Column Formatting – Classes

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 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.

In this post, we will focus on using CSS classes to style and format columns dynamically. We will also get our first look at the new Columns Builder enhancements that allow you to easily modify reports by selecting CSS options.

Enhanced Column Builder

A significant overhaul to the Columns Builder has been made since the prior series. Users should be familiar with changing visibility, order, and column names through the UI already, but now a new styling section has been added.  In this lesson, we will look at the new feature in the Columns Builder which helps us assign classes to our data for even more control over our presentation.

Making our Demo Pretty… Ugly

The goal of this demo lesson is to practice applying classes to specific columns to change their appearance. The emphasis is on practical application, allowing you to see the immediate impact of the applied styles. We will cover a range of styling options, from alignment and fonts to colors and sizes.

However, instead of creating an aesthetically pleasing report, we are going to intentionally build an ugly (to each their own) presentation for learning purposes.  Our styling options put all together may not be attractive, but having learned how to create CSS styles and apply them will only give you more insight into the options you have with your own reports. I encourage you to use the lesson to experiment and see the variety of styling possibilities you can come up with.

Reserved Words

Although we can create many custom classes to build our presentation, we need to be careful of our naming conventions.  In the demo file, we illustrate that one our custom CSS classes has used a reserved class name from the Bootstrap 5 library as its own name.  Understanding what has already been defined by the CSS library we choose in our reports is key to understanding how we modify existing classes or add our own classes to supplement the report’s design.

The Importance of !important

The !important rule in CSS is used to add more importance to a property/value than normal.  It will override ALL previous styling rules for that specific property on that element.  We apply this practice to correct the original table header formatting we created, as it has since been overwritten by our latest styling changes.  Another potential “gotcha” is the order in which we apply our CSS styling. We illustrate that whichever comes later will override any earlier settings declared, an important lesson to learn when first getting started with CSS.

What’s next?

In the next post, we continue our exploration of custom styling of our data, but this time focusing on JS Render Functions instead of assigning classes.  Each have their advantages, so join me in the next lesson to learn more about how you can customize your DataTables report even further.

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.