@ui-grid/core

UI-Grid Core

UI-Grid (formerly ng-grid), is a 100% angularJS grid written with no dependencies other than AngularJS. It is designed around a core grid module and plugins are layered on as angular modules and directives. This keeps the core small and focused while executing very complex features only when you need them.

In the core module, you get:

• Virtualized rows and columns - only the rows and columns visible in the viewport (+ some extra margin) are actually rendered
• Bind cells to complex properties and functions
• Column sorting with three states: Asc, Desc, None
• Column filtering
• Ability to change header and cell contents with custom templates
• i18nService that allows label translations, with the english translations already loaded.

Getting Started

You can install @ui-grid/core via:

npm i --save @ui-grid/core

Once you install you need to load the respective JS and CSS files as seen bellow:

<link rel="stylesheet" href="/node_modules/@ui-grid/core/css/ui-grid.min.css" type="text/css">
<script src="/node_modules/@ui-grid/core/js/ui-grid.core.min.js">

Alternatively, if you are using Webpack or RequireJS to load your dependencies, you can do the following at the top of the file that needs it:

require('@ui-grid/core');

Once you load the file, you need to include 'ui.grid' module in your angularJS app's dependencies, and add the ui-grid directive to your page.

angular.module('myApp', [
    'ui.grid'
]);

<div ui-grid="$ctrl.gridOptions">

And don't forget to load your data:

this.gridOptions = {
    data: [
        {name: 'Hobie Brown', company: 'Parker Industries', position: 'Head of Security'},
        {name: 'Jacob Fury', company: 'Stark Industries', position: 'Research Scientist'},
        {name: 'Max Dillon', company: 'Oscorp', position: 'Elitrical Engineer'}
    ]
};

Example

You can find an example of this component in action on our website

API Documentation

Documentation for the grid is provided in the api documentation, but we recommend that you pay special attention to the following:

• columnDef
• gridOptions
• publicApi

Issues

You can find issues that are specific to the core UI-Grid by looking for the label grid-core in the ui-grid github issues page.

License

MIT

Changelog

4.7.0 (2019-02-01)

Bug Fixes

• exporter: add missing dependencies (a86eb0e)
• grouping.js: fix typo in description (4597c69)
• less: update less file references (47c1239)
• selection: prevent cell to be selected when user scroll (a537f0c)
• selection: take in care about time touched properly (0dbdafe)
• uiGridColumMenu: Add missing promise catch handlers for focus.bySelector calls (de57fdc)
• uiGridColumMenu: Check column visibility before trying to focus it in the menu-hidden callback (3a8e87b)
• uiGridColumMenu: Check for menu item visibility before trying to focus the first visible menu item (3085417)

Features

• css: add feature based CSS files (9e1c042)
• filter: add filterContainer option to allow a column filter to be placed in column menu (bdb832a), closes #3989

BREAKING CHANGES

• less: feature less files have been moved to the root of the less folder.

<a name="4.6.5"></a>