3. Column Setting

This tutorial will tell you more about table columns: how to add columns, select a column type, fully customize columns and adapt columns for different devices,

How do I add columns to a table?

There are several main ways to add columns:

• Add columns and rows while adding a table. Just enter the required number of columns and click create table.

• Simple builder. Add Column/Delete Column. Here you can add columns and customize. After clicking, a window will appear in which you can specify the name of the column, select and configure in detail the type of the column and adapt the column to different devices. But about the column settings a little later.

• Extended builder. Adding and removing columns. To add or remove columns, click on the “Columns” icon on the builder panel.

• Add columns via the context menu. Regardless of which builder you are using, you can right-click on the selected cell to bring up a context menu with options:

Add Column. Click here to add a new column to the table, but you can choose to add left or right the current column.

Delete Column. Delete the selected column.

Drag-and-drop Column Sort

Any content in the table can be sorted by drag and drop, including columns.

!To drag multiple rows, hold down ctrl, select the rows you want, drag the rows, and then release ctrl.

Now is the time to customize the columns.

To open the column settings, just hover the mouse over the column and click on the settings icon.

You can now fully customize your column. The settings are divided into four sections:
“General; Advanced; Header; Body; Conditional.“

General Column Settings

Column name. Enter a title for the column, the title can be used for the header.

Data type. You can display almost any content in your table, as the plugin supports many types of columns, just select a data type and customize it to your preference.

The plugin fully supports the following column types:

• Single line text field.
• Text area.
• HTML Field.
• Numeric Value.
  • For Numeric columns, you can specify Number format. Set cells output format e.g. 1,000.00, 1.00, 1,000. Use format 1. for integer. Set no value to use the default format.
• Currency.
  • For Currency columns, you can specify Currency format. Set cells output format for currencies. For example: $ 1,000.000; € 1.00; Set no value to use the default format.
• Percent.
  • For Percent columns, you can specify Percent format. Set cells output format for percent numbers. For example: 10.00%; 10%. Set no value to use the default format.
• Percent with Convert.
  • For Percent with convert columns, you can specify Percent format. Percent with Convert format sets percent format and convert cells value to percentage by division by 100. Set cells output format for percent numbers. For example: 10.00%; 10%. Set no value to use the default format.
• Date Field.
  • For Date columns, you can specify Date format. Here it is enough to select the desired date display format from the list.
• Button/Link. You can customize the following column options:
  • Link. By default, the button will link to the cart, in order for the button to link to another address, you need to enter the link in the column cell.
  • Button text.
  • Open link in new tab.
  • Make button as rounded corner.
  • Button color(Background; Text color; Border color).

• Select Field. Enter each choice on a new line, then in the table cell, select the option you want from the drop-down list.
• File upload. A button will appear in each column to load media into a table, just click and select the desired file from your device, or the WordPress gallery.

Below we have provided examples of using column types:

Responsive breakdowns. Define the display of a specific column on different devices.

Below we have provided the options for the adaptability of columns for different devices available in the plugin:

• Always show in all devices: display column on every device.
• Hidden On Desktop: display columns on all devices except PC. On PC, the column will be hidden under the plus sign (+).
• Initial Hidden Mobile: display columns on all devices except mobile. On mobile, the column is hidden under the plus sign (+). If a visitor clicks the plus sign (+), their details will be shown in a hidden column.
• Initial Hidden Mobile and Tab: display the column on all devices except mobile and tabs. On mobile and tabs, the column will be hidden under the plus sign (+).
• Initial Hidden Mobile, Tab and Regular Computers: the column data will be hidden under the plus sign (+) on each device.
• Totally hidden on all devices: hide column on all devices.

Important! Automatic column hiding mode must be enabled for using this feature.

Advanced Column Settings

Column extra classes. Here you can introduce additional classes for your table

Column width. You can set the column width in percentages or pixels.

Filterable. Check the box if you want the column to be filtered.

Sortable. Check the box if you want the column to be sorted.

Editable. This option allows users to edit the cell at the front. Just check the box and site users will be able to make changes to the table.

Header Column Settings

Header extra classes. Here you can introduce additional classes for the column header.

Alingment. Select the content layout for this column header (default, left, center, right)

Vertical alingment. Select the vertical position of the content for this column header (default, bottom, middle, top)

Colors. (Background; text color). Absolutely any colors are available to decorate the text.

Font family and font size. Here you can select the font family and font size.

Properties. (Bold; Italic; Underline).

Body Column Settings

Alingment. Alingment. Select the content layout for this column body (default, left, center, right)

Vertical alingment. Select the vertical position of the content for this column body (default, bottom, middle, top)

Colors. (Background; text color). Absolutely any colors are available to decorate the text.

Font family and font size. If the columns use text content. Here you can select the font family and font size.

Properties. (Bold; Italic; Underline).

Conditional Column Settings

Use conditional formatting to help you visually explore and analyze data, detect critical issues, and identify patterns and trends. Conditional formatting allows you to highlight or modify cells, rows, or even columns based on the contents of the cells.

Rules.

To begin defining conditional formatting rules for a column, click new conditional rule to create and specify parameters for the condition.

Condition type.

This is determined by what operation you want to use to set the condition. Use text or a cell for the condition, and depending on the type, select a comparison operator. For instance:

Operator.
For the Text type, the operator can begin with; end with; contains; not contains.
For the Cell in type, the operator can be equals; not equals; greater than; greater than or equal; less than; less than or equal; between

Value.

This is determined by the value that will be used in the rule comparison operation.

Styles.(background; text color).

Here you can select the background color and text when the condition is triggered.

Properties. (Bold; Italic; Underline).

Here you can select proprietes text when the condition is triggered.

After you have specified all the parameters, click Apply and the condition will be added to the list.

Example:

For example, our task is to find out which of the employees costs more than $ 70,000 per year for the company.

First, let’s go to the “Salary” column settings.

In the second step, go to the “conditional” tab and create a new condition.
Then we will indicate all the necessary parameters, in our case, is “If the contents of a cell are greater than or equal to 70,000, then its contents will be highlighted with a” red “background color, and the text of the cell with” white “.

Click apply and save settings.
Now employees with a salary equal to or greater than 70,000 will be highlighted in the specified color in the table.

Each column can have an unlimited number of formatting rules, to see the created column rules go to the already familiar path column setting-> conditional, and here you can add new conditions, as well as delete or edit the previously created conditions.

Now that the table has been created, the columns have been added and configured, it’s time to move on to customizing the table options.