Backgrid-ResponsiveGrid

KO | EN

gitlite — search

#javascript #react #golang #go #rust #linux #docker #nodejs #java #kubernetes #security #pytorch #ios #mcp

Backgrid-ResponsiveGrid

(★ 9)

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

Backgrid-ResponsiveGrid Latest Version Download

Download Latest Version (.zip)

// repository documentation

Was this content helpful?

★ 0 (0 ratings)

##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)

Backgrid-ResponsiveGrid

Backgrid-ResponsiveGrid Latest Version Download

Today's picks

Was this content helpful?

Recent Feedback

Backgrid-ResponsiveGrid

Backgrid-ResponsiveGrid Latest Version Download

Today's picks

Was this content helpful?

Recent Feedback

Download README