Visual Table Styling
Ninja Tables plugin comes up with a new functionality tab named Table Design after releasing its new version. Through this functionality, you can easily style and configure your table in various ways. To see this awesome tab, click on a table you have created previouosly. I am using here Cryptocurrency Table which was created earlier using Ninja Tables.
Then, you will find the dashboard of that particular table. From there, you will find the Table Design tab on top of the list. Click on it.
After clicking the Table Design tab, you can see the myriad of functionalities to play with.
Now, first of all, you need to know about all the functionalities precisely. There are 5 basic functions remain under the Table Design tab and under the basic four functions you will find several functionalities over there. At first look, you will see a simple devise section which contains 3 device options named Desktop, Tablet, Mobile. Right under this section, you will find a Preview section for analyzing all types of real-time configuration.
Along with these two functionalities, there are 3 more consecutive functionalities located in the right sidebar panel named Styling, Color, and Other. Each functionality plays a vital unique role in serving any particular purpose.
Now, let’s have a bit details observation of these 5 functionalities.
Through the first device section, you can have 3 options name Desktop, Tablet, Mobile and you can choose one of them that determines the device you want to see your preview. By default, it shows the Desktop view.
Right under the previous section, you will have a preview section that shows the real-time configuration.
In the right panel, you will find three consecutive options. The first option is Styling which also bears 3 different functionalities. First functionality is Select Styling Library which manages the library you want to work with. There are 3 default libraries remain in this section.
The second one is Styles functionality which ensures the Striped rows, Table border and hovering, Table condensing and Vertical cell contents alignments. You need to check your chosen styles you want.
Last functionality is Features which determines several features, you just need to check what you need from them.
Now, come to the Table Colors functionality which allows you to choose your required color from the different default & custom color schemas. Basically, two options are there, one option bears default color schemas which contains 13 different default color schemas. You can choose any one of them.
There is another option named Custom Schema which allows you to have the custom color combination. Using this option, you can change colors from a specific part of a table.
Like you can change Search Bar Color, Table Header Color, Table Body Color and you also change the Footer Color using this option.
In changing Footer Color, you can get 3 default options to change the specific part of the footer. Additionally, you can have the more alternate options by enabling the feature.
Have a final look of this part after implementing all the options have shown. A screenshot is given for your better understanding.
Last functionality of this part is Other option. There are five parts of this functionality, they are Pagination Items Per Page, Pagination Position, Select Sorting Method, Row Details, Extra CSS Class for the Table etc.
The Pagination Items Per Page page allows you to limit the number of the row you want to show in the table. Pagination Position determines the place where the pagination number will be located or shown, Select Sorting Method allows you to sort data in different ways. Row Details deals with the responsiveness and the last but not the least is Extra CSS Class for the Table which makes you able to add CSS code additionally if you want to add.
Here is the short video that shows a brief visual look of Visual Table Styling for making you more understandable.
This is all about Visual Table Styling options which can be implemented using the Table Design tab located on top of the table design interface.