jQuery datagridview column options - maikelbos0/VDT GitHub Wiki

In a data grid view, there is only one required option: the columns to the grid. This option has to be an array of column definitions, with each column definition having at least the data property. Columns will be rendered in order of the array; to initially use a different column order the array provided must be reordered before creating the grid view.

<div id="example-table"></div>

<script type="text/javascript">
    $('#example-table').datagridview({
        columns: [
            { data: 'invoiceNumber' },
            {
                data: 'amountString',
                header: 'Invoice amount',
                sortable: true,
                sortData: 'amount',
                class: 'text-right',
                width: 25,
                visible: true,
                renderer: function (cell, value, dataRow) {
                    cell.text(dataRow[column.data] || "").attr('title', dataRow[column.data] || "");
                }
            }
        ]
    });
</script>

The entire list of options available per column is:

• data is the name of the property of the data object that will be used to populate the cell
• header is the header text of the column; defaults to the value of data
• sortable is a boolean to indicate whether or not the user can click the column header to initiate a sorting event; defaults to true
• sortData is the name of the property of the data object that will be used in the DataGridViewMetaData property sortColumn to indicate the column that your data source should sort on; if omitted will default to the value of data
• class is an optional css class that will be set on the header and all other cells; this allows you to align or decorate text
• width is the width out of 100% to set the width of the column to; defaults to 10%
  • If the total width of all columns exceeds 100% a horizontal scrollbar will appear;
  • If the total width of all columns is less than 100% it will appear adjusted to 100%
• visible is a boolean to indicate whether or not the column is currently visible; defaults to true
• renderer is an optional function that can be used to render the cells;
  • It takes the following parameters:
    • cell is the cell we're rendering; it references a jQuery object representing a div
    • value is the value of the javascript object we're supposed to be rendering
    • dataRow is the javascript data object in case you need access to other values on the same row
  • In the above example, the default renderer is shown