Table Filter Controller is a Stimulus controller for filtering an HTML table.
Table Filter can filter the rows of a table by the values in each column of that table. The filter can either be in a column itself or it can be outside of the table altogether.
| Target | Element(s) | Description |
|---|---|---|
| table |
table |
The table to filter. Only needed if the data-controller attribute is not on the table. |
| filter | input |
The input to use as a filter. Table Filter will hide any row where the column doesn't contain the filter text. |
These are standard HTML attributes (with no prefix) used by Table Filter.
| Attribute | Element(s) | Default | Value(s) | Description |
|---|---|---|---|---|
| aria-busy |
table |
false |
true false |
Table Filter will set this to true any time it is filtering the table. You can use the value in your CSS to indicate that work is in progress. |
All of these attributes are prefixed with "data-" in the attribute name.
| Attribute | Element(s) | Default | Value(s) | Description |
|---|---|---|---|---|
| controller |
(any) table |
tablefilter |
This attribute provides the filter functionality. It should either be placed on the table in which filtering will occur or on an element that contains that table. If it is not placed on the table, then you will need to add a data-tablefilter-target="table" attribute to the table. |
|
| action |
(any) input |
tablefilter#filter | (string) |
Table Filter will add this to any "filter" target that doesn't have an action. This is what tells Stimulus to take action, but you need not add this yourself unless you want to change the way it works for some reason. |
| value |
td |
(string) | The value to use for this cell, instead of the contents of the cell. |
All of these attributes are prefixed with "data-tablefilter-" in the attribute name.
| Attribute | Element(s) | Default | Value(s) | Description |
|---|---|---|---|---|
| target |
table |
table | The table to filter. Only needed if the data-controller attribute is not on the table. | |
|
input |
filter |
The value to filter by. |
||
| addfilters |
table |
(empty string) | Table Filter will use the "addFilter" attributes to decide on adding any given filter for each only if no filter targets exist. | |
| true | Table Filter will add filters for all columns in which the "addfilter" attribute is not false. | |||
| false | Table Filter will not add any filters to any columns. | |||
| addfilter |
col th |
(empty string) | Table Filter will add a filter for this column only if no filter targets exist. | |
| true | Table Filter will add a filter for this column. | |||
| false | Table Filter will not add a filter for this column. | |||
| colindex |
(filter target) |
(integer) |
The index of the column to filter by. 0-based. Only needed if the filter target is not in a td or th. |
|
| colname |
col th td |
(string) | The name of a column to allow this column to be referenced by a filter | |
|
(filter target) |
The name of the column to filter by. Only needed if the filter target is not in a td or th. This is an alternative syntax to colindex. This requires a col/th/td element with a matching colname attribute |
|||
| colnum |
(filter target) |
(integer) |
The number of the column to filter by. 1-based. Only needed if the filter target is not in a td or th. This is an alternative syntax to colindex. |
|
| val |
td |
(string) | The value to use for this cell, instead of the data-value attribute or the contents of the cell. |
These are custom events that the controller will fire when it takes certain actions.
All of these events are prefixed by "tablefilter:".
| Event | Parameters | Description |
|---|---|---|
| initialized | Called any time that the controller is initialized. | |
| connected | Called any time that the controller is connected. | |
| disconnected | Called any time that the controller is disconnected. | |
| filtered |
target: (the table that is filtered) |
Called any time that the controller filters the table. |
While it is recommended to use the controller via the attributes listed above, the following methods can be called directly if needed.
| Method | Returns | Arguments | Event(s) | Description |
|---|---|---|---|---|
| filter |
Filters the table by the current values of all of the "filter" targets. |