tt-md-enhanced-table

Angular Material Desgin Table Component

Usage no npm install needed!

<script type="module">
  import ttMdEnhancedTable from 'https://cdn.skypack.dev/tt-md-enhanced-table';
</script>

README

Usage

Add module:

    angular.module('app', [
        'ttmd.enhancedtable'
    ]);

Include file:

require('@tt-md-enhancedtable/dist/tt-md-enhancedtable.min.css');
require('@tt-md-enhancedtable/dist/tt-md-enhancedtable.min.js');

Required dependencies

  • Angular 1.5.2
  • Angular Material 1.0.2

About Adding your translation

Inside library, use {{ value | translate }} to get the translations.

If you do NOT need translation, you can just pass the string you want to display. If you do need translation, you can pass in the json path as when you use angular translation libaray.

For Example:

{
 "title": {
    "greeting": "Hello!"
 }
}

<ttmd-table toolbar="{title: 'title.greeting'}"></ttmd-table>

Add missing translations:

In mobile view, there are two buttons needs your provide translations for other languages:

{
  "util": {
    "previous": "",
    "next": "",
    "noData": ""
  }
}

Default value for those are:

{
  "util": {
    "previous": "Previous",
    "next": "Next",
    "noData": "There is not Data"
  }
}

Features

Desktop view and mobile view

The default breakpoint is 'xs', able to pass breakpoint bindings to the component

<ttmd-enhanced-table items="vm.items" headers="vm.headers" breakpoint="sm"></ttmd-enhanced-table>

Force Mobile View

If there is a case you only want to display mobile view, pass in force-mobile:

<ttmd-enhanced-table items="vm.items" headers="vm.headers" force-mobile="true"></ttmd-enhanced-table>

Type

If you need to display multi-tables in a page and there is one large object holds all the data, you might consider use type It can help to change the talbe data inside that large object.

<ttmd-enhanced-table items="vm.accounts.dueDate" headers="vm.headers" type="dueSoon"></ttmd-enhanced-table>

The type you pass in , will be the listType inside js:

        this.SomeService.fetchDataAccordingPagination(limit, offset)
            .then((res) => {
                if(listType){
                    this.accounts[listType] = [
                        ...res
                    ];
                }
            })

Toolbar

To display the toolbar for the table, passing tooblar attr. Which is an object contains title and icon: Here icon is Material font icon.

sub will show on the right side to display information

<ttmd-enhanced-table items="vm.items" headers="vm.headers" toolbar="{
   title="Due Date"
   icon="account_circle"
   sub="amountPaid"
}"></ttmd-enhanced-table>

Pagination

To enable pagination, need to pass in total-number to tell how many items in total. You can passing the callback function to on-page-change, it will push your a payload object with limit, offset, listType.

<ttmd-enhanced-table items="vm.items" headers="vm.headers" total-number="vm.totalNumber" on-page-change="vm.fetchData(payload)"></ttmd-enhanced-table>

Sort and filter

Able to sort and 'fitler' data according to the attr.

<ttmd-enhanced-table items="vm.items" headers="vm.headers" dataitemkeys="vm.dataitemkeys" filtericon="filtericon"></ttmd-enhanced-table>

Exclude

If there is any attr inside the data you don't want to display on the interface, you can use exclude:

<ttmd-enhanced-table items="vm.items" headers="vm.headers" exclude="['id']"></ttmd-enhanced-table>

Pipes

You can use Angular built-in filter such as date & currency by adding pipies to format the field:

<ttmd-enhanced-table items="vm.items" headers="vm.headers" pipes="vm.pipes"></ttmd-enhanced-table>

this.pipes = {
    currency: {
        targets: ['amount', 'amountWithOutTax'],
        foramt: '

 // default $, optional
    },
    date: {
        tragets: ['dueDate'],
        format: 'mm-DD-yyyy'
    }
}

Highlight Row

You can highlight row by adding highlight-row to the html:

<ttmd-enhanced-table items="vm.items" headers="vm.headers" highlight-row="vm.someFn"></ttmd-enhanced-table>

It takes function:

//Item is sent back with callback
const someFn = (item) => {
    return fn(item.someAttr); // parsing some logic
}

Change the limits

By default, desktop view show 8 pre-page, mobile view shows 3 pre-page, you can config this for each table:

<ttmd-enhanced-table items="vm.items" headers="vm.headers" limits="{desktop: 5, mobile: 4}"></ttmd-enhanced-table>

Accordion

By default accordion will not be shown. You can enable accordion globally for all tables or individual one. To do that you need to pass enable-accordion=true & accordion-state=boolean.

<ttmd-enhanced-table items="vm.items" headers="vm.headers" enable-accordion=true accordion-state=true"></ttmd-enhanced-table>

accordion-state=boolean will show the content.

Action

Besides displaying data, you can pass in action. By default, action will be shown as a button

                            <ttmd-enhanced-table
                                headers="vm.multiPaymentsHeaders"
                                items="vm.accounts.all"
                                total-number="vm.accounts.totalNumber.all"
                                on-page-change="vm.updateMultiPaymentList(payload)"
                                type="all"
                                breakpoint="sm"
                                sort="['dueDate']"
                                toolbar="{
                                    title: 'paymentComponent.allPendingBills',
                                    icon: 'account_circle'
                                }">
                                <ttmd-actions>
                                    <ttmd-action
                                        text="paymentComponent.pay"
                                        on-click="vm.pay(payload)"
                                    ></ttmd-action>
                                </ttmd-actions>
                            </ttmd-enhanced-table>

Text or Button ?

If there is a case you want to display as a button based on prop something is true, and just display normal text if something is false.

        <ttmd-actions>
            <!-- Button -->
            <ttmd-action
                show-as="button"
                if="something"
                text="pay"
            ></ttmd-action>
            <!-- Text -->
            <ttmd-action
                show-as="text"
                if="!something"
                text="Paid"
            ></ttmd-action>
        </ttmd-actions>

If want to use custom directive, from v1.0.6, it is possible by doing:

         <ttmd-actions>
            <!-- Button -->
            <ttmd-action
                show-as="directive"
                on-click="vm.pay(payload)"
            >
              <your_directive your-bindings/>
            </ttmd-action>
        </ttmd-actions>

Mark show-as as directive Then pass <your_directive your-bindings/>. Currently this is just work around. Will update in v1.1.0 to support fully custom directive.

Row Detail

If you want to display more detail information when click the row, you can add <ttmd-detail> to the code, inside <ttmd-detail>, passing the directive you want to display. Also add on-row-click to the <ttmd-table>

    <ttmd-enhanced-table
        items="vm.invoices"
        headers="vm.headers"
        on-row-click="vm.someFn(payload)">
        <ttmd-detail>
            <your_directive your_binding="vm.someData"></your_directive>
        </ttmd-detail>
    </ttmd-enhanced-table>

Inside someFn() function, it will return someData for your_directive to display.

    someFn(payload){
        someService.fetchSomeData(payload)
            .then( (res) => {
                this.someData = res;
            });
    }

No Data Message

Able to pass no-data-text to display the text when there is empty items array. Also able to config this in global config.

<ttmd-enhanced-table items="[]" headers="vm.headers" no-data-text="There is no data"></ttmd-enhanced-table>

There is default value set as:

translate="util.noData" transalte-default="There is no Data"

Global Config

It is possible to config for all the tables inside application. To do that, go to the ngModule.config(), inject ttmdTableProvider:

ngModule.config( (ttmdTableProvider) => {
    ttmdTableProvider.setConfig({
        limits: {desktop: 7, mobile: 4},
        breakpoint: 'sm',
        message: {
            noData: "Empty result" // or with Angular-translate: 'path.to.value.noData'
        },
        enableAccordion: true
    })
});

Default Config value

const _defaultConfigs = {
         forceMobile: false,
         breakpoint: 'xs',
         limits: {
             desktop: 8,
             mobile: 3
         },
         message: {
             noData: null
         },
         enableAccordion: false
}

Data Structure

items: Array[Object] (required)

[
    {
      "serviceCode": "1-260-865-6252 x638",
      "username": "Milton Mraz",
      "amount": "8.03",
      "dueDate": "2016-05-20T05:15:02.719Z"
    },
    {
      "serviceCode": "1-965-662-5118",
      "username": "Alessandro Kassulke",
      "amount": "8.61",
      "dueDate": "2016-06-25T19:15:02.720Z"
    }
]

headers: Array (optional)

// Using angular-translate inside the table component, so you need to give the path to find your value
vm.headers =[
  'some.path.to.value',
  'some.path.to.value2'
]

dataitemkeys: Array (bind with headers)

vm.dataitemkeys =[
  'value',
  'value2'
]

filtericon: String (Filter icon (material-icons) for header)

total-number: number (required if need pagination)

on-page-change: function (required if need pagination)

force-mobile: boolean (optional)

breakpoint: ['xs', 'sm', 'md', 'lg'] (optional)

limits: Object (optional)

vm.limits = {
    desktop: 3,
    mobile: 3,
}

sort: Array[string] (optional)

exclude: Array[string] (optional)

toolbar: Object (optional)

 vm.toolbar = {
    title: this.$translate.instant('path.to.value'),
    icon: 'string'
 }

pipes: Object

vm.pipes = {
    targets: [],
    foramt: string
}

highlight-row: function

type: string (attr on the object) (optional)

show-as: string

Default: 'button' Available value: 'button', 'text'

if: string: expression

Use the attr on the each object

if= "someAttr > 3"; // if someAttr = 5, then action doesn't show, if someAttr = 2, then action will show

no-data-text: string (optional)