{"id":13830364,"url":"https://github.com/E3V3A/MMM-Tabulator","last_synced_at":"2025-07-09T11:32:51.022Z","repository":{"id":149254104,"uuid":"121421334","full_name":"E3V3A/MMM-Tabulator","owner":"E3V3A","description":"A MagicMirror Demo for using Tabulator","archived":false,"fork":false,"pushed_at":"2024-06-18T05:12:47.000Z","size":71,"stargazers_count":10,"open_issues_count":8,"forks_count":6,"subscribers_count":5,"default_branch":"master","last_synced_at":"2024-11-03T17:51:30.887Z","etag":null,"topics":["electron","json-parser","magic-mirror-modules","magicmirror","nodejs","tabulator"],"latest_commit_sha":null,"homepage":"","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/E3V3A.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":"CONTRIBUTING.md","funding":null,"license":"LICENSE","code_of_conduct":"CODE_OF_CONDUCT.md","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":"2018-02-13T18:42:46.000Z","updated_at":"2024-07-09T22:47:43.000Z","dependencies_parsed_at":"2024-08-04T10:13:04.300Z","dependency_job_id":null,"html_url":"https://github.com/E3V3A/MMM-Tabulator","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/E3V3A%2FMMM-Tabulator","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/E3V3A%2FMMM-Tabulator/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/E3V3A%2FMMM-Tabulator/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/E3V3A%2FMMM-Tabulator/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/E3V3A","download_url":"https://codeload.github.com/E3V3A/MMM-Tabulator/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":225539382,"owners_count":17485316,"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":["electron","json-parser","magic-mirror-modules","magicmirror","nodejs","tabulator"],"created_at":"2024-08-04T10:00:59.077Z","updated_at":"2024-11-20T11:30:41.343Z","avatar_url":"https://github.com/E3V3A.png","language":"JavaScript","funding_links":[],"categories":["Productivity"],"sub_categories":[],"readme":"## MagicMirror Module: Tabulator\n\n\n| STATUS: | Version | Date | Maintained? |\n|:------- |:------- |:---- |:----------- |\n| Working | `1.0.2` | 2018-03-05 | YES |\n\n\n**What is this module doing?**\n\n`MMM-Tabulator` is just a demonstration module for using the [Tabulator](http://tabulator.info/) *npm* package on your [MagicMirror](https://github.com/MichMich/MagicMirror). \n*Tabulator* is a very nice tool for producing dynamic HTML tables from various sources, like JSON, CSV and XML etc. \nHowever, although very well documented, the [examples](http://tabulator.info/examples/) are very hard to understand and implement in practice, \nfor non-experts. \n\n\n**Why I should use Tabulator?**\n\n* Very flexible for manipulating all aspects of table data\n* Can sort table columns in several ways and in multiple stages\n* Can use graphics in tables\n* Can easily enable/disable various table items\n* Help reduce all the clutter of HTML generating JS code\n* You never have to write DOM code again!\n* You don't need to think about converting XML or JSON to HTML table\n* Very well used and maintained repository\n\n\n**Why I should not use Tabulator for my MM:**\n\n* It is totally overkill for showing small and simple tables\n* It is a very large library, easily bloating your MMs if used repeatedly\n* It is definitely slowing down load times somewhat\n* It is dependent on:  *jquery* and *jqeuery-ui*. \n\n\n### Example Screenshots\n\nIn this repo there are 2 demo examples.\n\n1. The `demo.html` file, that has the JSON embedded and can be run directly from your browser.\n2. The `MMM-Tabulator` Module, that is importing the same JSON data from the file `demo.json`.\n\nScreenshot of the `demo.html` output:\n\n![Full](demo1.png)\n\nScreenshot of the `MMM-Tabulator` output:\n\n![Full](demo2.png)\n\n\nThe flight JSON data shown, was provided by [FlightRadar24](https://www.flightradar24.com/). \n\n---\n\n\n### Dependencies\n\nThis module depend on the following *npm* packages:\n\n* [jquery](https://github.com/jquery/jquery)  - is a fast, small, and feature-rich JavaScript library\n* [jquery-ui](https://github.com/jquery/jquery-ui)  - for user interface interactions, effects, widgets, and themes\n* [tabulator](https://github.com/olifolkerd/tabulator) - for an overkill use of JSON to HTML table generation\n\n\nThese are also listed in the `package.json` file and should be installed automatically when using *npm*.\nHowever, those may require other packages. \n\n---\n\n\n### Installation\n\nManual Installation:\n\n```bash\ncd ~/MagicMirror/modules\ngit clone https://github.com/E3V3A/MMM-Tabulator.git\ncd MMM-Tabulator\n\n# To locally install: jquery, jquery-ui and tabulator, do:\nchmod 755 install_deps.sh\n./install_deps.sh\n\n# ToDo:\n#npm install\n```\n\nEasy Installation [**ToDo**]:\n\n\n```bash\nnpm install mmm-tabulator\n```\n\n### Configuration \n\nTo configure the Tabulator for MM, you need to do the following:\n\n* Add the Module to the global MM *config.js* \n* Edit `node_helper.js` to select the correct JSON file or JSON input file:  \n\n   `const myfile = 'modules/MMM-Tabulator/demo.json';`\n\n* Edit `MMM-Tabulator.js` to:\n    - select \u0026 configure the table rows you want to show\n    - edit the column formatting to be used\n    - [TBA] select the filename or URL from where to load the JSON data\n    - select the default Tabulator CSS\n* Edit `MMM-Tabulator.css` for your own CSS taste\n\nAdd the module to the modules array in the `config/config.js` file by adding the following section. \n\n```javascript\n{\n    module: 'MMM-Tabulator',\n    header: 'Tabulator Demo',\n    position: 'top_left',\n    config: {\n        //fileUrl: \"demo.json\",     // The local filename or URL to JSON source\n        updateInterval: 180,        // [seconds] Read the file every 3 min\n        maxItems: 10,               // Max table rows shown\n    }\n},\n...\n```\n\nYou can change this configuration later when you see that it works.\n\n\n#### Configuration Options\n\n\n| Option         | Default          | Description |\n|:-------------- |:---------------- |:------------| \n| header         | \"Tabulator Demo\" | This Module's header text |\n| updateInterval | 180              | Module data update in [seconds] |\n| maxItems       | 10               | Number of table rows to show |\n| fileUrl*       | \"demo.json\"      | A local filename or URL to a JSON API |\n\n`*` - **not yet implemented - ToDo!**\n\n---\n\n#### `Tabulator` configuration\n\nThe main part to configure is found under the `loadTabulator()` function:\n\n```javascript\n...\n    flightTable.tabulator({\n        height:flightTableHeight,           // Set height of table, this enables the Virtual DOM and improves render speed\n        //layout:\"fitColumns\",                // Fit columns to width of table (optional)\n        //headerSort:false,                   // Disable header sorter\n        resizableColumns:false,             // Disable column resize\n        responsiveLayout:true,              // Enable responsive layouts\n        placeholder:\"No Data Available\",    // Display message to user on empty table\n        initialSort:[                       // Define the sort order:\n            {column:\"altitude\",     dir:\"asc\"},     // 1'st\n            //{column:\"flight\",     dir:\"desc\"},    // 2'nd\n            //{column:\"bearing\",    dir:\"asc\"},     // 3'rd\n        ],\n        columns:[\n            ...\n            {title:\"Time\", field:\"timestamp\", headerSort:false, sortable:false, visible:false, responsive:1, formatter:\"ep2time\"},\n...\n\n```\n\n\nFor further details about configuring the many Tabulator options, see:\n\n* http://tabulator.info/\n* https://github.com/olifolkerd/tabulator\n* http://tabulator.info/docs/3.4?#css\n* http://tabulator.info/examples/3.4?#theming\n\n---\n\n#### Bugs and Warnings\n\n:warning: If you provide your own JSON data, other than what is provided in the `demo.json` \nfile, then **it has to be in proper JSON format.** For some reason the MM socket seem to not \naccept loosely formatted JSON. There is an extremely simple JSON sanitizer, used (for my own \npurposes), but it doesn't handle any characters outside `[A-Za-z0-9_\\-]`. Not sanitizing your\nJSON data is a security issue that could lead to code injection! Also check if your source\nis using UTF-8 or something else. \n\nPlease refer to the [issue tracker](https://github.com/E3V3A/MMM-Tabulator/issues) for details and updates.\n\n\n#### Other Modules using *Tabulator*:\n\n* [MMM-FlightsAbove](https://github.com/E3V3A/MMM-FlightsAbove) - A flight radar showing flight \u0026 airplane details for planes above a certain location.\n\n\n#### Contribution\n\nFeel free to post issues and PR's related to this module.  \nFor all other or general questions, please refer to the [MagicMirror Forum](https://forum.magicmirror.builders/).\n\n#### Credits \n\nMost grateful thanks to [Ray Wojciechowski](https://github.com/raywo) for sharing his \nmodule develpment experince and thus helping me solve all my issues. Do check out his \nmany great MMM modules in his repository.\n\n\n#### License \n\nMIT \n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FE3V3A%2FMMM-Tabulator","html_url":"https://awesome.ecosyste.ms/projects/github.com%2FE3V3A%2FMMM-Tabulator","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FE3V3A%2FMMM-Tabulator/lists"}