Methods to format table cells for sorting.
Provides methods to sort table instances.
The shared functionality of all `o-table` variants.
Initialises an `o-table` component without responsive behaviour.
Initialises an `o-table` component with "flat" responsive behaviour.
Initialises an `o-table` component with "overflow" responsive behaviour.
Initialises an `o-table` component with "scroll" responsive behaviour.
Constructs an o-table component.
The `formatFunction` take the table cell HTMLElement, and converts it to a String or Number of sorting.
function
The custom formatter accepts a table cell and returns a sort value for that cell. This could be used to define a custom sort order for an unsupported format, such as emoji's, or a new date format.
function
mySortFormatter.setFormatter('emoji-time', (cell) => {
const text = cell.textContent.trim();
if (text === '🌑') {
return 1;
}
if (text === '🌤️️') {
return 2;
}
return 0;
});Sort the given table.
Set a custom cell formatter for a given data type.
Update the o-table instance with rows added or removed dynamically from the table. Applies any existing sort and filter to new rows.
Updates the dom to account for row updates, including when their sort order changes, or any filter is applied. E.g. changes the dom order, applies aria-labels to hidden rows, updates the table height to efficiently hide them.
Note this does not calculate which rows should be sorted or filtered,
and does not look for new rows added to the dom. See updateRows.
Filter the table and render the result.
Gets a table header for a given column index.
Sort the table.
Fires an "oTable.sorting" event. The sorting event can be cancelled to provide a totally custom method of sorting the table. https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/dispatchEvent
Indicate that the table has been sorted after intercepting the sorting event.
Gets the instance ready for deletion. Removes event listeners that were added during instatiation of the component.
Update the o-table instance with rows added dynamically to the table.
Filter the table.
Check if the table is expanded (true) or collapsed (false).
Check if the table is collapsed (true) or expanded (false).
Check if the table supports the expand/contract feature.
Updates the dom to account for row updates.
Hides table rows if the table can be expanded.
Expands the table, revealing hidden table rows, if it can be expanded and has been contracted.
Filter the table.
Update the o-table instance with rows added dynamically to the table.
Table options.
Object
Constructs all o-table components inside the element passed as the first parameter.
Set a custom sort formatter for a given data type.
Mapping table cells which contain emojis to a numerical sort value.
const OTable = require('o-table');
// Set a filter for custom data type "emoji-time".
// The return value may be a string or number.
OTable.setSortFormatterForType('emoji-time', (cell) => {
const text = cell.textContent.trim();
if (text === '🌑') {
return 1;
}
if (text === '🌤️️') {
return 2;
}
return 0;
});
OTable.init();Constructs an o-table component.