Berry Tables


Getting Started

Dependencies - berryTables is built on top of Berry.js and you will need to include that and any of its dependencies, aditionally underscore.js or lodash.js are required

A minimum setup might look something like this

<!DOCTYPE html>
<html>
  <head>
    <style src='//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css'></style>
    <script src='http://twitter.github.com/hogan.js/builds/3.0.1/hogan-3.0.1.js'></script>
    <script src='//ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js'></script>
    <script type='text/javascript' src='berry.min.js'></script>
    <script type='text/javascript' src='bootstrap.berry.js'></script>
    <script type='text/javascript' src='underscore.min.js'></script>
    <script type='text/javascript' src='berryTables.min.js'></script>
  </head>
  <body>
  <div class="myTable">
  </div>
  </body>
</html>

To get started we just need to initialize our table with some options

var options = {"container":".myTable"};
var myForm = berryTable(options);

API

find myTable.find([search]);

search: pass an object with an exact match of any fields you want to match on an array of models is returened wich can be manipulated with the model api


draw myTable.draw();

this will cause the table to be redrawn with any updated options or values that have changed since the last draw

models myTable.models;

the models can be accessed directly via the models variable. Any attributes that are modified or checked state will be updated visuially the next time draw is called.


Options

var options = {
  name: "My Form"
  schema: berryFields,
  data: "myForm"
};

title

This is the title of the table, used for downloads and labeling. 

options.title = "Table title";


schema

The schema is defined using the Berry.js syntax for fields 

options.schema = [{"label": "Field 1" , "name": "field_1"}];
The fields defined here will be used fore creating new entries into the table, editing entries in the table and will derive the filter fields for the table if filters are enabled. Filters use a more limited set of field types and some may be translated into simpler types.


filters

If you would like to define a different set of fields for filtering then you can define them directly here using the same syntax. 

options.filters = [{"label": "Field 1" , "name": "field_1"}];


data

This should be an array of objects where each object should be represened by one row in the table.


events

name

This is the name of the event and is used to keep track of the events, this must be a unique name within an instance.


label

Used to label the button as displayed.


callback

This is a function that is called once per selected model with the first parameter passed in being an instance of that model.


multiEdit

This indicates whether this event should be allowed to be triggered if multiple models are selected


complete

This function is called after the callback function has been called with each selected model.


multiEdit

'MultiEdit' is an array of fields by name that are allowed to be edited when multiple rows are selected. This will allow any fields in the array that are currently the same value to be edited at the same time.


inlineEdit

If the 'inlineEdit' flag is set to true then berryTables will attempt to add inline editing to the contents of each cell based on the form defined in the schema above.


autoSize

'autosize' can be set to true or an integer. This tells berryTables to set the table to fit inside of the current window and fill it. If an integer is given then it will be used as the offset on the bottom of the table.


pagination

entries options.entries;

This is an array of options for items per page i.e. 

options.entries = [10, 25, 50, 100];
count options.count;

This is the initial state of the items per page option

An option for all is always added to the list and if and empty array is passed for entries then all is selected by default and the option to change it is removed from the page. 

options.entries = [];


callbacks

All callbacks can accept a function whos first parameter will be either a model or in the case of editComplete and array of all models that where affected. Setting add, edit or delete to false or leaving them unset will hide the buttons associated with them and true will allow the actions to take place with no callback called.

add options.add = false;
edit options.edit = false;
delete options.delete = false;
editComplete options.editComplete = false;

The editComplete callback is called after all models in a multiEdit event have been handled.

click options.click = function(){}

A common use for the click callback is to have the model selected:

function(model){
  model.toggle();
}


Display flags

The following flags can be used to modify the available display options a accociated functionality.

options.filter = true;
options.sort = true;
options.search = true;
options.columns = true;
options.upload = true;
options.download = true;

Model

Models can be accessed either directly via the api or via a callback method as all callbacks pass either a model or an array of models.


set myModel.set(object attributes)

This will overwrite the attributes of the model with the ones passed in, if you would like to update only changed attributes you should first get the attributes and update them before calling the set method.


toggle myModel.toggle(bool state)

If no parameter is passed in then the models checked (selected) state is toggled, if one is passed in then that is set as the newe state.


undo

Anytime set is called on a model the previous state is tracked such that it can be undone by calling myModel.undo()


delete

A model can be deleted by calling myModel.delete() this will not trigger the delete callback, it will just remove it from the collection of models maintained in the berryTable instance.

© Adam Smallcomb 2017