Master DataTables Series: 5.1 CSS – Table Formatting

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 discussed the goal of this series and the specific CSS styling and data rendering approaches we will take to make our reports visually appealing.

In this post, we will begin by exploring the styling of our DataTables ‘table’.  In addition to learning about formatting, we will cover essential elements required to grasp the basics of CSS styling. Understanding these concepts and the changes made to the demo file is vital for creating visually appealing reports using DataTables.

Understanding Library Control

It’s crucial to comprehend that the library utilized in your solution plays a significant role in controlling the appearance of DataTables. If no custom CSS is added, the default styles from the library shape the table. In our demonstration, we’ll showcase two examples – one with the default library styling and another using Bootstrap 5.

Visualizing Table Classes

We begin by outlining the table classes that are native to DataTables and provide examples of their effect on the table itself.

1. Cell Border: Adds a border around all cells, excluding the header.
2. Compact: Condenses the table, making it more visually appealing.
3. Hover: Enables a hover effect when the cursor is over the table.
4. No Wrap: Prevents data from wrapping within cells, maintaining a more compact presentation.
5. Order Column: Highlights the column when ordering, providing visual cues.
6. Row Border: Adds borders at the top and bottom of each row for a distinctive look.
7. Stripe: Alternates row colors for improved readability.

Bootstrap 5 in Action

In the demo, we examine both the default library styling and the Bootstrap 5 styling to understand the differences.  We explore the HTML tab to apply classes to the table element. By adding classes like “cell border” or “compact,” we’ll witness real-time changes in the table’s appearance. Understanding the syntax differences between base and Bootstrap libraries is crucial for effective styling.  From here on out we will use the BootStrap 5 library to guide our styling choices and lessons.  

Hands-on Exploration

As we navigate through the demo, feel free to experiment with these classes, understand their impact, and witness the dynamic changes in real-time. Remember, this is just the beginning of our CSS journey, and there’s much more to explore in upcoming lessons. 

Additionally, we’ll touch on using browser inspection tools to understand the underlying CSS classes applied to elements. This reverse engineering approach empowers you to customize and fine-tune styles according to your preferences.

This lesson lays the foundation for mastering CSS styling in DataTables. Stay engaged, keep experimenting and get ready for an exciting journey into the world of CSS.  The possibilities are endless! 

What’s next?

In the next post of this series, we delve into styling the core DataTables elements surrounding our table.  This includes styling the information block, search box, pagination, and other critical components to create a consistent and visually appealing presentation for your end-users.

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.