https://github.com/startpolymer/s-table
Responsive HTML table extended with Polymer and Material Design.
https://github.com/startpolymer/s-table
material-design polymer responsive-design
Last synced: 10 months ago
JSON representation
Responsive HTML table extended with Polymer and Material Design.
- Host: GitHub
- URL: https://github.com/startpolymer/s-table
- Owner: StartPolymer
- Created: 2017-02-18T16:47:01.000Z (over 9 years ago)
- Default Branch: master
- Last Pushed: 2017-02-26T22:05:24.000Z (over 9 years ago)
- Last Synced: 2025-08-02T04:43:14.946Z (11 months ago)
- Topics: material-design, polymer, responsive-design
- Language: HTML
- Homepage:
- Size: 2.49 MB
- Stars: 6
- Watchers: 1
- Forks: 2
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
[![Published on webcomponents.org][webcomponents-image]][webcomponents-url]
# \
Responsive HTML table extended with Polymer and Material Design.
- `` is an HTML `` element that has responsive width and optional attribute for fixed first column.
- `` is an HTML `` element that don't implement Material Design.
- `` and `` are HTML elements extended with ``.
## Demo
[Full demo][webcomponents-demo]
## Usage
```html
td, th {
padding: 8px;
box-sizing: border-box;
white-space: nowrap;
}
td:nth-of-type(1),
th:nth-of-type(1) {
background-color: rgba(255, 0, 255, 0.2);
}
tr.iron-selected td {
background-color: rgba(0, 0, 0, 0.1);
}
tr:hover td {
background-color: rgba(0, 0, 0, 0.2);
}
tr td.iron-selected:not(:nth-of-type(1)) {
background-color: rgba(255, 255, 0, 0.2);
}
First Name
Last Name
Job Title
Favorite Color
Wars or Trek?
Porn Name
Date of Birth
Dream Vacation City
GPA
Arbitrary Data
James
Matman
Chief Sandwich Eater
Lettuce Green
Trek
Digby Green
January 13, 1979
Gotham City
3.1
RBX-12
The
Tick
Crimefighter Sorta
Blue
Wars
John Smith
July 19, 1968
Athens
N/A
Edlund, Ben (July 1996).
Jokey
Smurf
Giving Exploding Presents
Smurflow
Smurf
Smurflane Smurfmutt
Smurfuary Smurfteenth, 1945
New Smurf City
4.Smurf
One
Cindy
Beyler
Sales Representative
Red
Wars
Lori Quivey
July 5, 1956
Paris
3.4
3451
Captain
Cool
Tree Crusher
Blue
Wars
Steve 42nd
December 13, 1982
Las Vegas
1.9
Under the couch
```
## Installation
`bower i s-table -S`
## Install the Polymer-CLI
First, make sure you have the [Polymer CLI](https://www.npmjs.com/package/polymer-cli) installed. Then run `polymer serve` to serve your application locally.
## Viewing Your Application
```
$ polymer serve
```
## Building Your Application
```
$ polymer build
```
This will create a `build/` folder with `bundled/` and `unbundled/` sub-folders
containing a bundled (Vulcanized) and unbundled builds, both run through HTML,
CSS, and JS optimizers.
You can serve the built versions by giving `polymer serve` a folder to serve
from:
```
$ polymer serve build/bundled
```
## Running Tests
```
$ polymer test
```
Your application is already set up to be tested via [web-component-tester](https://github.com/Polymer/web-component-tester). Run `polymer test` to run your application's test suite locally.
## License
MIT: [StartPolymer/license](https://github.com/StartPolymer/license)
[webcomponents-image]: https://img.shields.io/badge/webcomponents.org-published-blue.svg
[webcomponents-url]: https://webcomponents.org/element/StartPolymer/s-table
[webcomponents-demo]: https://webcomponents.org/element/StartPolymer/s-table/demo/demo/s-table.html