api_fieldoptions

FTable API Reference - Field Options

columnResizable
create
edit
dateFormat
dateLocale
defaultValue
dependsOn
display
explain
input
inputAttributes
inputClass
inputTitle
key
list
listClass
listClassEntry
listClassHeader
listEscapeHTML
options
placeholder
searchable
searchAttributes
searchDateFormat
searchPlaceholder
searchType
sorting
title
tooltip
type
visibility
width

A field definition defines the structure and behavior of a field of the record. It's generally formatted as:

FieldName: {
    // Field options
}

columnResizable

Type: Boolean
Default: true
Description: Indicates whether this column can be resized by the user. The table's columnResizable option must be set to true (default) to use this option.

create

Type: Boolean
Default: true
Description: Indicates whether this field is shown in the "create record" form. Default is false for the key field and true for other fields.

dateFormat

Type: String
Default: none
Also supported: 'displayFormat' (original field option name)
Description: per-field override of the generic option 'defaultDateFormat'. Format of a date field if a datepicker is detected (fdatepicker currently). See the format of the accordingly detected datepicker. If no datepicker is detected, this value is ignored, but see 'dateLocale'

dateLocale

Type: String
Default: None,
Description: per-field override of the generic option 'defaultDateLocale'. Defines the locale used to display values for a field of type 'date' in case no specific datepicker is used. Example: 'nl-BE' or 'en-US'.

defaultValue

Type: String
Default: None
Description: Sets a default value for the field. It must be a valid value (e.g., for an option list, it must be one of the options).

dependsOn

Type: String or Array
Default: None
Description: Used to create cascaded dropdowns. If a combobox field depends on another combobox, FTable can automatically create cascaded dropdowns. The dependsOn can also be a text field (or anything that supports getting the value).

Example:

CountryId: {
    title: 'Country',
    options: 'Demo/GetCountryOptions',
    list: false
},
CityId: {
    title: 'City',
    dependsOn: 'CountryId', // Cities depend on countries.
    options: function (data) {
        if (data.source == 'list') {
            return 'Demo/GetCityOptions?countryId=0'; // Return URL for all cities.
        }
        return 'Demo/GetCityOptions?countryId=' + data.dependedValues.CountryId;
    }
}

A field can depend on multiple fields. Use a comma-separated string or an array:

dependsOn: 'ContinentalId,CountryId'
dependsOn: ['ContinentalId', 'CountryId']

The dependsOn option works in tandem with dependedValues, as shown in the example above.

display

Type: Function
Default: None
Description: Allows you to define a fully custom column for the table. The return value of this function is shown in the table.

Example:

TestColumn: {
    title: 'Test',
    display: function (data) {
        return '<b>test</b>';
    }
}

data.record: Contains the record of the row.
data.value: Contains the value of this column of the row, just a handy shortcut for data.record.colname
data.displayValue: Contains the display value of this column of the row if no function was defined, very handy if you just want to change colors or so

Use this for calculated columns, child tables, etc.

edit

Type: Boolean
Default: true
Description: Indicates whether this field is shown in the "edit record" form. Default is false for the key field and true for other fields.

explain

Type: String
Default: None
Description: Allows you to create an extra explanation for an input field (in the create/edit forms) just below the input field.

input

Type: Function
Default: None
Description: Allows you to define a fully custom input element for create/edit forms.

Example:

Name: {
    title: 'Name',
    input: function (data) {
        if (data.record) {
            return '<input type="text" name="Name" value="' + data.record.Name + '" />';
        } else {
            return '<input type="text" name="Name" value="Enter your name" />';
        }
    }
}

data.formType: Can be 'create' or 'edit'.
data.form: Reference to the parent form element.
data.inputField: The original input field (vanilla DOM element).
data.record: The editing record (for 'edit' forms).
data.value: The current value of the field.

The data.inputField can come in handy if you just want to prepend something to the input field but don't want to code the field itself again. As an example, here is a field called "files" that in the list (display) shows a list of uploaded files and in the create/edit shows this list before the files-input field:

files: {
    title: 'Files',
    type: 'file',
    inputAttributes: "multiple",
    searchable: false,
    sorting: false,
    display: function (data) {
        if (data.record && data.record['files']) {
            return data.record['files'];
        }
    },
    input: function (data) {
        if (data.record && data.record['files']) {
            let val = data.record['files'];
            val += data.inputField.outerHTML;
            return val;
        } else {
            return data.inputField;
        }
    }
}

Another example that adds the input field original value above the input itself:

description: {
    title: 'Description',
    type: 'textarea',
    list: false,
    input: function (data) {
        const container = document.createElement('div');
        const span = document.createElement('span');
        span.innerHTML = data.record['description'];
        container.appendChild(span);
        container.appendChild(data.inputField);
        return container.outerHTML;
    }
}

inputAttributes

Type: String
Default: None
Description: Adds html attributes to the input element for this field in create/edit forms. FTable does form validation (as a regular form) before submit, so if you set this to e.g. "required", the required attribute will be set to the input field.

MyTextField: {
    title: 'My phone is required',
    inputAttributes: "size='60' required"
}

inputClass

Type: String
Default: None
Description: Adds one or more CSS classes to the input element for this field in create/edit forms.

inputTitle

Type: String
Default: None
Description: Sets a different title for the field in create/edit forms. If not set, the title option is used.

key

Type: Boolean
Default: false
Description: Indicates whether this field is the primary key of the record. Every record must have one key field.
If key is true, create and edit default to false.
In the edit/create modals: if the key field is not editable, a hidden input is generated for it. If the key field is editable (by setting the edit option to true), the key's original value (the value before update) is posted to the server as ftRecordKey.

list

Type: Boolean
Default: true
Description: Indicates whether this field is shown in the table.

listClass

Type: String
Default: None
Description: Adds a CSS class to the table cell (<th> and <td>) for this field. Applied to columns in both header row and regular rows.

listClassEntry

Type: String
Default: None
Description: Adds a CSS class to the table body cell (<td>) for this field.

listClassHeader

Type: String
Default: None
Description: Adds a CSS class to the table header cell (<th>) for this field.

listEscapeHTML

Type: Boolean
Default: False
Description: if set to true, the value of the field will be escaped before showing it in the table. Might be useful for e.g. text and textarea fields.

options

Type: Object, Array, URL, or Function
Default: None
Description: Defines the source for an option list (e.g., combobox, radio buttons).

Defining an Object

PhoneType: {
    title: 'Phone type',
    options: { '1': 'Home phone', '2': 'Office phone', '3': 'Cell phone' }
}

Defining an Array (the most flexible)

PhoneType: {
    title: 'Phone type',
    options: [
        { Value: '1', DisplayText: 'Home phone' },
        { Value: '2', DisplayText: 'Office phone' },
        { Value: '3', DisplayText: 'Cell phone' }
    ]
}

or, if the values and displayed texts are identical:

PhoneType: {
    title: 'Phone type',
    options: ['1','2','3','4']
}

Defining an Array with optional extra data-attributes:

PhoneType: {
    title: 'Phone type',
    options: [
        { Value: '1', DisplayText: 'Home phone', Data: {'extra_attr1': 'value1', 'extra_attr2': 'value2' } },
        { Value: '2', DisplayText: 'Office phone' },
        { Value: '3', DisplayText: 'Cell phone' }
    ]
}

These data-values will be added as data-attributes to the select/radiobox items.

Defining a URL

PhoneType: {
    title: 'Phone type',
    options: '/Demo/GetPhoneTypes.php'
}

In this case an ajax request is made to the mentioned url. The server response should obey the following layout (with optional extra data-values):

{
    "Result": "OK",
    "Options": [
        { "DisplayText": "Home phone", "Value": "1" },
        { "DisplayText": "Office phone", "Value": "2" },
        { "DisplayText": "Cell phone", "Value": "3", "Data": {"extra_attr1": "value1", "extra_attr2": "value2" } }
    ]
}

A php example to create this:

    $stmt = $pdo->prepare($sql);
    $stmt->execute($params);
    $rows = $stmt->fetchAll(PDO::FETCH_ASSOC);
    $enhancedRows = array_map(function($row) {
        return [
            'Value' => $row['Value'],
            'DisplayText' => $row['DisplayText'],
            'Data' => [
                'extra_attr1' => $row['extra_attr1'],
                'extra_attr2' => $row['extra_attr2']
            ]
        ];
    }, $rows);

    header('Content-Type: application/json');
    echo json_encode([
        'Result' => 'OK',
        'Options' => $enhancedRows
    ]);

Defining a Function

PhoneType: {
    title: 'Phone type',
    options: function (data) {
        if (data.source == 'list') {
            return '/Demo/GetPhoneTypes.php?UserType=0';
        }
        return '/Demo/GetPhoneTypes.php?UserType=' + data.record.UserType;
    }
}

For optimization, FTable caches all option lists based on the URL and serves options from local cache if you use the exactly same URL. You can clear the cache if you call data.clearCache() method in your function.

IMPORTANT: FTable also uses this function to show the related field in the table for each shown record. This is because your record contains Value of the field, not DisplayText and FTable needs to show display text (instead of value) in the table. So, when data.source=='list', returning different URLs causes more than one download to list records in the table. This may be a major performance problem. So, as shown the sample above, return URL of all options while listing (data.source=='list') and return filtered options in edit/create forms (if you need).

You may want to return the data from server with an AJAX request. In this situation, you should get the data from server synchronously since you should return the options from the function. See demo and fetch async option.

All possible options:

data.source: Can be 'list', 'create', or 'edit'.
data.record: The related record.
data.dependedValues: Values of depended fields (if dependsOn is used).
data.clearCache(): This method is used to clear the cache for the currently returning URL. So, you can ensure that your options will be re-downloaded.
data.form: This field is used to get a reference to the create/edit form (as DOM element). It's valid if data.source is 'create' or 'edit'.

placeholder

Type: text
Default: None
Description: Allows an extra placeholder in the input field. If the type is checkbox/radiobox, the text will be shown underneath it

searchable

Type: Boolean
Default: True
Description: Indicates whether this column shows a search form in the toolbar if 'toolbarsearch' is set.

searchAttributes

Type: text
Default: none
Description: like inputAttributes , but only for the searchbar select-field. If not specified, inputAttributes will be used if present

searchDateFormat

Type: text
Default: none
Description: like dateFormat , but only for the searchbar date-field. If not specified, dateFormat will be used if present

searchPlaceholder

Type: text
Default: None
Description: Allows an extra placeholder in the searchbar input field. If not specified, the placeholder value will be taken, and if that's empty the text "Search..."

searchType

Type: Boolean
Default: empty (value of "type" is taken)
Description: the search type of a column is taken from the field type by default, but this allows to change that (so you can search via text on a select-field for example)

sorting

Type: Boolean
Default: true
Description: Indicates whether this column can be used to sort the table.

title

Type: String
Default: None
Description: The column header in the table and label in the forms for this field.

tooltip

Type: String
Default: None
Description: The column html title which is shown as a tooltip when hovering over it.

type

Type: String
Default: 'text'
Description: The data type for this field. Possible values:
- 'password': Shows a password input.
- 'textarea': Shows a textarea.
- 'date': Shows a date picker. If jquery datepicker or fdatepicker extension is not installed/loaded, a html5 datepicker is used. If a field is type date and jquery datepicker or fdatepicker is installed, you can also set the field option displayFormat: Format of date. See jQueryUI datepicker formats
- 'radiobutton': Shows a radio button list.
- 'checkbox': Shows a checkbox. If a field is checkbox, you can define additional field options:
  - 'values': Values for checked/unchecked states. Example: { '0' : 'Passive', '1' : 'Active' }. First value is for unchecked state, second value is for checked state.
  - 'label': By default, a checkbox's text changes when user changes the state of the checkbox. If you want to fix the text, you can set the label option for this field (string).
- 'hidden': Hides the field in the table. You may want to use the option defaultValue with hidden types, so the given default value is automatically set as value for the hidden field when the form is created.
- 'range','week','datetime-local',...: any valid html5 input-type
- 'datalist': this also needs the 'options' for its values

mydatalist: {
    title: 'My Datalist input',
    type: 'datalist', 
    options: ['Option 1', 'Option 2', 'Option 3']
}

visibility

Type: String
Default: 'visible'
Description: Controls the visibility of the column. Possible values:
- 'fixed': Always visible (cannot be hidden by the user).
- 'visible': Visible by default (can be hidden by the user).
- 'hidden': Hidden by default (can be shown by the user).
- 'separator': indicates this column is only used as a separator title in the column visibility menu (when right-clicking on the column headers)

width

Type: Percentage
Default: '10%'
Description: The width of the column in the table (e.g., '30%'). Ensure all column widths add up to 100%.

api_fieldoptions

FTable API Reference - Field Options

columnResizable

create

dateFormat

dateLocale

defaultValue

dependsOn

display

edit

explain

input

inputAttributes

inputClass

inputTitle

key

list

listClass

listClassEntry

listClassHeader

listEscapeHTML

options

Defining an Object

Defining an Array (the most flexible)

Defining an Array with optional extra data-attributes:

Defining a URL

Defining a Function

placeholder

searchable

searchAttributes

searchDateFormat

searchPlaceholder

searchType

sorting

title

tooltip

type

visibility

width

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

fTable Documentation

Getting Started

API reference

Tips

Examples

Clone this wiki locally