Tables
Tables Javascript
Methods
Init()
const adminTable = new tables4i();
adminTable.Init({
table: document.getElementById("productTable"),
url: "/productcards/table",
paging: {
itemsToShow: 10,
label: "Product Paging"
},
search: true,
filter: true
});
ReloadTable()
adminTable.ReloadTable();
UpdateInitialSearch(searchTerm)
Uses search term value for tables that require a search before loading.
adminTable.UpdateInitialSearch(input.value);
UpdateUrl(url)
Uses fetch url that will return all table data.
adminTable.UpdateUrl(fetchURL);
Options
| Option | Required | Type | Description |
|---|---|---|---|
| table | Required | Node: Table ID | The actual table element. |
| url | Required | String | The route to get table row data. |
| paging | Optional | {} | Only include if paging is desired. Holds the values for paging below. |
| paging.itemsToShow | Optional | Integer | The initial number of rows the table needs to display. |
| paging.label | Optional | String | The aria-label for the paging navigation. |
| search | Optional | Booleen | Only include if searching table is desired. true will allow searching. |
| filter | Optional | Booleen | Only include if filtering table is desired. true will allow filtering. |
Resources
| Sass File(s) | /sass/components/_tables.scss |
|---|---|
| JS File(s) | Please use the table2024js bundle /library/tables/common.js /library/tables/filter.js /library/tables/paging.js /library/tables/search.js /library/tables/tables.js |
| JS Functions | See Above. |
| Locale Keys | None |
Accessibility
None at this time.