Angular material table. Complete implementation of google material design based on angular material components.

Live demo http://iamisti.github.io/mdDataTable/

If you like what you see, you can even make it better by donating the project with even a small amount https://www.paypal.me/iamisti

Install

1. bower install mdDataTable or download the source.
2. Make sure the mdDataTable lib is loaded. It's served in three different files: md-data-table-style.css, md-data-table.js, md-data-table-templates.js
3. Add mdDataTable as a dependency of your app.

UI&UX driven by google data table

http://www.google.com/design/spec/components/data-tables.html

Table of contents

Overview

Table attributes

• selectable-rows
• virtual-repeat
• delete-row-callback
• selected-row-callback
• sortable-columns
• animate-sort-icon
• ripple-effect
• ! title-overflow-handler
• table-card
• paginated-rows
• alternate-headers
• mdt-row
• mdt-row-paginator
• mdt-row-paginator-error-message

Column attributes (mdt-column)

• align-rule
• column-definition
• ! sortable-rows-default
• sort-by

Row attributes (mdt-row)

• table-row-id

Cell attributes (mdt-cell)

• ! inline-menu
• editable-field
• html-content

Overview

In its simplest form, a data table contains a top row of column names, and rows for data.

Table attributes

Global attributes for the table

Available	Params	Type	Details
✅	selectable-rows	Boolean	optional, checkboxes accompany each row if need to select or manipulate data
✅	virtual-repeat	Boolean	optional, 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.
✅	delete-row-callback	Function	optional, callback function when deleting rows. The callback will be called with the array of the deleted row ids. Don't forget to specify table-row-id for mdt-row. If you do, it will return the deleted rows data.
✅	selected-row-callback	Function	optional, callback function when selecting rows. The callback will be called with the array of the selected row ids. Don't forget to specify table-row-id for mdt-row. If you do, it will return the selected rows data.

Available	Params	Type	Details
✅	sortable-columns	Boolean	optional, if enabled, sort data and display a sorted state in the column header. If the user clicks on a column that is already sorted, reverse the sort order and rotate the sort icon. Use sortable-rows-default attribute directive on a column which intended to be the default sortable column
✅	animate-sort-icon	Boolean	optional, if enabled, sort icon will be animated on change
✅	ripple-effect	Boolean	optional, if enabled, ripple effect will be applied on the column names when clicked

Available	Params	ChildParams	Type	Details
❌	title-overflow-handler		String	optional, Sometimes, column names don’t fit in a container in between columns. There are two options to handle this
❌		(default) truncateColumnNames	-	Shorten the column name and display it in full on hover
❌		useHorizontalScrollingOnTable	-	Display the full column name and enable horizontal scrolling in the table container

Available	Params	ChildParams	Type	Details
✅	table-card		Object	optional, tables can be embedded within a card, with table navigation and data manipulation tools available at the top and bottom.
✅		title	String	The title of the table card
❌		actionIcons	Boolean	Card action icons (header and footer)
✅		visible	Boolean	The visibility of the table card

Available	Params	ChildParams	Type	Details
✅	paginated-rows		Object	optional, if set, then basic pagination will applied to the bottom of the table.
✅		isEnabled	Boolean	Optional, if provided then basic pagination will applied to the bottom of the table
✅		rowsPerPageValues	Array	Optional, if provided then it will apply the rows per page values from the given arguments. Example: [5,10,20]

Available	Params	ChildParams	Type	Details
✅	alternate-headers		String	optional, 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
❌		persistentActions	-	Shows persistent action buttons in header
✅		contextual	-	Shows contextual content depending on what has been selected

Available	Params	ChildParams	Type	Details
✅	mdt-row		Object	optional, makes possible to provide row data by passing the information through this attribute. Makes it possible to listen on data changes.
✅		data	Array	required, The input data
✅		table-row-id-key	String	Integer
✅		column-keys	Array	required, property names of the passed data array. Makes it possible to configure which property should go in which column.
❌	html-contnent support

Example usage for mdt-row attribute:

<mdt-table
    selectable-rows="true"
    table-card="{title: Nutrition, actionIcons: true}"
    mdt-row="{
        'data': filteredItems,
        'table-row-id-key': 'id',
        'column-keys': ['name', 'calories', 'fat', 'carbs', 'protein', 'sodium', 'calcium', 'iron']
    }">

    <mdt-header-row>
        <mdt-column>Dessert (100g serving)</mdt-column>
        <mdt-column>Type</mdt-column>
        <mdt-column>Calories</mdt-column>
        <mdt-column sortable-rows-default>Fat (g)</mt-column>
        <mdt-column>Carbs (g)</mdt-column>
        <mdt-column>Protein (g)</mdt-column>
    </mdt-header-row>

    <!-- notice we didn't provide mdt-row here -->
</mdt-table>

Available	Params	Type	Details
✅	mdt-row-paginator	Function	optional, makes possible to provide a callback function which returns a promise, providing the data for the table. Has two parameters: page and pageSize
✅	mdt-row-paginator-error-message	String	optional, overrides default error mesasge when promise gets rejected by the paginator function.

Example usage for mdt-row-paginator attribute:

<mdt-table
        paginated-rows="{isEnabled: true, rowsPerPageValues: [5,10,20,100]}"
        mdt-row-paginator="paginatorCallback(page, pageSize)"
        mdt-row-paginator-error-message="Error happened during loading nutritions."
        mdt-row="{
            'table-row-id-key': 'fields.item_id',
            'column-keys': [
                'fields.item_name',
                'fields.nf_calories',
                'fields.nf_total_fat',
                'fields.nf_total_carbohydrate',
                'fields.nf_protein',
                'fields.nf_sodium',
                'fields.nf_calcium_dv',
                'fields.nf_iron_dv'
            ],
        }">

        <mdt-header-row>
            <mdt-column align-rule="left">Dessert (100g serving)</mdt-column>
            <mdt-column align-rule="right">Calories</mdt-column>
            <mdt-column align-rule="right">Fat (g)</mdt-column>
            <mdt-column align-rule="right">Carbs (g)</mdt-column>
            <mdt-column align-rule="right">Protein (g)</mdt-column>
            <mdt-column align-rule="right">Sodium (mg)</mdt-column>
            <mdt-column align-rule="right">Calcium (%)</mdt-column>
            <mdt-column align-rule="right">Iron (%)</mdt-column>
        </mdt-header-row>
    </mdt-table>

Column attributes

mdt-column attributes

Available	Params	ChildPArams	Type	Details
✅	align-rule		String	if provided, align the text to the needed direction for the entire column (note, that it aligns the data that belongs to the column)
✅		(default) left		left-align content
✅		right		right-align content

Available	Params	Type	Details
✅	column-definition	String	if provided, display a tooltip on hover. If sorting is enabled, display a light sort icon upon hover, which indicates that the column is sortable.

Available	Params	Type	Details
❌	sortable-rows-default	-	When sortable-columns is applied to the table, it marks the column as the default sorting column
✅	sort-by	Function	if provided, used as the iteratee during sort operations to transform the cell value to a value that can be ranked in order.

Data-Row attributes

mdt-row attributes

Available	Params	Type	Details
✅	table-row-id	String	Integer

Data-Cell attributes

mdt-cell attributes

Available	Params	ChildParams	Type	Details
❌	inline-menu		Array	if provided, users can select from a predefined list of options. In this scenario, a menu component directly embedded in the table

Available	Params	ChildParams	Type	Details
✅	editable-field		String	if provided, provides basic text editing. Include editable fields within a table and denote them using placeholder text(if empty). You can use a simple edit dialog with just a text field, or display a full dialog component on click.
✅		smallEditDialog	-	A simple, one-field edit dialog on click
✅		largeEditDialog	-	A complex, flexible edit edit dialog on click
✅	editable-field-title		String	If set, then it sets the title of the dialog. (only for largeEditDialog)
✅	editable-field-max-length		Number	if set, then it sets the maximum length of the field.

Available	Params	ChildParams	Type	Details
✅	html-content		Boolean	When the cell content is not a simple value (html content)

Example usage:

<mdt-table
    selectable-rows="true"
    table-card="{title: Nutrition, actionIcons: true}">

    <mdt-header-row>
        <!-- defining column descriptions, align content to the left -->
        <mdt-column
            align-rule="left"
            column-definition="The total amount of food energy in the given serving size.">
            Dessert (100g serving)
        </mdt-column>

        <!-- in case of inline menu (INLINE-MENU FEATURE DOES NOT EXIST YET) -->
        <mdt-column inline-menu="[ {iceCream: 'Ice Cream', pastry: 'Pastry', other: 'Other'} ]">Type</mdt-column>

        <!-- inline text editing (EDITABLE-FIELDS FEATURE DOES NOT EXIST YET) -->
        <mdt-column editable-field="textInput">
            Calories
        </mdt-column>

        <!-- in case of sortable columns, we can set the defaultly sortable column -->
        <mdt-column sortable-rows-default>
            Fat (g)
        </mt-column>
        <mdt-column>Carbs (g)</mdt-column>
        <mdt-column>Protein (g)</mdt-column>
    </mdt-header-row>

    <mdt-row ng-repeat="nutrition in nutritionList">
        <mdt-cell>Frozen Joghurt</mdt-cell>
        <mdt-cell>159</mdt-cell>
        <mdt-cell>6</mdt-cell>
        <mdt-cell>24</mdt-cell>
        <mdt-cell>4</mdt-cell>
        <mdt-cell>87</mdt-cell>
    </mdt-row>

</mdt-table>