Get started with md-data-table CDN

MIT licensed

Md-data-table is a Material Design Angular component for responsive and sortable data tables.

Tags:
  • angular
  • table

Stable version

Copied!

How to start using md-data-table CDN


<!DOCTYPE html>
<html>
<head>
  <title>Get started with md-data-table CDN - cdnhub.io</title>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/material-design-lite/2.10.3/material.indigo-pink.min.css">
  <script defer src="https://cdn.jsdelivr.net/npm/[email protected]/lodash.min.js"></script>
  <script defer src="https://cdn.cdnhub.io/md-data-table/2.2.0/md-data-table.min.js"></script>
</head>
<body>
  <div class="mdl-layout mdl-js-layout mdl-layout--fixed-drawer mdl-layout--fixed-header">
    <!-- Drawer -->
    <header class="mdl-layout__header">
      <div class="mdl-layout__header-row">
        <!-- Title -->
        <span class="mdl-layout-title">MD Data Table Example</span>
      </div>
    </header>

    <!-- Drawer -->
    <aside class="mdl-layout__drawer">
      <div class="mdl-layout__content">
        <!-- Temporary content to fill the drawer -->
      </div>
    </aside>

    <!-- Main Content -->
    <main class="mdl-layout__content">
      <div class="mdl-grid">
        <div class="mdl-cell mdl-cell--12-col">
          <div class="mdl-data-table mdl-js-data-table mdl-shadow--2dp">
            <table class="mdl-data-table mdl-js-data-table">
              <thead>
                <tr>
                  <th>Name</th>
                  <th>Age</th>
                  <th>Country</th>
                </tr>
              </thead>
              <tbody>
                <tr>
                  <td>John Doe</td>
                  <td>30</td>
                  <td>USA</td>
                </tr>
                <tr>
                  <td>Jane Doe</td>
                  <td>25</td>
                  <td>Canada</td>
                </tr>
                <tr>
                  <td>Mike Smith</td>
                  <td>45</td>
                  <td>Australia</td>
                </tr>
              </tbody>
            </table>
          </div>
        </div>
      </div>
    </main>
  </div>

  <script>
    // Initialize Material Design Lite
    mdl.initComponents();

    // Initialize MD Data Table
    window.addEventListener('DOMContentLoaded', function() {
      var dataTable = new mdl.dataTable.DataTable('#mdl-data-table table');
    });
  </script>
</body>
</html>
Copied!
Copied!
Copied!
Copied!
Copied!
Copied!
Copied!
Copied!
Copied!

All versions