Array of column objects.
Array, default = []
This array should be defined during the object creation, but it can be changed anytime thereafter. If you change the columns array, you will need to call .refresh() method to refresh the grid.
During object creation: $('#grid').w2grid({ name : 'grid', columns: [ { field: 'recid', caption: 'ID', size: '50px' }, { field: 'lname', caption: 'Last Name', size: '30%' }, { field: 'fname', caption: 'First Name', size: '30%' }, { field: 'email', caption: 'Email', size: '40%' }, { field: 'sdate', caption: 'Start Date', size: '120px' }, { field: 'sdate', caption: 'End Date', size: '120px' } ] }); Each column is an object with properties listed below: column = { caption : '', // column caption field : '', // field name to map column to a record size : null, // size of column in px or % min : 20, // minimum width of column in px max : null, // maximum width of column in px gridMinWidth : null, // minimum width of the grid when column is visible sizeCorrected : null, // read only, corrected size (see explanation below) sizeCalculated : null, // read only, size in px (see explanation below) hidden : false, // indicates if column is hidden sortable : false, // indicates if column is sortable sortMode : null, // sort mode or custom compare function searchable : false, // indicates if column is searchable, bool/string: int,float,date,... resizable : true, // indicates if column is resizable autoResize : true, // indicates if column can be auto-resized by double clicking on the resizer hideable : true, // indicates if column can be hidden attr : '', // string that will be inside the <td ... attr> tag style : '', // additional style for the td tag render : null, // string or render function title : null, // string or function for the title property for the column cells editable : {}, // editable object if column fields are editable frozen : false, // indicates if the column is fixed to the left info : null // info bubble, can be bool/object }

#### Size

The size of the column (width) can be in px or %. The size of 10 or the size of '10px' will define the same column width of 10px. The size of '10%' will define 10 percent width. You may define some columns in px and some in % for the same grid at the same time. When .refresh() method is called it will calculate size of all columns in px and store it in .sizeCalculated property. First it assigns size to the columns that defined in px, then it will distribute the remaining width between the columns defined in %. If total sum of columns defined in percentage will be more then 100, it will correct its values and record new size in .sizeCorrected.

#### sortMode

If set to "natural", a compare function is used that will result in an order that feels more natural to humans. This can be useful for IP addresses, or when numbers are used in strings, so that "48" (as a string) comes after "9" (as a string) - whereas the default sorting would put it the other way round. You can also pass a compare function in the same way you would use it as argument for Array.prototype.sort().

#### Render

The render function(record, [index], [column_index]) can be used to format the column data. If the function is defined then it will be executed for each cell in the column and anything this function returns will be used instead of the original column data. Using this function you can create columns that output results from multiple fields. $('#grid').w2grid({ name : 'grid', columns: [ { field: 'recid', caption: 'ID', size: '50px' }, { field: 'full-name', caption: 'Full Name', size: '60%', render: function (record) { return '<div>' + record.fname + ' ' + record.lname + '</div>'; } }, { field: 'email', caption: 'Email', size: '40%' }, { field: 'sdate', caption: 'Start Date', size: '120px' }, { field: 'sdate', caption: 'End Date', size: '120px' } ] }); There are several predefined formatters. They are (for number and float, XX - defines number of digits after dot):

- int
- float:XX, where XX is number digits after comma
- number:XX, where XX is number digits after comma
- money
- currency
- percent
- age
- date:date_format, where date_format is the date format, or empty for default format
- time:time_format, where time_format is the time format, or empty for default format
- datetime:date_format|time_format
- toggle
- password

You can use them int he following way: $('#grid').w2grid({ name : 'grid', columns: [ { field: 'recid', caption: 'ID', size: '50px', render: 'float:2' }, { field: 'full-name', caption: 'Last Name', size: '60%' }, { field: 'email', caption: 'Email', size: '40%' }, { field: 'sdate', caption: 'Start Date', size: '120px', render: 'date:dd.mm.yyyy' }, { field: 'sdate', caption: 'End Date', size: '120px', render: 'age' } ] });

#### Editable

The editable object indicates if column fields are editable. If this field is an object, then the record can be edited inline by the user. This object is of the following structure: editable = { type : 'text', // type of the field (see below) inTag : '', // text that will be inside >input ...< tag style : '', ... // you can pass additional properties to w2field object (for date, enum, etc.) } With this object you can supply other properties that will be passed to $('input').w2field(column.editable) so you can use any field type supported by w2field object. The type of the field can be one of the following:

- text
- int
- float
- hex
- money
- currency
- percent
- alphanumeric
- date
- time
- datetime
- color
- list
- combo
- check
- checkbox
- select

Use .getChanged() method to find what records have been changed. Then, you can call .save() method to submit all changed records to the .url. You can optionally add a save button to the grid's toolbar setting show.toolbarSave to true during grid's creation.