🕷️ Crawler Inspector

[Skip to content](https://github.com/birddevelper/FlexiTable#start-of-content) ## Navigation Menu Toggle navigation [Sign in](https://github.com/login?return_to=https%3A%2F%2Fgithub.com%2Fbirddevelper%2FFlexiTable) Appearance settings - Product - [GitHub Copilot Write better code with AI](https://github.com/features/copilot) - [GitHub Spark New Build and deploy intelligent apps](https://github.com/features/spark) - [GitHub Models New Manage and compare prompts](https://github.com/features/models) - [GitHub Advanced Security Find and fix vulnerabilities](https://github.com/security/advanced-security) - [Actions Automate any workflow](https://github.com/features/actions) - [Codespaces Instant dev environments](https://github.com/features/codespaces) - [Issues Plan and track work](https://github.com/features/issues) - [Code Review Manage code changes](https://github.com/features/code-review) - [Discussions Collaborate outside of code](https://github.com/features/discussions) - [Code Search Find more, search less](https://github.com/features/code-search) Explore - [Why GitHub](https://github.com/why-github) - [All features](https://github.com/features) - [Documentation](https://docs.github.com/) - [GitHub Skills](https://skills.github.com/) - [Blog](https://github.blog/) - Solutions By company size - [Enterprises](https://github.com/enterprise) - [Small and medium teams](https://github.com/team) - [Startups](https://github.com/enterprise/startups) - [Nonprofits](https://github.com/solutions/industry/nonprofits) By use case - [DevSecOps](https://github.com/solutions/use-case/devsecops) - [DevOps](https://github.com/solutions/use-case/devops) - [CI/CD](https://github.com/solutions/use-case/ci-cd) - [View all use cases](https://github.com/solutions/use-case) By industry - [Healthcare](https://github.com/solutions/industry/healthcare) - [Financial services](https://github.com/solutions/industry/financial-services) - [Manufacturing](https://github.com/solutions/industry/manufacturing) - [Government](https://github.com/solutions/industry/government) - [View all industries](https://github.com/solutions/industry) [View all solutions](https://github.com/solutions) - Resources Topics - [AI](https://github.com/resources/articles/ai) - [DevOps](https://github.com/resources/articles/devops) - [Security](https://github.com/resources/articles/security) - [Software Development](https://github.com/resources/articles/software-development) - [View all](https://github.com/resources/articles) Explore - [Learning Pathways](https://resources.github.com/learn/pathways) - [Events & Webinars](https://resources.github.com/) - [Ebooks & Whitepapers](https://github.com/resources/whitepapers) - [Customer Stories](https://github.com/customer-stories) - [Partners](https://partner.github.com/) - [Executive Insights](https://github.com/solutions/executive-insights) - Open Source - [GitHub Sponsors Fund open source developers](https://github.com/sponsors) - [The ReadME Project GitHub community articles](https://github.com/readme) Repositories - [Topics](https://github.com/topics) - [Trending](https://github.com/trending) - [Collections](https://github.com/collections) - Enterprise - [Enterprise platform AI-powered developer platform](https://github.com/enterprise) Available add-ons - [GitHub Advanced Security Enterprise-grade security features](https://github.com/security/advanced-security) - [Copilot for business Enterprise-grade AI features](https://github.com/features/copilot/copilot-business) - [Premium Support Enterprise-grade 24/7 support](https://github.com/premium-support) - [Pricing](https://github.com/pricing) Search or jump to... # Search code, repositories, users, issues, pull requests... [Search syntax tips](https://docs.github.com/search-github/github-code-search/understanding-github-code-search-syntax) # Provide feedback Cancel Submit feedback # Saved searches ## Use saved searches to filter your results more quickly Cancel Create saved search [Sign in](https://github.com/login?return_to=https%3A%2F%2Fgithub.com%2Fbirddevelper%2FFlexiTable) [Sign up](https://github.com/signup?ref_cta=Sign+up&ref_loc=header+logged+out&ref_page=%2F%3Cuser-name%3E%2F%3Crepo-name%3E&source=header-repo&source_repo=birddevelper%2FFlexiTable) Appearance settings Resetting focus You signed in with another tab or window. [Reload](https://github.com/birddevelper/FlexiTable) to refresh your session. You signed out in another tab or window. [Reload](https://github.com/birddevelper/FlexiTable) to refresh your session. You switched accounts on another tab or window. [Reload](https://github.com/birddevelper/FlexiTable) to refresh your session. Dismiss alert {{ message }} [birddevelper](https://github.com/birddevelper) / **[FlexiTable](https://github.com/birddevelper/FlexiTable)** Public - [Notifications](https://github.com/login?return_to=%2Fbirddevelper%2FFlexiTable) You must be signed in to change notification settings - [Fork 0](https://github.com/login?return_to=%2Fbirddevelper%2FFlexiTable) - [Star 7](https://github.com/login?return_to=%2Fbirddevelper%2FFlexiTable) FelxiTable is a professional jQuery plugin that convert JSON array list into HTML table [7 stars](https://github.com/birddevelper/FlexiTable/stargazers) [0 forks](https://github.com/birddevelper/FlexiTable/forks) [Branches](https://github.com/birddevelper/FlexiTable/branches) [Tags](https://github.com/birddevelper/FlexiTable/tags) [Activity](https://github.com/birddevelper/FlexiTable/activity) [Star](https://github.com/login?return_to=%2Fbirddevelper%2FFlexiTable) [Notifications](https://github.com/login?return_to=%2Fbirddevelper%2FFlexiTable) You must be signed in to change notification settings - [Code](https://github.com/birddevelper/FlexiTable) - [Issues 0](https://github.com/birddevelper/FlexiTable/issues) - [Pull requests 0](https://github.com/birddevelper/FlexiTable/pulls) - [Actions](https://github.com/birddevelper/FlexiTable/actions) - [Projects 0](https://github.com/birddevelper/FlexiTable/projects) - [Security](https://github.com/birddevelper/FlexiTable/security) [Uh oh\!](https://github.com/birddevelper/FlexiTable/security) [There was an error while loading.](https://github.com/birddevelper/FlexiTable/security) [Please reload this page](https://github.com/birddevelper/FlexiTable). - [Insights](https://github.com/birddevelper/FlexiTable/pulse) Additional navigation options - [Code](https://github.com/birddevelper/FlexiTable) - [Issues](https://github.com/birddevelper/FlexiTable/issues) - [Pull requests](https://github.com/birddevelper/FlexiTable/pulls) - [Actions](https://github.com/birddevelper/FlexiTable/actions) - [Projects](https://github.com/birddevelper/FlexiTable/projects) - [Security](https://github.com/birddevelper/FlexiTable/security) - [Insights](https://github.com/birddevelper/FlexiTable/pulse) # birddevelper/FlexiTable master [**2** Branches](https://github.com/birddevelper/FlexiTable/branches) [**10** Tags](https://github.com/birddevelper/FlexiTable/tags) Go to file Code Open more actions menu ## Folders and files | Name | Name | Last commit message | Last commit date | |---|---|---|---| | Latest commit [](https://github.com/birddevelper)[birddevelper](https://github.com/birddevelper/FlexiTable/commits?author=birddevelper) [change version to v1.2.7](https://github.com/birddevelper/FlexiTable/commit/b5a3852be502e5db83a1bf0abe3e8f6ee6a2606d) Aug 14, 2023 [b5a3852](https://github.com/birddevelper/FlexiTable/commit/b5a3852be502e5db83a1bf0abe3e8f6ee6a2606d) · Aug 14, 2023 History [70 Commits](https://github.com/birddevelper/FlexiTable/commits/master/) Open commit details | | | | | [.github/workflows](https://github.com/birddevelper/FlexiTable/tree/master/.github/workflows "This path skips through empty directories") | [.github/workflows](https://github.com/birddevelper/FlexiTable/tree/master/.github/workflows "This path skips through empty directories") | [remove build script](https://github.com/birddevelper/FlexiTable/commit/4d530eb9a95f329fa91ff4b106dce9b55855b308 "remove build script") | Jan 22, 2023 | | [README.md](https://github.com/birddevelper/FlexiTable/blob/master/README.md "README.md") | [README.md](https://github.com/birddevelper/FlexiTable/blob/master/README.md "README.md") | [Update README.md](https://github.com/birddevelper/FlexiTable/commit/70f4f0934aef55bc3d20179020d9043e628ce852 "Update README.md") | Apr 20, 2023 | | [example.html](https://github.com/birddevelper/FlexiTable/blob/master/example.html "example.html") | [example.html](https://github.com/birddevelper/FlexiTable/blob/master/example.html "example.html") | [arraySeparator option parameter typo corrected](https://github.com/birddevelper/FlexiTable/commit/18a59d7ec437702d09c9d02bf9e6cd7407093d29 "arraySeparator option parameter typo corrected") | Jan 21, 2023 | | [jquery.flexitable.js](https://github.com/birddevelper/FlexiTable/blob/master/jquery.flexitable.js "jquery.flexitable.js") | [jquery.flexitable.js](https://github.com/birddevelper/FlexiTable/blob/master/jquery.flexitable.js "jquery.flexitable.js") | [Update jquery.flexitable.js](https://github.com/birddevelper/FlexiTable/commit/03557070c2df03ee2c9c70b09116cb268554c94e "Update jquery.flexitable.js") | Apr 10, 2023 | | [package.json](https://github.com/birddevelper/FlexiTable/blob/master/package.json "package.json") | [package.json](https://github.com/birddevelper/FlexiTable/blob/master/package.json "package.json") | [change version to v1.2.7](https://github.com/birddevelper/FlexiTable/commit/b5a3852be502e5db83a1bf0abe3e8f6ee6a2606d "change version to v1.2.7") | Aug 14, 2023 | | [sampleData.js](https://github.com/birddevelper/FlexiTable/blob/master/sampleData.js "sampleData.js") | [sampleData.js](https://github.com/birddevelper/FlexiTable/blob/master/sampleData.js "sampleData.js") | [add comments for data](https://github.com/birddevelper/FlexiTable/commit/56743dbd3addcb74f98b0a9eb26396eff57a6844 "add comments for data") | Jan 20, 2023 | | [sampleData2.js](https://github.com/birddevelper/FlexiTable/blob/master/sampleData2.js "sampleData2.js") | [sampleData2.js](https://github.com/birddevelper/FlexiTable/blob/master/sampleData2.js "sampleData2.js") | [add comments for data](https://github.com/birddevelper/FlexiTable/commit/56743dbd3addcb74f98b0a9eb26396eff57a6844 "add comments for data") | Jan 20, 2023 | | View all files | | | | ## Repository files navigation - [README](https://github.com/birddevelper/FlexiTable) [](https://badge.fury.io/js/jqueryflexitable) [](https://camo.githubusercontent.com/44af6883e556735adabed686b90b65fe01c2dc013777dee3f36d96932f8664c0/68747470733a2f2f6d7368616572692e636f6d2f626c6f672f77702d636f6e74656e742f75706c6f6164732f323032332f30312f466c6578697461626c652e6a71756572792e706c7567696e2e746f5f2e646973706c61792e6e65737465642e6a736f6e5f2e6f626a6563742e64796e616d69632e636f6c756d6e2d31343030783634332e6a7067) # FlexiTable FlexiTable is a jQuery plugin that converts JSON array containing nested JSON object into HTML table [](https://camo.githubusercontent.com/bb46966c031b5c8c715fed45dd53079ba99f1e2907091883e0e32f39af0971d9/68747470733a2f2f6d7368616572692e636f6d2f626c6f672f77702d636f6e74656e742f75706c6f6164732f323032322f30342f6a71756572795f6a736f6e5f746f5f7461626c65332e6a7067) ## Features - Accepts Json data - Accepts url to fetch json data - Supports nested object up to 1 level - Refeshs data and structure in custom priods - Custom header titles - Supports both vertical and horizontal orientation of records - Supports CSS classes - Supports LTR and RTL directions - supports arrays as a multi-values cell ## How to use This plugin works with jquery-2.2.4 and later versions (Earlier versions are not tested). Import the plugin as following code : ``` <script src="https://code.jquery.com/jquery-2.2.4.min.js" integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44=" crossorigin="anonymous"></script> <script src="jquery.flexitable.js" ></script> ``` Then the plugin function can be called on any container element such as Div. Function parameters are : ``` { data : Json array (Json Array) , or url to retrieve json array (String) *Required tableCssClass : Css classes to be set for table (String) tableId : id attribute of the table tag (Strig) rtl : Indicates right to left direction. (Boolean, Default : false) verticalHeaders : changes the orientation of the headers to vertical (Boolean, Default : false) arraySeparator : Indicates the character(s) between array items in cells (Strig, Default : ', ') 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 ) columnsTitle : a dictionary to set optional title for json path } ``` Calling the function on a container with jquery selector : ``` <div id="mydiv"></div> <script> var data = [ { "Id" : 1, "Name" : "Alex Xia", "Age" : 27, "Grades" : { "Physics" : 12, "Mathematics" : 19, "Computer Lab" : 20 }, "Year" : 2022 }, { "Id" : 2, "Name" : "Saba Tailorson", "Age" : 29, "Grades" : { "Physics" : 10, "Mathematics" : 20, "Computer Lab" : 18 }, "Year" : 2022, "Absents" : ['10th Mar','21st Jan','4th Feb'] } ]; $("#mydiv").flexiTable({ data : data, tableCssClass : 'mytable', tableId : 'studentsTable', columnsTitle : {'Id' : 'Student ID', 'Grades.Mathematics' : 'Math'} }); </script> ``` Output for [sampleData](https://github.com/birddevelper/jQueryJsonToTable/blob/master/sampleData.js) : [](https://camo.githubusercontent.com/bb46966c031b5c8c715fed45dd53079ba99f1e2907091883e0e32f39af0971d9/68747470733a2f2f6d7368616572692e636f6d2f626c6f672f77702d636f6e74656e742f75706c6f6164732f323032322f30342f6a71756572795f6a736f6e5f746f5f7461626c65332e6a7067) Calling the stand alon function to get the table DOM object : ``` <div id="mydiv"></div> <script> var data = [ { "Id" : 1, "Name" : "Alex Xia", "Age" : 27, "Grades" : { "Physics" : 12, "Mathematics" : 19, "Computer Lab" : 20 }, "Year" : 2022 }, { "Id" : 2, "Name" : "Saba Tailorson", "Age" : 29, "Grades" : { "Physics" : 10, "Mathematics" : 20, "Computer Lab" : 18 }, "Year" : 2022, "Absents" : ['10th Mar','21st Jan','4th Feb'] } ]; var dataTable ; $.flexiTable({ data : data, tableCssClass : 'mytable', tableId : 'studentsTable' }).then((data) => { dataTable = data;}); </script> ``` For 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/) ## To Do List - ⬜️ CSS themes - ⬜️ Unlimited nested objects - ✅ Customized Titles (v1.1.0) - ⬜️ Aggregation function (Sum, Count, Avg) in footer ## About FelxiTable is a professional jQuery plugin that convert JSON array list into HTML table ### Topics [javascript](https://github.com/topics/javascript "Topic: javascript") [css](https://github.com/topics/css "Topic: css") [html](https://github.com/topics/html "Topic: html") [jquery](https://github.com/topics/jquery "Topic: jquery") [json](https://github.com/topics/json "Topic: json") [jquery-plugin](https://github.com/topics/jquery-plugin "Topic: jquery-plugin") [database](https://github.com/topics/database "Topic: database") [table](https://github.com/topics/table "Topic: table") [data-visualization](https://github.com/topics/data-visualization "Topic: data-visualization") ### Resources [Readme](https://github.com/birddevelper/FlexiTable#readme-ov-file) ### Uh oh\! There was an error while loading. [Please reload this page](https://github.com/birddevelper/FlexiTable). [Activity](https://github.com/birddevelper/FlexiTable/activity) ### Stars [**7** stars](https://github.com/birddevelper/FlexiTable/stargazers) ### Watchers [**2** watching](https://github.com/birddevelper/FlexiTable/watchers) ### Forks [**0** forks](https://github.com/birddevelper/FlexiTable/forks) [Report repository](https://github.com/contact/report-content?content_url=https%3A%2F%2Fgithub.com%2Fbirddevelper%2FFlexiTable&report=birddevelper+%28user%29) ## [Releases 10](https://github.com/birddevelper/FlexiTable/releases) [Version 1.2.7 release Latest Aug 14, 2023](https://github.com/birddevelper/FlexiTable/releases/tag/v1.2.7) [\+ 9 releases](https://github.com/birddevelper/FlexiTable/releases) ## [Packages 0](https://github.com/users/birddevelper/packages?repo_name=FlexiTable) No packages published ### Uh oh\! There was an error while loading. [Please reload this page](https://github.com/birddevelper/FlexiTable). ## Languages - [JavaScript 86.1%](https://github.com/birddevelper/FlexiTable/search?l=javascript) - [HTML 13.9%](https://github.com/birddevelper/FlexiTable/search?l=html) ## Footer © 2025 GitHub, Inc. ### Footer navigation - [Terms](https://docs.github.com/site-policy/github-terms/github-terms-of-service) - [Privacy](https://docs.github.com/site-policy/privacy-policies/github-privacy-statement) - [Security](https://github.com/security) - [Status](https://www.githubstatus.com/) - [Docs](https://docs.github.com/) - [Contact](https://support.github.com/?tags=dotcom-footer) - Manage cookies - Do not share my personal information You can’t perform that action at this time.