{"id":17703845,"url":"https://github.com/birddevelper/flexitable","last_synced_at":"2025-03-13T07:32:08.270Z","repository":{"id":57687025,"uuid":"482248396","full_name":"birddevelper/FlexiTable","owner":"birddevelper","description":"FelxiTable is a professional jQuery plugin that convert JSON array list into HTML table","archived":false,"fork":false,"pushed_at":"2023-08-14T05:12:24.000Z","size":51,"stargazers_count":6,"open_issues_count":0,"forks_count":0,"subscribers_count":3,"default_branch":"master","last_synced_at":"2025-03-05T17:49:59.235Z","etag":null,"topics":["css","data-visualization","database","html","javascript","jquery","jquery-plugin","json","table"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","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/birddevelper.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,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2022-04-16T12:30:00.000Z","updated_at":"2023-01-27T16:39:17.000Z","dependencies_parsed_at":"2024-10-25T00:20:07.974Z","dependency_job_id":"6b68f7a3-cbe4-4527-ad8f-916179074e8e","html_url":"https://github.com/birddevelper/FlexiTable","commit_stats":{"total_commits":65,"total_committers":1,"mean_commits":65.0,"dds":0.0,"last_synced_commit":"fd03238d4b7be93ef1e03676fe178c7f92076e49"},"previous_names":[],"tags_count":10,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/birddevelper%2FFlexiTable","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/birddevelper%2FFlexiTable/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/birddevelper%2FFlexiTable/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/birddevelper%2FFlexiTable/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/birddevelper","download_url":"https://codeload.github.com/birddevelper/FlexiTable/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":243361383,"owners_count":20278560,"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":["css","data-visualization","database","html","javascript","jquery","jquery-plugin","json","table"],"created_at":"2024-10-24T21:06:12.480Z","updated_at":"2025-03-13T07:32:07.922Z","avatar_url":"https://github.com/birddevelper.png","language":"JavaScript","readme":"[![npm version](https://badge.fury.io/js/jqueryflexitable.svg)](https://badge.fury.io/js/jqueryflexitable)\n\n\n![FlexiTable](https://mshaeri.com/blog/wp-content/uploads/2023/01/Flexitable.jquery.plugin.to_.display.nested.json_.object.dynamic.column-1400x643.jpg)\n\n# FlexiTable\n\nFlexiTable is a jQuery plugin that converts JSON array containing nested JSON object into HTML table\n\n![output](https://mshaeri.com/blog/wp-content/uploads/2022/04/jquery_json_to_table3.jpg)\n\n## Features\n\n- Accepts Json data\n- Accepts url to fetch json data\n- Supports nested object up to 1 level\n- Refeshs data and structure in custom priods\n- Custom header titles\n- Supports both vertical and horizontal orientation of records\n- Supports CSS classes\n- Supports LTR and RTL directions\n- supports arrays as a multi-values cell\n\n## How to use\n\nThis plugin works with jquery-2.2.4 and later versions (Earlier versions are not tested).\nImport the plugin as following code :\n\n```html\n\u003cscript src=\"https://code.jquery.com/jquery-2.2.4.min.js\" integrity=\"sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44=\" crossorigin=\"anonymous\"\u003e\u003c/script\u003e\n\u003cscript src=\"jquery.flexitable.js\" \u003e\u003c/script\u003e\n```\n\nThen the plugin function can be called on any container element such as Div. Function parameters are :\n\n```\n{\n  data : Json array (Json Array) , or url to retrieve json array (String) *Required\n  tableCssClass : Css classes to be set for table (String)\n  tableId : id attribute of the table tag (Strig)\n  rtl : Indicates right to left direction. (Boolean, Default : false)\n  verticalHeaders : changes the orientation of the headers to vertical (Boolean, Default : false)\n  arraySeparator : Indicates the character(s) between array items in cells (Strig, Default : ', ')\n  refreshPriod : Time interval to re-fetch data from source. it is in millisecond. (Integer, Default : it is disabled by default. Only applicable for calling the function on a container with selector )\n  columnsTitle : a dictionary to set optional title for json path\n}\n```\n\n Calling the function on a container with jquery selector :\n\n```html\n\n\u003cdiv id=\"mydiv\"\u003e\u003c/div\u003e\n\n\u003cscript\u003e\nvar data = [\n{\n    \"Id\" : 1,\n    \"Name\" : \"Alex Xia\",\n    \"Age\" : 27,\n    \"Grades\" : {\n        \"Physics\" : 12,\n        \"Mathematics\" : 19,\n        \"Computer Lab\" : 20\n    },\n    \"Year\" : 2022\n},\n{\n    \"Id\" : 2,\n    \"Name\" : \"Saba Tailorson\",\n    \"Age\" : 29,\n    \"Grades\" : {\n        \"Physics\" : 10,\n        \"Mathematics\" : 20,\n        \"Computer Lab\" : 18\n    },\n    \"Year\" : 2022,\n    \"Absents\" : ['10th Mar','21st Jan','4th Feb']\n}\n];\n\n$(\"#mydiv\").flexiTable({\n    data : data,\n    tableCssClass : 'mytable',\n    tableId : 'studentsTable',\n    columnsTitle : {'Id' : 'Student ID', 'Grades.Mathematics' : 'Math'}\n});\n\u003c/script\u003e\n\n\n```\n\nOutput for [sampleData](https://github.com/birddevelper/jQueryJsonToTable/blob/master/sampleData.js) :\n\n![output](https://mshaeri.com/blog/wp-content/uploads/2022/04/jquery_json_to_table3.jpg)\n\n\nCalling the stand alon function to get the table DOM object :\n\n```html\n\n\u003cdiv id=\"mydiv\"\u003e\u003c/div\u003e\n\n\u003cscript\u003e\nvar data = [\n{\n    \"Id\" : 1,\n    \"Name\" : \"Alex Xia\",\n    \"Age\" : 27,\n    \"Grades\" : {\n        \"Physics\" : 12,\n        \"Mathematics\" : 19,\n        \"Computer Lab\" : 20\n    },\n    \"Year\" : 2022\n},\n{\n    \"Id\" : 2,\n    \"Name\" : \"Saba Tailorson\",\n    \"Age\" : 29,\n    \"Grades\" : {\n        \"Physics\" : 10,\n        \"Mathematics\" : 20,\n        \"Computer Lab\" : 18\n    },\n    \"Year\" : 2022,\n    \"Absents\" : ['10th Mar','21st Jan','4th Feb']\n}\n];\n\n\nvar dataTable  ;\n$.flexiTable({\n    data : data,\n    tableCssClass : 'mytable',\n    tableId : 'studentsTable'\n}).then((data) =\u003e { dataTable = data;});\n\n\u003c/script\u003e\n\n\n```\n\nFor detailed plugin explanation go to [FlexiTable- A jQuery Plugin Converting Dynamic JSON with Nested Objects To HTML Table](https://mshaeri.com/blog/flexitable-a-jquery-plugin-converting-dynamic-json-data-to-html-table/)\n\n\n## To Do List\n\n- ⬜️ CSS themes\n- ⬜️ Unlimited nested objects\n- ✅ Customized Titles (v1.1.0)\n- ⬜️ Aggregation function (Sum, Count, Avg) in footer\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbirddevelper%2Fflexitable","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fbirddevelper%2Fflexitable","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbirddevelper%2Fflexitable/lists"}