A Polymer element for a searchable, sortable, paginatable, inline-editable, selectable, copyable, removable, movable table/grid.
Install the component using Bower:
$ bower install aha-table --save
Or download as ZIP.
-
Import Web Components' polyfill:
<script src="bower_components/webcomponentsjs/webcomponents.min.js"></script>
-
Import Custom Element:
<link rel="import" href="bower_components/aha-table/dist/aha-table.html">
-
Start using it!
<aha-table></aha-table>
<aha-table selectable copyable removable movable seachable pagesize="20" pagesizetitle="Page Size:" summarytitle="Viewing"> <aha-column name="title" type="string" sortable searchable required placeholder="Empty Field Placeholder Text" default="" hint="a hint in column header"> </aha-column> </aha-table>
Attribute | Options | Default | Description |
---|---|---|---|
data |
Array | [] | data for this table, need to set in JS. |
selectable |
Boolean | False | if selection box is displayed |
searchable |
Boolean | False | if search row is displayed |
copyable |
Boolean | False | if copy handler is displayed |
removable |
Boolean | False | if remove handler is displayed |
movable |
Boolean | False | if move up/down handler is displayed |
pagesize |
Number | 10 | record set size for each page |
data-sizelist |
Array | [5, 10, 20, 50, 100] | list for page size dropdown |
selecttitle |
String | '' | title for select checkbox |
selectalltitle |
String | '' | title for selectall checkbox |
copytitle |
String | '' | title for copy indicator |
removetitle |
String | '' | title for remove indicator |
movedowntitle |
String | '' | title for move down indicator |
moveuptitle |
String | '' | title for move up indicator |
sorttitle |
String | '' | title for sortable column |
edittitle |
String | '' | title for editable data cell |
searchtitle |
String | '' | title for search filter row toggler |
firsttitle |
String | '' | title for first page clicker |
previoustitle |
String | '' | title for previous page clicker |
nexttitle |
String | '' | title for next page clicker |
lasttitle |
String | '' | title for last page clicker |
pagetext |
String | '' | text before current page number |
pageoftext |
String | '' | text between page range and total page number |
pagesizetext |
String | '' | text before page size dropdown |
summarytitle |
String | '' | text before pagination summary |
itemoftext |
String | '' | text between item count range and total item number |
Name | Arguments | Description |
---|---|---|
after-invalid |
Event |
call after saving a cell by it's invalid |
after-td-click |
Event |
call after user click a cell, usually after this cell is editable |
after-td-dbclick |
Event |
call after user dbclick a cell |
before-create |
Event |
call before a record is created internally |
after-create |
Event |
call after a record is created internally |
before-copy |
Event |
call before a record is copyed from another internally |
after-copy |
Event |
call after a record is copyed from another internally |
before-save |
Event |
call before a record is saved from another internally |
after-save |
Event |
call after a record is saved from another internally |
before-select |
Event |
call before a record is selected |
after-select |
Event |
call after a record is selected |
before-remove |
Event |
call before a record is removed internally |
after-remove |
Event |
call after a record is removed internally |
before-move-down |
Event |
call before a record is moved down |
after-move-down |
Event |
call after a record is moved down |
before-move-up |
Event |
call before a record is moved up |
after-move-up |
Event |
call after a record is moved up |
Provides you a declarative way to define column meta.
Attribute | Options | Default | Description |
---|---|---|---|
name |
String | '' | name of the column |
label |
String | '' | this text woll be displayed as the column name in table header. |
type |
String | '' | one of: string, text, choice, boolean, date, time, datetime |
sortable |
Boolean | False | if this column is sortable |
searchable |
Boolean | False | if this column is searchable |
editable |
Boolean | False | if this column is editable |
required |
Boolean | False | if this column is required, Event 'after-invalid' will be invoked |
placeholder |
String | '' | this text will be displayed when this cell is empty |
default |
String | '' | default value, applied at creation |
data-choices |
Array | [] | options for select dropdown, in editing and searching. |
hint |
String | '' | this text will be displayed at the column header for instruction. |
searchplaceholder |
String | '' | this text will be displayed in search filter input box. |
renderer |
String | undefined | function name to format the object being displayed |
By following http://www.polymer-project.org/docs/polymer/databinding-compat.html , this should be working on all latest version of browsers.
IE 10+ ✔ | Latest ✔ | Latest ✔ | Latest ✔ | Latest ✔ |
In order to run it locally you'll need to fetch some dependencies and a basic server setup.
-
$ [sudo] npm install -g bower grunt-cli
-
Install local dependencies:
$ bower install && npm install
-
To test your project, start the development server and open
http://localhost:8000
.$ grunt server
-
Once you finish developing it, build the distribution files and publish it on Bower.
$ grunt build $ bower register aha-table https://github.com/liuwenchao/aha-table
-
deploy
$ git add * && git commit && git push $ grunt deploy
- Fork it!
- Create your feature branch:
git checkout -b my-new-feature
- Commit your changes:
git commit -m 'Add some feature'
- Push to the branch:
git push origin my-new-feature
- Submit a pull request :D
For detailed changelog, check Releases.