{"id":19253526,"url":"https://github.com/webcyou/fixed-table-js","last_synced_at":"2025-04-21T14:32:07.750Z","repository":{"id":57237706,"uuid":"65159597","full_name":"webcyou/fixed-table-js","owner":"webcyou","description":"Fixed Table Layout JavaScript Library","archived":false,"fork":false,"pushed_at":"2017-04-20T11:18:42.000Z","size":189,"stargazers_count":23,"open_issues_count":4,"forks_count":6,"subscribers_count":6,"default_branch":"master","last_synced_at":"2025-04-12T03:38:17.948Z","etag":null,"topics":["fixed","fixed-header","fixed-table","html","html-table","html-tables","layouts","mocha","scroll","table","table-javascript","typescript"],"latest_commit_sha":null,"homepage":"","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/webcyou.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2016-08-07T23:56:35.000Z","updated_at":"2025-01-13T17:41:49.000Z","dependencies_parsed_at":"2022-08-26T15:01:20.029Z","dependency_job_id":null,"html_url":"https://github.com/webcyou/fixed-table-js","commit_stats":null,"previous_names":[],"tags_count":34,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/webcyou%2Ffixed-table-js","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/webcyou%2Ffixed-table-js/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/webcyou%2Ffixed-table-js/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/webcyou%2Ffixed-table-js/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/webcyou","download_url":"https://codeload.github.com/webcyou/fixed-table-js/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":250070273,"owners_count":21369845,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["fixed","fixed-header","fixed-table","html","html-table","html-tables","layouts","mocha","scroll","table","table-javascript","typescript"],"created_at":"2024-11-09T18:31:31.092Z","updated_at":"2025-04-21T14:32:07.390Z","avatar_url":"https://github.com/webcyou.png","language":"TypeScript","readme":"# Fixed Table JS\nFixedTableJS - Fixed Table Layout JavaScript Library\n\n[![GitHub version](https://badge.fury.io/gh/webcyou%2Ffixed-table-js.svg)](https://badge.fury.io/gh/webcyou%2Ffixed-table-js)\n[![npm version](https://badge.fury.io/js/fixed-table-js.svg)](https://badge.fury.io/js/fixed-table-js)\n\n\n![](http://webcyou.com/fixed_table_js/img/fixed_table.png)\n\n## これは何？\ntableレイアウトで、タイトル項目のカラムを簡単に固定表示を行える、JavaScriptライブラリです。\n\n## demo\n[デモページ](https://webcyou.github.io/fixed-table-js/)\n\n\n## Support Browsers\n**Mac**\n\n| ![](./docs/img/icon/icon_chrome.png) | ![](./docs/img/icon/icon_firefox.png) | ![](./docs/img/icon/icon_safari.png) | ![](./docs/img/icon/icon_opera.png)  | \n| :---------------: | :---------------:| :---------------:| :---------------:|\n| 52.0.2743.82 ~ | 47.0.1 ~ | 9.1.2 ~ | 39.0 ~ |\n\n**Windows**\n\n| ![](./docs/img/icon/icon_chrome.png) | ![](./docs/img/icon/icon_firefox.png) | ![](./docs/img/icon/icon_ie.png) | ![](./docs/img/icon/icon_edge01.png) | ![](./docs/img/icon/icon_opera.png) | \n| :---------------: | :---------------:| :---------------:| :---------------:|:---------------:|\n| 52.0.2743.116 m ~ | 48.0.1 ~ | 11 | 25.10586.0.0 | 39.0 ~ |\n\n\n##  Quick start\n\n**Clone the repo:**\n```\ngit clone git@github.com:webcyou/fixed-table-js.git\n```\n\n**Install with [Bower](http://bower.io):**\n```\nbower install fixed-table.js\n```\n\n**Install with [npm](https://www.npmjs.com):**\n\n```\nnpm install fixed-table-js\n```\n\n\n## Basic Usage\n\n```\n\u003cscript src=\"fixed_table.js\"\u003e\u003c/script\u003e\n```\n\nit's a standard table layout.\n\n**HTML**\n```\n\u003cdiv id=\"fixedTable\"\u003e\n    \u003ctable\u003e\n        \u003cthead\u003e....\u003c/thead\u003e\n        \u003ctbody\u003e\n            \u003ctr\u003e\n                \u003cth\u003e...\u003c/th\u003e or \u003ctd\u003e...\u003c/td\u003e\n                ....\n            \u003c/tr\u003e\n        \u003c/tbody\u003e\n    \u003c/table\u003e\n\u003c/div\u003e\n```\n`\u003cthead\u003e\u003c/thead\u003e`と、`\u003ctbody\u003e\u003ctr\u003e\u003c/tr\u003e\u003c/tbody\u003e`の最初の子要素が固定されます。\n\n\nSingleton Object\n\n```\nnew FixedTable();\n```\n\n![](http://webcyou.com/fixed_table_js/img/f_t_01.png)\n\n\n**argument**\n\n```\nnew FixedTable(option);\n```\n\n### Table Box Full Mode\n\n```\nnew FixedTable({ fullMode: true; });\n```\n\n![](http://webcyou.com/fixed_table_js/img/f_t_02.png)\n\n## Option Parameters Reference\n\n| ParametersName | type         | DefaultValue | Details           | \n| -------------- |:------------:|:------------:|------------------ |\n| id             | string       | 'fixedTable' |    CSS ID Name    |\n| fullMode       | boolean      | false        | window full size |\n| click          | boolean      | false        | click event callBack Function |\n\n\n## Public Function\n| Function Name  | Argument           | Argument Type      | Details           | \n| -------------- |:------------------:|:------------------:|------------------ |\n| changeMode     | true, false        | boolean            | テーブル表示モード切り替え |\n| setCellStyle   | cell style data    | object             | cellのstyleを切り替え |\n| click          | callback           | Function           | click event callBack Function |\n\n\n\n## CallBack Function\n\n```\nfixedTable.click(function(cell: Cell) {\n  ...\n});\n```\n\n## CallBack Parameters Reference\n**Cell example**\n\n```\nCell {\n  id: 14,\n  x: 2,\n  y: 0,\n  width: 228,\n  height: 40,\n  outerHeight: 57,\n  outerWidth: 245,\n  borderBottomWidth: \"0px\",\n  borderLeftWidth: \"1px\",\n  borderRightWidth: \"0px\",\n  borderTopWidth: \"1px\",\n  paddingBottom: \"8px\",\n  paddingLeft: \"8px\",\n  paddingRight: \"8px\",\n  paddingTop: \"8px\",\n  parent: \"tbody\",\n  tHeadCell: Cell,\n  tagName: \"TD\",\n  isFixed: false,\n  boxSizing: \"content-box\"\n}\n```\n\n| Parameters Name    | Type               | Details                      | \n| ------------------ |:------------------:|:----------------------------:|\n| id                 | number             | cell ID Number               |\n| x                  | number             | x-coordinate                 |\n| y                  | number             | y-coordinate                 |\n| width              | number             | contents inner width         |\n| height             | number             | contents inner height        |\n| outerWidth         | number             | contents inner outerWidth    |\n| outerHeight        | number             | contents inner outerHeight   |\n| borderTopWidth     | string             | contents border top width    |\n| borderRightWidth   | string             | contents border right width  |\n| borderBottomWidth  | string             | contents border bottom width |\n| borderLeftWidth    | string             | contents border left width   |\n| paddingTop         | string             | contents padding top         |\n| paddingRight       | string             | contents padding right       |\n| paddingBottom      | string             | contents padding bottom      |\n| paddingLeft        | string             | contents padding left        |\n| parent             | string             | contents parent node(tbody or thead)|\n| tHeadCell          | Cell               | contents thead cell node     |\n| tagName            | string             | self tagName                 |\n| isFixed            | boolean            | self fixed style             |\n| boxSizing          | string             | boxSizing style             |\n\n## Start develop\n```\nnpm install\ngulp \n```\n\n```\nServer started http://localhost:8088\nLiveReload started on port 35729\n```\n\n## Start Test\n\n**mocha**\n```\nnpm run test\n```\n\n**mocha watch**\n```\nnpm run test:watch\n```\n\n\n## Author\nDaisuke Takayama\n[Web帳](http://www.webcyou.com/)\n\n\n## License\nCopyright (c) 2016 Daisuke Takayama\nReleased under the [MIT license](http://opensource.org/licenses/mit-license.php)\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fwebcyou%2Ffixed-table-js","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fwebcyou%2Ffixed-table-js","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fwebcyou%2Ffixed-table-js/lists"}