@miraidesigns/table
v1.0.2
Published
Mirai Designs Framework: Table module
Downloads
4
Maintainers
miraidesignsReadme
Tables
Tables display data across a set of columns and rows.
HTML
<div class="mdf-table">
<table class="mdf-table__table" role="grid" aria-rowcount="3">
<thead>
<tr class="mdf-table__row mdf-table__row--header">
<th class="mdf-table__header">Header 1</th>
<th class="mdf-table__header">Header 2</th>
<th class="mdf-table__header">Header 3</th>
</tr>
</thead>
<tbody class="mdf-table__content">
<tr class="mdf-table__row" aria-rowindex="1">
<td class="mdf-table__cell">Cell A1</td>
<td class="mdf-table__cell">Cell B1</td>
<td class="mdf-table__cell">Cell C1</td>
</tr>
<tr class="mdf-table__row" aria-rowindex="2">
<td class="mdf-table__cell">Cell A2</td>
<td class="mdf-table__cell">Cell B2</td>
<td class="mdf-table__cell">Cell C2</td>
</tr>
<tr class="mdf-table__row" aria-rowindex="3">
<td class="mdf-table__cell">Cell A3</td>
<td class="mdf-table__cell">Cell B3</td>
<td class="mdf-table__cell">Cell C3</td>
</tr>
</tbody>
</table>
</div>Sass
// Include default styles without configuration
@forward '@miraidesigns/table/styles';// Configure appearance
@use '@miraidesigns/table' with (
$variable: value
);
@include table.styles();Examples
Sorting
Sort table data naturally in ascending or descending order, aware of strings, numbers and dates.
<div class="mdf-table">
<table class="mdf-table__table" role="grid" aria-rowcount="1">
<thead>
<tr class="mdf-table__row mdf-table__row--header">
<th class="mdf-table__header mdf-table__header--sortable">Name</th>
<th class="mdf-table__header mdf-table__header--sortable">Age</th>
<th class="mdf-table__header mdf-table__header--sortable" data-column-type="Date">Date</th>
</tr>
</thead>
<tbody class="mdf-table__content">
<tr class="mdf-table__row" aria-rowindex="1">
<td class="mdf-table__cell">John</td>
<td class="mdf-table__cell">55</td>
<td class="mdf-table__cell" data-date-format="MDY">06/24/1966</td>
</tr>
</tbody>
</table>
</div>import { MDFTable } from '@miraidesigns/table';
new MDFTable(document.querySelector('.mdf-table'), {
sortable: true,
});Pagination
Pagination can be used to separate table data into multiple pages.
Requires the Select module.
<div class="mdf-table">
<table class="mdf-table__table" role="grid" aria-rowcount="1">
<thead>
<tr class="mdf-table__row mdf-table__row--header">
<th class="mdf-table__header">Header 1</th>
<th class="mdf-table__header">Header 2</th>
<th class="mdf-table__header">Header 3</th>
</tr>
</thead>
<tbody class="mdf-table__content">
<tr class="mdf-table__row" aria-rowindex="1">
<td class="mdf-table__cell">Cell A1</td>
<td class="mdf-table__cell">Cell B1</td>
<td class="mdf-table__cell">Cell C1</td>
</tr>
</tbody>
</table>
<div class="mdf-table__pagination">
<span id="table-pagination-label" class="mdf-table__pagination-label">Rows per page</span>
<div class="mdf-select mdf-table__pagination-select">
<button class="mdf-select__button" aria-haspopup="listbox" aria-labelledby="table-pagination-label select-text">
<span id="select-text" class="mdf-select__text"></span>
<span class="mdf-select__icon">
<svg class="mdf-icon" viewBox="0 0 24 24" aria-hidden="true">
<use href="icons.svg#arrow-keyboard"></use>
</svg>
</span>
</button>
<div class="mdf-select__menu mdf-menu">
<ul class="mdf-list" role="listbox" aria-labelledby="table-pagination-label" tabindex="-1">
<li class="mdf-list__item" role="option" data-value="10">10</li>
<li class="mdf-list__item mdf-list__item--selected" role="option" data-value="25">25</li>
<li class="mdf-list__item" role="option" data-value="50">50</li>
</ul>
<input class="mdf-select__input" type="hidden" name="option" />
</div>
</div>
<span class="mdf-table__pagination-stats"></span>
<button class="mdf-table__pagination-control mdf-table__pagination-control--prev" data-pagination-action="prev" aria-label="Previous page">
<svg class="mdf-icon" viewBox="0 0 24 24" aria-hidden="true">
<use href="icons.svg#arrow-keyboard"></use>
</svg>
</button>
<button class="mdf-table__pagination-control mdf-table__pagination-control--next" data-pagination-action="next" aria-label="Next page">
<svg class="mdf-icon" viewBox="0 0 24 24" aria-hidden="true">
<use href="icons.svg#arrow-keyboard"></use>
</svg>
</button>
</div>
</div>import { MDFTable } from '@miraidesigns/table';
const table = new MDFTable(document.querySelector('.mdf-table'), {
paginate: true,
itemsPerPage: 25,
});
// Get the MDFSelect module we created within our table script.
const select = table.getSelectModule();
// Listen for changes on the select container element.
select.container.addEventListener('MDFSelect:changed', () => {
// Paginate the table with the selected value.
table.paginate(+select.value);
});Filters
Filter table data by text input.
Requires the Textfield module.
<div id="table-filter-textfield" class="mdf-textfield mdf-textfield--icon-leading">
<label for="table-filter-input" class="mdf-textfield__label">Filter</label>
<input id="table-filter-input" class="mdf-textfield__input" type="text">
<svg class="mdf-textfield__icon" viewBox="0 0 24 24">
<use href="icons.svg#search"></use>
</svg>
</div>
<div class="mdf-table">
<table class="mdf-table__table" role="grid" aria-rowcount="1">
<thead>
<tr class="mdf-table__row mdf-table__row--header">
<th class="mdf-table__header">Header 1</th>
<th class="mdf-table__header">Header 2</th>
<th class="mdf-table__header">Header 3</th>
</tr>
</thead>
<tbody class="mdf-table__content">
<tr class="mdf-table__row" aria-rowindex="1">
<td class="mdf-table__cell">Cell A1</td>
<td class="mdf-table__cell">Cell B1</td>
<td class="mdf-table__cell">Cell C1</td>
</tr>
</tbody>
</table>
</div>import { MDFTable } from '@miraidesigns/table';
import { MDFTextfield } from '@miraidesigns/textfield';
const table = new MDFTable(document.querySelector('.mdf-table'));
const textfield = new MDFTextfield(document.getElementById('table-filter-textfield'));
// Filter table using the input value.
textfield.input.addEventListener('input', () => table.filter(textfield.value));Checkboxes
Checkboxes can be used to select table row elements for scripting purposes.
Requires the Checkbox module.
<div class="mdf-table">
<table class="mdf-table__table mdf-table__table--fixed" role="grid" aria-rowcount="1">
<thead>
<tr class="mdf-table__row mdf-table__row--header">
<th class="mdf-table__header mdf-table__header--checkbox">
<div class="mdf-checkbox">
<input class="mdf-checkbox__input" type="checkbox">
<div class="mdf-checkbox__box">
<svg class="mdf-checkbox__indeterminate" viewBox="0 0 24 24" aria-hidden="true">
<use href="icons.svg#checkbox-indeterminate"></use>
</svg>
<svg class="mdf-checkbox__check" viewBox="0 0 24 24" aria-hidden="true">
<use href="icons.svg#checkbox"></use>
</svg>
</div>
</div>
</th>
<th class="mdf-table__header">Header 1</th>
<th class="mdf-table__header">Header 2</th>
<th class="mdf-table__header">Header 3</th>
</tr>
</thead>
<tbody class="mdf-table__content">
<tr class="mdf-table__row" aria-rowindex="1">
<td class="mdf-table__cell">
<div class="mdf-checkbox">
<input class="mdf-checkbox__input" type="checkbox">
<div class="mdf-checkbox__box">
<svg class="mdf-checkbox__check" viewBox="0 0 24 24" aria-hidden="true">
<use href="icons.svg#checkbox"></use>
</svg>
</div>
</div>
</td>
<td class="mdf-table__cell">Cell A1</td>
<td class="mdf-table__cell">Cell B1</td>
<td class="mdf-table__cell">Cell C1</td>
</tr>
</tbody>
</table>
</div>import { MDFTable } from '@miraidesigns/table';
new MDFTable(document.querySelector('.mdf-table'));Implementation
Attributes
Please see the WAI-ARIA page for attributes and best practices regarding tables.
| Name | Element | Description |
| ------------------------------- | ---------- | -------------------------------------------------------------------------- |
| data-column-type="Date" | <th> | Lets the script know that this table column will hold dates |
| data-date-format | <td> | Date format for sorting purposes. Valid values are DMY MDY YMD YDM |
| data-pagination-action="prev" | <button> | Pagination action. Go to the previous page |
| data-pagination-action="next" | <button> | Pagination action. Go to the next page |
Classes
| Name | Type | Description |
| ------------------------------- | -------------- | -------------------------------------------------------------------------------------- |
| mdf-table | Parent | Contains the table element. Provides scrolling for smaller devices if necessary |
| mdf-table__table | Parent / Child | The table element |
| mdf-table__table--condensed | Modifier | Reduces the height of table row elements |
| mdf-table__table--fixed | Modifier | Set the table layout to fixed. Use with checkboxes |
| mdf-table__table--bordered | Modifier | Adds borders around table cell elements |
| mdf-table__table--striped | Modifier | Adds zebra striping to the table rows |
| mdf-table__content | Parent / Child | Contains the main table row elements. Child to .mdf-table__table |
| mdf-table__row | Child | Contains the table cells. Child to .mdf-table__table |
| mdf-table__row--header | Modifier | Styling for table header rows |
| mdf-table__row--selected | Modifier | Highlight checkbox selected table row elements |
| mdf-table__header | Child | Table header cell element. Child to .mdf-table__row |
| mdf-table__header--sortable | Modifier | Lets the script know that this column can be sorted |
| mdf-table__header--active | Modifier | Highlight active header |
| mdf-table__header--sort-asc | Modifier | Styling for ascending order sorting |
| mdf-table__header--sort-desc | Modifier | Styling for descending order sorting |
| mdf-table__header--checkbox | Modifier | Adjust appearance for headers that contain checkboxes |
| mdf-table__cell | Child | Table body cell element. Child to .mdf-table__row |
| mdf-table__pagination | Parent / Child | Contains the pagination elements. Child to .mdf-table |
| mdf-table__pagination-select | Child | Items per page select element. Child to .mdf-table__pagination |
| mdf-table__pagination-label | Child | Label for the select element. Child to .mdf-table__pagination |
| mdf-table__pagination-stats | Child | Displays the pagination stats. Child to .mdf-table__pagination |
| mdf-table__pagination-control | Child | Control element to select the previous or next page. Child to .mdf-table__pagination |
Events
| Name | Data | Description |
| -------------------- | -------------------------------------------------- | ------------------------------------------------------------------------------------------------ |
| MDFTable:paginated | {currPage: number, items: HTMLTableRowElement[]} | Fires when table data gets paginated. Includes the current page and the table rows for that page |
| MDFTable:sorted | {column: number, direction: string} | Fires when a table column gets sorted. Includes the column and sorting direction |
Properties
| Name | Type | Description |
| ------------------------- | --------------------------- | ---------------------------------------------------------------------- |
| .body | HTMLTableSectionElement | Returns the table body element |
| .container | HTMLElement | Returns the table container element |
| .head | HTMLTableSectionElement | Returns the table head element |
| .pagination | HTMLElement | Returns the table pagination container element |
| .rows | HTMLTableRowElement[] | Returns an Array with all table rows |
| .table | HTMLTableElement | Returns the table element |
| .getSelectedRows() | (): HTMLTableRowElement[] | Returns an Array with all currently selected table rows |
| .getFilteredRows | (): HTMLTableRowElement[] | Returns an Array with the filtered table rows |
| .getSelectModule() | (): MDFSelect | Returns the created MDFSelect module |
| .hasBeenSorted() | (): boolean | Returns wether or not the table has been sorted yet. |
| .getSortingOrder() | (): string | Returns the table's sorting order. Either ASC or DESC. |
| .getPages() | (): number | Returns the number of pages available. |
| .getCurrentPage() | (): number | Returns the current page number. |
| .getItemsPerPage() | (): number | Returns the current items per page limit. |
| .toggleSpacing() | (): void | Toggle between regular and condensed spacing. |
| .filter(value, column?) | (string, number): void | Filter table with the given value, optionally filter a specific column |
| .paginate(limit) | (number): void | Paginate table with the given items per page limit |
Options
| Name | Type | Default | Description |
| ------------------ | --------- | ------- | ----------------------------------------------------------------------- |
| sortable | boolean | false | Enable sorting |
| sortOnLoad | boolean | false | Sort table on page load |
| sortColumn | number | 0 | Index of column to sort on page load |
| order | string | ASC | Default sorting order. Valid value are ASC or DESC |
| setAriaCount | boolean | false | Add aria-rowcount and aria-rowindex attributes where needed |
| truncateHeaders | boolean | false | Truncate table header text at specific cutoff |
| headersCharLimit | number | 0 | Character limit before header text is cut off |
| paginate | boolean | false | Enable pagination |
| itemsPerPage | number | 50 | Number of table rows per page |
| scrollIntoView | boolean | false | Wether or not to scroll the table element into view when changing pages |
| savePreferences | boolean | false | Enable saving user preferences to localStorage |