The mod.table() method automatically attaches event listeners for all <table class="mod-table"></table> tags on the page and handles interaction events for the elements.
Method API
// Using mod(-plus).iife.min.js
window.mod.table();
// Using mod(-plus).esm.min.js
import { table } from 'path/to/mod(-plus).esm.min.js';
table();Usage Examples
Use the following usage examples to guide your implementation.
Examples Use Global JavaScript
For simplicity, all usage examples demonstrate usage with Mod's global JavaScript library (mod(-plus).iife.min.js). All documented behavior is identical in the ESM variant of Mod's JavaScript library.
Row Selection (Checkbox)
Table HTML
<table class="mod-table mod-table-selectable">
<thead>
<tr>
<th class="mod-text-center mod-align-middle" style="width: 20px;">
<input type="checkbox" class="mod-input" />
</th>
<th class="mod-text-left">First Name</th>
<th class="mod-text-left">Last Name</th>
<th class="mod-text-left">Email Address</th>
<th class="mod-text-left">Username</th>
</tr>
</thead>
<tbody>
<tr>
<td class="mod-text-center mod-align-middle"><input type="checkbox" class="mod-input" /></td>
<td class="mod-text-left">Trent</td>
<td class="mod-text-left">Reznor</td>
<td class="mod-text-left mod-text-light">trent@nin.com</td>
<td class="mod-text-left mod-text-light">treznor</td>
</tr>
<!-- Rest of table rows... -->
</tbody>
</table>Row Selection Requirements
In order for selection to work, an additional mod-table-selectable class must be added to the <table class="mod-table"> tag.
Table JavaScript
window.mod.table();Row Selection (Radio)
Table HTML
<table class="mod-table mod-table-selectable">
<thead>
<tr>
<th class="mod-text-center"></th>
<th class="mod-text-left">Name</th>
<th class="mod-text-left">Size</th>
<th class="mod-text-left">Crust</th>
<th class="mod-text-left">Sauce</th>
</tr>
</thead>
<tbody>
<tr>
<td class="mod-text-center mod-align-middle"><input type="radio" class="mod-input" name="pizza" /></td>
<td class="mod-text-left">Cheese Pizza</td>
<td class="mod-text-left">Large</td>
<td class="mod-text-left mod-text-light">Regular</td>
<td class="mod-text-left mod-text-light">Marinara</td>
</tr>
<!-- Rest of table rows... -->
</tbody>
</table>Row Selection Requirements
In order for selection to work, an additional mod-table-selectable class must be added to the <table class="mod-table"> tag.
Table JavaScript
window.mod.table();Sortable Table
Table HTML
<table class="mod-table mod-table-sortable">
<thead>
<tr>
<th class="mod-text-left mod-sortable-column">Name <i class="mod-icon-arrow-up-down"></i></th>
<th class="mod-text-left mod-sortable-column">Size <i class="mod-icon-arrow-up-down"></i></th>
<th class="mod-text-left mod-sortable-column">Crust <i class="mod-icon-arrow-up-down"></i></th>
<th class="mod-text-left mod-sortable-column">Sauce <i class="mod-icon-arrow-up-down"></i></th>
</tr>
</thead>
<tbody>
<tr>
<td class="mod-text-left">Cheese Pizza</td>
<td class="mod-text-left">Large</td>
<td class="mod-text-left mod-text-light">Regular</td>
<td class="mod-text-left mod-text-light">Marinara</td>
</tr>
<tr>
<td class="mod-text-left">Pepperoni Pizza</td>
<td class="mod-text-left">Medium</td>
<td class="mod-text-left mod-text-light">Garlic</td>
<td class="mod-text-left mod-text-light">Marinara</td>
</tr>
<tr>
<td class="mod-text-left">Chicken Paramesan Pizza</td>
<td class="mod-text-left">Large</td>
<td class="mod-text-left mod-text-light">Garlic Parmesan</td>
<td class="mod-text-left mod-text-light">White Sauce</td>
</tr>
</tbody>
</table>Sortable Table Requirements
In order for sorting to work, an additional mod-table-sortable class must be added to the <table class="mod-table"> tag. Additionally, each sortable column header must include the mod-sortable-column class.
Table JavaScript
window.mod.table();With Action Menu
Table HTML
<table class="mod-table">
<thead>
<tr>
<th class="mod-text-left">First Name</th>
<th class="mod-text-left">Last Name</th>
<th class="mod-text-left">Email Address</th>
<th class="mod-text-left">Username</th>
<th class="mod-text-center"></th>
</tr>
</thead>
<tbody>
<tr>
<td class="mod-text-left">Trent</td>
<td class="mod-text-left">Reznor</td>
<td class="mod-text-left mod-text-light">trent@nin.com</td>
<td class="mod-text-left mod-text-light">treznor</td>
<td class="mod-text-left mod-text-light mod-align-middle">
<div class="mod-dropdown-button">
<button class="mod-button"><i class="mod-icon-ellipsis"></i></button>
<div class="mod-dropdown">
<ul>
<li>Edit User</li>
<li>Edit Permissions</li>
<li>Delete User</li>
</ul>
</div>
</div>
</td>
</tr>
<!-- Rest of table rows... -->
</tbody>
</table>Table JavaScript
// NOTE: Not part of the table component's JavaScript API, but required for this functionality within a table.
window.mod.dropdown_button();Dropdown Button
Learn more about how to implement the mod.dropdown_button() method here.