Please wait...

Editor input types

Video versionA video overview of editor input types in wpDataTables

Editor input types in wpDataTables

wpDataTables editor input types

When the table is configured to be editable you also need to do one more step – configure the rules of editing for each column. In this tutorial we will look through all the possible configuration options in detail.

First you should go to the column settings by clicking on “Column settings” button in the column header wpDataTables column settings or by clicking “Complete column list”  button wpDataTables complete column list from where you can open column configuration for each column. When column settings is opened you should go to “Editing” tab where you can change column settings that are related to table editing.

Similar as for the advanced filtering, you can define the look of the input elements for each column with this setting by choosing one of the options in “Editor input type” dropdown.

Let’s go through each editor input type in detail.

None

This is an empty editor input type, which means that front-end users will not be allowed to edit the values of this column, and no input would be rendered. For edited rows this column will not be modified, for new rows the default value will be used if provided, or a blank value will be inserted if there is no default set up.

One-line edit

This editor type will render a simple one-line text input. Users can enter anything they need in this field, whether strings or numbers.

Applicable column types: on wpDataTables side any (but usually string), on MySQL side VARCHAR, or TEXT.

Issues to note: the only thing to note here is that if you use this edit on some MySQL column which is not VARCHAR or TEXT, and users type in some text, it will not be saved.

Validation rules: none.

wpDataTables Editor Input Types

Multi-line edit

wpDataTables Editor Input Types

This editor type will render a textarea, where users can type in long texts, and do line breaks. When these cells will be rendered in the front-end they will also have these line breaks that user typed in.

Applicable column types: on wpDataTables side any (but usually string), on MySQL side VARCHAR, or TEXT.

Issues to note: the only thing to note here is that if you use this edit on some MySQL column which is not VARCHAR or TEXT, and users type in some text, it will not be saved. Also if MySQL type is e.g. VARCHAR(255) and users enter more then 255 chars, everything after 255’th character will be truncated on save.

Validation rules: none.

HTML editor

This editor type will render a TinyMCE editor input, the most advanced WYSWIYG HTML editor. It has the ability to convert HTML textarea fields or other HTML elements to editor instances. TinyMCE offers HTML formatting tools, like bold, italic, different types of alignments.

Applicable column types: on wpDataTables side usually, on MySQL side VARCHAR, or TEXT.

Issues to note: If you use this edit on some MySQL column which is not VARCHAR or TEXT, and users type in some text, it will not be saved.

Validation rules: none.

wpDataTables Editor Input Types

Single-value selectbox

wpDataTables Editor Input Types

This editor input type will render a dropdown selectbox, where front-end users could select one value out of several possible.

Applicable column types: on wpDataTables side any (but usually string), on MySQL side VARCHAR, TEXT, ENUM. Also can be used for numerical values.

Issues to note: If you choose “Define value list” in “Possible values for column” dropdown, you must define the possible values of the column in the “Values list” input  field of the column settings on the “Data” tab, separated with a “,”.

Validation rules: none.

If you want one of the options to be pre-selected in the editor, enter it it in the “Predefined value(s)” input on “Editing” tab.

Multiple-value selectbox

This editor input type will render a selectbox, where front-end users could select several values out the defined.

Applicable column types: on wpDataTables side any (but usually string), on MySQL side VARCHAR, TEXT, ENUM. Also can be used for numerical values.

Issues to note: If you choose “Define value list” in “Possible values for column” dropdown, you must define the possible values of the column in the “Values list” input  field of the column settings on the “Data” tab, separated with a “,”.

Validation rules: none.

If you want one of the options to be pre-selected in the editor, enter it it in the “Predefined value(s)” input on “Editing” tab.

wpDataTables Editor Input Types

Date

wpDataTables Editor Input Types

This editor input type will render an input, which will show a datepicker on click. In this datepicker front-end users can define a date, which will then be pasted in a format that you provided on the settings page. The datepicker is responsive, which means that it will be looking fine also on mobiles and tablets.

Applicable column types: on wpDataTables side – date, on MySQL side DATE, TIMESTAMP.

Issues to note: On some configurations you’d need to play around with column format on MySQL side. If you find some problems with some of the date formats please let us know.

Validation rules: none

Datetime

This editor input type will render an input, which will show a datetimepicker on click. In this datetimepicker front-end users can define a date and time, which will then be pasted in a format that you provided on the settings page for date and time. The datetimepicker is responsive, which means that it will be looking fine also on mobiles and tablets.

Applicable column types: on wpDataTables side – datetime, on MySQL side DATETIME.

Issues to note: Seconds not supported.

Validation rules: none

wpDataTables Editor Input Types

Time

wpDataTables Editor Input Types

This editor input type will render an input, which will show a timepicker on click. In this timepicker front-end users can define a time, which will then be pasted in a format that you provided on the settings page. The timepicker is responsive, which means that it will be looking fine also on mobiles and tablets.

Applicable column types: on wpDataTables side – time, on MySQL side TIME.

Issues to note: Seconds not supported.

Validation rules: none

Attachment

This editor type will render a “Select file” button that would open the WP media library, and (if the file was already uploaded) a “Change” and “Remove” buttons. Using the “Select file” button front-end users can easily attach files to each table row with native WordPress Media Library. Users can browse between previously uploaded files, or upload a new file. Later users can just click on “Remove” button to remove the link to the file if it’s not needed anymore. wpDataTables will store the link to the file in the MySQL table. The column of the table will contain the download links to attachments.

Applicable column types: on wpDataTables side – URL link and Image, on MySQL side VARCHAR, or TEXT.

Issues to note:

  • If the Column type is set to Image, uploader will automatically insert a ‘thumb’ size in the table cell (resolution is defined in WP config), and link it to full-size image. If you have a WP Lightbox 2 plugin installed, each image will automatically open in a lightbox,
  • Since wpDataTables is using native WP Media Library for uploading and managing files, it also derives the standard WP restrictions. Which means that front-end users that edit the table must have the upload_files capability to be able to upload attachments. You can add this capability to Subscribers if you need (e.g. with Capability Manager Enhanced or User Role Editor plugin), and if you want to allow uploads for non-logged-in users you would need to remove the check for this capability (see our FAQ).
  • Files should be with extensions that WP allows.
  • Files shouldn’t be bigger that current PHP configuration allows.

Validation rules: none.

wpDataTables Editor Input Types

Mandatory fields

wpDataTables Editor Input Types

You can decide yourself which fields cannot be empty on user input regardless of their editor input type. This might be very helpful if a back-end MySQL table has a “NOT NULL” setting enabled for some column, so front-end users wouldn’t try to save a blank field for it. To make some column mandatory just tick the “Cannot be empty” checkbox in the column configuration panel.

Then save and open the table in the front-end. Edit some row, or create a new row, and take a look at the editor. The field configured as mandatory gets a “*” sign near the label, and if you try to save the entry without filling in this field you get a validation error.

Predefined value(s) for editor

Editing predefined value(s)

It is possible to have editor inputs with some predefined value(s). When you create new rows, use predefined editor values to set a value for a input. Predefined values can help ensure consistency and make it faster and easier for users to create records.

You can add predefined values on “Editing” tab in column configuration panel.

Read moreRelated documentation articles

Never miss new features!

Join 2000+ newsletter subscribers

Never miss notifications about new cool features, promotions, giveaways or freebies - subscribe to our newsletter! We send about one mail per month, and do our best to keep our announcements interesting.

We never spam or disclose your address to anyone.