Optionalhost: ReactiveControllerHostOptionaloptions: YatlTableControllerOptions<T>The explicit, raw visual layout intent for the table's columns. This property acts as the pure state record. It is strictly symmetrical: reading this property will return the exact array of field names that was most recently set, preserving the user's or developer's exact layout preference.
localStorage or a database).The definitions for the columns to be rendered. This defines the field mapping, titles, sortability, and other static options.
The definitions for the columns to be rendered. This defines the field mapping, titles, sortability, and other static options.
The dynamic runtime state of the table's columns (visibility, width, and sort order).
Unlike the static columns definitions, columnStates represents the current,
interactive state of the grid. This is primarily used for programmatic control,
or for saving and restoring user preferences (e.g., from localStorage).
The dynamic runtime state of the table's columns (visibility, width, and sort order).
Unlike the static columns definitions, columnStates represents the current,
interactive state of the grid. This is primarily used for programmatic control,
or for saving and restoring user preferences (e.g., from localStorage).
The computed, fully-resolved array of columns intended for visual rendering.
This is a derived View Model. It takes the explicit columnOrder intent and
reconciles it against the actual columns definitions. It safely handles newly
added columns, filters out undefined fields, and guarantees a strictly-typed array
representing the exact left-to-right visual layout of the data grid.
This property is intended for template rendering and internal layout math
(such as drag-and-drop boundary calculations). To programmatically mutate the column
layout, set the columnOrder property or use the moveColumn() API.
An optional set of criteria to filter the visible rows. This runs before the global search query is applied. *
An optional custom filter function. Provide this function to bypass the default filter logic.
true to keep the row in the filteredData results, false to exclude it.
controller.filterStrategy = (row, filters) => {
// Example: Custom global search across multiple columns
if (filters.globalSearch) {
const term = filters.globalSearch.toLowerCase();
if (
!row.firstName.toLowerCase().includes(term) &&
!row.lastName.toLowerCase().includes(term)
) {
return false;
}
}
// Example: Strict mathematical matching
if (filters.minAge && row.age < filters.minAge) {
return false;
}
return true;
};
An optional custom filter function. Provide this function to bypass the default filter logic.
true to keep the row in the filteredData results, false to exclude it.
controller.filterStrategy = (row, filters) => {
// Example: Custom global search across multiple columns
if (filters.globalSearch) {
const term = filters.globalSearch.toLowerCase();
if (
!row.firstName.toLowerCase().includes(term) &&
!row.lastName.toLowerCase().includes(term)
) {
return false;
}
}
// Example: Strict mathematical matching
if (filters.minAge && row.age < filters.minAge) {
return false;
}
return true;
};
A callback function used to extract or generate a unique identifier for each row.
A stable, unique ID is heavily relied upon by the grid engine for maintaining row selection state, tracking row metadata, and ensuring optimal rendering performance within the virtual scroller—especially when data is actively being sorted, filtered, or updated.
Default Behavior: * If not provided, the table will automatically attempt to locate an id, key, or _id
property on the row data object. If none are found, it falls back to using the row's original
array index (which will trigger a console warning, as indices are inherently unstable during sorting).
Note: Because this expects a JavaScript function, it is exposed strictly as a property
and does not have a corresponding HTML attribute. You must use the property binding syntax
(.rowIdCallback) in a Lit template.
A callback function used to extract or generate a unique identifier for each row.
A stable, unique ID is heavily relied upon by the grid engine for maintaining row selection state, tracking row metadata, and ensuring optimal rendering performance within the virtual scroller—especially when data is actively being sorted, filtered, or updated.
Default Behavior: * If not provided, the table will automatically attempt to locate an id, key, or _id
property on the row data object. If none are found, it falls back to using the row's original
array index (which will trigger a console warning, as indices are inherently unstable during sorting).
Note: Because this expects a JavaScript function, it is exposed strictly as a property
and does not have a corresponding HTML attribute. You must use the property binding syntax
(.rowIdCallback) in a Lit template.
The row selection method to use.
The row selection method to use.
Enables weighted relevance scoring for search results. When enabled, exact matches and prefix matches are ranked higher than substring matches. Rows are sorted by their relevance score descending.
Enables weighted relevance scoring for search results. When enabled, exact matches and prefix matches are ranked higher than substring matches. Rows are sorted by their relevance score descending.
The current text string used to filter the table data. Setting this property triggers a new search and render cycle.
The current text string used to filter the table data. Setting this property triggers a new search and render cycle.
List of currently selected row indexes.
List of currently selected row indexes.
Configuration options for automatically saving and restoring table state (column width, order, visibility, etc.) to the provided storage interface.
The unique key used to store the table state in the browser. *
OptionalsaveColumnOrder?: booleanSave the current order of columns
OptionalsaveColumnSortOrders?: booleanSave the current column sorting
OptionalsaveColumnStickyPositions?: booleanSave the current column sticky positions
OptionalsaveColumnVisibility?: booleanSave the current column visibility
OptionalsaveColumnWidths?: booleanSave the current column widths
OptionalsaveSearchQuery?: booleanSave the current search query
OptionalsaveSelectedRows?: booleanSave the currently selected rows
Optionalstorage?: StorageInterfaceA storage client for getting and setting values. Defaults to window.localStorage
Configuration options for automatically saving and restoring table state (column width, order, visibility, etc.) to the provided storage interface.
The unique key used to store the table state in the browser. *
OptionalsaveColumnOrder?: booleanSave the current order of columns
OptionalsaveColumnSortOrders?: booleanSave the current column sorting
OptionalsaveColumnStickyPositions?: booleanSave the current column sticky positions
OptionalsaveColumnVisibility?: booleanSave the current column visibility
OptionalsaveColumnWidths?: booleanSave the current column widths
OptionalsaveSearchQuery?: booleanSave the current search query
OptionalsaveSelectedRows?: booleanSave the currently selected rows
Optionalstorage?: StorageInterfaceA storage client for getting and setting values. Defaults to window.localStorage
Enables tokenized search behavior.
When enabled, the search query is split into individual tokens using the
searchTokenizer function (defaults to splitting on whitespace).
A row is considered a match if ANY of the tokens appear in the searchable fields.
Enables tokenized search behavior.
When enabled, the search query is split into individual tokens using the
searchTokenizer function (defaults to splitting on whitespace).
A row is considered a match if ANY of the tokens appear in the searchable fields.
The addEventListener() method of the EventTarget interface sets up a function that will be called whenever the specified event is delivered to the target.
Optionaloptions: boolean | AddEventListenerOptionsOptionaloptions: boolean | AddEventListenerOptionsDeletes the row with the matching ID.
The IDs rows to delete
Deletes a row at a specific original index from the table.
The original indexes of rows to delete.
Clears all selection.
The dispatchEvent() method of the EventTarget sends an Event to the object, (synchronously) invoking the affected event listeners in the appropriate order.
Export the current visible table data to a CSV file.
Options for configuring what should be exported.
Finds the first row where field matches value
The field name within the row data to search.
The value to match against the field's content.
The found row, or undefined if no match is found.
Finds the original index of the first row where the specified field matches the given value. This searches through the original, unfiltered dataset.
The field name within the row data to search.
The value to match against the field's content.
The original index of the found row, or -1 if no match is found.
Gets the latest value for the cell at the given row and field. This will prioritize live edits first, pending commit transactions second and finally the actual value in the row data.
Gets a copy of the current state of the table.
Hides the specified column
The field name of the column to hide.
Called when the host is connected to the component tree. For custom
element hosts, this corresponds to the connectedCallback() lifecycle,
which is only called when the component is connected to the document.
Called when the host is disconnected from the component tree. For custom
element hosts, this corresponds to the disconnectedCallback() lifecycle,
which is called the host or an ancestor component is disconnected from the
document.
Called during the client-side host update, just before the host calls its own update.
Code in update() can depend on the DOM as it is not called in
server-side rendering.
Called after a host update, just before the host calls firstUpdated and updated. It is not called in server-side rendering.
Moves a column to a new position
The column to move
The index or field of the column to move it to.
The removeEventListener() method of the EventTarget interface removes an event listener previously registered with EventTarget.addEventListener() from the target.
Optionaloptions: boolean | EventListenerOptionsSelects all currently visible rows (for "Select All" checkbox).
Shows the specified column
The field name of the column to show.
Sorts the table by a specified column and order.
If order is null, the sort on this column is removed.
The field name of the column to sort by.
The sort order: 'asc', 'desc', or null to remove sorting for this column.
Clear all other sorting
Sticks a column to the left side of the table.
The field name of the column to stick.
Toggles the sticky state of a column. If stickyPosition is provided, that will be used. Otherwise, if the column is already stuck it will be unstuck and if it is unstuck it will be stuck to the left.
The field name of the column to toggle.
OptionalstickyPosition: ColumnStickyPositionThe optional position to stick to.
Toggles the visibility of hte specified column
The field name of the column to toggle.
Optionalvisible: booleanOptionally force the visibility state.
Unsticks a column, allowing it to scroll normally with the rest of the table.
The field name of the column to unstick.
Updates the data of a row at a specific original index.
The original index of the row to update.
An object containing the new data to assign to the row. Existing fields will be updated, and new fields will be added.
Restores the table to the provided state.
The state to restore the table to.
The explicit, raw visual layout intent for the table's columns. This property acts as the pure state record. It is strictly symmetrical: reading this property will return the exact array of field names that was most recently set, preserving the user's or developer's exact layout preference.
localStorageor a database).