mdtTable

Description

The base HTML tag for the component.

Usage

as element:
<mdt-table
       [table-card="{object}"]
       [selectable-rows="{boolean}"]
       [virtual-repeat="{boolean}"]
       [alternate-headers="{String}"]
       [delete-row-callback="{function(rows)}"]
       [selected-row-callback="{function(rows)}"]
       [animate-sort-icon="{boolean}"]
       [ripple-effect="{boolean}"]
       [paginated-rows="{boolean}"]
       [mdt-row="{object}"]
       [mdt-row-paginator="{function(page, pageSize, options)}"]
       [mdt-row-paginator-error-message="{string}"]
       [mdt-row-paginator-no-results-message="{string}"]
       [mdt-trigger-request="{function(loadPageCallback)}"]
       [mdt-translations="{object}"]
       [mdt-loading-indicator="{boolean}"]>
</mdt-table>

Parameters

ParamTypeDetails
tableCard
(optional)
object

when set table will be embedded within a card, with data manipulation tools available at the top and bottom.

Properties:

  • {boolean=} visible - enable/disable table card explicitly
  • {string} title - the title of the card
  • {boolean=} columnSelector - enables the column selection for the table (you can disable certain columns from the list selection, using exclude-from-column-selector, see the related docs)
  • {array=} actionIcons - (not implemented yet)
selectableRows
(optional)
boolean

when set each row will have a checkbox

virtualRepeat
(optional)
boolean

when set, virtual scrolling will be applied to the table. You must set a fixed height to the .md-virtual-repeat-container class in order to make it work properly. Since virtual scrolling is working with fixed height.

alternateHeaders
(optional)
String

some table cards may require headers with actions instead of titles. Two possible approaches to this are to display persistent actions, or a contextual header that activates when items are selected

Assignable values are:

  • 'contextual' - when set table will have kind of dynamic header. E.g.: When selecting rows, the header will change and it'll show the number of selected rows and a delete icon on the right.
  • 'persistentActions' - (not implemented yet)
deleteRowCallback
(optional)
function(rows

callback function when deleting rows. At default an array of the deleted row's data will be passed as the argument. When table-row-id set for the deleted row then that value will be passed.

selectedRowCallback
(optional)
function(rows

callback function when selecting rows. At default an array of the selected row's data will be passed as the argument. When table-row-id set for the selected row then that value will be passed.

animateSortIcon
(optional)
boolean

sort icon will be animated on change

rippleEffect
(optional)
boolean

ripple effect will be applied on the columns when clicked (not implemented yet)

paginatedRows
(optional)
boolean

if set then basic pagination will applied to the bottom of the table.

 Properties:

 - `{boolean=}` `isEnabled` - enables pagination
 - `{array}` `rowsPerPageValues` - set page sizes. Example: [5,10,20]
mdtRow
(optional)
object

passing rows data through this attribute will initialize the table with data. Additional benefit instead of using mdt-row element directive is that it makes possible to listen on data changes.

Properties:

  • {array} data - the input data for rows
  • {integer|string=} table-row-id-key - the uniq identifier for a row
  • {function(rowData)=} table-row-class-name - callback to specify the class name of a row
  • {array} column-keys - specifying property names for the passed data array. Makes it possible to configure which property assigned to which column in the table. The list should provided at the same order as it was specified inside mdt-header-row element directive.
mdtRowPaginator
(optional)
function(page, pageSize, options

providing the data for the table by a function. Should set a function which returns a promise when it's called. When the function is called, these parameters will be passed: page and pageSize which can help implementing an ajax-based paging, and options which is providing more information.

Currently these are available from options:

  • array columnFilter - an array of the filtered column sets (todo: create a demo for it)
  • array columnSort - an array of the sorted column sets. You can inspect which column did you
                       sorted and if its in asc or desc order (todo: create a demo for it)
mdtRowPaginatorErrorMessage
(optional)
string

overrides default error message when promise gets rejected by the paginator function.

mdtRowPaginatorNoResultsMessage
(optional)
string

overrides default 'no results' message.

mdtTriggerRequest
(optional)
function(loadPageCallback

provide a callback function for manually triggering an ajax request. Can be useful when you want to populate the results in the table manually. (e.g.: having a search field in your page which then can trigger a new request in the table to show the results based on that filter.

mdtTranslations
(optional)
object

accepts various key-value pairs for custom translations.

mdtLoadingIndicator
(optional)
boolean

if set then loading indicator can be customised

 Properties:

 - `{string=}` `color` - passing a css compatible format as a color will set the color for the loading indicator

Example

mdt-row attribute:

When column names are: Product name, Creator, Last Update The passed data row's structure: id, item_name, update_date, created_by

Then the following setup will parse the data to the right columns: 

    <mdt-table
        mdt-row="{
            'data': controller.data,
            'table-row-id-key': 'id',
            'column-keys': ['item_name', 'update_date', 'created_by']
        }">

        <mdt-header-row>
            <mdt-column>Product name</mdt-column>
            <mdt-column>Creator</mdt-column>
            <mdt-column>Last Update</mdt-column>
        </mdt-header-row>
    </mdt-table>