https://github.com/morficus/backgrid-responsivegrid

Extension to provide a better small-screen experience when using Background.js
https://github.com/morficus/backgrid-responsivegrid

Last synced: about 1 month ago
JSON representation

Extension to provide a better small-screen experience when using Background.js

• Host: GitHub
• URL: https://github.com/morficus/backgrid-responsivegrid
• Owner: morficus
• License: mit
• Created: 2013-07-05T05:30:57.000Z (over 11 years ago)
• Default Branch: master
• Last Pushed: 2015-12-10T06:17:02.000Z (about 9 years ago)
• Last Synced: 2024-11-02T15:12:13.504Z (2 months ago)
• Language: JavaScript
• Homepage:
• Size: 39.1 KB
• Stars: 10
• Watchers: 3
• Forks: 6
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE-MIT

Awesome Lists containing this project

README

        
##Backgrid-ResponsiveGrid

[![Code Climate](https://codeclimate.com/github/morficus/Backgrid-ResponsiveGrid.png)](https://codeclimate.com/github/morficus/Backgrid-ResponsiveGrid) 

current vesion: v0.3.0

An extension for [Backgrid.js](http://backgridjs.com/) to provide a better small-screen-friendly experience.  

The extention was inspired by [Zurb's Responsive Tables](http://zurb.com/playground/responsive-tables).

##Additional Dependencies

None

##Usage

Step 0 - download responsiveBackgrid (either using Bower or by directlly downloading it)  

Step 1 - add responsiveBackgrid.js to your page (either using requireJS or with old-school script tags)  

Step 2 - add responsiveBackgrid.css to your page  

Step 3 - use the same way as you would Backgrid.Grid, but use Backgrid.Extension.ResponsiveGrid during the instantiation:  

```javascript

var myFlexGrid = new Backgrid.Extension.ResponsiveGrid({

     columns: columns,

     collection: territories

});

```

##Configurations

The following properties can be passed in as part of the options object when instantiating the grid:

  - ```columnsToPin```: the number of columns to be pinned (defaults to 1)

  - ```minScreenSize```: the screen width at which the columns should become pinned (defaults to 767)  

    **pro tip**: if you want to always have pinned columns regardless of the screen size, set this to a large value (such as 4000)

##Styling

Use these CSS classes to customize the appearance of the pinned columns:

  - ```.grid-pinned```: the wrapper around the pinned columns.   

    **careful** not to change the ```position```, ```top``` or ```left``` properties else the pinned columns won't be so pinned anymore

  - ```.grid-scrollable```: when columns are pinned, the wrapper around the scrollable portion of the table has this wrapper class.

  - ```.grid-responsive-wrapper```: wraps both of the above-mentioned classes. It's basically what keeps the pinned columns in their place

##Limitations  

Pinned columns can not be edited in-line  

~~Clicking on the header of a pinned column does not trigger a sort~~

##License

Copyright (c) 2013 Maurice Williams  

Licensed under [MIT License](LICENSE-MIT)