{"id":37063637,"url":"https://github.com/azur-scd/dash_dvx","last_synced_at":"2026-01-14T07:16:30.390Z","repository":{"id":38323160,"uuid":"461485073","full_name":"azur-scd/dash_dvx","owner":"azur-scd","description":"A Dash wrapper for DevExtreme UI components","archived":false,"fork":false,"pushed_at":"2022-10-30T15:36:05.000Z","size":22053,"stargazers_count":2,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-09-25T00:48:53.654Z","etag":null,"topics":["devextreme","python-dash"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","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/azur-scd.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":"CONTRIBUTING.md","funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2022-02-20T12:46:02.000Z","updated_at":"2022-11-17T07:43:12.000Z","dependencies_parsed_at":"2022-07-14T03:20:39.293Z","dependency_job_id":null,"html_url":"https://github.com/azur-scd/dash_dvx","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/azur-scd/dash_dvx","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/azur-scd%2Fdash_dvx","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/azur-scd%2Fdash_dvx/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/azur-scd%2Fdash_dvx/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/azur-scd%2Fdash_dvx/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/azur-scd","download_url":"https://codeload.github.com/azur-scd/dash_dvx/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/azur-scd%2Fdash_dvx/sbom","scorecard":{"id":221676,"data":{"date":"2025-08-11","repo":{"name":"github.com/azur-scd/dash_dvx","commit":"7e8193edf94eb8bed0e1a606b680249b38204255"},"scorecard":{"version":"v5.2.1-40-gf6ed084d","commit":"f6ed084d17c9236477efd66e5b258b9d4cc7b389"},"score":1.7,"checks":[{"name":"Packaging","score":-1,"reason":"packaging workflow not detected","details":["Warn: no GitHub/GitLab publishing workflow detected."],"documentation":{"short":"Determines if the project is published as a package that others can easily download, install, easily update, and uninstall.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#packaging"}},{"name":"Dangerous-Workflow","score":-1,"reason":"no workflows found","details":null,"documentation":{"short":"Determines if the project's GitHub Action workflows avoid dangerous patterns.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#dangerous-workflow"}},{"name":"Code-Review","score":0,"reason":"Found 0/11 approved changesets -- score normalized to 0","details":null,"documentation":{"short":"Determines if the project requires human code review before pull requests (aka merge requests) are merged.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#code-review"}},{"name":"Binary-Artifacts","score":10,"reason":"no binaries found in the repo","details":null,"documentation":{"short":"Determines if the project has generated executable (binary) artifacts in the source repository.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#binary-artifacts"}},{"name":"Token-Permissions","score":-1,"reason":"No tokens found","details":null,"documentation":{"short":"Determines if the project's workflows follow the principle of least privilege.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#token-permissions"}},{"name":"Maintained","score":0,"reason":"0 commit(s) and 0 issue activity found in the last 90 days -- score normalized to 0","details":null,"documentation":{"short":"Determines if the project is \"actively maintained\".","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#maintained"}},{"name":"CII-Best-Practices","score":0,"reason":"no effort to earn an OpenSSF best practices badge detected","details":null,"documentation":{"short":"Determines if the project has an OpenSSF (formerly CII) Best Practices Badge.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#cii-best-practices"}},{"name":"Signed-Releases","score":-1,"reason":"no releases found","details":null,"documentation":{"short":"Determines if the project cryptographically signs release artifacts.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#signed-releases"}},{"name":"License","score":9,"reason":"license file detected","details":["Info: project has a license file: LICENSE:0","Warn: project license file does not contain an FSF or OSI license."],"documentation":{"short":"Determines if the project has defined a license.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#license"}},{"name":"Security-Policy","score":0,"reason":"security policy file not detected","details":["Warn: no security policy file detected","Warn: no security file to analyze","Warn: no security file to analyze","Warn: no security file to analyze"],"documentation":{"short":"Determines if the project has published a security policy.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#security-policy"}},{"name":"Pinned-Dependencies","score":-1,"reason":"no dependencies found","details":null,"documentation":{"short":"Determines if the project has declared and pinned the dependencies of its build process.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#pinned-dependencies"}},{"name":"Branch-Protection","score":0,"reason":"branch protection not enabled on development/release branches","details":["Warn: branch protection not enabled for branch 'main'"],"documentation":{"short":"Determines if the default and release branches are protected with GitHub's branch protection settings.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#branch-protection"}},{"name":"SAST","score":0,"reason":"SAST tool is not run on all commits -- score normalized to 0","details":["Warn: 0 commits out of 11 are checked with a SAST tool"],"documentation":{"short":"Determines if the project uses static code analysis.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#sast"}},{"name":"Fuzzing","score":0,"reason":"project is not fuzzed","details":["Warn: no fuzzer integrations found"],"documentation":{"short":"Determines if the project uses fuzzing.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#fuzzing"}},{"name":"Vulnerabilities","score":0,"reason":"40 existing vulnerabilities detected","details":["Warn: Project is vulnerable to: GHSA-968p-4wvh-cqc8","Warn: Project is vulnerable to: GHSA-67hx-6x53-jw92","Warn: Project is vulnerable to: GHSA-v6h2-p8h4-qcjw","Warn: Project is vulnerable to: GHSA-grv7-fg5c-xmjg","Warn: Project is vulnerable to: GHSA-x9w5-v3q2-3rhw","Warn: Project is vulnerable to: GHSA-3xgq-45jj-v275","Warn: Project is vulnerable to: GHSA-w573-4hg7-7wgq","Warn: Project is vulnerable to: GHSA-434g-2637-qmqr","Warn: Project is vulnerable to: GHSA-49q7-c7j4-3p7m","Warn: Project is vulnerable to: GHSA-977x-g7h5-7qgw","Warn: Project is vulnerable to: GHSA-f7q4-pwc6-w24p","Warn: Project is vulnerable to: GHSA-fc9h-whq2-v747","Warn: Project is vulnerable to: GHSA-vjh7-7g9h-fjfh","Warn: Project is vulnerable to: GHSA-jchw-25xp-jwwc","Warn: Project is vulnerable to: GHSA-cxjh-pqwp-8mfp","Warn: Project is vulnerable to: GHSA-c429-5p7v-vgjp","Warn: Project is vulnerable to: GHSA-c7qv-q95q-8v27","Warn: Project is vulnerable to: GHSA-4www-5p9h-95mh","Warn: Project is vulnerable to: GHSA-9gqv-wp59-fq42","Warn: Project is vulnerable to: GHSA-9c47-m6qq-7p4h","Warn: Project is vulnerable to: GHSA-593f-38f6-jp5m","Warn: Project is vulnerable to: GHSA-x2rg-q646-7m2v","Warn: Project is vulnerable to: GHSA-jgmv-j7ww-jx2x","Warn: Project is vulnerable to: GHSA-76p3-8jx3-jpfq","Warn: Project is vulnerable to: GHSA-3rfm-jhwj-7488","Warn: Project is vulnerable to: GHSA-hhq3-ff78-jv3g","Warn: Project is vulnerable to: GHSA-3xq5-wjfh-ppjc","Warn: Project is vulnerable to: GHSA-952p-6rrq-rcjv","Warn: Project is vulnerable to: GHSA-mwcw-c2x4-8c55","Warn: Project is vulnerable to: GHSA-9wv6-86v2-598j","Warn: Project is vulnerable to: GHSA-h7cp-r72f-jxh6","Warn: Project is vulnerable to: GHSA-v62p-rq8g-8h59","Warn: Project is vulnerable to: GHSA-7fh5-64p2-3v2j","Warn: Project is vulnerable to: GHSA-c2qf-rxjj-qqgw","Warn: Project is vulnerable to: GHSA-52f5-9888-hmc6","Warn: Project is vulnerable to: GHSA-j8xg-fqg3-53r7","Warn: Project is vulnerable to: GHSA-3h5v-q93c-6h6q","Warn: Project is vulnerable to: PYSEC-2024-35 / GHSA-547x-748v-vp6p","Warn: Project is vulnerable to: PYSEC-2022-43167","Warn: Project is vulnerable to: PYSEC-2023-206"],"documentation":{"short":"Determines if the project has open, known unfixed vulnerabilities.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#vulnerabilities"}}]},"last_synced_at":"2025-08-17T02:40:14.797Z","repository_id":38323160,"created_at":"2025-08-17T02:40:14.797Z","updated_at":"2025-08-17T02:40:14.797Z"},"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":28412774,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-01-14T05:26:33.345Z","status":"ssl_error","status_checked_at":"2026-01-14T05:21:57.251Z","response_time":107,"last_error":"SSL_connect returned=1 errno=0 peeraddr=140.82.121.5:443 state=error: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"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":["devextreme","python-dash"],"created_at":"2026-01-14T07:16:29.572Z","updated_at":"2026-01-14T07:16:30.384Z","avatar_url":"https://github.com/azur-scd.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# dash_dvx\n\n![forthebadge](./made-with-dash-component-boilerplate.svg)\n\ndash_dvx is a Dash component library.\n\nThis module is as simple and basic wrapper for the DevExtreme UI components library. Complete DevExtreme demos are available here [https://js.devexpress.com/Demos/WidgetsGallery/](https://js.devexpress.com/Demos/WidgetsGallery/)\n\nThis dash component was quickly developed for a need in another project, so for the moment the component is quite basic and integrates only three kinds of devextreme UI components : the Data Grid, the Tree List and the Filter Builder\n\nSome of the most important DevExtreme features are integrated by default (paging, filtering, export, selection...), see below the details of the Grid and List dash component configuration.\n\n\n## Install\n\n```\npip install dash-dvx\n```\n\n## Usage\n\n### Import the dash component\n\n```\nimport dash_dvx as dvx\n\n```\n### Styling the component\n\nYou can add the DevExtreme CSS and themes by declaring the CDN hosted resources in the external_stylesheets init keyword.\n\n```\nexternal_stylesheets=[\"https://cdn3.devexpress.com/jslib/21.2.5/css/dx.common.css\",\"https://cdn3.devexpress.com/jslib/21.2.5/css/dx.material.orange.dark.compact.css\"]\n\napp = dash.Dash(\n    __name__, meta_tags=[{\"name\": \"viewport\", \"content\": \"width=device-width\"}],\n    external_stylesheets=extrenal_stylesheets\n)\n```\n\n### Config (list of component attributes for the Grid and List)\n\n\n| Syntax         | Used by component | Description    | Required/Enabled by default     | Possible values | Default values\n| :---           | :---              |    :----:      |          ---: |  :----:      |          ---: |\n| id         |  Grid/List                | (string) the id selector of the html output          |    |\n| dataSource      | Grid/List                  | (list of dicts) the data           | Required      |\n| columns      | Grid                  | (list of dicts) a list of the dictionary keys you want to be displayed           | Required     |\n| keyExpr      | Grid/List                  | (string) the unique key values to access data items           | Required      |\n| parentIdExpr | List | (string) the keys to loop on to create the nested list | Required |\n| default_selected_row_keys | List | (array) the row keys to be checked by default |  |\n| defaultSelectedRowKeys | Grid | (array) the row keys to be checked by default |  |\n| selected_row | Grid/List | (array) the row keys to be selected by default |  |\n| autoExpandAll      | list                  | (bool) Expand the tree by default           | Enabled by default      | True/False | True\n| defaultPageSize      | Grid                  | (int) number of items displayed by page           | Enabled by default      |  | 10\n| pagingIsEnabled      | List                  | (bool) splits records into multiple pages           | Enabled by default      | True/False  | True\n| defaultPageSize      | List                  | (int) number of items displayed by page           | Required if pagingIsEnabled is True/Enabled by default      |  | 10\n| pageSizeSelectorIsEnabled      | Grid/List                  | (bool) enables a dropdown widget to choose the PageSize           | Not enabled by default     | True/False | False\n| allowedPageSizes      | Grid/List                  | (list) defines the possible page size number           | Required if pageSizeSelectorIsEnabled is True     | [5, 10, 20, 50]\n| sortingMode  | Grid/List | (string) specify the sort mode | Enabled by default  | \"single\"/\"multiple\" | \"multiple\"\n| searchPanelIsEnabled | Grid/List | (bool) displays a search bar (on all datafields) above the datagrid | Enabled by default | True/False | True\n| headerFilterIsEnabled | Grid/List | (bool) enables a filter icon in any column header | Enabled by default | True/False | True\n| filterRowIsEnabled | Grid/List | (bool) displays a filter row located under the column headers | Enabled by default | True/False | True\n| columnChooserIsEnabled | Grid/List | (bool) enables a widget to show and hide columns | Not enabled by default | True/False | False\n| exportIsEnabled | Grid | (bool) enables an Excel export button above the DataGrid | Enabled by default | True/False | True\n| selectionMode | Grid | (string) enables the feature of selecting one single row or multiple rows using checkboxes  | Enabled by default | \"single\"/\"multiple\"/\"none\" | \"multiple\"\n| selectionIsRecursive | List | (bool) enables the feature of recursively selecting rows with their nested rows (parents and childs) | Enabled by default | True/False | True\n| selectionMode | List | (string) enables the feature of selecting one single row or multiple nested rows using checkboxes. If selectionIsRecursive is True, possible values are \"all\" to select all hierarchical ascnedants and descendants, or \"leavesOnly\" to select only child rows | Enabled by default | \"single\"/\"all\"/\"leavesOnly\" | \"leavesOnly\"\n\nTo get the returned selected data in a dash app, you must call the property \"selected_rows\" associated to the html grid or list id (see below the examples or the usage.py file)\n\n### See in action\n\n1. git clone\n2. Prepare the virtualenv and install requirements.txt\n3. python usage.py\n\n\n### Grid Simple example\n\n```\nimport dash\nfrom dash import html\nimport dash_dvx as dvx\nimport json\n\napp = dash.Dash(\n    __name__, meta_tags=[{\"name\": \"viewport\", \"content\": \"width=device-width\"}],\n    external_stylesheets=[\"https://cdn3.devexpress.com/jslib/21.2.5/css/dx.common.css\",\"https://cdn3.devexpress.com/jslib/21.2.5/css/dx.material.blue.light.compact.css\"]\n)\n\n#DATA\ndata = [{\n    \"ID\": 1,\n    \"CompanyName\": 'Super Mart of the West',\n    \"Address\": '702 SW 8th Street',\n    \"City\": 'Bentonville',\n    \"State\": 'Arkansas',\n    \"Zipcode\": 72716,\n    \"Phone\": '(800) 555-2797',\n    \"Fax\": '(800) 555-2171',\n   \" Website\": 'http://www.nowebsitesupermart.com',\n  }, {\n    \"ID\": 2,\n    \"CompanyName\": 'Electronics Depot',\n    \"Address\": '2455 Paces Ferry Road NW',\n    \"City\": 'Atlanta',\n    \"State\": 'Georgia',\n    \"Zipcode\": 30339,\n    \"Phone\": '(800) 595-3232',\n    \"Fax\": '(800) 595-3231',\n    \"Website\": 'http://www.nowebsitedepot.com',\n  }, {\n    \"ID\": 3,\n    \"CompanyName\": 'K\u0026S Music',\n    \"Address\": '1000 Nicllet Mall',\n    \"City\": 'Minneapolis',\n    \"State\": 'Minnesota',\n    \"Zipcode\": 55403,\n    \"Phone\": '(612) 304-6073',\n    \"Fax\": '(612) 304-6074',\n    \"Website\": 'http://www.nowebsitemusic.com',\n  }]\n\n#LAYOUT\n app.layout =  html.Div(children=[\n        dvx.Grid(\n        id=\"grid\", \n        dataSource=data,\n        columns = ['ID','CompanyName', 'City', 'State', 'Phone', 'Fax'],\n        keyExpr= \"ID\"\n    ),\n    ])\n\nif __name__ == '__main__':\n    app.run_server(debug=True)\n```\n\n### Grid example with callback\n\n``` \napp.layout =  html.Div(children=[\n        dvx.Grid(\n        id=\"grid\", \n        dataSource=data,\n        columns = ['ID','CompanyName', 'City', 'State', 'Phone', 'Fax'],\n        keyExpr= \"ID\",\n        searchPanelIsEnabled= False, #if you don't want the search bar\n        pageSizeSelectorIsEnabled= True, #if you want to have the ability to change in the UI the defalt number of itmes by page\n        allowedPageSizes= [5, 10, 20, 50, 100],\n    ),\n    html.Div(id='output')\n    ])\n\n@app.callback(\n    Output('output', 'children'),\n    Input('grid', 'selected_rows'),\n)\ndef update_output(selected_rows):\n    return json.dumps(selected_rows)\n```\n\n### List example\n\n```\nimport dash\nfrom dash import html\nimport dash_dvx as dvx\nimport json\n\napp = dash.Dash(\n    __name__, meta_tags=[{\"name\": \"viewport\", \"content\": \"width=device-width\"}],\n    external_stylesheets=[\"https://cdn3.devexpress.com/jslib/21.2.5/css/dx.common.css\",\"https://cdn3.devexpress.com/jslib/21.2.5/css/dx.material.orange.dark.compact.css\"]\n)\n\n#DATA\ndata = [{\n    \"Task_ID\": 1,\n    \"Task_Assigned_Employee_ID\": 1,\n    \"Task_Subject\": 'Plans 2015',\n    \"Task_Start_Date\": '2015-01-01T00:00:00',\n    \"Task_Due_Date\": '2015-04-01T00:00:00',\n    \"Task_Status\": 'Completed',\n    \"Task_Priority\": 4,\n    \"Task_Completion\": 100,\n    \"Task_Parent_ID\": 0,\n  }, {\n    \"Task_ID\": 2,\n    \"Task_Assigned_Employee_ID\": 2,\n    \"Task_Subject\": 'Health Insurance',\n    \"Task_Start_Date\": '2015-02-12T00:00:00',\n    \"Task_Due_Date\": '2015-05-30T00:00:00',\n    \"Task_Status\": 'In Progress',\n    \"Task_Priority\": 4,\n    \"Task_Completion\": 75,\n    \"Task_Parent_ID\": 1,\n  }, {\n    \"Task_ID\": 3,\n    \"Task_Assigned_Employee_ID\": 4,\n    \"Task_Subject\": 'New Brochures',\n    \"Task_Start_Date\": '2015-02-17T00:00:00',\n    \"Task_Due_Date\": '2015-03-01T00:00:00',\n    \"Task_Status\": 'Completed',\n    \"Task_Priority\": 3,\n    \"Task_Completion\": 100,\n    \"Task_Parent_ID\": 2,\n  }, {\n    \"Task_ID\": 4,\n    \"Task_Assigned_Employee_ID\": 31,\n    \"Task_Subject\": 'Training',\n    \"Task_Start_Date\": '2015-03-02T00:00:00',\n    \"Task_Due_Date\": '2015-06-29T00:00:00',\n    \"Task_Status\": 'Completed',\n    \"Task_Priority\": 3,\n    \"Task_Completion\": 100,\n    \"Task_Parent_ID\": 0,\n  }]\n\n#LAYOUT\n app.layout =  html.Div(children=[\n       dvx.List(\n        id=\"list\", \n        dataSource=data,\n        keyExpr= \"Task_ID\",\n        parentIdExpr= \"Task_Parent_ID\",\n        filterRowIsEnabled= False, #if you don't want the row filter undre the header\n        columnChooserIsEnabled= True, #if you want to have the ability to show/hide columns in the UI\n        defaultPageSize= 25,\n        selectionMode=\"all\" # if you want the parents and the childs nodes of the selected item, default config is \"leavesOnly\" wich returns only the sub-items of the selection\n    ),\n    html.Div(id='output')\n    ])\n\n# CALLBACKS\n@app.callback(\n    Output('output', 'children'),\n    Input('list', 'selected_rows'),\n)\ndef update_list(selected_rows):\n    return json.dumps(selected_rows)\n\nif __name__ == '__main__':\n    app.run_server(debug=True)\n```\n\n### Filter Builder simple example\n\n```\nimport dash\nfrom dash import html\nimport dash_dvx as dvx\nimport json\n\napp = dash.Dash(\n    __name__, meta_tags=[{\"name\": \"viewport\", \"content\": \"width=device-width\"}],\n    external_stylesheets=[\"https://cdn3.devexpress.com/jslib/21.2.5/css/dx.common.css\",\"https://cdn3.devexpress.com/jslib/21.2.5/css/dx.material.orange.dark.compact.css\"]\n)\n\n#DATA\nfields = [\n    {\n      \"dataField\": 'Product_ID',\n      \"dataType\": 'number'\n    }, {\n      \"dataField\": 'Product_Name',\n      \"dataType\": 'string'\n    }, {\n      \"dataField\": 'Product_Cost',\n      \"dataType\": 'number'\n    }, {\n      \"dataField\": 'Product_Sale_Price',\n      \"dataType\": 'number'\n    }, {\n      \"dataField\": 'Product_Retail_Price',\n      \"dataType\": 'number'\n    }, {\n      \"dataField\": 'Product_Current_Inventory',\n      \"dataType\": 'number'\n    },\n  ]\n\n#LAYOUT\n app.layout =  html.Div(children=[\n        dvx.Filterbuilder(\n        id=\"fbuilder\", \n        fields=fields\n    ),\n    html.Div(id='output')\n    ])\n\n# CALLBACKS\n@app.callback(\n    Output('output', 'children'),\n    Input('fbuilder', 'value'),\n)\ndef update_filter(value):\n    return json.dumps(value) # the result of the component strictly follows that of the Filter Builder component of the Devextreme library, example [[\"Product_Cost\", \"\u003c\", 5000], \"and\", [\"Product_Name\", \"contains\", \"tee-shirt\"]]\n\nif __name__ == '__main__':\n    app.run_server(debug=True)\n```\n\n## Development\n\nGet started with:\n1. Install Dash and its dependencies: https://dash.plotly.com/installation\n2. Run `python usage.py`\n3. Visit http://localhost:8050 in your web browser\n\n## Contributing\n\nSee [CONTRIBUTING.md](./CONTRIBUTING.md)\n\n### Install dependencies\n\nIf you have selected install_dependencies during the prompt, you can skip this part.\n\n1. Install npm packages\n    ```\n    $ npm install\n    ```\n2. Create a virtual env and activate.\n    ```\n    $ virtualenv venv\n    $ . venv/bin/activate\n    ```\n    _Note: venv\\Scripts\\activate for windows_\n\n3. Install python packages required to build components.\n    ```\n    $ pip install -r requirements.txt\n    ```\n4. Install the python packages for testing (optional)\n    ```\n    $ pip install -r tests/requirements.txt\n    ```\n\n### Write your component code in `src/lib/components/DashDvx.react.js`.\n\n- The demo app is in `src/demo` and you will import your example component code into your demo app.\n- Run the demo code\n  - npm run start\n  - Open http://localhost:55555\n- Test your code in a Python environment:\n    1. Build your code\n        ```\n        $ npm run build\n        ```\n    2. Run and modify the `usage.py` sample dash app:\n        ```\n        $ python usage.py\n        ```\n- Write tests for your component.\n    - A sample test is available in `tests/test_usage.py`, it will load `usage.py` and you can then automate interactions with selenium.\n    - Run the tests with `$ pytest tests`.\n    - The Dash team uses these types of integration tests extensively. Browse the Dash component code on GitHub for more examples of testing (e.g. https://github.com/plotly/dash-core-components)\n- Add custom styles to your component by putting your custom CSS files into your distribution folder (`dash_dvx`).\n    - Make sure that they are referenced in `MANIFEST.in` so that they get properly included when you're ready to publish your component.\n    - Make sure the stylesheets are added to the `_css_dist` dict in `dash_dvx/__init__.py` so dash will serve them automatically when the component suite is requested.\n- [Review your code](./review_checklist.md)\n\n### Create a production build and publish:\n\n1. Build your code:\n    ```\n    $ npm run build\n    ```\n2. Create a Python distribution\n    ```\n    $ python setup.py sdist bdist_wheel\n    ```\n    This will create source and wheel distribution in the generated the `dist/` folder.\n    See [PyPA](https://packaging.python.org/guides/distributing-packages-using-setuptools/#packaging-your-project)\n    for more information.\n\n    *Note : the version number of the package (dist/dash_dvx-x.x.x-py3-none-any.whl) given by the setup.py file comes from the src/package.json file*\n\n3. Test your tarball by copying it into a new environment and installing it locally:\n    ```\n    $ pip install dash_dvx-0.0.1.tar.gz\n    ```\n\n4. If it works, then you can publish the component to NPM and PyPI:\n    1. Publish on PyPI\n        ```\n        $ twine upload dist/*\n        ```\n    2. Cleanup the dist folder (optional)\n        ```\n        $ rm -rf dist\n        ```\n    3. Publish on NPM (Optional if chosen False in `publish_on_npm`)\n        ```\n        $ npm publish\n        ```\n        _Publishing your component to NPM will make the JavaScript bundles available on the unpkg CDN. By default, Dash serves the component library's CSS and JS locally, but if you choose to publish the package to NPM you can set `serve_locally` to `False` and you may see faster load times._\n\n5. Share your component with the community! https://community.plotly.com/c/dash\n    1. Publish this repository to GitHub\n    2. Tag your GitHub repository with the plotly-dash tag so that it appears here: https://github.com/topics/plotly-dash\n    3. Create a post in the Dash community forum: https://community.plotly.com/c/dash\n\n\n\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fazur-scd%2Fdash_dvx","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fazur-scd%2Fdash_dvx","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fazur-scd%2Fdash_dvx/lists"}