angular-md-table
Advanced tools
Add module:
angular.module('app', [
'ttmd.table'
]);
npm install angular-md-table --save
Include files:
require('angular-md-table/dist/angular-md-table.min.css');
require('angular-md-table/dist/angular-md-table.min.js');
https://npmcdn.com/angular-md-table@latest/dist/angular-md-table.umd.js
// or
https://npmcdn.com/angular-md-table@latest/dist/angular-md-table.umd.min.js
https://npmcdn.com/angular-md-table@latest/dist/angular-md-table.min.css
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>
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"
}
}
The default breakpoint is 'xs', able to pass breakpoint bindings to the component
<ttmd-table items="vm.items" headers="vm.headers" breakpoint="sm"></ttmd-table>
If there is a case you only want to display mobile view, pass in force-mobile:
<ttmd-table items="vm.items" headers="vm.headers" force-mobile="true"></ttmd-table>
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-table items="vm.accounts.dueDate" headers="vm.headers" type="dueSoon"></ttmd-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
];
}
})
To display the toolbar for the table, passing tooblar attr. Which is an object contains title and icon:
Here icon is Material font icon.
<ttmd-table items="vm.items" headers="vm.headers" toolbar="{
title="Due Date"
icon="account_circle"
}"></ttmd-table>
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-table items="vm.items" headers="vm.headers" total-number="vm.totalNumber" on-page-change="vm.fetchData(payload)"></ttmd-table>
Able to sort data according to the attr, this should be an array, but currently, only work with the first element inside the array.
<ttmd-table items="vm.items" headers="vm.headers" sort="['dueDate']"></ttmd-table>
If there is any attr inside the data you don't want to display on the interface, you can use exclude:
<ttmd-table items="vm.items" headers="vm.headers" exclude="['id']"></ttmd-table>
You can use Angular built-in filter such as date & currency by adding pipies to format the field:
<ttmd-table items="vm.items" headers="vm.headers" pipes="vm.pipes"></ttmd-table>
this.pipes = {
currency: {
targets: ['amount', 'amountWithOutTax'],
foramt: '$' // default $, optional
},
date: {
tragets: ['dueDate'],
format: 'mm-DD-yyyy'
}
}
You can highlight row by adding highlight-row to the html:
<ttmd-table items="vm.items" headers="vm.headers" highlight-row="vm.someFn"></ttmd-table>
It takes function:
//Item is sent back with callback
const someFn = (item) => {
return fn(item.someAttr); // parsing some logic
}
By default, desktop view show 8 pre-page, mobile view shows 3 pre-page, you can config this for each table:
<ttmd-table items="vm.items" headers="vm.headers" limits="{desktop: 5, mobile: 4}"></ttmd-table>
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-table items="vm.items" headers="vm.headers" enable-accordion=true accordion-state=true"></ttmd-table>
accordion-state=boolean will show the content.
Besides displaying data, you can pass in action. By default, action will be shown as a button
<ttmd-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-table>
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 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-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-table>
Inside someFn() function, it will return someData for your_directive to display.
someFn(payload){
someService.fetchSomeData(payload)
.then( (res) => {
this.someData = res;
});
}
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-table items="[]" headers="vm.headers" no-data-text="There is no data"></ttmd-table>
There is default value set as:
translate="util.noData" transalte-default="There is no Data"
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
})
});
const _defaultConfigs = {
forceMobile: false,
breakpoint: 'xs',
limits: {
desktop: 8,
mobile: 3
},
message: {
noData: null
},
enableAccordion: false
}
[
{
"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"
}
]
// 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'
]
vm.limits = {
desktop: 3,
mobile: 3,
}
vm.toolbar = {
title: this.$translate.instant('path.to.value'),
icon: 'string'
}
vm.pipes = {
targets: [],
foramt: string
}
Default: 'button' Available value: 'button', 'text'
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
Thanks for usin my library, currently the code is not on Github, but will do it soon. Then I will be really appreciated to see the pull request or issues from all of you!
This library is created and maintained by Zhentian Wan (Tecnotree Oy, Tampere, Finland). And this is the first time I contribute to open source world! WoW!! Fell free to @ me on Twitter @Zhentiw, if anything come to your mind want to discuss with me.
#Version 1.1.7 (9.5.2016)
#Version 1.1.3 (2.5.2016)
* Add accordion support
* Add UMD Support
* Change the toolbar style
* Add lodash
* Able to config message globaly or for each table when there is no data (tranlsate support).
* Hide pagination when the item length is 0
FAQs
Angular Material Desgin Table Component
We found that angular-md-table demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
In this segment of the Risky Business podcast, Feross Aboukhadijeh and Patrick Gray discuss the challenges of tracking malware discovered in open source softare.
Research
Security News
A threat actor's playbook for exploiting the npm ecosystem was exposed on the dark web, detailing how to build a blockchain-powered botnet.
Security News
NVD’s backlog surpasses 20,000 CVEs as analysis slows and NIST announces new system updates to address ongoing delays.