Available in the Full Version
Data Grid - Overview
The igGrid is the fastest jQuery grid on the market and provides line of business features, touch support, and responsive web design features.
This sample uses CTP (Community Technical Preview) features. The API and behavior may change when these features are released with full support.
Show records
Drag a column here or select columns to Group By
- Category
| Image | Product Name | Category | Units In Stock | |
|---|---|---|---|---|
| Category: Beverages (3) | ||||
 | Chai | Beverages | 39 | |
 | Chang | Beverages | 17 | |
 | Guaraná Fantástica | Beverages | 20 | |
| Category: Condiments (6) | ||||
 | Aniseed Syrup | Condiments | 13 | |
| Chef Anton's Cajun Seasoning | Condiments | 53 | |
 | Chef Anton's Gumbo Mix | Condiments | 0 | |
 | Grandma's Boysenberry Spread | Condiments | 120 | |
 | Northwoods Cranberry Sauce | Condiments | 6 | |
Add to Group By
This sample is designed for a larger screen size.
On mobile, try rotating your screen, view full size, or email to another device.
You can bind the igGrid to a variety of data sources including JSON, XML, HTML tables,
.NET collections, and even .NET DataTables. The igGrid works with popular open source libraries
including KnockoutJS, History.js, JsRender, and Bootstrap. It includes powerful line of business features such as:
- Editing
- Filtering
- Column Resizing
- Summaries
- And more!
Code View
Copy to Clipboard
<table id="grid"></table>
<!DOCTYPE html> <html> <head> <title></title> <!-- Ignite UI for jQuery Required Combined CSS Files --> <link href="http://cdn-na.infragistics.com/igniteui/2024.2/latest/css/themes/infragistics/infragistics.theme.css" rel="stylesheet" /> <link href="http://cdn-na.infragistics.com/igniteui/2024.2/latest/css/structure/infragistics.css" rel="stylesheet" /> <script src="http://ajax.aspnetcdn.com/ajax/modernizr/modernizr-2.8.3.js"></script> <script src="http://code.jquery.com/jquery-1.11.3.min.js"></script> <script src="http://code.jquery.com/ui/1.11.1/jquery-ui.min.js"></script> <!-- Ignite UI for jQuery Required Combined JavaScript Files --> <script src="http://cdn-na.infragistics.com/igniteui/2024.2/latest/js/infragistics.core.js"></script> <script src="http://cdn-na.infragistics.com/igniteui/2024.2/latest/js/infragistics.lob.js"></script> </head> <body> <table id="grid"></table> <script src="/data-files/nw-products.js"></script> <script> $(function () { for (var i = 0; i < northwindProducts.length; i++) { northwindProducts[i].ImageUrl = "../images/samples/grid/" + (i % 10) + ".jpg"; } $("#grid").igGrid({ primaryKey: "ProductID", caption : "<span> <img src=\"//www.infragistics.com/media/441501/horz_logo.png\" alt=\"Infragistics\"></span>", width: '100%', columns: [ { headerText: "Product ID", key: "ProductID", dataType: "number", width: "15%", hidden: true }, { headerText: "Image", key: "ImageUrl", dataType: "string", width: "15%", template: "<img style=\"height:50px;\" src=\"${ImageUrl}\"/>" }, { headerText: "Product Name", key: "ProductName", dataType: "string", width: "25%" }, { headerText: "Category", key: "CategoryName", dataType: "string", width: "25%" }, { headerText: "Units In Stock", key: "InStock", dataType: "number", width: "35%" } ], autofitLastColumn: false, autoGenerateColumns: false, dataSource: northwindProducts, responseDataKey: "results", autoCommit: true, features: [ { name: "Sorting", sortingDialogContainment: "window" }, { name: "Filtering", type: "local", columnSettings: [ { columnKey: "ImageUrl", allowFiltering: false }, { columnKey: "InStock", condition: "greaterThan" } ] }, { name: "GroupBy", columnSettings: [ { columnKey: "CategoryName", isGroupBy: true } ] }, { name: "Selection" }, { name: "Paging", pageSize: 10 }, { name: "Resizing" }, { name: "Updating", editMode: "dialog", enableAddRow: false, columnSettings: [ { columnKey: "ImageUrl", readOnly: false } ] } ] }); }); </script> </body> </html>
var northwindProducts = [
{ "ProductID": 1, "ProductName": "Chai", "CategoryName": "Beverages", "ImageUrl": "../../images/samples/nw/categories/1.png", "InStock": 39 },
{ "ProductID": 2, "ProductName": "Chang", "CategoryName": "Beverages", "ImageUrl": "../../images/samples/nw/categories/1.png", "InStock": 17 },
{ "ProductID": 3, "ProductName": "Aniseed Syrup", "CategoryName": "Condiments", "ImageUrl": "../../images/samples/nw/categories/2.png", "InStock": 13 },
{ "ProductID": 4, "ProductName": "Chef Anton\u0027s Cajun Seasoning", "CategoryName": "Condiments", "ImageUrl": "../../images/samples/nw/categories/2.png", "InStock": 53 },
{ "ProductID": 5, "ProductName": "Chef Anton\u0027s Gumbo Mix", "CategoryName": "Condiments", "ImageUrl": "../../images/samples/nw/categories/2.png", "InStock": 0 },
{ "ProductID": 6, "ProductName": "Grandma\u0027s Boysenberry Spread", "CategoryName": "Condiments", "ImageUrl": "../../images/samples/nw/categories/2.png", "InStock": 120 },
{ "ProductID": 7, "ProductName": "Uncle Bob\u0027s Organic Dried Pears", "CategoryName": "Produce", "ImageUrl": "../../images/samples/nw/categories/7.png", "InStock": 15 },
{ "ProductID": 8, "ProductName": "Northwoods Cranberry Sauce", "CategoryName": "Condiments", "ImageUrl": "../../images/samples/nw/categories/2.png", "InStock": 6 },
{ "ProductID": 9, "ProductName": "Mishi Kobe Niku", "CategoryName": "Meat/Poultry", "ImageUrl": "../../images/samples/nw/categories/6.png", "InStock": 29 },
{ "ProductID": 10, "ProductName": "Ikura", "CategoryName": "Seafood", "ImageUrl": "../../images/samples/nw/categories/8.png", "InStock": 31 },
{ "ProductID": 11, "ProductName": "Queso Cabrales", "CategoryName": "Dairy Products", "ImageUrl": "../../images/samples/nw/categories/4.png", "InStock": 22 },
{ "ProductID": 12, "ProductName": "Queso Manchego La Pastora", "CategoryName": "Dairy Products", "ImageUrl": "../../images/samples/nw/categories/4.png", "InStock": 86 },
{ "ProductID": 13, "ProductName": "Konbu", "CategoryName": "Seafood", "ImageUrl": "../../images/samples/nw/categories/8.png", "InStock": 24 },
{ "ProductID": 14, "ProductName": "Tofu", "CategoryName": "Produce", "ImageUrl": "../../images/samples/nw/categories/7.png", "InStock": 35 },
{ "ProductID": 15, "ProductName": "Genen Shouyu", "CategoryName": "Condiments", "ImageUrl": "../../images/samples/nw/categories/2.png", "InStock": 39 },
{ "ProductID": 16, "ProductName": "Pavlova", "CategoryName": "Confections", "ImageUrl": "../../images/samples/nw/categories/3.png", "InStock": 29 },
{ "ProductID": 17, "ProductName": "Alice Mutton", "CategoryName": "Meat/Poultry", "ImageUrl": "../../images/samples/nw/categories/6.png", "InStock": 0 },
{ "ProductID": 18, "ProductName": "Carnarvon Tigers", "CategoryName": "Seafood", "ImageUrl": "../../images/samples/nw/categories/8.png", "InStock": 42 },
{ "ProductID": 19, "ProductName": "Teatime Chocolate Biscuits", "CategoryName": "Confections", "ImageUrl": "../../images/samples/nw/categories/3.png", "InStock": 25 },
{ "ProductID": 20, "ProductName": "Sir Rodney\u0027s Marmalade", "CategoryName": "Confections", "ImageUrl": "../../images/samples/nw/categories/3.png", "InStock": 40 },
{ "ProductID": 21, "ProductName": "Sir Rodney\u0027s Scones", "CategoryName": "Confections", "ImageUrl": "../../images/samples/nw/categories/3.png", "InStock": 3 },
{ "ProductID": 22, "ProductName": "Gustaf\u0027s Knäckebröd", "CategoryName": "Grains/Cereals", "ImageUrl": "../../images/samples/nw/categories/5.png", "InStock": 104 },
{ "ProductID": 23, "ProductName": "Tunnbröd", "CategoryName": "Grains/Cereals", "ImageUrl": "../../images/samples/nw/categories/5.png", "InStock": 61 },
{ "ProductID": 24, "ProductName": "Guaraná Fantástica", "CategoryName": "Beverages", "ImageUrl": "../../images/samples/nw/categories/1.png", "InStock": 20 },
{ "ProductID": 25, "ProductName": "NuNuCa Nuß-Nougat-Creme", "CategoryName": "Confections", "ImageUrl": "../../images/samples/nw/categories/3.png", "InStock": 76 },
{ "ProductID": 26, "ProductName": "Gumbär Gummibärchen", "CategoryName": "Confections", "ImageUrl": "../../images/samples/nw/categories/3.png", "InStock": 15 },
{ "ProductID": 27, "ProductName": "Schoggi Schokolade", "CategoryName": "Confections", "ImageUrl": "../../images/samples/nw/categories/3.png", "InStock": 49 },
{ "ProductID": 28, "ProductName": "Rössle Sauerkraut", "CategoryName": "Produce", "ImageUrl": "../../images/samples/nw/categories/7.png", "InStock": 26 },
{ "ProductID": 29, "ProductName": "Thüringer Rostbratwurst", "CategoryName": "Meat/Poultry", "ImageUrl": "../../images/samples/nw/categories/6.png", "InStock": 0 },
{ "ProductID": 30, "ProductName": "Nord-Ost Matjeshering", "CategoryName": "Seafood", "ImageUrl": "../../images/samples/nw/categories/8.png", "InStock": 10 }
]
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <!-- Ignite UI for jQuery Required Combined CSS Files --> <link href="/igniteui/css/themes/infragistics/infragistics.theme.css" rel="stylesheet" /> <link href="/igniteui/css/structure/infragistics.css" rel="stylesheet" /> </head> <body> <my-app>Loading...</my-app> <!-- 1. Load libraries --> <script src="/js/modernizr.min.js"></script> <script src="/js/jquery.min.js"></script> <script src="/js/jquery-ui.min.js"></script> <!-- IE required polyfills, in this exact order --> <script src="https://cdnjs.cloudflare.com/ajax/libs/es6-shim/0.35.0/es6-shim.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.20/system-polyfills.js"></script> <script src="https://unpkg.com/angular2/es6/dev/src/testing/shims_for_IE.js"></script> <script src="https://unpkg.com/zone.js@0.6.23?main=browser"></script> <script src="https://unpkg.com/typescript@2.0.2/lib/typescript.js"></script> <script src="https://unpkg.com/reflect-metadata@0.1.3"></script> <script src="https://unpkg.com/systemjs@0.19.27/dist/system.src.js"></script> <!-- Ignite UI for jQuery Required Combined JavaScript Files --> <!-- Ignite UI for jQuery Required Combined JavaScript Files --> <script src="/igniteui/js/infragistics.core.js"></script> <script src="/igniteui/js/infragistics.lob.js"></script> <script src="/js-data/nw-products"></script> <script> System.config( { paths: { 'npm:': 'https://unpkg.com/' }, map: { '@angular/core': 'npm:@angular/core/bundles/core.umd.js', '@angular/common': 'npm:@angular/common/bundles/common.umd.js', '@angular/compiler': 'npm:@angular/compiler/bundles/compiler.umd.js', '@angular/platform-browser': 'npm:@angular/platform-browser/bundles/platform-browser.umd.js', '@angular/platform-browser-dynamic': 'npm:@angular/platform-browser-dynamic/bundles/platform-browser-dynamic.umd.js', '@angular/http': 'npm:@angular/http/bundles/http.umd.js', '@angular/router': 'npm:@angular/router/bundles/router.umd.js', '@angular/forms': 'npm:@angular/forms/bundles/forms.umd.js', 'igniteui-angular-wrappers': 'npm:igniteui-angular-wrappers', 'rxjs': 'npm:rxjs' }, // packages tells the System loader how to load when no filename and/or no extension packages: { rxjs: { defaultExtension: 'js' }, 'igniteui-angular-wrappers': { main: './index.js', defaultExtension: 'js' } }, transpiler: 'typescript', typescriptOptions: { emitDecoratorMetadata: true } } ); System.import( 'overview-sample.ts' ).then( null, console.error.bind( console ) ); </script> </body> </html>
import { Component, NgModule } from '@angular/core'; import { IgGridComponent } from 'igniteui-angular-wrappers'; import { BrowserModule } from '@angular/platform-browser'; import { platformBrowserDynamic } from '@angular/platform-browser-dynamic'; declare var jQuery: any; declare var northwindProducts: Array<any>; @Component({ selector: 'my-app', template: "<ig-grid [(options)]='gridOptions' [(widgetId)]='id'></ig-grid>" }) export class AppComponent { private gridOptions: IgGrid; private id: string; constructor() { this.id = 'grid1'; this.gridOptions = { primaryKey: "ProductID", width: '100%', columns: [ { headerText: "Product ID", key: "ProductID", dataType: "number", width: "15%", hidden: true }, { headerText: "Image", key: "ImageUrl", dataType: "string", width: "15%", template: "<img style=\"height:50px;\" src=\"${ImageUrl}\"/>" }, { headerText: "Product Name", key: "ProductName", dataType: "string", width: "25%" }, { headerText: "Category", key: "CategoryName", dataType: "string", width: "25%" }, { headerText: "Units In Stock", key: "InStock", dataType: "number", width: "35%" } ], autofitLastColumn: false, autoGenerateColumns: false, dataSource: northwindProducts, responseDataKey: "results", autoCommit: true, features: [ { name: "Sorting", sortingDialogContainment: "window" }, { name: "Filtering", type: "local", columnSettings: [ { columnKey: "ImageUrl", allowFiltering: false }, { columnKey: "InStock", condition: "greaterThan" } ] }, { name: "GroupBy", columnSettings: [ { columnKey: "CategoryName", isGroupBy: true } ] }, { name: "Selection" }, { name: "Paging", pageSize: 10 }, { name: "Resizing" }, { name: "Updating", editMode: "dialog", enableAddRow: false, columnSettings: [ { columnKey: "ImageUrl", readOnly: false } ] } ] }; } } @NgModule({ imports: [BrowserModule], declarations: [AppComponent, IgGridComponent], bootstrap: [AppComponent] }) export class AppModule { } platformBrowserDynamic().bootstrapModule(AppModule);
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <!-- Ignite UI for jQuery Required Combined CSS Files --> <link href="/igniteui/css/themes/infragistics/infragistics.theme.css" rel="stylesheet" /> <link href="/igniteui/css/structure/infragistics.css" rel="stylesheet" /> <!-- 1. Load libraries --> <script src="/js/modernizr.min.js"></script> <script src="/js/jquery.min.js"></script> <script src="/js/jquery-ui.min.js"></script> <!-- ReactJS library --> <script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.3.2/react.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.3.2/react-dom.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.6.16/browser.js"></script> <!-- Ignite UI for jQuery Required Combined JavaScript Files --> <script src="/igniteui/js/infragistics.core.js"></script> <script src="/igniteui/js/infragistics.lob.js"></script> <script src="/js-data/nw-products"></script> <!-- Ignite UI for jQuery ReactJS Files --> <script src="https://unpkg.com/igniteui-react@1.0.1/igniteui-react.js"></script> </head> <body> <div id="app"> <script type="text/babel"> var App = React.createClass({ render: function () { for (var i = 0; i < northwindProducts.length; i++) { northwindProducts[i].ImageUrl = "https://lorempixel.com/50/50/food/" + (i % 10) + "/"; } return <IgGrid id="grid" primaryKey="ProductID" width="100%" columns={[ { headerText: "Product ID", key: "ProductID", dataType: "number", width: "15%", hidden: true }, { headerText: "Image", key: "ImageUrl", dataType: "string", width: "15%", template: "<img style=\"height:50px;\" src=\"${ImageUrl}\"/>" }, { headerText: "Product Name", key: "ProductName", dataType: "string", width: "25%" }, { headerText: "Category", key: "CategoryName", dataType: "string", width: "25%" }, { headerText: "Units In Stock", key: "InStock", dataType: "number", width: "35%" } ]} autofitLastColumn={false} autoGenerateColumns={false} dataSource={northwindProducts} responseDataKey="results" autoCommi={true} features={[ {name: "Sorting", sortingDialogContainment: "window"}, {name: "Filtering", type: "local", columnSettings: [ { columnKey: "ImageUrl", allowFiltering: false }, { columnKey: "InStock", condition: "greaterThan" } ] }, { name: "GroupBy", columnSettings: [ {columnKey: "CategoryName", isGroupBy: true }] }, { name: "Selection" }, { name: "Paging", pageSize: 10 }, { name: "Resizing" }, { name: "Updating", editMode: "dialog", enableAddRow: false, columnSettings: [ { columnKey: "ImageUrl", readOnly: false } ] } ]} /> } }); ReactDOM.render( <App />, document.getElementById("app") ); </script> </div> </body> </html>