Home

ng-react-grid directive grid

Example:

 <ng-react-grid grid="grid"></ng-react-grid>

 var dataSet = [{
   user: {
     firstName: 'Joe',
     lastName: 'Smith'
   },
   disableCheckbox: true
 }, {
   user: {
     firstName: 'Jane',
     lastName: 'Smith'
   },
   disableCheckbox: false
 }];

 $scope.grid = {
    data: dataSet,
    columnDefs: [
        new ngReactGridCheckbox($scope.selections, 
            {batchToggle: true,
             disableCheckboxField: 'disableCheckbox'}),
        {
            field: "user.firstName",
            displayName: "First Name",
            columnFilter: true,
            edit: function (row) {
                return new ngReactGridTextField(row, 'user.firstName');
            }
        },
        {
            field: "user.lastName",
            displayName: "Last Name"
        }
    ]
};

               

Option	Type	Default Value	Description
data	array	[]	Data set
columnDefs	array	[]	Ordered column properties
showGridShowPerPage	boolean	true	Displays dropdown for number of entries shown per page
showGridSearch	boolean	true	Displays global table search input
pageSize	integer	25	Initial number of entries shown per page
pageSizes	array	[25, 50, 100, 500]	Set of selectable number of entries shown per page (if showGridShowPerpage is enabled)
localMode	boolean	true	Disable to use server-side processing
height	integer	500	Height of table

ColumnDefs

Option	Type	Default Value	Description
field	string	''	Data object key or path to column data
displayName	string	''	Column header name
columnFilter	boolean	false	Enables filtering for column data

ColumnDefs Components

ngReactGridCheckbox

Option	Type	Default Value	Description
batchToggle	boolean	false	Enables batch toggle checkbox in header that checks/unchecks all row checkboxes
disableCheckboxField	string	''	Disable checkboxes in rows with falsy value in referenced field
hideDisabledCheckboxField	boolean	false	Prevent disabled checkboxes from being rendered