{"id":20484013,"url":"https://github.com/nuxy/react-tidy-table","last_synced_at":"2025-09-23T03:32:52.831Z","repository":{"id":184704730,"uuid":"637902227","full_name":"nuxy/react-tidy-table","owner":"nuxy","description":":file_folder:  The / tidy-table / plugin React component wrapper. ","archived":false,"fork":false,"pushed_at":"2024-07-20T20:13:22.000Z","size":559,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-02-19T01:35:03.855Z","etag":null,"topics":["column-sorting","components","html-tables","reactjs","table-generator","wrapper-library"],"latest_commit_sha":null,"homepage":"https://tidy-table.nuxy.dev","language":null,"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":null,"contributing":null,"funding":null,"license":"LICENSE","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":"2023-05-08T16:48:54.000Z","updated_at":"2024-07-20T20:13:26.000Z","dependencies_parsed_at":"2024-01-15T18:28:57.517Z","dependency_job_id":"6751cebc-8e0b-4158-812c-323e8bac9cf3","html_url":"https://github.com/nuxy/react-tidy-table","commit_stats":null,"previous_names":["nuxy/react-tidy-table"],"tags_count":5,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/nuxy%2Freact-tidy-table","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/nuxy%2Freact-tidy-table/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/nuxy%2Freact-tidy-table/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/nuxy%2Freact-tidy-table/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/nuxy","download_url":"https://codeload.github.com/nuxy/react-tidy-table/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":243615872,"owners_count":20319787,"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","components","html-tables","reactjs","table-generator","wrapper-library"],"created_at":"2024-11-15T16:19:29.764Z","updated_at":"2025-09-23T03:32:47.806Z","avatar_url":"https://github.com/nuxy.png","language":null,"funding_links":[],"categories":[],"sub_categories":[],"readme":"# React Tidy Table\n\n[![npm version](https://badge.fury.io/js/react-tidy-table.svg)](https://badge.fury.io/js/react-tidy-table) [![](https://img.shields.io/npm/dm/react-tidy-table)](https://www.npmjs.com/package/react-tidy-table) [![Install size](https://packagephobia.com/badge?p=react-tidy-table)](https://packagephobia.com/result?p=react-tidy-table) [![](https://img.shields.io/github/v/release/nuxy/react-tidy-table)](https://github.com/nuxy/react-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.\n- Customizable callback functions for post-processing selected results.\n- Post-process options for manipulating table/column/menu elements.\n- Fast and lightweight (JavaScript plug-in *only 4 kB)\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\nAdd to an existing [React](https://reactjs.org) project using [YARN](https://yarnpkg.com).\n\n    $ yarn add react-tidy-table\n\n## Usage\n\n```javascript\nimport React     from 'react';\nimport TidyTable from 'react-tidy-table'; // or '../dist/react-tidy-table';\n\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\nexport default class Demo extends React.Component {\n  constructor() {\n    super();\n  }\n\n  render() {\n    return (\n      \u003cReact.Fragment\u003e\n        \u003cTidyTable settings={settings} options={options} /\u003e\n      \u003c/React.Fragment\u003e\n    );\n  }\n};\n```\n\n## Component Props\n\n| Name     | Type   | Description         |\n|----------|--------|---------------------|\n| settings | Object | Main configuration. |\n| options  | Object | Override table [defaults](https://github.com/nuxy/tidy-table#table-options). |\n\n## Documentation\n\n- [Post-processing examples](https://github.com/nuxy/tidy-table#post-processing-examples)\n- [Table options](https://github.com/nuxy/tidy-table#table-options)\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\nBundle [demo](https://github.com/nuxy/react-tidy-table/tree/master/demo) sources (using [Webpack](https://webpack.js.org)):\n\n    $ npm run webpack\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_react-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%2Freact-tidy-table","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fnuxy%2Freact-tidy-table","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fnuxy%2Freact-tidy-table/lists"}