Statistical data and database information are often represented using table models. These models might be used to represent large amounts of data sets hence there is a need for customization between table sets to help distinguish them. Finding a suitable application to help develop tables that meet up to these requirements is often times an uphill task. Appsmith is an open-source framework that enables developers to easily build internal tools for applications and add functionality to it. With Appsmith we can also build tables, link them up to an API or database and perform crud applications with it.
Goals
In this tutorial, we will learn how to style tables in Appsmith. We will also learn how
to customize different aspects of our table to change the appearance and how the
table data is displayed. We will apply different styles to different tables to help distinguish them.
Why do we need to style tables
In situations where we are building numerous tables on Appsmith, to be able to differentiate these tables we will need to add labels to each table. Alternatively, we can also apply different styles to each individual table ranging from: color-gradients, cell colors, borders and box-shadows. Styling helps to improve the overall appearance of tables and when styles are used to identify specifically stored data, it makes it easier for viewers to pinpoint what they need to see in a table. For example, a table may have a specific cell color for table columns reflecting profit or loss in an account and this could be indicated to make the table easier for general access and understandability in an organization. We can apply lots of styles ranging from shadows, to text and background colors among others.
How Styling Works in Appsmith
Appsmith tables provide an ordered form of representing data from a data source in rows and columns. This table can also be used to view large amounts of data, and the data can be arranged in the form of server-side pagination in which the amount of data displayed is limited per page. Below are a few examples of some tables built with Appsmith:
Appsmith provides us with a property pane. This panel contains the datasource, rows and columns in the table, and actions that can be carried out on them. Numerous styles which can be applied to produce various results with the widgets can also be found in the property pane. To get to this style pane, select the widget you wish to style and click on the cog-wheel icon at the top right. The Style section is located at the bottom of the menu that pops-up.
This panel may vary based on which widget is selected. The image above is the Style panel of the Table widget. Starting from the top, we have the folliowing options: there’s the Cell Background, the Text Color , Font Style, Text Align and Vertical Alignment. We will go over these options in the course of this tutorial and discuss the effects of each of them.
In these style options there is a Javascript toggle button. Clicking on the JS toggle button changes the mode of input for the options and lets us enter strings of characters or Javacript for the property we wish to apply. For instance, we can set visibility to none by toggling the Js toggle for the visible property and entering “false” in the field or entering {{false}}. The latter is Javascript enclosed in mustache syntax. We will talk more about what mustache syntax is and its usage in the later part of this tutorial.
Styling the table
Below, I have a table widget with some data in it. If you select your table, you will get a popup with a gear icon that you can use to edit your table
Clicking on the gear icons opens up a property pane to edit the table. If you scroll down the pane, you will see a section to add styles to the table.
Cell Background and Text Color
In this section, we will learn about the different styles provided by Appsmith and how they can be applied to produce different results with tables. The first two options in the Styles section provides us with options to change the color of our table’s background and also our text color.
Above, I have selected a black color for my cell’s background and I’ve also set my text color to white. Alternatively, you can use a different color other than the ones provided here by entering the Hex code for the color in the property field. An example is a purple color with the Hex code: #ed18cd . If you are looking for a site where you can pick colors from a palette and get the Hex code you can check out Coolors or you can get the extension for your browser.
Changing Font Size
The next option gives us the ability to be able to change the font size of the text in our table. There are different options to choose from with “Heading 1” being the largest font size and “Paragraph 2” being the smallest font size.
Here, I have increased the font size for my table by setting my “Text size” property to Heading 1.
Font Style, Text Align and Vertical Alignment
With the remaining three options, we can customize the font style and justify our text horizontally and vertically.
Note that it is possible to add both “bold” and “italics” font style at the same time. The text-align property provides you with options to position your text either at the left, center or right of your cell. In other words, it lets us position our text on the horizontal axis. The following property: Vertical Alignment is used to make adjustments to the vertical position of our text in the table. The first option positions text at the top of their cell, the second positions the text at the center and the last positions the text at the bottom of the cell.
Also, rather than applying these styles to the entire table, it is possible to target only a particular cell to apply these styles.
Adding Styles Based on Fulfillment of a Condition
Appsmith provides us with a feature where we can provide styles to certain table elements that meet a particular criteria. We can define this criteria using Javascript and also state what styles should be applied. To do this, open the property pane on the column you wish to apply this condition to.
Above, I have selected the phone column. We will add a condition to set the text color for this column. We will check if the value of each row in the phone column is even or odd and assign it a particular color. We can add Javascript to the property pane elements using a syntax called mustache. This is primarily Javascript code enclosed with two curly-braces {{ }}. With this syntax we can add Javascript data or even functions to our table.
{{currentRow.phone %2 == 0? "red" : "blue"}}
Some examples on how to write Javascript functions can be found in Appsmith Documentation. The above command checks if the row is even, if it is it will be assigned a color red else it will be blue. We can add this to the Text Color option in your column. Enable the JS toggle to be able to write Javascript in the field and add the snippet above.
Here the fields divisble by two in the phone columns have a text color of red and the others have a text color of blue. This way, you can apply different styles to your table if certain criteria are met.
Adding Gradient as Cell Background Color
Appsmith allows us to add gradients as background color as we would normally add in a CSS Stylesheet. Here is an example of a CSS gradient:
linear-gradient(90deg, hsla(217, 100%, 50%, 1) 0%, hsla(186, 100%, 69%, 1) 100%)
We can add this in our Background property:
The resulting color change will take place in the table widget.
Other Applications of Appsmith as an Internal Tool Builder
Appsmith offers lots of functionalities for building a lot of internal tools. With Appsmith, we can build Admin panels, dashboards, workflows and applications. Appsmith provides us with options to either create these internal tools from scratch with UI widgets or, you can customize an existing template to create an internal tool of your choice.
What’s more? with Appsmith you can supply data from your database or API to your internal tools. Also, you can add updates and perform CRUD operations right from Appsmith.
Conclusion
In this article we covered how we can style tables in Appsmith for better visual appearance and to serve as a means from distinguishing them from other tables.
Top comments (0)