Home

ng-react-grid directive grid

E.g.,

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

 $scope.grid = {
    data: dataSet,
    columnDefs: [
        new ngReactGridCheckbox($scope.selections, 
            {batchToggle: true,
             disableCheckboxField: 'disableCheckbox'}),
        {
            field: "user.firstName",
            displayName: "First Name",
            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

Components

ngReactGridCheckbox

E.g.,

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

columnDefs: [
    data: dataSet,
    new ngReactGridCheckbox($scope.selections, {batchToggle: true, disabledCheckboxField: 'disableCheckbox'),
    ...
];

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