mdtColumn

Description

Representing a header column cell which should be placed inside mdt-header-row element directive.

Dependencies

Usage

as element:
<mdt-column
       [align-rule="{string}"]
       [column-sort="{boolean=|object}"]
       [column-filter="{object}"]
       [column-definition="{string}"]
       [exclude-from-column-selector="{boolean}"]>
</mdt-column>

Parameters

ParamTypeDetails
alignRule
(optional)
string

align cell content. This settings will have affect on each data cells in the same column (e.g. every x.th cell in every row).

Assignable values:

  • 'left'
  • 'right'
columnSort
(optional)
boolean=object

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.

When object is passed, then compare function can be passed for sorting the column data's. As every compare function, it gets two parameters and return with the compared result (-1,1,0)

Assignable values:

  • true or false
  • { comparator: function(a,b)}
columnFilter
(optional)
object

if provided, user can activate column filter feature on the selected column

Assignable properties:

- {Function=} valuesProviderCallback required, function which provides the values into the column filter. It must return with a promise which resolves an array of strings/objects
- {Function=} valuesTransformerCallback optional, function which transforms the provided objects into strings to be able to show it visually in the column filter
- {string=} placeholderText optional, placeholder which will show up as a default text (available only for `chips` and `dropdown` filter types
- {string=} filterType defines the type of the filter you want to use. Available options are: `chips`, `checkbox`, `dropdown`. If you don't specify it, the default will be `chips`
columnDefinition
(optional)
string

displays a tooltip on hover.

excludeFromColumnSelector
(optional)
boolean

disables the column selection for the applied column for the column select feature.

Example

<mdt-table>
    <mdt-header-row>
        <mdt-column align-rule="left">Product name</mdt-column>
        <mdt-column
            align-rule="right"
            column-definition="The price of the product in gross.">Price</mdt-column>
    </mdt-header-row>

    <mdt-row ng-repeat="product in ctrl.products">
        <mdt-cell>{{product.name}}</mdt-cell>
        <mdt-cell>{{product.price}}</mdt-cell>
    </mdt-row>
</mdt-table>