Table Component

Transcript Summary

Introduction

What's up, Databasers? Sam here, and in this video, we’re going to talk all about the table component. The table component in a database looks similar to a regular table you’d find in Excel or other places. You have your header row and your data, making it easy to display organized information for users at a glance.

Table Component Features

You can use the table component to:

• Display data in an organized manner.
• Add, edit, export, and update data.
• Customize various options to fit your needs.

Let’s dive into the Builder and explore how to create and customize a table component.

Creating a Table Component

Quick Add vs. Customize

When adding a table component, you’ll choose your source data and either use "Quick Add" or "Customize":

• Quick Add: Adds all fields from your data table to the component, allowing you to add new records or view details.
• Customize: Gives you a blank canvas where you can add specific fields to the table, selecting only the ones you need.

Table Component Customization

1. Field Customization:
   • You can add, remove, or reorder fields.
   • Fields can be duplicated in different formats if needed.
2. Summaries:
   • Add summaries (e.g., sum, average) for number fields to display at the bottom of the table.
   • It’s not recommended to have a number field as the first field, as it may interfere with formatting.
3. Field Options:
   • You can hide column titles, change alignment, and adjust column width.

Editing Data Inline

You can enable inline editing to allow users to edit fields directly within the table. This can be done by:

• Enabling inline editing for specific fields.
• Updating equations behind the scenes to avoid performance lag. You can also disable inline editing for fields you don’t want users to modify.

Multi-select and Batch Operations

By enabling multi-select, users can:

• Select multiple records for batch updates or deletions.
• Export data or update multiple fields at once.

Adding Action Links and Export Options

You can add links for editing, viewing details, or deleting records. Additionally, you can enable the option to export the table data as a CSV, or use custom export templates.

Grouping and Filter Tabs

Grouping

• Group records based on a specific field, like status or payment type.
• You can assign colors, choose whether the group is collapsed by default, and control the visibility of grouped fields.

Filter Tabs

• Create tabs that filter records based on specific criteria.
• Each tab can display a subset of the data (e.g., records with no payment, records with a deposit).
• Customize which fields are visible for each filter.

Table Design and Field Formatting

You can adjust the table’s design, including formatting specific fields:

• Display Rules: Show or hide fields based on conditions.
• Field Formatting: You can modify the alignment, width, and title of each field.

Unique Field Options: Some fields (like links) have additional customization options, such as showing icons or opening links in a new window.

Date and Time Field

The date and time field has some unique options. When you go to format, you can choose different ways to format the date and time. At the bottom, you also get the option to output the date in various ways, such as a regular date, a stopwatch, or even as an age. These formats can be really useful for different use cases.

For example, you might want to add the same field multiple times to display it in different formats. Let’s add the date field three times and set each one up differently. We’ll configure one as a regular date, one as a stopwatch, and one as an age. You can see the difference between them.

When you select age, you also have the option to include months and days, which can be toggled on and off. Once refreshed, the third column shows the standard date and time for the event, while the first column tells us the age of the event. For example, it might say the event is happening in five days. The stopwatch column provides a countdown to the event. These options allow you to present the same data in multiple useful ways.

Address Field

Address fields also have unique options. You can format the address and link it to Google Maps. When someone clicks on the link, it will automatically open the address in Google Maps. This is a hoverable link that makes it easier for users to interact with address data.

Email and Option Fields

Email fields have a clickable option, allowing users to click on an email address directly.

For option fields, you can format how they are displayed—either inline or with each option on a new line. For example, if we choose "new lines," each option is displayed on a separate line, while the "inline" option puts them all on the same line.

Action Links

Action links also offer unique formatting options. You can decide how the field value is linked to text, reload records, and set up action rules. This allows you to customize how actions are performed when users interact with a specific link.

Rating and Slider Fields

Rating and slider fields have some cool options as well. For rating fields, you can choose to show a summary, and you can decide whether the output is displayed as an icon or a number. For sliders, you can choose to output the value as a number or a progress bar.

When using the progress bar, you can even customize the bar color. You can set it to a solid color or use stripes, and you can also apply conditional rules, such as changing the bar color when the value is above a certain threshold. For example, if the slider value is above 50, the bar might turn red.

For the rating field, you can switch between showing numbers or icons. While I prefer icons, you can easily change that if you prefer numbers.

Connection Fields

Connection fields have a value separator, which is useful when you have more than one connection. It also has an option for linking to a details page. This allows users to click on a connection and be taken directly to the details page for that record.

Display Rules

The last feature I want to show is the display rule. Display rules allow you to customize how fields are displayed based on the value of another field. For example, if the payment status is "No Payment," you can set the text color to red and add an icon, like an exclamation point.

You can also set display rules based on other fields in the table. For instance, if the payment status is "No Payment," you could set the event name’s text color to red, providing a clear visual indicator that something needs attention.

Note that you can only apply display rules to fields that are part of your table. Fields that aren’t in the table won’t appear as options for display rules.

Conclusion

This video explored the unique options available for different fields in a table component. These customizations allow you to tailor the table to suit various use cases, whether it's for displaying data, updating records, or managing interactions with users. I hope this video provided value and gave you ideas on how to best use table components in your app. Thank you for watching, and have a great day!