Tabulator Modules are my opinionated modules for writing faster and less code when using the [Tabulator](https://tabulator.info/) library.
npm install tabulator-modulesTabulator Modules are my opinionated modules for writing faster and less code when using the Tabulator library.
#### Option #1: In the browser
``html`
#### Option #2: In Node
`shell`Install from node package manager
npm i tabulator-modules
`javascript`
// load the library
require('tabulator-modules');
REQUIRED: In order to use this library you must replace the default new Tabulator(element, config) with Tabulator.Create(element, config). The signature is the same, you are just copying and pasting Tabulator.Create to replace new Tabulator in your code where you want to use this library. Both setups will work, but the default new Tabulator(element, config) won't run the Tabulator Modules code on that particular table.
OPTIONAL: A third argument can be passed to Tabulator.Create to set a namespace for subsequent events. This can be useful for when you want events to be filtered for certain situations and not simply be global. The default namespace is all. Read more.
`javascript
// This setup ignores the Tabulator Modules
var table = new Tabulator("#example-table", {
data: [...],
columns: [
{ ... },
{ ... },
{ ... },
...
],
});
// This setup uses the Tabulator Modules
var table = Tabulator.Create("#example-table", {
data: [...],
columns: [
{ ... },
{ ... },
{ ... },
...
],
});
`
This library adds custom formatters on top of the built-in formatters like money, tickCross, star, etc.
These new custom formatter provided in the library are...
* Arguments
* Takes in any type of value and outputs a string representation of the value
* for example, {a: 1, b: 2, c: 3, 3: 4} becomes
* Aliases: args, argument, arguments, params, parameter, parameters
* Boolean
* Takes in truthy or falsey values and outputs a tickCross
* Aliases: bool, boolean, tickCross
* Duration
* Displays, and converts, a formatted and human-readable number representing time
* Aliases: duration, minDuration, maxDuration, timeMs, minTimeMs, maxTimeMs
* Files
* Takes in an object, or array of objects, specifically formatted to display urls
* Aliases: file, files
* List
* Gets all the values in a column and create a header filter with a dropdown of those values
* Aliases: list
* List of Arrays
* Very similar to , but is used for a value can be an array, it will parse the array for individual values
* Aliases: list[]
* Min/Max
* When values in a column are numbers, it will create a header filter of min and/or max inputs
* Aliases: minMax, min, max
* Min/Max for Array length
* Same as minMax, but for when values are arrays. It will use the length of the array as the min/max size comparison
* Aliases: minMax[], min[], max[]
* Min/Max for Object Keys
* Same as minMax, but for when values objects. It will use the number of object keys as the min/max size comparison
* Aliases: minMax{}, min{}, max{}
* Number
* Filters and sorts values as numbers
* Aliases: number, num, int, integer
* Object
* Takes complex objects are values, and represents, filters and sorts them as strings
* Aliases: object, obj, compound
* RegExp
* Used for when teh values are regex expressions. The header filter will be a matching test case for regex expression
* Aliases: regex, RegExp
* Strings
* Advanced options for formatting for strings values. text provides additional advanced filtering. html is the same as test with support of html chars
* Aliases: string, str
* Aliases: text
* Aliases: html
* Time Ago
* Takes in a Unix timestamp (in seconds) and outputs a human-readable string representing how long ago that timestamp was
* Aliases: timeAgo, minTimeAgo, maxTimeAgo
* Urls
* Takes in value that is a url, object representation of a url, or an array of urls/objects, and converts them to links
* Aliases: url, urls---
Arguments
Displays a string shorthand representation of value. Designed to provide a short text description of a variable or argument along its type for styling. So instead of showing an entire array of 100 items, the user represents that as a succinct
array[100]Filtering and Sorting is done on the text representation, not the value itself.
$3
, argument, arguments, params, parameter, parameters$3
javascript
formatterParams = {
type: 'string', // null|string - if set, will force this value to any items with missing types. Defaults to null
prefix: '', // string - text displayed before the output. Defaults to
suffix: '
join: '
', // string - if value is a array of args, then they are join by this. Defaults to "\n"
modify: false, // false|function - function that can alter the text before processing. Defaults to
textLimit: false, // integer|boolean - length of the max size of the cell value before truncating. Defaults to
moreText: '...', // string - ellipsis text after truncated text. Defaults to
htmlChars: false, // boolean - should this convert html entities to be seen in the output. Defaults to };
headerFilterFuncParams = {
strict: false, // boolean - setting this to falses make the filter comparison case-insenstive. Defaults to
};
$3
Both single args object and an array of args objects are supported.$3
By default, it will convert any value(s) to a human-readable string that will apply a html formatting that will allow the user to apply css to delineate certain situations. You can have a single argument, or an array of arguments. If it is an array, it will be joined by the
formatterParams.join setting, which defaults to \nThis will truncate a long string if the
is set. This will also convert a string to HTML entities for the title tag attribute.`javascript
const input = { a: 1, b: 2, c: 3, 3: 4 }, output = object{4};
const input = [[1, 2, 3]], output = array[3];
const input = [null], output = null;
const input = true, output = true;
const input = Infinity, output = Infinity;
const input = 'abc"def', output = abc"def;
const input = 'abcdefghijklmnopqrstuvwxyz',
output = abcdefghijkl...;
// etc.
`There are a few gotchas to be aware with the setup above. Since this accepts both a single argument and an array of arguments, if you want to force a single argument to be of type array, you must set the value to be an array of array (like above). Otherwise, it will treat it as multiple arguments (like below).
Also,
and undefined values result in an empty string. If you want to force the conversion to arguments you must, again, wrap it in an array (like above). Otherwise, it will act as if there are no arguments set.`javascript
const input = null, output = ;
const input = [1, 2, 3], output = 1
2
3;
`If an object is set with
and type keys, it will use that information directly with no variable conversion. This always you to set custom type and text values.`javascript
const input = { type: 'array', text: 'array[5]' }, output = array[5];
const input = { type: 'object', text: 'WP_Post{72}' }, output = WP_Post{72};
const input = { type: 'callable', text: 'Closure()' }, output = Closure();
const input = [{ type: 'string', text: 'a' }, { type: 'integer', text: 0 }],
output = a
0;
// etc.
`These values are strictly arbitrary. It simply creates a span tag and populates the
, data-type and inner html. It is up to the uesr to decide the css styling for these situations. Examples would be...`css
.tabulator-cell [data-type] {
white-space: pre;
display: block;
font-weight: bold;
text-overflow: ellipsis;
overflow: hidden;
}.tabulator-cell [data-type="null"] {
color: gray;
text-transform: uppercase;
}
.tabulator-cell [data-type="boolean"] {
color: purple;
text-transform: uppercase;
}
.tabulator-cell [data-type="string"] {
color: green;
}
.tabulator-cell [data-type="some_random_custom_text"] {
opacity: .5;
}
`---
Boolean
Formatter: same as
but adds formatterParams: allowEmpty and allowTruthy to trueSorter: set to
Filter: set to
with headerFilterParams: tristate to true$3
, boolean, tickCross$3
None
$3
or any truthy or falsey value$3
Same as
tickCross---
Duration
This is the same as the
formatter, but it has extra formatter params for displaying time durationsAdds the
minMaxFilterEditor DOM elements seen here: https://tabulator.info/examples/#filter-headerminDuration only shows the min DOM filtermaxDuration only shows the max DOM filter$3
duration, minDuration, maxDuration$3
javascript
formatterParams = {
unit: 'ms', // string - unit of measurement. Defaults to ms
prefix: '', // string - prefix text to display in front of value. Defaults to empty string
suffix: ' ms', // string - suffix tex to display after value. Deafults to + $unit
precision: 2, // integer - number of decimal precisio to display. Defaults to 2
bottomSum: true, // boolean - show sum of the entire dataset at the bottom of the column. Defaults to
};
bottomCalcParams = {
prefix: '$ ', // string - text to display before the bottomSum. Defaults to
suffix: ' ms', // string - text to display after the bottomSum. Defaults to
locales: 'en-US', // string|undefined - toLocaleString()'s locales string as a BCP 47 language tag. Defaults to
options: { style: 'currency' }, // object - toLocaleString()'s options object adjusting the output format. Defaults to
}
$3
$3
javascript
const input = 123.456789, output = 123.46 ms;
`---
Files
An object, or an array of objects, with
and url keys. text represents the text visible to the user and url represents a link-protocol url that makes it possible to go directly to a line and file in an IDE.$3
file, files$3
javascript
formatterParams = {
className: '', // string - class(es) to be added to the link tag
join: '
', // string - if an array of files, then this is how they should be joined. Defaults to |
};
headerFilterFuncParams = {
strict: false, // boolean - setting this to false makes the filter comparison case-insenstive. Defaults to
};
$3
$3
javascript
const input = { url: '#', text: 'abc' }, output = abc;
const input = [{ url: '#', text: 'abc' }, { url: '#', text: 'def' }], output = abc | def;
`---
List
Same as
editor but for headerFilter and adds headerFilterParams: clearable and valuesLookup to true$3
$3
None
$3
$3
Default Tabulator functionality
---
List of Arrays
Same as
formatter, but instead of one value, this allows for values to be an array of values. This can parse the array and add them to the filter list individually.`javascript
const data = [
'a',
['b', 'c'],
'c',
['d'],
['a', 'c', 'e'],
];
const filterListChocies = ['a', 'b', 'c', 'd', 'e'];
`$3
$3
None
$3
$3
Default Tabulator functionality
---
Min/Max
Adds the
DOM elements seen here: https://tabulator.info/examples/#filter-headermin only shows the min DOM filtermax only shows the max DOM filter$3
minMax, min, max$3
javascript
formatterParams = {
bottomSum: true, // boolean - show sum of the entire dataset at the bottom of the column. Defaults to false
};
bottomCalcParams = {
prefix: '$ ', // string - text to display before the bottomSum. Defaults to
suffix: ' ms', // string - text to display after the bottomSum. Defaults to
locales: 'en-US', // string|undefined - toLocaleString()'s locales string as a BCP 47 language tag. Defaults to
options: { style: 'currency' }, // object - toLocaleString()'s options object adjusting the output format. Defaults to
}
$3
$3
Default Tabulator functionality
---
Min/Max for Array length
Same as
expect this accepts an array as the value and does the minMax sorting and filtering against the number of items in the array.$3
minMax[], min[], max[]$3
javascript
formatterParams = {
showPopup: true, // boolean|integer|function|regex - show full stringified version of the value in a popup on click. Defaults to false
popupModify: false, // false|function - function that can alter the popup text before processing. Defaults to
popupTextLimit: false, // integer|boolean - length of the max size of the popup text before truncating. Defaults to
popupMoreText: false, // string - ellipsis text after truncated text. Defaults to
popupHtmlChars: false, // boolean - should this convert html entities to be seen in the output. Defaults to
popupWhiteSpace: 'normal', // string - type of white-space css style. Defaults to
popupSpace: false, // number|string|null - used to insert white space into the output JSON string for readability purposes. Defaults to 4
popupPrefix: false, // Defaults to
popupSuffix: false, // Defaults to
};
$3
$3
javascript
const input = [1, 2, 3], output = 3; // because the array length is 3
`---
Min/Max for Object Keys
Same as
expect this accepts an object as the value and does the minMax sorting and filtering against the number of keys in the object.$3
minMax{}, min{}, max{}$3
javascript
formatterParams = {
showPopup: (content, params, cell, onRendered, e) => content !== '', // boolean|integer|function|regex - show full stringified version of the value in a popup on click. Defaults to false
popupModify: false, // false|function - function that can alter the popup text before processing. Defaults to
popupTextLimit: false, // integer|boolean - length of the max size of the popup text before truncating. Defaults to
popupMoreText: false, // string - ellipsis text after truncated text. Defaults to
popupHtmlChars: false, // boolean - should this convert html entities to be seen in the output. Defaults to
popupWhiteSpace: 'normal', // string - type of white-space css style. Defaults to
popupSpace: false, // number|string|null - used to insert white space into the output JSON string for readability purposes. Defaults to 4
popupPrefix: false, // Defaults to
popupSuffix: false, // Defaults to
};
$3
$3
javascript
const input = { a: 1, b: 2, c: 3, d: 4, e: 5 }, output = 5; // because there are 5 keys: a, b, c, d and e
`---
Number
Sorter: set to
Filter: set to
$3
, num, int, integer$3
None
$3
$3
Default Tabulator functionality
---
Object
This will stringify an object for human-readable representation. However, this can be changed to only show the number of keys in the object with the
formatter param.it is sorted and filtered by the formatted text.
$3
object, obj, compound$3
javascript
formatterParams = {
// Cell
showKeys: true, // boolean - wheather or not to show the number of object keys instead of the stringified version of the object. Default to false
modify: false, // false|function - function that can alter the text before processing. Defaults to
textLimit: false, // integer|boolean - length of the max size of the cell value before truncating. Defaults to
moreText: '...', // string - ellipsis text after truncated text. Defaults to
htmlChars: false, // boolean - should this convert html entities to be seen in the output. Defaults to
whiteSpace: 'normal', // string - type of white-space css style. Defaults to
space: false, // number|string|null - used to insert white space into the output JSON string for readability purposes. Defaults to 0
prefix: false, // Defaults to
suffix: false, // Defaults to
join: '
', // string - if an array of objects, then this is how they should be joined. Defaults to
// Popup - popup settings will inherit from the cell settings, but can be overritten with the keys below
showPopup: /long text/i, // boolean|integer|function|regex - show full stringified version of the value in a popup on click. Defaults to
popupModify: false, // false|function - function that can alter the popup text before processing. Defaults to
popupTextLimit: false, // integer|boolean - length of the max size of the popup text before truncating. Defaults to
popupMoreText: '...', // string - ellipsis text after truncated text. Defaults to
popupHtmlChars: false, // boolean - should this convert html entities to be seen in the output. Defaults to
popupWhiteSpace: 'normal', // string - type of white-space css style. Defaults to
popupSpace: false, // number|string|null - used to insert white space into the output JSON string for readability purposes. Defaults to 4
popupPrefix: false, // Defaults to
popupSuffix: false, // Defaults to
};
headerFilterFuncParams = {
strict: false, // boolean - setting this to falses make the filter comparison case-insenstive. Defaults to
};
$3
$3
javascript
const input = { a: 1, b: 2, c: 3, 3: 4 }, output = {"3":4,"a":1,"b":2,"c":3};
const input = [1, 2, 3], output = 1
2
3;
const input = true, output = true;
const input = Infinity, output = Infinity;
// etc.
`---
RegExp
This is when the cell value, itself, is a regex statement, and we want to filter with a test value.
> NOTE: this is the opposite of this library's custom
filter. The regex filter is when you want to run a regex test against a row value.
> To do that, use { headerFilterFunc: Tabulator.filters.regex } in your config instead$3
regex, RegExp$3
None
$3
$3
Default Tabulator functionality
---
Strings
For display strings.
and html is used for longer strings. It aligns the text to the left and adds the Advanced Filtering Operators. html also sets htmlChars to true$3
, str, text, html$3
javascript
formatterParams = {
// Cell
modify: false, // false|function - function that can alter the text before processing. Defaults to false
textLimit: false, // integer|boolean - length of the max size of the cell value before truncating. Defaults to
moreText: '...', // string - ellipsis text after truncated text. Defaults to
htmlChars: false, // boolean - should this convert html entities to be seen in the output. Defaults to
prefix: false, // Defaults to
suffix: false, // Defaults to
join: '
', // string - if an array of objects, then this is how they should be joined. Defaults to
// Popup - popup settings will inherit from the cell settings, but can be overritten with the keys below
showPopup: 25, // boolean|integer|function|regex - show full stringified version of the value in a popup on click. Defaults to
popupModify: false, // false|function - function that can alter the popup text before processing. Defaults to
popupTextLimit: false, // integer|boolean - length of the max size of the popup text before truncating. Defaults to
popupMoreText: '...', // string - ellipsis text after truncated text. Defaults to
popupHtmlChars: false, // boolean - should this convert html entities to be seen in the output. Defaults to
popupWhiteSpace: 'normal', // string - type of white-space css style. Defaults to
popupSpace: false, // number|string|null - used to insert white space into the output JSON string for readability purposes. Defaults to 4
popupPrefix: false, // Defaults to
popupSuffix: false, // Defaults to
};
$3
$3
javascript
const input = 'abcdefghijklmnopqrstuvwxyz', formatterParams = { textLimit: 3 }, output = abc...;
`---
Time Ago
Similar to
but this shows the time since a reference date. Can be used to show the last time something was updated.> NOTE: The timestamps are done in seconds, not milliseconds.
>
Date.now() returns milliseconds in JavaScript.
> So if you are using JavaScript to get the time, make sure it is converted to seconds in the table data.
> If you're getting your times from another language, like PHP, you should not have to convert it.Adds the
minMaxFilterEditor DOM elements seen here: https://tabulator.info/examples/#filter-headerminTimeAgo only shows the min DOM filtermaxTimeAgo only shows the max DOM filter$3
timeAgo, minTimeAgo, maxTimeAgo$3
javascript
formatterParams = {
startTime: Date.now() / 1000, // integer|function - Unix timestamp is in seconds to compare against. Defaults to Date.now() / 1000
round: 'round', // string - the JavaScript object method to format the time with. Defaults to floor
};
headerFilterFuncParams = {
startTime: () => (Date.now() / 1000), // integer|function - Unix timestamp is in seconds to compare against. Defaults to
searchBy: 'h', // string - reduce seconds difference into another unit of measurement. Defaults to
// searchBy options: => seconds, m => minutes, h => hours, d => days, y => years
};
`$3
This should be a timestamp in seconds$3
`javascript
const input = Date.now() / 1000 - 120, output = 2m; // 2m stands for 2 minutes since 120 seconds ago is equal to 2 minutes
`---
Urls
Converts a url into a clickable link. It accepts a single url or an array of urls.
Objects representing a url is also supported. An object must have at least an
key. Supported keys are href, className and text keys.
An attr key is also supported and becomes the html attributes for the link tag. For example, attr: { download: 'download' } will add the download attribute to the link tag.
If the url is represted as an object, the values can also be functions. A function will recieve arguments (cell, origUrl, normalizedUrl), where cell is the Tabulator component, origUrl is the original url object, and normalizedUrl is the url converted to a standardized object url. So if origUrl is /user, then normalizedUrl will be { text: '/user', attr: {href: '/user'} }.$3
url, urls$3
javascript
formatterParams = {
className: '', // string - class(es) to be added to the link tag. Defaults to ''
join: '
', // string - if an array of files, then this is how they should be joined. Defaults to |
};
$3
as a valid url, url object, or array of valid urls/url objects$3
`javascript
const input = '/abc', output = /abc;
const input = ['/abc', '/xyz'], output = /abc
/xyz;
const input = { text: 'click-me', href: '/page', className: 'some-class', attr: { 'data-id': () => 5 } }, output = click-me;
`---
Additional Details
Advanced Filtering Operators
The
, args, files and minMax{} formatters use advanced filtering operators that has reserved keywords for greater control.Keywords searches are split on spaces. So
search1 search2 is split into two searches, search1 AND search2. If either checks returns false then the filter returns false.| Operator | Description | Example |
|--------------|-------------------------------------------------|---------------------------------|
| regex: | regex search (no modifiers) | regex:^wp_.*_filter$ |
| i: | case insensitive | i:MacGruber |
| regex:i: | regex search (with case insensitive modifier) | regex:i:select\s+\w+\.\*\s+from |
| not: | text not in value | not:NULL |
| - | same as
not: | -NULL |
| + | same as having no operator (default) | +/home/ |
| ~ | same as having no operator, but case insenstive | +/home/i |$3
`text
+back -quarter // include every value that has back unless it also has quarter
back -quarter // same as above. the is the default operator, so its only there for readability
`$3
Since operators are space delimited, if you need a space in your search, you must surround your search with quotes.
text
regex:"c.*land rocks!" // will match cleveland rocks!
And if you need spaces AND double quotes in your search, you can escape the double quotes.
text
regex:"c.*land \"rocks\"" // will match cleveland "rocks"
Formatting Strings
The
and string formatters make extra formatterParams available for formatting text.These are:
textLimit, moreText, htmlChars, prefix and suffixIn addition,
also has whiteSpace and space params when stringify-ing objectsPopups
In addition to
object and string, minMax[] and minMax{} also allow for popUp text for long values.These are the same
formatterParams as above, but these keys start with "popup":
popupTextLimit, popupMoreText, popupHtmlChars, popupWhiteSpace, popupSpace, popupPrefix and popupSuffix$3
To activate a popup, set the
key to a truthy value or statement or function.showPopup accepts four different types of values:
boolean, integer, function or regex.#### Boolean Type
Simply a static true or false or all cells in that column.
#### Integer Type
The length of the cell value (as a string) that will trigger a popup. So if
formatterParams.showPopup = 3, then any cell value over 3 characters will trigger a popup. If the cell is 3 characters or less, then that cell won't have a popup.#### RegExp Type
A regular express that is tested against each cell to determine if it should have a popup.
formatterParams.showPopup = /^select/i would show a popup for any cell that starts with select (like a SQL statement).#### Function Type
This function gets called on each cell value to determine if it should show a popup. The value returned should be a boolean. For example:
formatterParams.showPopup = (text, formatterParams, component, onRendered, e) => text.length > 25 || text[0] === '$'Custom Functions Available
In case the opinionated modules aren't exactly what you want, the vast majority of the config options can be overwritten. That is to say, this library only uses its default config setup only if the user does not set that key in the column config. However, if that isn't enough flexibility, you can customize your own modules using the same functions that make up the opinionated modules. Most functions in the library are available off the global
object.$3
Available under the
Tabulator.formatters object. These work with the formatter column config key`javascript
Tabulator.formatters = {
args: Function, // Used By: args
array: Function, // Used By: minMax[]
files: Function, // Used By: files
object: Function, // Used By: object, minMax[]
timeAgo: Function, // Used By: timeAgo
urls: Function, // Used By: urls
};
`$3
Available under the
object. These work with the headerFilterFunc column config key`javascript
Tabulator.filters = {
advanced: Function, // Used By: object, files (also used in args filter)
args: Function, // Used By: args
array: Function, // Used By: minMax[]
minMax: Function, // Used By: minMax, duration
object: Function, // Used By: minMax{}
regex: Function, // Used By: none
timeAgo: Function, // Used By: timeAgo
};
`$3
Available under the
object. These work with the sorter column config key`javascript
Tabulator.sorters = {
args: Function, // Used By: args
array: Function, // Used By: minMax[], list[]
object: Function, // Used By: object, minMax{}, list, files (also used in args sorter)
};
`$3
Available under the
object. These work with the clickPopup column config key`javascript
Tabulator.popups = {
object: Function, // Used By: string, object, minMax[], minMax{}
};
`$3
MinMax Header Filter Function DOM elements. Works with the
column config key.`javascript
Tabulator.html.minMax = Function; // Module: minMax, minMax[], minMax{}, duration, timeAgo
`> NOTE: Also uses the
column config. You can optionally set the min value and max value (with number values) of the input field. As well as if both the min and max inputs should be displayed or not (keys: filterMin and filterMax with boolean values). See the minMax module code for more info.List Lookup. Works with the
headerFilterParams.valuesLookup column config key`javascript
Tabulator.html.lists = Function; // Module: list[]
`$3
Since this library uses some ES5 Util functions. These are also made available on the global
object. For example: Tabulator.helpers.arrayColumn(...args)The available functions are...
javascript
arrayColumn(array, columnKey = null, indexKey = null)
compare(a, b)
compare.upperFirst(a, b)
compare.lowerFirst(a, b)
compare.insensitive(a, b)
getFromObjPath(obj, path)
getKey(object, key)
getKeys(object, path)
getValues(object)
hasKey(object, key)
hasKeys(object, path)
isInteger(input)
isObject(input)
safeParse(input, forceParse = true)
safeStringify(input, replacer = null, space = null, forceParse = false)
toAssociativeArray(input)
toHtmlEntities(input)
truncate(input, length, suffix = '…')
`jQuery Small Pub/Sub
jQuery Small Pub/Sub is an OPTIONAL dependency. If jQuery Small Pub/Sub is not loaded, this library will still work, its just these custom events won't fire. There are currently 4 custom events to subscribe to...
As of v1.2 all of these events are namespaced as well. So if you want to subscribe to the
hook, but only when the namespace was set to my-custom-project, you can do so with the my-custom-project/tabulator-table-setup hook. The namespaced hook runs after the global (or non-namespaced) hook.> Remember: the default namespace is
all, but that is not the same as the global hook (or not having a namespace).`javascript
/**
* Table Setup (before the Tabulator table is created)
*
* @param object $options - options argument from new Tabulator(element, options, namespac)
* @param string|object $element - element argument from
* @param string $namespace - namespace to filter events by
* @return object - the modified $options object
*/
jQuery.subscribe('tabulator-table-setup', function(options, element, namespace = 'all') {
// Do something that modifies the options variable
options.paginationSize ??= 10;
options.movableColumns ??= true;
return options
});/**
* Column Setup (before the custom modules are run)
*
* @param object $column - column config object
* @param string|object $data - options.data value
* @param string|object $initial - initial column config object (incase it was modified by another listener)
* @param object $options - options argument from
* @param string|object $element - element argument from
* @param string $namespace - namespace to filter events by
* @return object - the modified $column object
*/
jQuery.subscribe('tabulator-column-setup', function(column, data, initial, options, element, namespace = 'all') {
// Do something that modifies the column variable
if (['boolean', 'tickCross'].includes(initial.formatter)) {
column.width ??= 75;
}
return column
});/**
* Column Setup (after the custom modules are run)
*
* @param object $column - column config object
* @param string|object $data - options.data value
* @param string|object $initial - initial column config object (incase it was modified by another listener)
* @param object $options - options argument from
* @param string|object $element - element argument from
* @param string $namespace - namespace to filter events by
* @return object - the modified $column object
*/
jQuery.subscribe('tabulator-column-setup-after', function(column, data, initial, options, element, namespace = 'all') {
// Do something that modifies the column variable
if (['boolean', 'tickCross'].includes(initial.formatter)) {
column.headerWordWrap ??= true;
}
return column
});/**
* Table Created (after the Tabulator table is created)
*
* @param object $table - The
instance after its initialized
* @param string|object $element - element argument from new Tabulator(element, options, namespace)
* @param object $options - options argument from
* @param string $namespace - namespace to filter events by
* @param mixed ...parameters - any other parameters passed to get appended to the event args
* @return void
*/
jQuery.subscribe('tabulator-table-created', function(table, element, options, namespace, ...parameters) {
// Do something, like store the reference to table object somewhere in your app for later use
someVariable[element] = table;
});
``