Skip to content

api_general

Jump to bottom
Franky Van Liedekerke edited this page Dec 17, 2025 · 9 revisions

FTable API Reference - General Options

How to Set General Options

General options are set when creating a new FTable instance. Unlike the jQuery version, there's no need to set global prototype options - each instance is configured independently.

Setting Options for a FTable Instance

Set options in FTable initialization code. For example, to disable column resizing:

document.addEventListener('DOMContentLoaded', function() {
    const table = new FTable('#MyTableContainer', {
        columnResizable: false, // Disable column resizing
        animationsEnabled: true,
        title: 'My Data Table',
        // Other options...
        actions: {
            listAction: '/api/data'
        },
        fields: {
            // Field definitions...
        }
    });
});

Creating a Configuration Template

If you want to reuse the same configuration across multiple tables, you can create a template:

const defaultFTableConfig = {
    columnResizable: false,
    animationsEnabled: false,
    csvExport: true,
    printTable: true
};

// Usage
const table1 = new FTable('#Table1', {
    ...defaultFTableConfig,
    title: 'Users Table',
    actions: { listAction: '/api/users' },
    fields: { /* user fields */ }
});

const table2 = new FTable('#Table2', {
    ...defaultFTableConfig,
    title: 'Products Table',
    actions: { listAction: '/api/products' },
    fields: { /* product fields */ }
});

List of General Options

animationsEnabled

  • Type: Boolean
  • Default: true
  • Description: Indicates whether FTable shows animations when creating, updating, or deleting a row.

closeOnOverlayClick

  • Type: Boolean
  • Default: true
  • Description: when a popup is shown, it can be closed by clicking 'outside' it (on the overlay). Setting this option to false prevents that, meaning you then have to click the close-sign or the cancel-button if you want to close a popup.

columnResizable

  • Type: Boolean
  • Default: true
  • Description: Indicates whether FTable allows users to resize data columns by dragging.

columnSelectable

  • Type: Boolean
  • Default: true
  • Description: Indicates whether FTable allows users to show/hide data columns by right-clicking the table header.

csvExport

  • Type: Boolean
  • Default: false
  • Description: Indicates whether FTable should provide CSV export functionality. If so, a button will be created on the toolbar. The text of that button can be changed by the localization string csvExport.

defaultDateFormat

  • Type: String
  • Default: 'Y-m-d'
  • Description: Default format of a date or datetime-local field if a datepicker is detected (fdatepicker currently) is present. See the format of the accordingly detected datepicker. If no datepicker is detected, this value is ignored, but see 'defaultDateLocale'

defaultDateLocale

  • Type: String
  • Default: None,
  • Description: Default locale used to display values for a field of type 'date' in case no specific datepicker is used. Example: 'nl-BE' or 'en-US'. Default is empty, meaning your browser locale is used (the same format as the input datepicker then).

defaultSorting

  • Type: String
  • Default: None
  • Description: Default sorting of the table. Example: 'Name ASC' or 'Name DESC'.

deleteConfirmation

  • Type: Boolean or Function
  • Default: true
  • Description: Controls the delete confirmation process. If true, the confirmation text is taken from the localization option messages.deleteConfirmation. If a function, it can customize the confirmation message and behavior.

Function example:

const table = new FTable('#MyTableContainer', {
    deleteConfirmation: function(data) {
        data.deleteConfirmMessage = 'Are you sure to delete person ' + data.record.Name + '?';
        // You can also set data.cancel = true to prevent deletion
        // Or data.deleteConfirm = false to skip confirmation dialog
    },
    // ... other options
});

Function argument properties:

  • row: A DOM element for the deleting row.
  • record: Actual deleting record. For example, you can get Name property of record as data.record.Name.
  • cancel: You can set data.cancel to true to cancel delete process (default value is false).
  • cancelMessage: If you cancelled delete process, you can show a message to user that explains cancellation reason.
  • deleteConfirm: A boolean value indicates whether to show a delete confirmation message or not (default value is true).
  • deleteConfirmMessage: If confirmation enabled, you can set a custom confirmation message.

forcePost

  • Type: Boolean
  • Default: true
  • Description: if true, all requests from fTable are made via POST, not GET. Set to false to have listActions done via GET

gotoPageArea

  • Type: String
  • Default: 'combobox'
  • Description: Determines how to show the 'go to page' input. Possible values:
    • 'combobox': Show a combobox with all pages.
    • 'textbox': Show a text box.
    • 'none': Do not show the input.

listCache

  • Type: Integer
  • Default: 30000
  • Description: the amount of time (in ms) the table caches list queries (also applicable on search results)

listQueryParams

  • Type: Object or Function
  • Default: Empty object
  • Description: A list of parameters to be used on every load call.

Examples:

// Static parameters
const table = new FTable('#MyTableContainer', {
    listQueryParams: {
        'action': "my_action",
        'other_param': "other_value"
    },
    // ... other options
});

// Dynamic parameters (evaluated on each load)
const table = new FTable('#MyTableContainer', {
    listQueryParams: function() {
        return {
            'action': "my_action",
            'search_person': document.getElementById('search_person').value,
            'search_groups': document.getElementById('search_groups').value
        };
    },
    // ... other options
});

loadingAnimationDelay

  • Type: Integer
  • Default: 500
  • Description: Delay (in milliseconds) before showing the 'loading...' animation.

logLevel

  • Type: string or integer
  • Default: warning
  • Description: limit fTable console messages to the mentioned level. Possible values:
    • 'debug'
    • 'info'
    • 'warn'
    • 'error'

messages

  • Type: Object
  • Description: Used to localize fTable. See localization.

multiselect

  • Type: Boolean
  • Default: false
  • Description: Indicates whether fTable allows users to select multiple rows at once.

multiSorting

  • Type: Boolean
  • Default: false
  • Description: Indicates whether fTable allows users to sort by multiple columns. If this option is set to true, User can perform multiple sorting by holding CTRL key. If user selects multiple column for sorting, fTable sends column names seperated by comma as like 'Name DESC,BirthDay ASC'. See listAction for more information.

openChildAsAccordion

  • Type: Boolean
  • Default: false
  • Description: If true, fTable automatically closes other open child tables when a new one is opened.

paging

  • Type: Boolean
  • Default: false
  • Description: Indicates whether fTable uses paging. See listAction for more information.

pageList

  • Type: String
  • Default: 'normal'
  • Description: Determines the type of page list. Possible values:
    • 'minimal': Show only first, previous, next, and last links.
    • 'normal': Show page numbers in addition to 'minimal'.

pageSize

  • Type: Number
  • Default: 10
  • Description: Number of rows per page. pageSize option can be changed later as like below:
$('#MyTableContainer').ftable('option', 'pageSize', 20);

pageSizes

  • Type: Array of Numbers
  • Default: [10, 25, 50, 100, 250, 500]
  • Description: Determines the options in the 'page size change combobox'.

pageSizeChangeArea

  • Type: Boolean
  • Default: true
  • Description: Determines whether the 'page size change combobox' is visible.

printExtraStyles

  • Type: String
  • Default: none
  • Description: extra CSS (inline) to be added to the print dialog if you want to change the print layout

printMode

  • Type: String
  • Default: iframe
  • Description: Which method should be used to open the print dialog. Possible values: iframe or popup

printTable

  • Type: Boolean
  • Default: false
  • Description: Indicates whether fTable should do provide print Table functionality. If so, a button will be created on the toolbar. The text of that button can be changed by the localisation string printTable.

searchDebounceMs

  • Type: Integer
  • Default: 300
  • Description: The debounce time for searhing when using the toolbarsearch option. This adds a delay before executing the search, thus avoiding many server side queries.

saveUserPreferences

  • Type: Boolean
  • Default: true
  • Description: Indicates whether fTable saves/loads user preferences (e.g., resized columns).
    Saving/restoring preferences are based on a hashed value that is generated using tableId, all column names and total column count. So, changing columns will change the hash and user preferences are reset.

saveUserPreferencesMethod

  • Type: String
  • Default: localstorage
  • Description: Indicates how fTable saves/loads user preferences. Possible values:
    • 'localstorage': Store user preferences in browser local storage (default and preferred)
    • 'cookie': Store user preferences in cookies. You need to load the jQuery js-cookie plugin first for this to work

selecting

  • Type: Boolean
  • Default: false
  • Description: Indicates whether fTable allows users to select rows.

selectingCheckboxes

  • Type: Boolean
  • Default: false
  • Description: Indicates whether fTable shows a checkbox column for selecting rows.

selectOnRowClick

  • Type: Boolean
  • Default: true
  • Description: Indicates whether users can select a row by clicking anywhere on it. If a row contains a clickable element (like a link, button, ..), clicking on that element also selects the row if this option is set. If you want to prevent the row select in this case, give the element the class "norowselectonclick".

sorting

  • Type: Boolean
  • Default: false
  • Description: Indicates whether fTable allows sorting.

sortingInfoSelector

  • Type: String
  • Default: ''
  • Description: if not empty, it should be a jquery selector where the current applied table sorting will be displayed. The localized messages sortingInfoPrefix and sortingInfoSuffix are used too.

tableId

  • Type: String
  • Default: None
  • Description: A unique identifier for the table, used for saving/restoring user preferences.

tableReset

  • Type: Boolean
  • Default: false
  • Description: If true, a button will be shown next to the sorting info to reset the complete table to its default settings. Only works if sortingInfoSelector is set.

title

  • Type: String
  • Default: None
  • Description: A string shown at the top of the table.

toolbar

  • Type: Object
  • Default: 
    toolbar: {
    items: []
}
  • Description: Controls the fTable toolbar and its items. By default, no items are on the toolbar. fTable adds the 'Add new record' item if you define createAction, the CSV export item (see csvExport and/or the print item (see printTable). Using this option, you can add custom items

Example:

toolbar: {
    items: [{
        icon: '/images/excel.png',
        text: 'Export to Excel',
        click: function () {
            // Custom code...
        }
    }]
}

icon, text and click are optional. But you must define 'icon' and/or 'text', otherwise fTable can not show the toolbar item. In the click function, you can write your custom javascript codes.

You can also use some additional options for each toolbar item:

buttonClass: used to add custom css classes to the toolbar item.
buttonId: used to set a custom ID on the toolbar item. buttonTextClass: used to add custom css classes to the text of the toolbar item button.
buttonTextId: used to set a custom ID on the text of the toolbar item button. tooltip: used to set a tool tip for this item. fTable sets HTML 'title' attribute.

The items added via the toolbar option are added before any items added by fTable itself.

toolbarreset

  • Type: Boolean
  • Default: false
  • Description: Indicates whether the toolbar should show the seach reset button. If 'toolbarsearch' is not set, this setting is ognored

toolbarsearch

  • Type: Boolean
  • Default: false
  • Description: Indicates whether the toolbar should show a seach form per field. This can be overriden per field via the 'searchable' option

This passes the params 'q' and 'opt' to the listAction url. A simple example in php on how to use these:

    global $pdo;

    $q = $_POST['q'] ?? [];
    $opt = $_POST['opt'] ?? [];
    $where = '';
    $params = [];

    // Validate and process search parameters
    if (!empty($q) && is_array($q) && is_array($opt) && count($q) === count($opt)) {
        foreach ($opt as $i => $field) {
            $where_array[] = "`" . str_replace("`", "``", $field) . "` LIKE ?";
            $params[] = '%' . addcslashes($q[$i], '%\\') . '%';
        }
    }

    if (!empty($where_array)) {
            $where = ' WHERE ' . implode(' AND ', $where_array);
    }
    ....
    $stmt->execute([$params]);

fTable Documentation

Getting Started

API reference

Tips

Examples

Clone this wiki locally