{"id":21813263,"url":"https://github.com/morficus/backgrid-responsivegrid","last_synced_at":"2025-04-13T23:27:06.728Z","repository":{"id":9343115,"uuid":"11192313","full_name":"morficus/Backgrid-ResponsiveGrid","owner":"morficus","description":"Extension to provide a better small-screen experience when using Background.js","archived":false,"fork":false,"pushed_at":"2015-12-10T06:17:02.000Z","size":40,"stargazers_count":9,"open_issues_count":0,"forks_count":6,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-04-11T03:51:48.840Z","etag":null,"topics":[],"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/morficus.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE-MIT","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2013-07-05T05:30:57.000Z","updated_at":"2024-11-06T20:43:34.000Z","dependencies_parsed_at":"2022-09-03T03:02:33.080Z","dependency_job_id":null,"html_url":"https://github.com/morficus/Backgrid-ResponsiveGrid","commit_stats":null,"previous_names":[],"tags_count":4,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/morficus%2FBackgrid-ResponsiveGrid","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/morficus%2FBackgrid-ResponsiveGrid/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/morficus%2FBackgrid-ResponsiveGrid/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/morficus%2FBackgrid-ResponsiveGrid/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/morficus","download_url":"https://codeload.github.com/morficus/Backgrid-ResponsiveGrid/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248795621,"owners_count":21162806,"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-11-27T14:28:16.213Z","updated_at":"2025-04-13T23:27:06.699Z","avatar_url":"https://github.com/morficus.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"##Backgrid-ResponsiveGrid\n\n[![Code Climate](https://codeclimate.com/github/morficus/Backgrid-ResponsiveGrid.png)](https://codeclimate.com/github/morficus/Backgrid-ResponsiveGrid) \n\ncurrent vesion: v0.3.0\n\nAn extension for [Backgrid.js](http://backgridjs.com/) to provide a better small-screen-friendly experience.  \nThe extention was inspired by [Zurb's Responsive Tables](http://zurb.com/playground/responsive-tables).\n\n\n##Additional Dependencies\nNone\n\n##Usage\nStep 0 - download responsiveBackgrid (either using Bower or by directlly downloading it)  \nStep 1 - add responsiveBackgrid.js to your page (either using requireJS or with old-school script tags)  \nStep 2 - add responsiveBackgrid.css to your page  \nStep 3 - use the same way as you would Backgrid.Grid, but use Backgrid.Extension.ResponsiveGrid during the instantiation:  \n```javascript\nvar myFlexGrid = new Backgrid.Extension.ResponsiveGrid({\n     columns: columns,\n     collection: territories\n});\n```\n\n##Configurations\nThe following properties can be passed in as part of the options object when instantiating the grid:\n  - ```columnsToPin```: the number of columns to be pinned (defaults to 1)\n  - ```minScreenSize```: the screen width at which the columns should become pinned (defaults to 767)  \n    **pro tip**: if you want to always have pinned columns regardless of the screen size, set this to a large value (such as 4000)\n\n##Styling\nUse these CSS classes to customize the appearance of the pinned columns:\n  - ```.grid-pinned```: the wrapper around the pinned columns.   \n    **careful** not to change the ```position```, ```top``` or ```left``` properties else the pinned columns won't be so pinned anymore\n  - ```.grid-scrollable```: when columns are pinned, the wrapper around the scrollable portion of the table has this wrapper class.\n  - ```.grid-responsive-wrapper```: wraps both of the above-mentioned classes. It's basically what keeps the pinned columns in their place\n\n##Limitations  \nPinned columns can not be edited in-line  \n~~Clicking on the header of a pinned column does not trigger a sort~~\n\n\n##License\nCopyright (c) 2013 Maurice Williams  \nLicensed under [MIT License](LICENSE-MIT)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmorficus%2Fbackgrid-responsivegrid","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fmorficus%2Fbackgrid-responsivegrid","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmorficus%2Fbackgrid-responsivegrid/lists"}