{"id":29170274,"url":"https://github.com/mendixlabs/mendix-tree-table","last_synced_at":"2025-07-01T12:39:45.491Z","repository":{"id":55954304,"uuid":"206799625","full_name":"mendixlabs/mendix-tree-table","owner":"mendixlabs","description":"Mendix Tree Table (Mendix 8, React based, Webmodeler compatible)","archived":false,"fork":false,"pushed_at":"2022-02-11T12:50:12.000Z","size":2761,"stargazers_count":2,"open_issues_count":6,"forks_count":6,"subscribers_count":2,"default_branch":"master","last_synced_at":"2024-04-13T17:55:37.281Z","etag":null,"topics":["mendix","react","widget"],"latest_commit_sha":null,"homepage":"https://appstore.home.mendix.com/link/app/111095/","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"other","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/mendixlabs.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":"2019-09-06T13:27:33.000Z","updated_at":"2022-02-11T12:50:15.000Z","dependencies_parsed_at":"2022-08-15T10:11:01.492Z","dependency_job_id":null,"html_url":"https://github.com/mendixlabs/mendix-tree-table","commit_stats":null,"previous_names":[],"tags_count":25,"template":false,"template_full_name":null,"purl":"pkg:github/mendixlabs/mendix-tree-table","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mendixlabs%2Fmendix-tree-table","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mendixlabs%2Fmendix-tree-table/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mendixlabs%2Fmendix-tree-table/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mendixlabs%2Fmendix-tree-table/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/mendixlabs","download_url":"https://codeload.github.com/mendixlabs/mendix-tree-table/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mendixlabs%2Fmendix-tree-table/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":262964057,"owners_count":23391943,"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":["mendix","react","widget"],"created_at":"2025-07-01T12:39:38.436Z","updated_at":"2025-07-01T12:39:45.469Z","avatar_url":"https://github.com/mendixlabs.png","language":"TypeScript","readme":"[![Apache License](https://img.shields.io/badge/license-Apache%202.0-orange.svg)](http://www.apache.org/licenses/LICENSE-2.0)\n[![Build Status](https://travis-ci.org/JelteMX/mendix-tree-table.svg?branch=master)](https://travis-ci.org/JelteMX/mendix-tree-table)\n[![Coverage Status](https://coveralls.io/repos/github/JelteMX/mendix-tree-table/badge.svg?branch=master)](https://coveralls.io/github/JelteMX/mendix-tree-table?branch=master)\n[![Dependencies](https://david-dm.org/JelteMX/mendix-tree-table.svg)](https://david-dm.org/JelteMX/mendix-tree-table)\n[![DevDependencies](https://david-dm.org/JelteMX/mendix-tree-table/dev-status.svg)](https://david-dm.org/JelteMX/mendix-tree-table?type=dev)\n[![Support](https://img.shields.io/badge/Support-Community%20(no%20active%20support)-orange.svg)](https://docs.mendix.com/developerportal/app-store/app-store-content-support)\n[![Studio](https://img.shields.io/badge/Studio%20version-8.0%2B-blue.svg)](https://appstore.home.mendix.com/link/modeler/)\n![GitHub release](https://img.shields.io/github/release/JelteMX/mendix-tree-table)\n![GitHub issues](https://img.shields.io/github/issues/JelteMX/mendix-tree-table)\n[![DeepScan grade](https://deepscan.io/api/teams/7221/projects/9345/branches/120491/badge/grade.svg)](https://deepscan.io/dashboard#view=project\u0026tid=7221\u0026pid=9345\u0026bid=120491)\n[![Available](https://img.shields.io/badge/Test%20Project-available-green.svg)](https://github.com/JelteMX/widget-test-projects)\n\n# Mendix Tree Table\n\nMendix Tree Table using [Ant Design Table](https://ant.design/components/table/) (MIT License).\n\n![logo](/assets/AppStoreIcon.png)\n\nShow a tree-like structure in Mendix.\n\n![preview](/assets/preview.png)\n\n\u003e See test-project [https://reacttreeview-sandbox.mxapps.io/](https://reacttreeview-sandbox.mxapps.io/) for a live demo! This project is also used for all E2E tests. See at the bottom of this README a preview of the domain model. Test-project can be downloaded [here](https://github.com/JelteMX/widget-test-projects#tree-table)\n\n## Features\n\n- Display a tree structure in a table\n- DataSource:\n  - Root:\n    - Xpath\n    - Microflow\n    - Nanoflow\n  - Children:\n    - Reference\n    - Microflow\n    - Nanoflow\n- Row classes\n- Row icons\n- Select row/rows, execute on change/action button\n- Dynamic columns\n- Much more...\n\n\u003e This widget is only ~500Kb uncompressed, so in your cloud environment this would be about ~140Kb. This is light-weight for any project.\n\nTested:\n- IE11\n- Chrome,Firefox,Safari\n- Should work on Mobile Web, but might not be very usable\n\n## Basic configuration\n\n### 1. Data\n![Data](/assets/tab01-data.png)\n\n- Select an Entity that will serve as your Node.\n- You can choose whether to load the whole tree or partial (top level)\n- Nodes can be retrieved through a few methods: Xpath, Microflow, Nanoflow\n- Please note that this only loads the top-level data (first nodes)\n- When you set this to XPath, define your constraint (if needed)\n- Microflow \u0026 Nanoflow should return a list of Nodes\n\n### 2. Children\n![Children](/assets/tab02-children.png)\n\n- You do not have to load children if you just want to load a flat list\n- If you load children, it can be done in two ways:\n  - Child reference: Your Node should have a self-reference, as a reference set (so a many-to-many relation). You define this reference, the widget will take care of checking if it has children or not and load them when opening the parent\n  - Microflow/Nanoflow: Your Node should have an attribute that tells whether or not it has children. This can be accomplished during the creation of your nodes, or a calculated attribute. If the widget sees a node has a child it will load the children.\n\n### 3. Helper\n![Helper](/assets/tab03-helper.png)\n\n- For doing clicks and selections, we need a Helper object. This will be created by the widget for an action and passed down to a microflow/nanoflow. This helper object has a reference to the context object (view) and a reference SET to the Node objects. When you execute a microflow/nanoflow, you will need to retrieve the node object itself over a reference.\n\n### 4. Columns\n![Columns](/assets/tab04-columns.png)\n\n- Easiest way to configure columns is a list. This is a sorted list of all the attributes you want to show in the table. See **3.1 Columns List**\n- If you want to do this dynamically (because your client wants to configure it), please look at **4. Columns**\n\n#### 4.1. Column List\n![Columns sub](/assets/tab04-columns-sub.png)\n\n- A column should have a caption (shown at the top) and an attribute (to display the value)\n- If you need to transform your value client-side, you can use a Transform Nanoflow. This should always return a string\n- In the column UI tab you can set the width of the column (as '100', '25%' etc)\n- You can also set a class name\n\n### 5. Dynamic Columns\n\n- Dynamic columns can be used to let the user define their column. This is a bit tricky though:\n  - The attribute of the Node entity should be saved in the Attribute attribute of the column Entity (this is confusing, right 😜?).\n- All other attributes should be straightforward.\n\nNote:\n\nIn order to get the attributes of your Node entity in your project, I encourage you to use the [Model Reflection module in the AppStore](https://appstore.home.mendix.com/link/app/69/). This has the ability to load all entities and read their attributes. Then use this to create your Column entities.\n\n### 6. Events\n![Events](/assets/tab05-events.png)\n\n- Events are pretty straightforward. The widget uses a debounce, which means it will not single click when you double-click.\n- For the microflow/nanoflow, you will need to configure the helper object!\n\n### 7. UI\n![UI](/assets/tab06-ui.png)\n\n- Header row (which contains the captions of the column) can be disabled\n- You can set a class on the row through an attribute in your Node. This way it is possible to change colors (needs custom styling)\n- Icons can be shown on the first column of the row. See test-project\n\n### 8. Selection\n![Selection](/assets/tab07-selection.png)\n\n- Just like a normal table, you can use selection to do things with the Nodes.\n- Configure buttons for a selection.\n- The microflow/nanoflows use the Helper object\n- Please note that when we use the Selection onChange, chances are that you will make a change to your context object (for example, set a selection reference/set). This would mean that the table re-renders, losing the selection. We circumvent this by temporarily lift the subscriptions (that will trigger when the context changes), execute the action, then reapply the subscriptions.\n\n### 9. Misc\n![Misc](/assets/tab08-misc.png)\n\n- You can now save the state of your table. This only works for the whole tree, no partial trees!\n- Experimentally expose `window.__TreeTable_{guid}_select`. This will accept a guid as string, or array of guids for multi selection\n\n## Test-project\n\nThe [test-project](https://reacttreeview-sandbox.mxapps.io/) uses the following domain model. This is purely an example, but can be used as an inspiration to use in your own project:\n\n![domain-model-example](/assets/domain-model-example.png)\n\nTest-project can be downloaded [here](https://github.com/JelteMX/widget-test-projects#tree-table)\n\n## Issues, suggestions and feature requests\n\nPlease report your issues [here](https://github.com/JelteMX/mendix-tree-table/issues)\n\n## License\n\nApache 2\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmendixlabs%2Fmendix-tree-table","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fmendixlabs%2Fmendix-tree-table","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmendixlabs%2Fmendix-tree-table/lists"}