Hi, sergio

Firstly, I would like to sincerely apologize for the delayed response as we have been experiencing an unusually high number of tickets. I am sorry that it has taken longer than usual to respond to your concern and your patience is highly appreciated.

-

There are two ways how you can make hyperlinks in our tables. 

-

1.

If you use our URL type columns ( this is the easiest way):

Please check our Documentation that explains how this works here.

You can also set the hyperlinks to look as buttons, with "Show link as a button" in column settings.

You can also add additional styles, if needed, here is an example.

First you need to add a custom class to it:

Then, visit this website, generate your button, and click on "Get Code":

In the right part of the screen, you'll see the code you need for this button:

Copy the code without the first row and change "myButton" to the custom class you added in step 1, so instead of this:

.myButton {    background-color:#51d1c6;    border-radius:28px;    border:1px solid #1995ab;    display:inline-block;    cursor:pointer;    color:#ffffff;    font-family:Arial;    font-size:17px;    padding:16px 31px;    text-decoration:none;    text-shadow:0px 1px 0px #2f6627;
}
.myButton:hover {    background-color:#5a9615;
}
.myButton:active {    position:relative;    top:1px;
}

You would use this:

.customclass {    background-color:#51d1c6;    border-radius:28px;    border:1px solid #1995ab;    display:inline-block;    cursor:pointer;    color:#ffffff;    font-family:Arial;    font-size:17px;    padding:16px 31px;    text-decoration:none;    text-shadow:0px 1px 0px #2f6627;
}
.customclass:hover {    background-color:#5a9615;
}
.customclass:active {    position:relative;    top:1px;
}

In the table, go to Customize/Custom CSS and paste that code:

Notice that the font color had to include the !important clause to override the color of the text in the button. After you add this, the button in the table will look like this:

2.

Or, if you wish to use a string type column ( This is more useful if you  need multiple links in same cell):

If you use a one line string, it will be limited to 255 characters; 

 if you use multi line string - it will have 65,535 character limit.

Please check out this documentation about our text fields;

The cells will render HTML, so you can wrap links in anchor tags, for example,

<a href="https://www.w3schools.com">Visit W3Schools.com!</a>

this would render in cell as "Visit W3Schools.com!"  as the displayed text, but it will  lead to the link when clicked;

and the other regular text fields will simply be rendered as text;

-

You can also style it, if you add an ID, or a class in my example :

<a href="yourURL" class="customButton">Link Text</a>

You can then add some custom CSS styles to the table, in Customise tab > Custom CSS;

On my example i will make it look like a green button:

.customButton {  background-color: #4CAF50;  border: none;  color: white;  padding: 15px 32px;  text-align: center;  text-decoration: none;  display: inline-block;  font-size: 16px;  margin: 4px 2px;  cursor: pointer;
}

and it would look like this :

-

And i just wanted to point out that you can try wpDataTables before purchasing

 on our sandbox Demo sites ( you can find links for the main plugin Demo,  

as well as add-on Demos, in my signature),

and there is a 15-day money-back guarantee period, 

so if you purchase the plugin, you can safely fully test it out, and if it doesn't fit your needs you can request and receive a refund in that period. ( same goes for all plugins and add-ons)

Let me know if you have any additional questions.