https://github.com/webcyou/fixed-table-js
Fixed Table Layout JavaScript Library
https://github.com/webcyou/fixed-table-js
fixed fixed-header fixed-table html html-table html-tables layouts mocha scroll table table-javascript typescript
Last synced: about 1 month ago
JSON representation
Fixed Table Layout JavaScript Library
- Host: GitHub
- URL: https://github.com/webcyou/fixed-table-js
- Owner: webcyou
- Created: 2016-08-07T23:56:35.000Z (almost 9 years ago)
- Default Branch: master
- Last Pushed: 2017-04-20T11:18:42.000Z (about 8 years ago)
- Last Synced: 2025-04-12T03:38:17.948Z (about 1 month ago)
- Topics: fixed, fixed-header, fixed-table, html, html-table, html-tables, layouts, mocha, scroll, table, table-javascript, typescript
- Language: TypeScript
- Homepage:
- Size: 185 KB
- Stars: 23
- Watchers: 6
- Forks: 6
- Open Issues: 4
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Fixed Table JS
FixedTableJS - Fixed Table Layout JavaScript Library
[](https://badge.fury.io/gh/webcyou%2Ffixed-table-js)
[](https://badge.fury.io/js/fixed-table-js)
## これは何？
tableレイアウトで、タイトル項目のカラムを簡単に固定表示を行える、JavaScriptライブラリです。
## demo
[デモページ](https://webcyou.github.io/fixed-table-js/)
## Support Browsers
**Mac**
|  |  |  |  |
| :---------------: | :---------------:| :---------------:| :---------------:|
| 52.0.2743.82 ~ | 47.0.1 ~ | 9.1.2 ~ | 39.0 ~ |
**Windows**
|  |  |  |  |  |
| :---------------: | :---------------:| :---------------:| :---------------:|:---------------:|
| 52.0.2743.116 m ~ | 48.0.1 ~ | 11 | 25.10586.0.0 | 39.0 ~ |
## Quick start
**Clone the repo:**
```
git clone [email protected]:webcyou/fixed-table-js.git
```
**Install with [Bower](http://bower.io):**
```
bower install fixed-table.js
```
**Install with [npm](https://www.npmjs.com):**
```
npm install fixed-table-js
```
## Basic Usage
```
```
it's a standard table layout.
**HTML**
```
....
... or ...
....
```
``と、``の最初の子要素が固定されます。
Singleton Object
```
new FixedTable();
```
**argument**
```
new FixedTable(option);
```
### Table Box Full Mode
```
new FixedTable({ fullMode: true; });
```
## Option Parameters Reference
| ParametersName | type | DefaultValue | Details |
| -------------- |:------------:|:------------:|------------------ |
| id | string | 'fixedTable' | CSS ID Name |
| fullMode | boolean | false | window full size |
| click | boolean | false | click event callBack Function |
## Public Function
| Function Name | Argument | Argument Type | Details |
| -------------- |:------------------:|:------------------:|------------------ |
| changeMode | true, false | boolean | テーブル表示モード切り替え |
| setCellStyle | cell style data | object | cellのstyleを切り替え |
| click | callback | Function | click event callBack Function |
## CallBack Function
```
fixedTable.click(function(cell: Cell) {
...
});
```
## CallBack Parameters Reference
**Cell example**
```
Cell {
id: 14,
x: 2,
y: 0,
width: 228,
height: 40,
outerHeight: 57,
outerWidth: 245,
borderBottomWidth: "0px",
borderLeftWidth: "1px",
borderRightWidth: "0px",
borderTopWidth: "1px",
paddingBottom: "8px",
paddingLeft: "8px",
paddingRight: "8px",
paddingTop: "8px",
parent: "tbody",
tHeadCell: Cell,
tagName: "TD",
isFixed: false,
boxSizing: "content-box"
}
```
| Parameters Name | Type | Details |
| ------------------ |:------------------:|:----------------------------:|
| id | number | cell ID Number |
| x | number | x-coordinate |
| y | number | y-coordinate |
| width | number | contents inner width |
| height | number | contents inner height |
| outerWidth | number | contents inner outerWidth |
| outerHeight | number | contents inner outerHeight |
| borderTopWidth | string | contents border top width |
| borderRightWidth | string | contents border right width |
| borderBottomWidth | string | contents border bottom width |
| borderLeftWidth | string | contents border left width |
| paddingTop | string | contents padding top |
| paddingRight | string | contents padding right |
| paddingBottom | string | contents padding bottom |
| paddingLeft | string | contents padding left |
| parent | string | contents parent node(tbody or thead)|
| tHeadCell | Cell | contents thead cell node |
| tagName | string | self tagName |
| isFixed | boolean | self fixed style |
| boxSizing | string | boxSizing style |
## Start develop
```
npm install
gulp
```
```
Server started http://localhost:8088
LiveReload started on port 35729
```
## Start Test
**mocha**
```
npm run test
```
**mocha watch**
```
npm run test:watch
```
## Author
Daisuke Takayama
[Web帳](http://www.webcyou.com/)
## License
Copyright (c) 2016 Daisuke Takayama
Released under the [MIT license](http://opensource.org/licenses/mit-license.php)