aw_table v1.1.0
AW-TABLE
Component for aw_polymer_3
that creates a stylish table with various functionalities in a very simple way.
Install
npm i aw_table
Use
Inside the aw-table
component you have to write a normal html table to which you can add the following features that will be shown below.
This will create a stylish table with added features saving you a lot of code to write.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>Test page</title>
</head>
<body>
<aw-table unresolved>
<table>
<thead>
<tr>
<th>Position</th>
<th>Name</th>
<th>Rating</th>
<th>Details</th>
<th>Car</th>
<th>Fruit</th>
</tr>
</thead>
<tbody>
<tr>
<td>2</td>
<td>Jonathan Bampletiem</td>
<td>2000</td>
<td>Details for Jonathan</td>
<td>Aston Martin</td>
<td>Watermelon</td>
</tr>
<tr>
<td>1</td>
<td>Anthony Smith</td>
<td>2452</td>
<td>Details for Anthony</td>
<td>Ferrari</td>
<td>Strawberry</td>
</tr>
<tr>
<td>3</td>
<td>David Rajhan Dallara</td>
<td>3600</td>
<td>Details for David</td>
<td>Porsche 911rsr</td>
<td>Grape</td>
</tr>
</tbody>
</table>
</aw-table>
<script src="/node_modules/aw_webcomponents/webcomponentsjs/webcomponents-loader.js"></script>
<script type="module" src="/node_modules/aw_polymer_3/polymer/polymer-element.js"></script>
<script type="module" async src="/node_modules/aw_table/aw-table.js"></script>
</body>
</html>
Properties
- unresolved =>
boolean
- sticky =>
boolean
- sortbycolumn =>
number
- sortdir =>
asc
|desc
- mark-row =>
boolean
- mark-column =>
boolean
- row-effect =>
boolean
unresolved
It keeps the component hidden until it is loaded. For that you have to introduce in your css
, theunresilved
property as hidden. The component on loading will remove this property and the component will become visible.
<style>
[unresolved] {
display: none;
}
</style>
<aw-table unresolved></aw-table>
sticky
Sets the <thead>
header fixed.
<aw-table unresolved sticky></aw-table>
sortbycolumn
Sort the table by the column given when rendering the table
<aw-table unresolved sortbycolumn="0"></aw-table>
sortdir
The address in which the table will be sorted if it has the sortbycolumn
property
<aw-table unresolved sortbycolumn="1" sortdir="desc"></aw-table>
mark-row
Mark even rows with a background color to better differentiate the rows
<aw-table unresolved mark-row></aw-table>
mark-column
Mark even columns with a background color to better differentiate the columns
<aw-table unresolved smark-column></aw-table>
row-effect
Activate the effect in the rows when you hover the mouse over it
<aw-table unresolved row-effect></aw-table>
Features
Sortable columns
To make a column sortable, you just have to add the attribute sortable
to the header cell of the table by which you want it to be sorted.
<aw-table unresolved mark-row row-effect>
<table>
<thead>
<tr>
<th sortable dir="asc">Position</th>
<th sortable dir="asc">Name</th>
<th sortable>Rating</th>
<th>Details</th>
<th sortable dir="asc">Car</th>
<th sortable dir="asc">Fruit</th>
</tr>
</thead>
<tbody>
<tr>
<td>2</td>
<td>Jonathan Bampletiem</td>
<td>2000</td>
<td>Details for Jonathan</td>
<td>Aston Martin</td>
<td>Watermelon</td>
</tr>
<tr>
<td>1</td>
<td>Anthony Smith</td>
<td>2452</td>
<td>Details for Anthony</td>
<td>Ferrari</td>
<td>Strawberry</td>
</tr>
<tr>
<td>3</td>
<td>David Rajhan Dallara</td>
<td>3600</td>
<td>Details for David</td>
<td>Porsche 911rsr</td>
<td>Grape</td>
</tr>
</tbody>
</table>
</aw-table>
Nowraped text
In addition, the aw-table
has one more interesting feature, you can add thenowrap
attribute to any cell, so that the text cannot exceed the cell or create a new row, being this trimmed by ...
<aw-table unresolved>
<table>
<thead>
<tr>
<th width="80px">Position</th>
<th width="150px">Name</th>
<th>Rating</th>
<th>Details</th>
<th>Car</th>
<th>Fruit</th>
</tr>
</thead>
<tbody>
<tr>
<td>2</td>
<td nowrap>Jonathan Bampletiem</td>
<td>2000</td>
<td>Details for Jonathan</td>
<td>Aston Martin</td>
<td>Watermelon</td>
</tr>
<tr>
<td>1</td>
<td nowrap>Anthony Smith</td>
<td>2452</td>
<td>Details for Anthony</td>
<td>Ferrari</td>
<td>Strawberry</td>
</tr>
</tbody>
</table>
</aw-table>
Min width column
A simple way to establish that the column must have a minimum width is by adding the min-width
attribute to the column, in this wayaw-table
will interpret that that column cannot exceed that width
<aw-table unresolved>
<table>
<thead>
<tr>
<th width="80px">Position</th>
<th width="150px">Name</th>
<th>Rating</th>
<th min-width="200px">Details</th>
<th>Car</th>
<th>Fruit</th>
</tr>
</thead>
<tbody>
<tr>
<td>2</td>
<td nowrap>Jonathan Bampletiem</td>
<td>2000</td>
<td>Details for Jonathan</td>
<td>Aston Martin</td>
<td>Watermelon</td>
</tr>
</tbody>
</table>
</aw-table>
Javascript
Puedes además ordenar la tabla y acceder a sus elementos por javascript de forma muy sencilla
<aw-table unresolved>
<table>
<thead>
<tr>
<th width="80px">Position</th>
<th width="150px">Name</th>
<th>Rating</th>
<th>Details</th>
<th>Car</th>
<th>Fruit</th>
</tr>
</thead>
<tbody>
<tr>
<td>2</td>
<td nowrap>Jonathan Bampletiem</td>
<td>2000</td>
<td>Details for Jonathan</td>
<td>Aston Martin</td>
<td>Watermelon</td>
</tr>
<tr>
<td>1</td>
<td nowrap>Anthony Smith</td>
<td>2452</td>
<td>Details for Anthony</td>
<td>Ferrari</td>
<td>Strawberry</td>
</tr>
<tr>
<td>3</td>
<td nowrap>David Rajhan Dallara</td>
<td>3600</td>
<td>Details for David</td>
<td>Porsche 911rsr</td>
<td>Grape</td>
</tr>
</tbody>
</table>
</aw-table>
<script>
const component = document.querySelector("aw-table");
console.log(component.table);
console.log(component.head);
console.log(component.body);
console.log(component.footer);
setTimeout(() => {
component.sort(1, "desc");
}, 1500);
</script>
See an example on sandbox
Styling
To style the table you can use these CSS variables. In the following table you can see the variables with their default values.
--aw-table-border-collapse: collapse;
--aw-table-spacing: 0;
--aw-table-font-family: Arial;
--aw-table-header-background-color: transparent;
--aw-table-header-border: none;
--aw-table-header-border-top: --aw-table-header-border | none;
--aw-table-header-border-right: --aw-table-header-border | none;
--aw-table-header-border-bottom: --aw-table-header-border | solid 1px #ddd;
--aw-table-header-border-left: --aw-table-header-border | none;
--aw-table-header-color: #888;
--aw-table-header-font-size: 14px;
--aw-table-header-font-weight: bold;
--aw-table-header-padding: 0.5em 0.5em 0.2em 0.5em;
--aw-table-header-first-padding: 0.5em 0.5em 0.2em 0;
--aw-table-header-text-align: left;
--aw-table-sortable-color-hover: #666;
--aw-table-sortable-icon-bottom: 0.2em;
--aw-table-sortable-icon-color: #999;
--aw-table-sortable-icon-size: 16px;
--aw-table-sortable-icon-right: 5px;
--aw-table-cell-border: none;
--aw-table-cell-border-top: --aw-table-cell-border | none;
--aw-table-cell-border-right: --aw-table-cell-border | none;
--aw-table-cell-border-bottom: --aw-table-cell-border | solid 1px #ddd;
--aw-table-cell-border-left: --aw-table-cell-border | none;
--aw-table-cell-color: #333;
--aw-table-cell-font-size: 16px;
--aw-table-cell-padding: 0.5em;
--aw-table-cell-first-padding: 0.5em 0.5em 0.2em 0;
--aw-table-row-mark-color: --aw-table-cell-color | #333;
--aw-table-row-mark-background-color: #f6f6f6;
--aw-table-column-mark-color: --aw-table-cell-color | #666;
--aw-table-column-mark-background-color: #f6f6f6;
--aw-table-cell-background-color-hover: #e6e6e6;
Limitations:
Since the table is rendered in a ShadowDom
, we have certain limitations if we introduce elements that are styled outside of thisShadowDom
. In the case of the example below it will not work and the spam
with the class that gives it the green color will not be reflected in the final result.
<style>
.spam {
color: green;
}
</style>
<aw-table unresolved>
<table>
<thead>
<tr>
<th>Position</th>
<th>Name</th>
<th>Rating</th>
</tr>
</thead>
<tbody>
<tr>
<td>2</td>
<td><span class="spam">Jonathan Bampletiem</span></td>
<td>2000</td>
</tr>
<tr>
<td>1</td>
<td><span class="spam">Anthony Smith</span></td>
<td>2452</td>
</tr>
<tr>
<td>3</td>
<td><span class="spam">David Rajhan Dallara</span></td>
<td>3600</td>
</tr>
</tbody>
</table>
</aw-table>
To solve the previous problem we can introduce a patch that will solve it, although it is not the correct way to work with web composts, we can follow the following example to solve the problem.
<aw-table unresolved>
<table>
<style>
.spam {
color: green;
}
</style>
<thead>
<tr>
<th>Position</th>
<th>Name</th>
<th>Rating</th>
</tr>
</thead>
<tbody>
<tr>
<td>2</td>
<td><span class="spam">Jonathan Bampletiem</span></td>
<td>2000</td>
</tr>
<tr>
<td>1</td>
<td><span class="spam">Anthony Smith</span></td>
<td>2452</td>
</tr>
<tr>
<td>3</td>
<td><span class="spam">David Rajhan Dallara</span></td>
<td>3600</td>
</tr>
</tbody>
</table>
</aw-table>
As we can see now in the example above we have introduced the <style>
tag inside the <table>
tag so that now those styles will also be loaded into the ShadowDom
. It would also work if we entered a <link rel ="stylesheet"/>
. IMPORTANT: This only works if we enter the styles right after the <table>
tag.
Working properly
It should be noted that working with web components is intended to work together with other web components. This problem won't happen if you put another component inside it instead:
components/user-name/user-name.js
import { PolymerElement, html } from "/node_modules/aw_polymer_3/polymer/polymer-element.js";
class UserName extends PolymerElement {
static get template() {
return html`
<style>
:host {
display: inline-block;
color: green;
}
</style>
{{name}}
`;
}
static get properties() {
return {
name: { type: String, value: "" },
};
}
connectedCallback() {
super.connectedCallback();
//Resolvemos el componente
this.removeAttribute("unresolved");
}
}
window.customElements.define("user-name", UserName);
Now that we have created our component to enter the username, we just have to enter it in the table:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>Test page</title>
</head>
<body>
<aw-table unresolved>
<table>
<thead>
<tr>
<th>Position</th>
<th>Name</th>
<th>Rating</th>
</tr>
</thead>
<tbody>
<tr>
<td>2</td>
<td><user-name unresolved name="Jonathan Bampletiem" /></td>
<td>2000</td>
</tr>
<tr>
<td>1</td>
<td><user-name unresolved name="Anthony Smith" /></td>
<td>2452</td>
</tr>
<tr>
<td>3</td>
<td><user-name unresolved name="David Rajhan Dallara" /></td>
<td>3600</td>
</tr>
</tbody>
</table>
</aw-table>
<script src="/node_modules/aw_webcomponents/webcomponentsjs/webcomponents-loader.js"></script>
<script type="module" src="/node_modules/aw_polymer_3/polymer/polymer-element.js"></script>
<script type="module" async src="/node_modules/aw_table/aw-table.js"></script>
<script type="module" async src="/components/user-name/user-name.js"></script>
</body>
</html>
In this way we can take advantage of the full potential of web components offered by polymer 3 without the need to make bundles or introduce web components only in the parts of the web that we want to make use of.