{"id":15308191,"url":"https://github.com/yidas/jquery-reflow-table","last_synced_at":"2025-04-15T01:02:50.190Z","repository":{"id":57282313,"uuid":"159904903","full_name":"yidas/jquery-reflow-table","owner":"yidas","description":"RWD reflow table switch for mobile UI/UX by collapsing columns","archived":false,"fork":false,"pushed_at":"2019-01-19T07:07:17.000Z","size":129,"stargazers_count":18,"open_issues_count":0,"forks_count":2,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-04-15T01:02:21.577Z","etag":null,"topics":["datatables","moblie-ui","responsive","rwd","switch-table","table","table-reflow"],"latest_commit_sha":null,"homepage":"https://yidas.github.io/jquery-reflow-table/","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/yidas.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2018-12-01T03:25:41.000Z","updated_at":"2024-06-11T09:37:02.000Z","dependencies_parsed_at":"2022-08-31T00:00:13.642Z","dependency_job_id":null,"html_url":"https://github.com/yidas/jquery-reflow-table","commit_stats":null,"previous_names":[],"tags_count":4,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/yidas%2Fjquery-reflow-table","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/yidas%2Fjquery-reflow-table/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/yidas%2Fjquery-reflow-table/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/yidas%2Fjquery-reflow-table/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/yidas","download_url":"https://codeload.github.com/yidas/jquery-reflow-table/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248986311,"owners_count":21194025,"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":["datatables","moblie-ui","responsive","rwd","switch-table","table","table-reflow"],"created_at":"2024-10-01T08:14:26.754Z","updated_at":"2025-04-15T01:02:50.160Z","avatar_url":"https://github.com/yidas.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"\u003cp align=\"center\"\u003e\n    \u003ca href=\"https://jquery.com\" target=\"_blank\"\u003e\n        \u003cimg src=\"https://upload.wikimedia.org/wikipedia/en/thumb/9/9e/JQuery_logo.svg/220px-JQuery_logo.svg.png\" height=\"50px\"\u003e\n    \u003c/a\u003e\n        \u003ch1 align=\"center\"\u003e\u003ci\u003eRWD\u003c/i\u003e Reflow Table\u003c/h1\u003e\n    \u003cbr\u003e\n\u003c/p\u003e\n\n[![npm version](https://img.shields.io/npm/v/jquery-reflow-table.svg)](https://www.npmjs.com/package/jquery-reflow-table)\n[![License](https://img.shields.io/github/license/yidas/jquery-reflow-table.svg)](https://github.com/yidas/jquery-reflow-table/blob/master/LICENSE)\n\nRWD reflow table switch for mobile UI/UX by collapsing columns\n\nFEATURES\n--------\n\n- ***High performance** and **data consistency** with Mobile UI/UX*\n\n- ***Pseudo** element implementation*\n\n- ***[DataTables](https://datatables.net/)** library Integration*\n\n\n---\n\nOUTLINE\n-------\n\n- [Demonstration](#demonstration)\n- [Requirements](#requirements)\n- [Installation](#installation)\n    - [Bower Installation](#bower-installation)\n    - [Assets include](#assets-include)\n    - [Initailize via JavaScript](#initailize-via-javascript)\n    - [Options](#options)\n- [Implementation](#implementation)\n    - [Update for Dynamic Content](#update-for-dynamic-content)\n        - [DataTables Integration](#dataTables-integration)\n    - [Customize Styles](#customize-styles)\n- [Events](#events)\n- [API Usage](#api-usage)\n\n---\n\nDEMONSTRATION\n-------------\n\n[https://yidas.github.io/jquery-reflow-table/](https://yidas.github.io/jquery-reflow-table/)\n\n\u003ca href=\"https://yidas.github.io/jquery-reflow-table/\" target=\"_blank\"\u003e\u003cimg src=\"https://raw.githubusercontent.com/yidas/jquery-reflow-table/master/img/demo-origin.png\" height=\"300\"/\u003e\u003c/a\u003e\n\u003ca href=\"https://yidas.github.io/jquery-reflow-table/\" target=\"_blank\"\u003e\u003cimg src=\"https://raw.githubusercontent.com/yidas/jquery-reflow-table/master/img/demo-mobile.png\" height=\"300\"/\u003e\u003c/a\u003e\n\nAfter applying Reflow-Table, the table will be responsive with reflow mode, which can be switch by browser's width or customized events.\n\n---\n\nREQUIREMENTS\n------------\nThis library requires the following:\n\n- jQuery 1.11.0+ | 2.0+ | 3.0+\n\n---\n\nINSTALLATION\n------------\n\n### Bower Installation\n\n```\nbower install jquery-reflow-table\n```\n\n\u003e You could also download by [NPM](https://www.npmjs.com/package/jquery-reflow-table) or directly copy [`dist`](https://github.com/yidas/jquery-reflow-table/tree/master/dist) assets. ([Last Release for download](https://github.com/yidas/jquery-reflow-table/releases))\n\n### Assets include\n\nAdd CSS file into the `\u003chead\u003e`:\n\n```html\n\u003clink href=\"css/reflow-table.css\" rel=\"stylesheet\"\u003e\n```\n\nAdd JavaScript file either into the `\u003chead\u003e`, or the bottom of `\u003cbody\u003e`:\n\n```html\n\u003cscript type=\"text/javascript\" src=\"js/reflow-table.js\"\u003e\u003c/script\u003e\n```\n\n\n### Markup\n\nAdd the classes `.table` to the tables as usual when using Bootstrap, then wrap them with a identity such as `.freeze-table`\n\n```html\n\u003ctable class=\"table\"\u003e\n  \u003cthead\u003e\n    \u003cth\u003e...\u003c/th\u003e\n  \u003c/thead\u003e\n  \u003ctbody\u003e\n    \u003ctd\u003e...\u003c/td\u003e\n  \u003ctbody\u003e\n\u003c/table\u003e\n```\n\n### Initailize via JavaScript\n\nYou can initialize Table Reflow by jQuery extension call:\n\n```html\n\u003cscript\u003e\n   $(function() {\n      $('.reflow-table').reflowTable({});\n   });\n\u003c/script\u003e\n```\n\nOr initialize an element by newing object from Table Reflow class:\n\n```html\n\u003cscript\u003e\n   $(function() {\n      new ReflowTable('.reflow-table', {});\n   });\n\u003c/script\u003e\n```\n\n\u003e The parameter `{}` is [options](#options) configuration\n\n\n\n### Options\n\nOptions could be passed via JavaScript with object.\n\n|Name         |Type    |Default            |Description|\n|:--          |:--     |:--                |:--        |\n|namespace    |string  |'reflow-table'     |Table namespace for unbind|\n|autoWidth    |integer |736                |Detected width like `@media`, `null` for disabling auto detection|\n|widthRatio   |string  |'50'               |Set pseudo heads' width ratio in mobile mode. (`15`, `20`, `25`, `30`,`40`,`50`)|\n|widthSize    |string  |null               |Set pseudo heads' width size in mobile mode. (`xs`, `sm`, `md`, `lg`)|\n|thead        |element |thead element of current table |The `thead` element with table titles used to build mobile mode for current `tbody`, you could specific from another table.|\n|eventMobileOn |callable|null    |[Event](#events) callback function referred by `reflow-table.mobile.on` event|\n|eventMobileOff|callable|null    |[Event](#events) callback function referred by `reflow-table.mobile.off` event|\n\n---\n\nIMPLEMENTATION\n--------------\n\n### Update for Dynamic Content\n\nThere is an update method which you can call when the table content has changed like page switching. The method will update or re-build table to ensure that everything is alright for mobile mode.\n\n```javascript\n$('.reflow-table').reflowTable('update');\n```\n\nOr using API usage to update:\n\n```javascript\nvar reflowTable = new ReflowTable('.reflow-table');\n// Update Freeze Table while the original table is distorted\nfunction afterTablePageChanged() {\n   reflowTable.update();\n}\n```\n\n#### DataTables Integration\n\n[DataTables](https://datatables.net/) is a jQuery library to add advanced interaction controls to your HTML tables the free \u0026 easy way.\n\nTo integrate with [DataTables](https://datatables.net/), you can apply a table with reflowTable before or after applying DataTables, set Reflow Table's `update` into DataTables callback such as `drawCallback` to keep updating data. For example:\n\n```javascript\nvar datatables = $('#table-datatables').DataTable({\n  \n  \"drawCallback\": function( settings ) {\n    \n    $(\"#table-datatables\").reflowTable('update');\n  }\n});\n\nvar reflowDataTable = $(\"#table-datatables\").reflowTable();\n```\n\n*Example: [DataTables Library Integration](https://yidas.github.io/jquery-reflow-table/#datatables)*\n\n\u003e For DataTables integration, we choose `drawCallback` to implement Reflow Table update. After all, DataTables `page.dt` event fires too early before drawing, while `createdRow` has a lack of flexibility.\n\n### Customize Styles\n\nYou could customize pseudo `td` styles by defining CSS for Table Reflow:\n\n```html\n\u003cstyle\u003e\n/* Table Reflow Customized CSS for pseudo heads */\n.reflow-table td:before {\n    min-width: 160px !important;\n    text-transform: uppercase;\n}\n\u003c/style\u003e\n```\n\n---\n\nEVENTS\n------\n\nThis library exposes a few events for hooking into reflow-table functionality.\n\n|Event Type             |Description|\n|:--                    |:--     |\n|reflow-table.mobile.on |This event fires immediately when the table is changed to mobile mode, this can be triggerd by [mobileMode()](#mobilemode) method call.|\n|reflow-table.mobile.off|This event fires immediately when the table is changed back from mobile mode, this can be triggerd by [mobileMode()](#mobilemode) method call.|\n\n*Example:*\n\n```javascript\n$(\"#table\").on('reflow-table.mobile.on', function() {\n  alert('Mobile mode is now ON');\n});\n```\n\n---\n\nAPI USAGE\n---------\n\n### update()\n\nUpdate or re-build each Reflow Table row th title for dynamic table content\n\n*See [Update for Dynamic Content](#update-for-dynamic-content)*\n\n### mobileMode()\n\nSwitch table to mobile mode or not\n\n```javascript\nfunction boolean mobileMode(enable=true)\n```\n\n*Example: [Toggle Mobile Mode by Button](https://yidas.github.io/jquery-reflow-table/#toggle-mode)*\n\n```javascript\nvar reflowTable = $('#myTable').reflowTable();\n\n$(\".btn-mobile-on\").click(function () {\n  reflowTable.mobileMode(true);  // Switch to mobile mode\n});\n\n$(\".btn0-mobile-off\").click(function () {\n  reflowTable.mobileMode(false); // Switch back to non-mobile mode\n});\n```\n\n### destroy()\n\nDestroy Freeze Table by same namespace\n\n*Example:*\n\n```javascript\nvar reflowTable = $('#myTable').reflowTable();\n \n$('#tableDestroy').on( 'click', function () {\n    reflowTable.destroy();\n} );\n```\n\n### unbind()\n\nUnbind all events by same namespace\n\n\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fyidas%2Fjquery-reflow-table","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fyidas%2Fjquery-reflow-table","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fyidas%2Fjquery-reflow-table/lists"}