Add basic data table, with more functionality to come later.
Sérgio Gomes
parent
fd56adac2c
commit
4df49777d5
|
|
@ -186,6 +186,7 @@ gulp.task('scripts', function () {
|
|||
'src/tooltip/tooltip.js',
|
||||
// Complex components (which reuse base components)
|
||||
'src/layout/layout.js',
|
||||
'src/data-table/data-table.js',
|
||||
// And finally, the ripples
|
||||
'src/ripple/ripple.js'
|
||||
];
|
||||
|
|
|
|||
|
|
@ -39,6 +39,7 @@
|
|||
* -----Badge
|
||||
* -----Shadows
|
||||
* -----Grid
|
||||
* -----Data table
|
||||
*/
|
||||
|
||||
|
||||
|
|
@ -558,3 +559,26 @@ $grid-phone-gutter: $grid-desktop-gutter !default;
|
|||
$grid-phone-margin: $grid-desktop-margin !default;
|
||||
|
||||
$grid-cell-default-columns: $grid-phone-columns !default;
|
||||
|
||||
/* DATA TABLE */
|
||||
|
||||
$data-table-header-color: rgba(#000, 0.54);
|
||||
$data-table-divider-color: rgba(#000, 0.12);
|
||||
|
||||
$data-table-hover-color: #eeeeee;
|
||||
$data-table-selection-color: #e0e0e0;
|
||||
|
||||
$data-table-dividers: 1px solid $data-table-divider-color;
|
||||
|
||||
$data-table-row-height: 48px;
|
||||
$data-table-last-row-height: 56px;
|
||||
$data-table-header-height: 56px;
|
||||
|
||||
$data-table-column-spacing: 36px;
|
||||
$data-table-column-padding: $data-table-column-spacing / 2;
|
||||
|
||||
$data-table-card-header-height: 64px;
|
||||
$data-table-card-title-top: 20px;
|
||||
$data-table-card-padding: 24px;
|
||||
$data-table-button-padding-right: 16px;
|
||||
$data-table-cell-top: $data-table-card-padding / 2;
|
||||
|
|
|
|||
|
|
@ -0,0 +1,135 @@
|
|||
/**
|
||||
* Copyright 2015 Google Inc. All Rights Reserved.
|
||||
*
|
||||
* Licensed under the Apache License, Version 2.0 (the "License");
|
||||
* you may not use this file except in compliance with the License.
|
||||
* You may obtain a copy of the License at
|
||||
*
|
||||
* http://www.apache.org/licenses/LICENSE-2.0
|
||||
*
|
||||
* Unless required by applicable law or agreed to in writing, software
|
||||
* distributed under the License is distributed on an "AS IS" BASIS,
|
||||
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
||||
* See the License for the specific language governing permissions and
|
||||
* limitations under the License.
|
||||
*/
|
||||
|
||||
@import "../variables";
|
||||
|
||||
|
||||
.mdl-data-table {
|
||||
display: inline-block;
|
||||
position: relative;
|
||||
@include shadow-2dp();
|
||||
|
||||
& .mdl-data-table__table {
|
||||
border-top: none;
|
||||
}
|
||||
|
||||
.mdl-data-table__select {
|
||||
width: 16px;
|
||||
}
|
||||
}
|
||||
|
||||
.mdl-data-table__header-right {
|
||||
position: absolute;
|
||||
right: $data-table-button-padding-right;
|
||||
|
||||
& > * {
|
||||
margin-left: $data-table-card-padding;
|
||||
}
|
||||
}
|
||||
|
||||
.mdl-data-table__header {
|
||||
height: $data-table-header-height;
|
||||
border-top: $data-table-dividers;
|
||||
border-left: $data-table-dividers;
|
||||
border-right: $data-table-dividers;
|
||||
}
|
||||
|
||||
.mdl-data-table__title {
|
||||
position: absolute;
|
||||
top: $data-table-card-title-top;
|
||||
left: $data-table-card-padding;
|
||||
text-align: left;
|
||||
@include typo-title();
|
||||
}
|
||||
|
||||
.mdl-data-table__table {
|
||||
position: relative;
|
||||
border: $data-table-dividers;
|
||||
border-collapse: collapse;
|
||||
white-space: nowrap;
|
||||
|
||||
tbody {
|
||||
tr {
|
||||
position: relative;
|
||||
height: $data-table-row-height;
|
||||
@include material-animation-default(0.28s);
|
||||
transition-property: background-color;
|
||||
|
||||
&:last-of-type {
|
||||
height: $data-table-last-row-height;
|
||||
}
|
||||
|
||||
&.is-selected {
|
||||
background-color: $data-table-selection-color;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background-color: $data-table-hover-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
td, th {
|
||||
padding: 0 $data-table-column-padding 0 $data-table-column-padding;
|
||||
text-align: right;
|
||||
|
||||
&:first-of-type {
|
||||
padding-left: 24px;
|
||||
}
|
||||
|
||||
&:last-of-type {
|
||||
padding-right: 24px;
|
||||
}
|
||||
}
|
||||
|
||||
td {
|
||||
position: relative;
|
||||
vertical-align: top;
|
||||
height: $data-table-row-height;
|
||||
border-top: $data-table-dividers;
|
||||
border-bottom: $data-table-dividers;
|
||||
padding-top: $data-table-cell-top;
|
||||
box-sizing: border-box;
|
||||
|
||||
.mdl-data-table__select {
|
||||
vertical-align: top;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 24px;
|
||||
}
|
||||
}
|
||||
|
||||
th {
|
||||
position: relative;
|
||||
vertical-align: bottom;
|
||||
text-overflow: ellipsis;
|
||||
height: $data-table-header-height;
|
||||
@include typo-body-2();
|
||||
font-size: 12px;
|
||||
color: $data-table-header-color;
|
||||
padding-bottom: 8px;
|
||||
box-sizing: border-box;
|
||||
|
||||
.mdl-data-table__select {
|
||||
position: relative;
|
||||
top: 12px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.mdl-data-table--non-numeric.mdl-data-table--non-numeric {
|
||||
text-align: left;
|
||||
}
|
||||
|
|
@ -0,0 +1,152 @@
|
|||
/**
|
||||
* Copyright 2015 Google Inc. All Rights Reserved.
|
||||
*
|
||||
* Licensed under the Apache License, Version 2.0 (the "License");
|
||||
* you may not use this file except in compliance with the License.
|
||||
* You may obtain a copy of the License at
|
||||
*
|
||||
* http://www.apache.org/licenses/LICENSE-2.0
|
||||
*
|
||||
* Unless required by applicable law or agreed to in writing, software
|
||||
* distributed under the License is distributed on an "AS IS" BASIS,
|
||||
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
||||
* See the License for the specific language governing permissions and
|
||||
* limitations under the License.
|
||||
*/
|
||||
|
||||
/**
|
||||
* Class constructor for Data Table Card MDL component.
|
||||
* Implements MDL component design pattern defined at:
|
||||
* https://github.com/jasonmayes/mdl-component-design-pattern
|
||||
* @param {HTMLElement} element The element that will be upgraded.
|
||||
*/
|
||||
function MaterialDataTable(element) {
|
||||
'use strict';
|
||||
|
||||
this.element_ = element;
|
||||
|
||||
// Initialize instance.
|
||||
this.init();
|
||||
}
|
||||
|
||||
/**
|
||||
* Store constants in one place so they can be updated easily.
|
||||
* @enum {string | number}
|
||||
* @private
|
||||
*/
|
||||
MaterialDataTable.prototype.Constant_ = {
|
||||
// None at the moment.
|
||||
};
|
||||
|
||||
/**
|
||||
* Store strings for class names defined by this component that are used in
|
||||
* JavaScript. This allows us to simply change it in one place should we
|
||||
* decide to modify at a later date.
|
||||
* @enum {string}
|
||||
* @private
|
||||
*/
|
||||
MaterialDataTable.prototype.CssClasses_ = {
|
||||
DATA_TABLE: 'mdl-data-table',
|
||||
TABLE: 'mdl-data-table__table',
|
||||
SELECTABLE: 'mdl-data-table--selectable',
|
||||
IS_SELECTED: 'is-selected',
|
||||
IS_UPGRADED: 'is-upgraded'
|
||||
};
|
||||
|
||||
MaterialDataTable.prototype.selectRow_ = function(checkbox, row, rows) {
|
||||
'use strict';
|
||||
|
||||
if (row) {
|
||||
return function() {
|
||||
if (checkbox.checked) {
|
||||
row.classList.add(this.CssClasses_.IS_SELECTED);
|
||||
} else {
|
||||
row.classList.remove(this.CssClasses_.IS_SELECTED);
|
||||
}
|
||||
}.bind(this);
|
||||
}
|
||||
|
||||
if (rows) {
|
||||
return function() {
|
||||
var i;
|
||||
var el;
|
||||
if (checkbox.checked) {
|
||||
for (i = 0; i < rows.length; i++) {
|
||||
el = rows[i].querySelector('td').querySelector('.mdl-checkbox');
|
||||
el.widget.check();
|
||||
rows[i].classList.add(this.CssClasses_.IS_SELECTED);
|
||||
}
|
||||
} else {
|
||||
for (i = 0; i < rows.length; i++) {
|
||||
el = rows[i].querySelector('td').querySelector('.mdl-checkbox');
|
||||
el.widget.uncheck();
|
||||
rows[i].classList.remove(this.CssClasses_.IS_SELECTED);
|
||||
}
|
||||
}
|
||||
}.bind(this);
|
||||
}
|
||||
};
|
||||
|
||||
MaterialDataTable.prototype.createCheckbox_ = function(row, rows) {
|
||||
'use strict';
|
||||
|
||||
var label = document.createElement('label');
|
||||
label.classList.add('mdl-checkbox');
|
||||
label.classList.add('mdl-js-checkbox');
|
||||
label.classList.add('mdl-js-ripple-effect');
|
||||
label.classList.add('mdl-data-table__select');
|
||||
var checkbox = document.createElement('input');
|
||||
checkbox.type = 'checkbox';
|
||||
checkbox.classList.add('mdl-checkbox__input');
|
||||
if (row) {
|
||||
checkbox.addEventListener('change', this.selectRow_(checkbox, row));
|
||||
} else if (rows) {
|
||||
checkbox.addEventListener('change', this.selectRow_(checkbox, null, rows));
|
||||
}
|
||||
label.appendChild(checkbox);
|
||||
componentHandler.upgradeElement(label, 'MaterialCheckbox');
|
||||
return label;
|
||||
};
|
||||
|
||||
/**
|
||||
* Initialize element.
|
||||
*/
|
||||
MaterialDataTable.prototype.init = function() {
|
||||
'use strict';
|
||||
|
||||
if (this.element_) {
|
||||
this.table_ = this.element_.querySelector('.' + this.CssClasses_.TABLE);
|
||||
|
||||
if (this.table_) {
|
||||
var firstHeader = this.table_.querySelector('th');
|
||||
var rows = this.table_.querySelector('tbody').querySelectorAll('tr');
|
||||
|
||||
if (this.element_.classList.contains(this.CssClasses_.SELECTABLE)) {
|
||||
var th = document.createElement('th');
|
||||
var headerCheckbox = this.createCheckbox_(null, rows);
|
||||
th.appendChild(headerCheckbox);
|
||||
firstHeader.parentElement.insertBefore(th, firstHeader);
|
||||
}
|
||||
|
||||
for (var i = 0; i < rows.length; i++) {
|
||||
var firstCell = rows[i].querySelector('td');
|
||||
if (firstCell) {
|
||||
var td = document.createElement('td');
|
||||
var rowCheckbox = this.createCheckbox_(rows[i]);
|
||||
td.appendChild(rowCheckbox);
|
||||
rows[i].insertBefore(td, firstCell);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
this.element_.classList.add(this.CssClasses_.IS_UPGRADED);
|
||||
}
|
||||
};
|
||||
|
||||
// The component registers itself. It can assume componentHandler is available
|
||||
// in the global scope.
|
||||
componentHandler.register({
|
||||
constructor: MaterialDataTable,
|
||||
classAsString: 'MaterialDataTable',
|
||||
cssClass: 'mdl-js-data-table'
|
||||
});
|
||||
|
|
@ -0,0 +1,55 @@
|
|||
<!doctype html>
|
||||
<html lang="">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||
<meta name="description" content="">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<title>Data Table</title>
|
||||
|
||||
<link href='//fonts.googleapis.com/css?family=Roboto:regular,bold,italic,thin,light,bolditalic,black,medium&lang=en' rel='stylesheet' type='text/css'>
|
||||
|
||||
<link rel="stylesheet" href="demo.css">
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div class="mdl-data-table mdl-js-data-table mdl-data-table--selectable mdl-shadow--z2">
|
||||
<div class="mdl-data-table__header">
|
||||
<span class="mdl-data-table__title">A Material Table</span>
|
||||
<div class="mdl-data-table__header-right">
|
||||
<button class="mdl-button mdl-js-button mdl-button--icon mdl-button--mini-icon">
|
||||
<span class="mdl-icon mdl-icon--more-vert"></span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<table class="mdl-data-table__table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th class="mdl-data-table--non-numeric">Material</th>
|
||||
<th>Quantity</th>
|
||||
<th>Unit price</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td class="mdl-data-table--non-numeric">Acrylic (Transparent)</td>
|
||||
<td>25</td>
|
||||
<td>$2.90</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="mdl-data-table--non-numeric">Plywood (Birch)</td>
|
||||
<td>50</td>
|
||||
<td>$1.25</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="mdl-data-table--non-numeric">Laminate (Gold on Blue)</td>
|
||||
<td>10</td>
|
||||
<td>$2.35</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
<script src="../../material.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,17 @@
|
|||
/**
|
||||
* Copyright 2015 Google Inc. All Rights Reserved.
|
||||
*
|
||||
* Licensed under the Apache License, Version 2.0 (the "License");
|
||||
* you may not use this file except in compliance with the License.
|
||||
* You may obtain a copy of the License at
|
||||
*
|
||||
* http://www.apache.org/licenses/LICENSE-2.0
|
||||
*
|
||||
* Unless required by applicable law or agreed to in writing, software
|
||||
* distributed under the License is distributed on an "AS IS" BASIS,
|
||||
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
||||
* See the License for the specific language governing permissions and
|
||||
* limitations under the License.
|
||||
*/
|
||||
|
||||
@import "../material-design-lite";
|
||||
|
|
@ -34,6 +34,7 @@
|
|||
@import "button/button";
|
||||
@import "card/card";
|
||||
@import "checkbox/checkbox";
|
||||
@import "data-table/data-table";
|
||||
@import "footer/mega_footer";
|
||||
@import "footer/mini_footer";
|
||||
@import "grid/grid";
|
||||
|
|
|
|||
Loading…
Reference in New Issue