Backgridjs

Out of the box, Backgrid.js generates simple semantic HTML table elements that you can style with pure CSS. This section is only going to briefly describe some of the more important classes, and things that you should be aware of when styling.

.backgrid-container

This is the class that you should put into any container element that will hold the generated table. By default, it has a fixed maximum height and 100% width with no borders and paddings. It also serves as a positioned element so if you need to absolutely position any elements inside your custom table element classes, you can position them against this container.

              .backgrid-container {
                position: relative;
                display: block;
                width: 100%;
                /* you may want to adjust this to fit a whole page */
                height: 494px;
                padding: 0;
                overflow: auto;
                border: 0;
              }

.backgrid

This is the class that will be applied to every Backgrid.js generated table. All other Backgrid.js default styles on table elements will only apply to descendents of tables of this class.

              /* Say you want to give some shiny gradient background colors
                 to your table header */
              .backgrid th {
                background-image: linear-gradient(#2F2727, #1a82f7);
              }

              /* Or maybe you enjoy zebra stripes */
              .backgrid tbody tr:nth-child(even) {
                background-color: #f9f9f9;
              }

Although usually unnecessary, if you want to completely remove all Backgrid.js styles, you can supply a className attribute to the Backgrid.Grid constructor:

              var grid = new Backgrid.Grid({
                className: "my-awesome-css-animated-grid",
                ...
              });

.backgrid .*-cell

Every cell class Backgrid.js defines has a CSS class applied to them of the same, but dasherized name. The default styles apply a text-align: left to text cells and text-align: right to numeric and datetime cells.

See the relevant cell classes for details.

Styling

.backgrid-container

.backgrid

.backgrid .*-cell