Skip to content

Advanced Settings

Ninja Tables offers you a variety of advanced options in the Advanced Settings tab, right after Basic Settings. You can add more specifics and dynamic elements to your table columns with these options. For example, text alignment, column colors, width, etc.

Let's look at this simple article to learn how to add these Advanced Settings to a column.

Advanced Settings in Columns

  • Go to a table created by Ninja Tables first and then hover over any column to find the settings icon.

Or,

  • You can move to the Table Configuration tab and click the edit icon. Select Advanced Settings.

advanced settings in columns

Here you'll see several advanced options to customize the column- Extra Classes, Max Width, Header Text Align, Row Content Text Align, Filter, Sort, Column Background, and Column Text Color.

Extra Classes

The Extra Classes help you customize your column more easily. Add Additional Custom CSS classes to the column and use space to separate each class.

  • Give the particular column's Extra Classes field a name first. We added "test."
  • Then select the Custom CSS/JS tab and enter your own CSS style there.

css in advanced settings

  • This is how that particular column looks after Extra Classes were added.

advanced CSS in column

Max Width

To define the maximum width of a particular table column, use this option. The width can be customized with either px or percentage.

Header Text Align

Use this option to align the column header text.

You will have six options to choose from for alignment. From there, pick the correct text alignment option for your table column.

Options include CenterLeftRightJustifyStart, and End. This only applies to the header texts.

Row Content Text Align

This option is nearly the same as the previous one, except this time, it’s for content in row text. You’ll have 3 options to choose from in a dropdown style. They are CenterLeft, and Right.

Header HTML Content

Provide content for the table column header if you want to show HTML content. This option will let you add icons or media to a column header.

Filterable

If you disable this, then the column data will not be filterable at the front end.

Sortable

When this is disabled, the column data will not be sortable at the front end.

P.S. You can also disable the Sortable option by going to the Table Design tab.

Column Background

You can set a particular column’s background color to be displayed on the table's front end.

color customized column

Column Text Color

With this, you can set a particular column’s text color. Apply the Advanced Settings to your table columns and make the data stand out.