Table Sort Controller is a Stimulus controller for sorting HTML table.
These are standard HTML attributes (with no prefix) used by Table Sort.
| Attribute | Element(s) | Default | Value(s) | Description |
|---|---|---|---|---|
| aria-busy |
table |
false |
true false |
Table Sort will set this to true any time it is sorting the table. You can use the value in your CSS to indicate that work is in progress. |
| aria-sort |
th |
ascending descending |
The controller will set this value on any column it sorts. It will reverse the sort based on this value of any column that is clicked. You can use the value in your CSS to indicate the sort. |
|
| role |
th |
button |
Table Sort will add role="button" to any th that is used for sorting. (that doesn't have data-tablesort-type="none") |
All of these attributes are prefixed with "data-" in the attribute name.
| Attribute | Element(s) | Default | Value(s) | Description |
|---|---|---|---|---|
| controller |
table |
tablesort | This attribute (on either element) provides the tablesort functionality. | |
| action |
th |
click->tablesort#sort | (string) |
Table Sort will add this action to each th (unless it is non-sorting) that doesn't already have a data-action attribute. 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-tablesort-" in the attribute name.
| Attribute | Element(s) | Default | Value(s) | Description |
|---|---|---|---|---|
| type |
th |
Date Number String |
Indicates the type of data stored in the column. If not provided, the controller will search through the data to determine this. | |
| none | Disables sorting on this column. | |||
| initial |
table |
false |
(boolean) | Indicates whether the controller should be sort the table when it is connected. |
| true | The controller will sort the table when it is connected, using the first column with an aria-sort attribute. | |||
| val |
td |
(string) | The value to use for this cell, instead of the data-value attribute or the contents of the cell. | |
| auto-head |
table |
false | Ignored if the table has a thead. | |
| true | The controller will put the first row in a thead if the table has no thead. | |||
| false | The controller will throw an exception if the table has no thead. | |||
| rows-to-check |
table |
200 | (integer) | This indicates how many rows to search in order to calculate the data type of the column if it isn't provided. |
| options |
table |
(JSON String) | Allows you to set any data-tablesort attribute on the table element in JSON format (using camelCase instead of dash-case for variable names). |
| Event | Parameters | Description |
|---|---|---|
| connected | Called any time that the controller is connected. | |
| disconnected | Called any time that the controller is disconnected. | |
| sorted | Called any time that the controller sorts 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 |
|---|---|---|---|---|
| resort |
Re-runs the sort on the table using the sort from the first column with an aria-sort attribute. |
|||
| sortByIndex | index: (integer) The index of the column that you want to sort. |
Sort the column indicated. |
||
| sortByName |
name: (string) The text of the th for the column that you want to sort. |
Sort the column indicated. |