tips

fTable tips

Check if ftable is initialized

const myTable = document.getElementById('MyTableContainer');
if (myTable && myTable.ftableInstance) {
    console.log('fTable is initialized!');
} else {
    console.log('fTable is NOT initialized.');
}

So, it is easy to call an instance and do things:

const myTable = document.getElementById('MyTableContainer');
myTable.ftableInstance.editRecordByKey(42);

Or, simpler, keep a reference to the instance you created:

const table = new FTable('#MyTableContainer', { /*...*/ });
table.editRecordByKey(42);

Prevent row select on click

Normally, if a row contains a clickable element (like a link, button, ..), clicking on that element also selects the row if the selectOnRowClick-option is set. If you want to prevent this row select, give the element the class "norowselectonclick".

CSS: force columns

An example to use 2 columns for the create/edit dialogs:

.ftable-dialog-form {
    display: block;
    -moz-column-gap:40px;
    /* Firefox */
    -webkit-column-gap:40px;
    /* Safari and Chrome */
    column-gap:40px;
    -moz-column-count:2;
    /* Firefox */
    -webkit-column-count:2;
    /* Safari and Chrome */
    column-count:2;
}
.ftable-input-field-container {
    break-inside: avoid; /* Prevent breaking across columns */
    page-break-inside: avoid; /* Older browsers, mainly print */
    -webkit-column-break-inside: avoid; /* Safari, older Chrome */
}
@media (max-width: 600px) {
    .ftable-dialog-form {
        -moz-column-count:1;
        -webkit-column-count:1;
        column-count: 1;
    }
}