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`

@miraidesigns/table

Tables

HTML

Sass

Examples

Sorting

Pagination

Filters

Checkboxes

Implementation

Attributes

Classes

Events

Properties

Options

Readme

Keywords

Package Sidebar

Install

Repository

Homepage

Weekly Downloads

Version

License

Unpacked Size

Total Files

Last publish

Collaborators

@miraidesigns/table

Tables

HTML

Sass

Examples

Sorting

Pagination

Filters

Checkboxes

Implementation

Attributes

Classes

Events

Properties

Options

Readme

Keywords

Package Sidebar

Install

Repository

Homepage

DownloadsWeekly Downloads

Version

License

Unpacked Size

Total Files

Last publish

Collaborators

Weekly Downloads