fixed-table-js icon indicating copy to clipboard operation
fixed-table-js copied to clipboard

Published 20 hours ago • verified publisher icon webcyou
→

Metadata

Fixed Table Layout JavaScript Library

Fixed Table JS

FixedTableJS - Fixed Table Layout JavaScript Library

GitHub version npm version

これは何？

tableレイアウトで、タイトル項目のカラムを簡単に固定表示を行える、JavaScriptライブラリです。

demo

デモページ

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:

bower install fixed-table.js

Install with npm:

npm install fixed-table-js

Basic Usage

<script src="fixed_table.js"></script>

it's a standard table layout.

HTML

<div id="fixedTable">
    <table>
        <thead>....</thead>
        <tbody>
            <tr>
                <th>...</th> or <td>...</td>
                ....
            </tr>
        </tbody>
    </table>
</div>

<thead></thead>と、<tbody><tr></tr></tbody>の最初の子要素が固定されます。

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帳

License

Copyright (c) 2016 Daisuke Takayama Released under the MIT license

← Metadata

25
Stars
6
Forks
Watchers

Owner

verified publisher icon webcyou

Metadata

Fixed Table Layout JavaScript Library

Back