How do I use URL link and attachment columns in wpDataTables?

Table of Contents

Video tutorial

URL link columns render hyperlinks that open pages inside or outside your website. Attachment columns work the same way but point to downloadable files.

How do URL link columns work in wpDataTables?

“URL link” columns are used to render hyperlinks that can be clicked to open pages within your website, or in external websites.

Rendering rules: If the content of the cells contains a combination of “two sticks” – || – everything to the left of this combination is used as an URL address for the link, and everything to the right as displayed text.

For example:
https://wpdatatables.com||Check out wpDataTables
will be rendered as:
Check out wpDataTables
If the “||” combination is not found in the content, the entire content will be used both for the link and as the display value. For example:
https://wpdatatables.com
will be rendered as:
https://wpdatatables.com

Sorting rules: alphabetical.
Applicable filter types: text.
Editor input type: One-line edit, Attachment
Issues to note: sometimes issues may appear when you’re sorting on URL columns that feature a complicated HTML structure.

Which URL link column settings can I set?

You can control how the link opens, its rel attributes, and whether it displays as a button:

Configure the link to open in a new or the same tab.
Set the NO-FOLLOW link option.
Set the NOREFERRER link option.
Set the SPONSORED link option.
Display the link as a button.
Set the button display text.
Set the button CSS class.

What does a URL link column look like?

In the example, the “Engine link” and “Link” columns display URLs for Google, Yahoo!, and Bing with their establishment years.

wdt_ID	Engine name	Engine link	Link	Year established
1	Google	Google		1998
2	Yahoo!	Yahoo!		1994
3	Bing	Bing		2009
wdt_ID	Engine name	Engine link	Link	Year established

How do Attachment columns work?

Rendering Rules

When creating an Attachment column, it is treated as a URL column where each URL points to the file attachment. The content in the cell should be a valid URL that directs to the file you want to link. For example:

https://wpdatatables.com/wp-content/uploads/2015/06/new_dummy_table.xls||Download Document

will be rendered as:

Download Document

If the “||” combination is not found in the content, the entire content will be used both for the link and as the display value. For example:

https://wpdatatables.com/wp-content/uploads/2015/06/new_dummy_table.xls

will be rendered as:

https://wpdatatables.com/wp-content/uploads/2015/06/new_dummy_table.xls

Please note that there might be issues when sorting on Attachment columns if the URL contains a complex HTML structure.

Additional settings for Attachment columns include:

Target Configuration: Set whether the link should open in a new tab or the same tab.
NO-FOLLOW Link: Option to set the link as NO-FOLLOW.
NOREFERRER Link: Option to set the link as NOREFERRER.
SPONSORED Link: Option to set the link as SPONSORED.
Button Display: Display the link as a button.
Button Display Text: Set the text displayed on the button.
Button CSS Class: Customize the button appearance using CSS classes.

What does an attachment column look like?

In the example candidate resume table, the attachment column (“CV”) provides downloadable CV links alongside profile pictures, names, ages, GPAs, and emails for three candidates.

By following these guidelines, you can effectively use the Attachment column type to manage file links within your wpDataTables.

Profile Picture	wdt_ID	wdt_created_by	wdt_created_at	wdt_last_edited_by	wdt_last_edited_at	Name	Age	GPA	Email	CV
	1	Sara	06/08/2024 11:11 AM	Sara	06/08/2024 11:29 AM	Jane Doe	29	3.75	[email protected]
	2	Sara	06/08/2024 11:11 AM	Sara	06/08/2024 11:30 AM	Michael Smith	35	3.60	[email protected]
	3	Sara	06/08/2024 11:11 AM	Sara	06/08/2024 11:35 AM	Emily Johnson	42	3.85	[email protected]
Profile Picture						Name	Age	GPA	Email	CV