import 'package:mdl/mdl.dart';

main() {
    registerMdl();
    registerComponentsForDataTableII();
    componentFactory().run().then((_) {
//        final DeviceStatusElement devicestatus = DeviceStatusElement.widget(dom.querySelector("device-status"));
//        devicestatus.addItem(new DeviceStatus("Status I",25.720735,-94.570312,false));
//        devicestatus.addItem(new DeviceStatus("Status II",23.241346,-93.867187,false));
//        devicestatus.addItem(new DeviceStatus("Status III",24.246965,91.054687,true));
//        devicestatus.addItem(new DeviceStatus("Status IV",25.720735,-88.154297,false));
    });
}
To use any MDL component, you must include the minified CSS file in the <head> section of the page:
More about theming...
<div class="demo-preview-block debug-off">
    <h5>With 'divs'</h5>
    <div class="mdl-data-tableex mdl-js-data-tableex mdl-data-tableex--selectable mdl-shadow--2dp">
        <div class="mdl-div-data-tableex__row mdl-div-data-tableex__head">
            <div class="mdl-data-tableex__cell--non-numeric mdl-data-tableex__cell--grow">Material</div>
            <div class="mdl-data-tableex__cell--numeric">Quantity</div>
            <div class="mdl-data-tableex__cell--numeric">Unit price</div>
        </div>
        <div class="mdl-div-data-tableex__row">
            <div class="mdl-data-tableex__cell--grow">Acrylic (Transparent)</div>
            <div class="mdl-data-tableex__cell--numeric">25</div>
            <div class="mdl-data-tableex__cell--numeric">$2.90</div>
        </div>
        <div class="mdl-div-data-tableex__row">
            <div class="mdl-data-tableex__cell--non-numeric mdl-data-tableex__cell--grow">Plywood (Birch)</div>
            <div class="mdl-data-tableex__cell--numeric">50</div>
            <div class="mdl-data-tableex__cell--numeric">$1.25</div>
        </div>
        <div class="mdl-div-data-tableex__row">
            <div class="mdl-data-tableex__cell--non-numeric mdl-data-tableex__cell--grow">Laminate (Gold on Blue)</div>
            <div class="mdl-data-tableex__cell--numeric">10</div>
            <div class="mdl-data-tableex__cell--numeric">$2.35</div>
        </div>
    </div>
    <h5>With 'table-element'</h5>
    <table class="mdl-data-table mdl-js-data-table mdl-data-table--selectable mdl-shadow--2dp">
        <thead>
        <tr>
            <th class="mdl-data-table__cell--non-numeric">Material</th>
            <th>Quantity</th>
            <th>Unit price</th>
        </tr>
        </thead>
        <tbody>
        <tr>
            <td class="mdl-data-table__cell--non-numeric">Acrylic (Transparent)</td>
            <td>25</td>
            <td>$2.90</td>
        </tr>
        <tr>
            <td class="mdl-data-table__cell--non-numeric">Plywood (Birch)</td>
            <td>50</td>
            <td>$1.25</td>
        </tr>
        <tr>
            <td class="mdl-data-table__cell--non-numeric">Laminate (Gold on Blue)</td>
            <td>10</td>
            <td>$2.35</td>
        </tr>
        </tbody>
    </table>
</div>

data-table2

...will be here soon