{"id":13519380,"url":"https://github.com/cloudflarearchive/backgrid","last_synced_at":"2025-09-27T08:30:38.624Z","repository":{"id":5200761,"uuid":"6376011","full_name":"cloudflarearchive/backgrid","owner":"cloudflarearchive","description":"Finally, an easily stylable semantic HTML data grid widget with a Javascript API that doesn't suck.","archived":true,"fork":false,"pushed_at":"2017-08-09T15:18:09.000Z","size":4029,"stargazers_count":2008,"open_issues_count":88,"forks_count":324,"subscribers_count":92,"default_branch":"master","last_synced_at":"2024-10-29T14:58:31.979Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"http://backgridjs.com","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/cloudflarearchive.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":"CONTRIBUTING.md","funding":null,"license":"LICENSE-MIT","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2012-10-24T19:17:31.000Z","updated_at":"2024-10-16T12:34:33.000Z","dependencies_parsed_at":"2022-07-04T13:31:13.843Z","dependency_job_id":null,"html_url":"https://github.com/cloudflarearchive/backgrid","commit_stats":null,"previous_names":["cloudflare/backgrid","wyuenho/backgrid"],"tags_count":18,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/cloudflarearchive%2Fbackgrid","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/cloudflarearchive%2Fbackgrid/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/cloudflarearchive%2Fbackgrid/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/cloudflarearchive%2Fbackgrid/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/cloudflarearchive","download_url":"https://codeload.github.com/cloudflarearchive/backgrid/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":234410537,"owners_count":18828228,"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-08-01T05:01:58.202Z","updated_at":"2025-09-27T08:30:37.334Z","avatar_url":"https://github.com/cloudflarearchive.png","language":"JavaScript","funding_links":[],"categories":["JavaScript","others"],"sub_categories":[],"readme":"# Backgrid.js\n\n[![Build Status](https://travis-ci.org/cloudflare/backgrid.png?branch=master)](https://travis-ci.org/cloudflare/backgrid)\n\nBackgrid.js is a set of components for building semantic and easily stylable\ndata grid widgets. It offers a simple, intuitive programming interface that\nmakes easy things easy, but hard things possible when dealing with tabular data.\n\n## Features\n\nThe goal of Backgrid.js is to produce a set of core Backbone UI elements that\noffer you all the basic displaying, sorting and editing functionalities you'd\nexpect, and to create an elegant API that makes extending Backgrid.js with extra\nfunctionalities easy.\n\n## Advantages\n\n- No Hungarian notations.\n- Solid foundation. Based on Backbone.js.\n- Semantic and easily stylable. Just style with plain CSS like you would a normal HTML table.\n- Low learning curve. Works with plain old Backbone models and collections. Easy things are easy, hards things possible.\n- Highly modular and customizable. Components are just simple Backbone View classes, customization is easy if you already know Backbone.\n- Lightweight. Extra features are separated into extensions, which keeps the bloat away.\n- Good documentation.\n- Well tested. Comes with [100s of test cases](http://cloudflare.github.io/backgrid/test/).\n\n## Supported browsers [[1]](#note-1):\n\n- Internet Explorer 8 [[2]](#note-2)\n- Internet Explorer 9+\n- Chrome 4+\n- Safari 4+\n- Firefox 4+\n- Opera 9+\n\n### Notes:\n\n- \u003cspan id=\"note-1\"\u003e[1]\u003c/span\u003e: Both the desktop and mobile versions of the above browsers are supported.\n- \u003cspan id=\"note-2\"\u003e[2]\u003c/span\u003e: With the exception of the Filter extension's search icon CSS.\n\n## Example\n\n```javascript\nvar Territory = Backbone.Model.extend({});\n\nvar Territories = Backbone.Collection.extend({\n  model: Territory,\n  url: \"examples/territories.json\"\n});\n\nvar territories = new Territories();\n\n// Fetch some countries from the url\nterritories.fetch();\n\n// Column definitions\nvar columns = [{\n  name: \"id\", // The key of the model attribute\n  label: \"ID\", // The name to display in the header\n  editable: false, // By default every cell in a column is editable, but *ID* shouldn't be\n  // Defines a cell type, and ID is displayed as an integer without the ',' separating 1000s.\n  cell: Backgrid.IntegerCell.extend({\n    orderSeparator: ''\n  })\n}, {\n  name: \"name\",\n  label: \"Name\",\n  // The cell type can be a reference of a Backgrid.Cell subclass, any Backgrid.Cell subclass instances like *id* above, or a string\n  cell: \"string\" // This is converted to \"StringCell\" and a corresponding class in the Backgrid package namespace is looked up\n}, {\n  name: \"pop\",\n  label: \"Population\",\n  cell: \"integer\" // An integer cell is a number cell that displays humanized integers\n}, {\n  name: \"percentage\",\n  label: \"% of World Population\",\n  cell: \"number\" // A cell type for floating point value, defaults to have a precision 2 decimal numbers\n}, {\n  name: \"date\",\n  label: \"Date\",\n  cell: \"date\",\n}, {\n  name: \"url\",\n  label: \"URL\",\n  cell: \"uri\" // Renders the value in an HTML \u003ca\u003e element\n}];\n\n// Initialize a new Grid instance\nvar grid = new Backgrid.Grid({\n  columns: columns,\n  collection: territories,\n});\n\n// Render the grid and attach the Grid's root to your HTML document\n$(\"#example-1-result\").append(grid.render().el);\n```\n\n# Result:\n\nTake a look [here](http://backgridjs.com/index.html#basic-example).\n\n## More Examples\n\nAre you kidding me? This is a README file. Go to the [documentation](http://backgridjs.com/\n\"Backbone.js Documentation\") to find out more :)\n\n## License\nCopyright (c) 2013-present Cloudflare, Inc.\nLicensed under the [MIT license](LICENSE-MIT \"MIT License\").\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcloudflarearchive%2Fbackgrid","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fcloudflarearchive%2Fbackgrid","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcloudflarearchive%2Fbackgrid/lists"}