Configuration

KoGrid is very configurable. You can pass the following objects/values into KoGrid to toggle the behavior that you desire!

defaults = {
    //Default sizes:
    rowHeight: 30,
    columnWidth: 100,
    headerRowHeight: 32,
    footerRowHeight: 55,
    footerVisible: true, // showing the footer is enabled by default
    canSelectRows: true, // enable selections
    data: ko.observableArray([]), // the data you want to display
    watchDataItems = false, // DANGER: setting this to true will aloow the grid to update individual elements as they change. In large datasets this adversely affects performance. It is disabled by default.
    columnDefs: undefined, // defitions of columns as an array [], if not defines columns are auto-generated.
    selectedItems: ko.observableArray([]), // array, if multi turned off will have only one item in array
    displaySelectionCheckbox: true, //toggles whether row selection check boxes appear
    selectWithCheckboxOnly: false, // set to true if you only want to be able to select with the checkbox
    useExternalSorting: false,
    sortInfo: undefined, // similar to filterInfo
    multiSelect: ko.observable(true), // set this to false if you only want one item selected at a time
    tabIndex: -1, // set the tab index of the grid. 
    disableTextSelection: false, // disables text selection in the grid.
    enableColumnResize: true, // enable or disable resizing of columns
    maintainColumnRatios: undefined, // defaults to true when using *'s or undefined widths. can be ovverriden by setting to false.
    enableSorting: ko.observable(true),
    beforeSelectionChange: function (rowItem) { return true; }, // callback if you want to inspect something before selection, return false if you want to cancel the selection. return true otherwise.
    afterSelectionChange: function () {} // callback if you want to validate something after selection.
    rowTemplate: undefined, // Define a row Template to customize output
    headerRowTemplate: undefined // define a header row template for further customization.
    plugins: [] // array of plugin functions to register.ke
    keepLastSelected: true // prevent unselections when multi is disabled.
    jqueryUITheme: false, // enable the jqueryUIThemes
    jqueryUIDraggable: false, // Enables non-HTML5 compliant drag and drop using the jquery UI reaggable/droppable plugin. requires jqueryUI to work if enabled.
    groups: [], // initial fields to group data by. array of strings. field names, not displayName.
    showGroupPanel: false, // whether or not to display the dropzone for grouping columns on the fly
    enableRowReordering: false // enable row reordering.
    showColumnMenu: true, // enables display of the menu to choose which columns to display.
    showFilter: true, // enables display of the filterbox in the column menu.
    filterOptions: {
        filterText: ko.observable(""), // the actual filter text so you can use external filtering while using the builting search box.
        useExternalFilter: false, // bypass internal filtering for instance, server side-searching/paging
    },
    //Paging 
    enablePaging: false, // enables the paging feature
   pagingOptions: {
                pageSizes: ko.observableArray([250, 500, 1000]), //page Sizes
                pageSize: ko.observable(250), //Size of Paging data
                totalServerItems: ko.observable(0), //how many items are on the server (for paging)
                currentPage: ko.observable(1), //what page they are currently on
   },
}

Example data-bind with multiple configuration options

<div data-bind="koGrid: { data: myObsArray,
                           multiSelect: false,
                           selectedItem: mySelectedObj,
                           columnDefs: [ { field: 'firstName', displayName: 'First Name' }]"></div>