{"id":20484023,"url":"https://github.com/nuxy/tidy-table","last_synced_at":"2025-06-30T02:33:29.960Z","repository":{"id":50217862,"uuid":"3298979","full_name":"nuxy/tidy-table","owner":"nuxy","description":":card_index_dividers: Create a HTML table that can be sorted, selected, and post-processed.","archived":false,"fork":false,"pushed_at":"2024-07-07T19:59:47.000Z","size":3214,"stargazers_count":53,"open_issues_count":0,"forks_count":19,"subscribers_count":6,"default_branch":"master","last_synced_at":"2025-06-12T22:40:19.157Z","etag":null,"topics":["column-sorting","html-tables","javascript","modules","plugins","table-generator"],"latest_commit_sha":null,"homepage":"http://tidy-table.nuxy.dev","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/nuxy.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":"SECURITY.md","support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2012-01-29T18:56:51.000Z","updated_at":"2025-01-17T00:19:30.000Z","dependencies_parsed_at":"2024-03-25T21:26:51.541Z","dependency_job_id":"621ad9cb-1d88-428b-b833-23d1a8006a11","html_url":"https://github.com/nuxy/tidy-table","commit_stats":{"total_commits":264,"total_committers":2,"mean_commits":132.0,"dds":"0.0037878787878787845","last_synced_commit":"9a0b39207972d0a40600a30090266619e4906631"},"previous_names":[],"tags_count":42,"template":false,"template_full_name":null,"purl":"pkg:github/nuxy/tidy-table","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/nuxy%2Ftidy-table","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/nuxy%2Ftidy-table/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/nuxy%2Ftidy-table/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/nuxy%2Ftidy-table/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/nuxy","download_url":"https://codeload.github.com/nuxy/tidy-table/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/nuxy%2Ftidy-table/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":260625461,"owners_count":23038187,"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":["column-sorting","html-tables","javascript","modules","plugins","table-generator"],"created_at":"2024-11-15T16:19:36.335Z","updated_at":"2025-06-30T02:33:29.939Z","avatar_url":"https://github.com/nuxy.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Tidy Table\n\n[![npm version](https://badge.fury.io/js/tidy-table.svg)](https://badge.fury.io/js/tidy-table) [![](https://img.shields.io/npm/dm/tidy-table)](https://www.npmjs.com/package/tidy-table) [![Build Status](https://img.shields.io/github/actions/workflow/status/nuxy/tidy-table/.github%2Fworkflows%2Fci.yml)](https://github.com/nuxy/tidy-table/actions) [![Install size](https://packagephobia.com/badge?p=tidy-table)](https://packagephobia.com/result?p=tidy-table) [![](https://img.shields.io/github/v/release/nuxy/tidy-table)](https://github.com/nuxy/tidy-table/releases)\n\nCreate a HTML table that can be sorted, selected, and post-processed.\n\n![Preview](https://raw.githubusercontent.com/nuxy/tidy-table/master/package.gif)\n\n## Features\n\n- Extensible HTML/CSS interface.\n- Compatible with all modern desktop and mobile web browsers.\n- Fully responsive layout with touch event support.\n- Easy to set-up and customize. **No dependencies**.\n- Customizable callback functions for post-processing selected results.\n- Post-process options for manipulating table/column/menu elements.\n\nCheckout the [demo](https://nuxy.github.io/tidy-table) for examples of use.\n\n## Dependencies\n\n- [Node.js](https://nodejs.org)\n\n## Installation\n\nInstall the package into your project using [NPM](https://npmjs.com), or download the [sources](https://github.com/nuxy/tidy-table/archive/master.zip).\n\n    $ npm install tidy-table\n\n### Alternative\n\nTo add to an existing [React](https://reactjs.org) or [Vue](https://vuejs.org) project you can install this package using [YARN](https://yarnpkg.com).\n\n#### React\n\n    $ yarn add react-tidy-table\n\n#### Vue\n\n    $ yarn add vue-tidy-table\n\n## Usage\n\nThere are two ways you can use this package.  One is by including the JavaScript/CSS sources directly.  The other is by importing the module into your component.\n\n### Script include\n\nAfter you [build the distribution sources](#cli-options) the set-up is fairly simple..\n\n```html\n\u003cscript type=\"text/javascript\" src=\"path/to/tidy-table.min.js\"\u003e\u003c/script\u003e\n\u003clink rel=\"stylesheet\" href=\"path/to/tidy-table.min.css\" media=\"all\" /\u003e\n\n\u003cscript type=\"text/javascript\"\u003e\n  tidyTable(container, settings, options);\n\u003c/script\u003e\n```\n\n### Module import\n\nIf your using a modern framework like [Aurelia](https://aurelia.io), [Angular](https://angular.io), [React](https://reactjs.org), or [Vue](https://vuejs.org)\n\n```javascript\nimport TidyTable from 'tidy-table';\nimport 'tidy-table/dist/tidy-table.css';\n\nconst tidyTable = new TidyTable(container, settings, options);\n```\n\n### HTML markup\n\n```html\n\u003cdiv id=\"tidy-table\"\u003e\u003c/div\u003e\n```\n\n### Example\n\n```javascript\nconst options = {\n  enableCheckbox: true,\n  enableMenu:     true,\n  reverseSortDir: true,\n  responsive:     true\n};\n\nconst settings = {\n  columnTitles: ['Rank', 'Programming Language', 'Ratings Jan 2012', 'Delta Jan 2012', 'Status'],\n  columnValues: [\n    ['1', 'Java', '17.479%', '-0.29%', 'A'],\n    ['2', 'C', '16.976%', '+1.15%', 'A'],\n    ['3', 'C#', '8.781%', '+2.55%', 'A'],\n    ['4', 'C++', '8.063%', '-0.72%', 'A'],\n    ['5', 'Objective-C', '6.919%', '+3.91%','A']\n  ],\n\n  // Add menu options to bind result events.\n  menuOptions: [\n    ['- Action -', null],\n    ['Callback 1', {callback: (rows) =\u003e {}}],\n    ['Callback 2', {callback: (rows) =\u003e {}}]\n  ],\n\n  // Post-process rendered HTML output.\n  postProcess: {\n    table:  (HTMLTableElement)     =\u003e {},\n    column: (HTMLTableCellElement) =\u003e {},\n    menu:   (HTMLTableElement)     =\u003e {}\n  },\n\n  // Pre-process column values before sort.\n  sortByPattern: function(colNum, val) {\n    if (colNum !== 1) return val;\n\n    return val?.replace(/\\$|%|#/g, '');\n  }\n};\n\nconst container = document.getElementById('tidy-table');\n\nconst tidyTable = new TidyTable(container, settings, options);\n```\n\n## Table options\n\nOverriding defaults can be done using the following options:\n\n| Option         | Description                                    | Default |\n|----------------|------------------------------------------------|---------|\n| enableCheckbox | Add checkbox functionality to table output.    | false   |\n| enableMenu     | Add select menu options to alter table output. | false   |\n| reverseSortDir | Change the sorting arrow image direction.      | false   |\n| responsive     | Enable/disable responsive layout support.      | false   |\n\n## Post-processing examples\n\nThere are times where you may need to customize the table result behavior. This can be achieved using `postProcess` hooks.\n\n### Hide the second column of table results\n\n```javascript\nfunction callback(table) {\n  const cols = table.querySelectorAll('th:nth-child(2), td:nth-child(2)');\n\n  for (let i = 0; i \u003c cols.length; i++) {\n    cols[i].style.display = 'none';\n  }\n}\n```\n\n### Create text field on column click event\n\n```javascript\nfunction callback(col) {\n  col.addEventListener('click', function() {\n    if (!this.querySelector('form')) {\n      const form = document.createElement('form');\n      form.addEventListener('submit', function() {\n        const xhr = new XMLHttpRequest();\n        xhr.open('POST', '/path/to/script');\n        xhr.send(null);\n      });\n\n      const field = document.createElement('input');\n      field.setAttribute('type', 'text');\n      field.setAttribute('value', this.textContent);\n\n      const button = document.createElement('input');\n      button.setAttribute('type', 'submit');\n\n      form.appendChild(field).appendChild(button);\n\n      this.removeChild(this.firstChild);\n      this.appendChild(form);\n    });\n  }\n}\n```\n\n### Hide select menu when cookie doesn't exist\n\n```javascript\nfunction callback(menu) {\n  if (!getCookie('session')) {\n    menu.style.display = 'none';\n  }\n}\n```\n\n## Design template\n\nThe Illustrator [template](https://github.com/nuxy/tidy-table/blob/develop/images/arrow.ai) used to create the sort arrows has been provided with this package for reference.\n\n## Developers\n\n### CLI options\n\nRun [ESLint](https://eslint.org) on project sources:\n\n    $ npm run lint\n\nTranspile ES6 sources (using [Babel](https://babeljs.io)) and minify to a distribution:\n\n    $ npm run build\n\nRun [WebdriverIO](https://webdriver.io) E2E tests:\n\n    $ npm run test\n\n## Contributions\n\nIf you fix a bug, or have a code you want to contribute, please send a pull-request with your changes. (Note: Before committing your code please ensure that you are following the [Node.js style guide](https://github.com/felixge/node-style-guide))\n\n## Versioning\n\nThis package is maintained under the [Semantic Versioning](https://semver.org) guidelines.\n\n## License and Warranty\n\nThis package is distributed in the hope that it will be useful, but without any warranty; without even the implied warranty of merchantability or fitness for a particular purpose.\n\n_tidy-table_ is provided under the terms of the [MIT license](http://www.opensource.org/licenses/mit-license.php)\n\n## Author\n\n[Marc S. Brooks](https://github.com/nuxy)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fnuxy%2Ftidy-table","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fnuxy%2Ftidy-table","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fnuxy%2Ftidy-table/lists"}