{"id":15652911,"url":"https://github.com/oskarhane/ascii-data-table","last_synced_at":"2025-04-19T13:49:54.920Z","repository":{"id":57184619,"uuid":"51765922","full_name":"oskarhane/ascii-data-table","owner":"oskarhane","description":"Ascii data table generator in Javascript","archived":false,"fork":false,"pushed_at":"2017-03-08T19:52:09.000Z","size":1102,"stargazers_count":30,"open_issues_count":0,"forks_count":4,"subscribers_count":3,"default_branch":"master","last_synced_at":"2025-03-29T08:23:38.555Z","etag":null,"topics":["ascii-table","javascript"],"latest_commit_sha":null,"homepage":null,"language":"HTML","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/oskarhane.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":"2016-02-15T15:46:25.000Z","updated_at":"2025-02-16T20:35:37.000Z","dependencies_parsed_at":"2022-09-11T07:01:20.018Z","dependency_job_id":null,"html_url":"https://github.com/oskarhane/ascii-data-table","commit_stats":null,"previous_names":[],"tags_count":20,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/oskarhane%2Fascii-data-table","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/oskarhane%2Fascii-data-table/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/oskarhane%2Fascii-data-table/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/oskarhane%2Fascii-data-table/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/oskarhane","download_url":"https://codeload.github.com/oskarhane/ascii-data-table/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248619776,"owners_count":21134539,"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":["ascii-table","javascript"],"created_at":"2024-10-03T12:44:14.192Z","updated_at":"2025-04-19T13:49:54.902Z","avatar_url":"https://github.com/oskarhane.png","language":"HTML","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Ascii Data Table\n\nThis module provides functionality to render tables with text borders / outlines\nso it can be pasted into the medium of choice.\n\nThe configuration is very limited by design, all that's configurable in the \ncurrent version is the maximun width of the columns.\n\nThe API exposes only two methods to render a table: `table(rows, [maxColWidth])` where `rows` is expected to be \nan array with an index for every row, and each row is also expected to be an array \nwith one index for every column. The data in the columns can be of any Javascript type \nsince it will be serialized before printed.\n\nThe second method to generate a table is: `tableFromSerializedData(serializedRows, [maxColWidth])` \nwhere `serializedRows` is expected to be in the same format as the previously described method, \nbut all data must already be serialized. This method should be used when the data stays the same \nbut are generated with multiple maxColWidths. \n\nTo serialize the data, the method `serializeData(rows)` is exposed. For the moment, all it does is to \ntable `JSON.stringify` on the data.\n\nTo get the width of the widest column (can be used to set the max value on a slider), `maxColumnWidth(rows)` \nis exposed. The rows should not already be serialized when calling this method.\n\nAll rows should have the same number of columns, and the first row is expected to \nbe the header column with titles for each column.\n\n```javascript\n[\n  ['first column', 'second column'], // title row\n  ['my data row 1 col 1', 'my data row 1 col 2'], // first data row\n  ['my data row 2 col 1', 'my data row 2 col 2'] // second data row\n]\n```\n\nWith default max width, the above would produce:\n\n```\n╒═════════════════════╤═════════════════════╕\n│\"first column\"       │\"second column\"      │\n╞═════════════════════╪═════════════════════╡\n│\"my data row 1 col 1\"│\"my data row 1 col 2\"│\n├─────────────────────┼─────────────────────┤\n│\"my data row 2 col 1\"│\"my data row 2 col 2\"│\n└─────────────────────┴─────────────────────┘\n```\n\n## Installation\nInstall with `npm` in your working directory:\n\n```\nnpm install ascii-data-table --save\n```\n\nInstall with `bower` in your working directory:\n\n```\nbower install ascii-data-table --save\n```\n\n## Usage\nTwo packages are produced, one for [Node.js](https://nodejs.org/en/) environment and one for web browsers.\n\n### In Node.js\nUsage in Node.js varies depending if the will be used within a ES2015 application or not.\n\n**In ES2015**\n\n```javascript\n// If install with npm\nimport AsciiTable from 'ascii-data-table'\n\n// or if installed by cloning git repo, use the correct path\n//import AsciiTable from 'lib/ascii-data-table'\n\n// The data to render\nconst items = [['x', 'y'], ['a', 'b'], ['c', 'd']]\n\n// Not required, default is 30\nconst maxColumnWidth = 15\n\n// Render and save in 'res'\nconst res = AsciiTable.table(items, maxColumnWidth)\n```\n\n**In ES 5.5**\n\n```javascript\n// If install with npm\nvar AsciiTable = require('ascii-data-table').default\n\n// or if installed by cloning git repo, use the correct path\n//var AsciiTable = require('lib/ascii-data-table').default\n\nvar items = [['x', 'y'], ['a', 'b'], ['c', 'd']]\nvar res = AsciiTable.table(items)\n```\n\n### In web browsers\nA bundle for web browsers is created and can be found in `lib`.\n\n```html\n\u003chtml\u003e\n  \u003chead\u003e\n    \u003cscript type=\"text/javascript\" src=\"/components/lib/bundle.js\"\u003e\u003c/script\u003e\n    \u003cscript type=\"text/javascript\"\u003e\n      function load() {\n        var items = [['x', 'y'], ['a', 'b'], ['c', 'd']]\n        var output = AsciiTable.table(items)\n        document.getElementById('my-table').innerHTML = output\n        console.log(output)\n      }\n    \u003c/script\u003e\n  \u003c/head\u003e\n  \u003cbody onload=\"load()\"\u003e\n    \u003cpre id=\"my-table\"\u003eloading...\u003c/pre\u003e\n  \u003c/body\u003e\n\u003c/html\u003e\n```\n\n### For React \u003e= 0.14\nA functional / stateless React Component is created and lies in `lib/bundle-react.js`. It \nassumes there's a global varaible `React` available.\n\n```html\n\u003chtml\u003e\n  \u003chead\u003e\n    \u003cscript src=\"//fb.me/react-0.14.3.js\"\u003e\u003c/script\u003e\n    \u003cscript src=\"//fb.me/react-dom-0.14.3.js\"\u003e\u003c/script\u003e\n    \u003cscript src=\"/components/ascii-data-table/lib/bundle-react.js\"\u003e\u003c/script\u003e\n    \u003cscript type=\"text/javascript\"\u003e\n      var items = [['x', 'y'], ['a', 'b'], ['c', 'd']]\n      function load() {\n        ReactDOM.render(\n          React.createElement(AsciiTableComponent, {rows: items}), \n          document.getElementById('myApp')\n        )\n      }\n    \u003c/script\u003e\n  \u003c/head\u003e\n  \u003cbody onload=\"load()\"\u003e\n    \u003cdiv id=\"myApp\"\u003eloading...\u003c/div\u003e\n  \u003c/body\u003e\n\u003c/html\u003e\n```\n\n### For Angular 1.X\nA bundle for Angular 1.X is created and can be found in `lib/bundle-angular.js` and \nassumes there's a global variable named `angular` available.\n\n```html\n\u003chtml\u003e\n  \u003chead\u003e\n    \u003cscript type=\"text/javascript\" src=\"/components/angular/angular.js\"\u003e\u003c/script\u003e\n    \u003cscript type=\"text/javascript\" src=\"/components/ascii-data-table/lib/bundle-angular.js\"\u003e\u003c/script\u003e\n    \u003cscript type=\"text/javascript\"\u003e\n      var app = angular\n        .module('myApp', ['AsciiTableModule'])\n        .controller('TableController', ['$scope', 'AsciiTable', function($scope, AsciiTable){\n          var items = [['x', 'y'], ['a', 'b'], ['c', 'd']]\n          $scope.data = AsciiTable.table(items)\n        }])\n    \u003c/script\u003e\n  \u003c/head\u003e\n  \u003cbody ng-app=\"myApp\"\u003e\n    \u003cpre id=\"table\" ng-controller=\"TableController\" ng-bind=\"data\"\u003e\u003c/pre\u003e\n  \u003c/body\u003e\n\u003c/html\u003e\n```\n\n## Examples / Demo\nYou can try online here: [Online demo](https://oskarhane-dropshare-eu.s3-eu-central-1.amazonaws.com/index-zcqLpvoR0Z/index.html)  \nIn the `examples` folder there are examples for node and web browser environments.  \nOne cool thing in the browser demo is that you can hook up a range slider to the maximun \nwidth of the columns, giving this effect:  \n![slider-gif-demo](https://oskarhane-dropshare-eu.s3-eu-central-1.amazonaws.com/adt-2-Q2Qhvevx2E/adt-2.gif)\n\n## Testing\ntable `npm test` to execute test in both Node.js and browser environments.  \ntable `npm table test:watch` to have tests table on file changes.\n\n## Contributing\nAll bug reports, feature requests and pull requests are welcome. This project uses the [Javascript Standard Style](http://standardjs.com) and a lint check will table before all tests and builds.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Foskarhane%2Fascii-data-table","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Foskarhane%2Fascii-data-table","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Foskarhane%2Fascii-data-table/lists"}