Usage
Add module:
angular;
Install
npm:
npm install angular-md-table --save
Include files:
;;
CDN
https://npmcdn.com/angular-md-table@latest/dist/angular-md-table.umd.js// orhttps://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
Required dependencies
- Angular 1.5.2
- Angular Material 1.0.2
- Angular Translate Support
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:
<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:
Default value for those are:
Features
Desktop view and mobile view
The default breakpoint is 'xs', able to pass breakpoint
bindings to the component
Force Mobile View
If there is a case you only want to display mobile view, pass in force-mobile
:
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.
The type
you pass in , will be the listType
inside js:
thisSomeService
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.
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
.
Sort
Able to sort
data according to the attr, this should be an array, but currently, only work with the first element inside the array.
Exclude
If there is any attr inside the data you don't want to display on the interface, you can use exclude
:
Pipes
You can use Angular built-in filter such as date
& currency
by adding pipies
to format the field:
thispipes = 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:
It takes function:
//Item is sent back with callbackconst someFn = { return ; // 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:
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
.
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
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.
<!-- Button --> <!-- Text -->
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>
Inside someFn()
function, it will return someData
for your_directive
to display.
{ someService ; }
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.
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;
Default Config value
const _defaultConfigs = forceMobile: false breakpoint: 'xs' limits: desktop: 8 mobile: 3 message: noData: null enableAccordion: false
Data Structure
Object
items: Array "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 valuevmheaders = 'some.path.to.value' 'some.path.to.value2'
total-number: number (required if need pagination)
on-page-change: function (required if need pagination)
force-mobile: boolean (optional)
'xs', 'sm', 'md', 'lg'
breakpoint:limits: Object (optional)
vmlimits = desktop: 3 mobile: 3
string
sort: Arraystring
exclude: Arraytoolbar: Object (optional)
vmtoolbar = title: this$translate icon: 'string'
pipes: Object
vmpipes = 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)
Thanks
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!
Author
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.
CHANLE LOG
Version 1.1.7 (9.5.2016)
BUG FIXS
- remove placeholder when action is not defined
- fix text-overflow
- fix desktop table border mis match
- improve the preformence when toggle accordion
Version 1.1.3 (2.5.2016)
New Features
* Add accordion support
* Add UMD Support
BUG FIXS
* Change the toolbar style
* Add lodash
Version 1.0.8 (30.04.2016)
New Features
* Able to config message globaly or for each table when there is no data (tranlsate support).
BUG FIXS
* Hide pagination when the item length is 0