{"id":13400924,"url":"https://github.com/securingsincity/backbone-react-ui","last_synced_at":"2025-07-06T16:37:37.095Z","repository":{"id":20224547,"uuid":"23496331","full_name":"securingsincity/backbone-react-ui","owner":"securingsincity","description":"React components for use with backbone and backbone paginator","archived":false,"fork":false,"pushed_at":"2015-01-18T01:56:20.000Z","size":17396,"stargazers_count":19,"open_issues_count":1,"forks_count":5,"subscribers_count":3,"default_branch":"master","last_synced_at":"2024-10-07T08:09:20.963Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/securingsincity.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2014-08-30T16:57:29.000Z","updated_at":"2023-03-08T03:17:15.000Z","dependencies_parsed_at":"2022-08-22T15:40:16.260Z","dependency_job_id":null,"html_url":"https://github.com/securingsincity/backbone-react-ui","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/securingsincity%2Fbackbone-react-ui","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/securingsincity%2Fbackbone-react-ui/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/securingsincity%2Fbackbone-react-ui/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/securingsincity%2Fbackbone-react-ui/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/securingsincity","download_url":"https://codeload.github.com/securingsincity/backbone-react-ui/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248821951,"owners_count":21166984,"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":[],"created_at":"2024-07-30T19:00:56.944Z","updated_at":"2025-04-14T04:32:16.203Z","avatar_url":"https://github.com/securingsincity.png","language":"JavaScript","funding_links":[],"categories":["Uncategorized","Awesome React","React [🔝](#readme)"],"sub_categories":["Uncategorized","Tools"],"readme":"#Backbone-React-ui\n \n\n[React](http://facebook.github.io/react/) components for use with [Backbone](http://backbonejs.org/), [Bootstrap](http://getbootstrap.com) and [Backbone.Paginator](https://github.com/backbone-paginator/backbone.paginator)\n\nThis project is based lightly on [React-bootstrap](https://github.com/react-bootstrap/react-bootstrap) but is focused on incorporating backbone to create a viewmodel system\n\n[![Build Status](https://travis-ci.org/securingsincity/backbone-react-ui.svg?branch=master)](https://travis-ci.org/securingsincity/backbone-react-ui)\n\n\n##Usage:\n\n`npm install backbone-react-ui`\n\n```javascript\nvar BackboneReactUI = require('backbone-react-ui');\nReact.renderComponent(BackboneReactUI.FilterablePageableTable({initialCollection:coll, maximumPages:5}), document.getElementById(\"container\"));\n\n```\n##Dependencies:\n* React\n* jQuery\n* Backbone\n* Backbone.paginator -- optional\n* Lodash/underscore\n\n\n##Components:\n* Paginator  (Based on a Backbone Collection or a Backbone Paginator Collection)\n* Table (Based on a Backbone Collection or a Backbone Paginator Collection)\n* PageableTable  (Based on a Backbone Collection or a Backbone Paginator Collection)\n* FilterablePageableTable - The whole sha-bang being able to filter results, sort and page through them. Also based on a Backbone Collection or a Backbone Paginator Collection\n\nAn demo of the FitlerablePageableTable can be found here http://securingsincity.github.io/backbone-react-ui/example.html\n\n\n##Table\n\nAt its simplest this is a bootstrap table driven by a backbone collection.\n\n###To use :\n\n* Create a new backbone pageable collection with a table factory object :\n\n```javascript\n\nvar testModel = Backbone.Model.extend();\nvar testCollection = Backbone.Collection.extend({\n  model : testModel,\n  tableFactory : {\n    'ID': {\n      field: 'id',\n      display: 'string',\n      sortable: true\n    },\n    'First Name' : {\n      field:'first_name',\n      display: 'string',\n      sortable: true\n    },\n    'Last Name' : {\n      field: 'last_name',\n      display: 'string',\n      sortable: true\n    },\n    'Edit' : {\n      action: 'edit',\n      display: 'button',\n      classes: 'btn-success'\n    },\n    'Remove' : {\n      action: 'delete',\n      display: 'button',\n      classes: 'btn-warning',\n      icon: 'glyphicon-remove'\n    },\n  }\n});\nvar coll = new testCollection([], {\n   mode: \"client\",\n   comparator: function (model) {\n     return model.get(\"last_name\");\n   },\n\n});\n\n```\n\nThe table factory object is made up of a field, how it should be displayed (for now a string or a button), an action, additional classes and an icon\n\nThis builds out the columns of that table\n\n####Notes :\n* The sortable functionality is only available to a backbone pageable collection for now\n* This is based on bootstrap's use of glyphicons and button functionality\n* Sorting should work with both server side and client side pageable collections\n\nTo instantiate the table\n\n```javascript\nReact.renderComponent(\u003cTable striped hover condensed initialCollection={coll} /\u003e, document.getElementById(\"container\"));\n```\n\n###PageableTable\n\nThis combines the paginator and the table functionality.\n\nThe only difference is that you would include a Backbone.PageableCollection this would allow the system to know the max number of pages and your current page.\n\nThe instantiation would be the same except with this time you could include the `maximumPages` if you have many pages of data\n```javascript\nReact.renderComponent(\u003cPageableTable striped hover condensed initialCollection={coll} maximumPages={5} /\u003e, document.getElementById(\"container\"));\n```\n\n\n###FilterablePageableTable\n\nThis combines the paginator, the table functionality as well as filter/search.\n\nThe search can be driven by an API or just done on the client side\n\n\n```javascript\nReact.renderComponent(\u003cFilterablePageableTable striped hover condensed initialCollection={coll} maximumPages={5} /\u003e, document.getElementById(\"container\"));\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsecuringsincity%2Fbackbone-react-ui","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fsecuringsincity%2Fbackbone-react-ui","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsecuringsincity%2Fbackbone-react-ui/lists"}