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}"]
       [sortable-columns="{boolean}"]
       [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)}"]
       [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
  • {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)
sortableColumns
(optional)
boolean

sort data and display a sorted state in the header. Clicking on a column which is already sorted will reverse the sort order and rotate the sort icon. (not implemented yet: Use sortable-rows-default attribute directive on a column which intended to be the default sortable column)

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

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.

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>