Web Components Data Grid Overview[!Note] Please note that this control has been deprecated and replaced with the Grid, and as such, we recommend migrating to that control. This will not be receiving any new features, bug fixes will be deprioritized. For help or questions on migrating your codebase to the Data Grid, please contact support.
The Ignite UI for Web Components Data Table / Data Grid is a tabular Web Components grid component that allows you to quickly bind and display your data with little coding or configuration. Features of the Web Components data grid include filtering, sorting, templates, row selection, row grouping, row pinning and movable columns. The Web Components tables are optimized for live, streaming data, with the ability to handle unlimited data set size in number of rows or columns.
Web Components Data Grid ExampleThis demo implements some of the features that are available in the Grid: Filtering, Grouping, Pin/Unpin columns, Reposition columns, Sorting, and Summaries
Getting Started DependenciesWhen installing the Web Components grid package, the core package must also be installed.
npm install --save igniteui-webcomponents-core
npm install --save igniteui-webcomponents-grids
npm install --save igniteui-webcomponents-inputs
The IgcDataGridComponent requires the following modules:
import { ModuleManager } from 'igniteui-webcomponents-core';
import { IgcDataGridModule } from 'igniteui-webcomponents-data-grids';
import { IgcDataGridComponent } from 'igniteui-webcomponents-data-grids';
ModuleManager.register(
IgcDataGridModule
);
The optional IgcDataGridComponent features, seen above, requires the following modules:
import { IgcGridColumnOptionsModule } from 'igniteui-webcomponents-data-grids';
import { IgcGridColumnOptionsComponent } from 'igniteui-webcomponents-data-grids';
import { IgcDataGridToolbarModule } from 'igniteui-webcomponents-data-grids';
import { IgcDataGridToolbarComponent } from 'igniteui-webcomponents-data-grids';
import { IgcSparklineModule } from 'igniteui-webcomponents-charts';
import { IgcSparklineComponent } from 'igniteui-webcomponents-charts';
ModuleManager.register(
IgcGridColumnOptionsModule,
IgcDataGridToolbarModule,
IgcSparklineModule
);
Now that the Web Components data grid module is imported, next is the basic configuration of the Web Components grid that binds to local data.
this.data = [{
Discontinued: false,
OrderDate: new Date("2012-02-12"),
ProductID: 1,
ProductName: "Chai",
QuantityPerUnit: "10 boxes x 20 bags",
ReorderLevel: 10,
UnitPrice: 18.0000,
UnitsInStock: 39
}, {
Discontinued: false,
OrderDate: new Date("2003-03-17"),
ProductID: 2,
ProductName: "Chang",
QuantityPerUnit: "24 - 12 oz bottles",
ReorderLevel: 25,
UnitPrice: 19.0000,
UnitsInStock: 17
}, {
Discontinued: false,
OrderDate: new Date("2006-03-17"),
ProductID: 3,
ProductName: "Aniseed Syrup",
QuantityPerUnit: "12 - 550 ml bottles",
ReorderLevel: 25,
UnitPrice: 10.0000,
UnitsInStock: 13
}, {
Discontinued: false,
OrderDate: new Date("2016-03-17"),
ProductID: 4,
ProductName: "Chef Antony Cajun Seasoning",
QuantityPerUnit: "48 - 6 oz jars",
ReorderLevel: 0,
UnitPrice: 22.0000,
UnitsInStock: 53
}, {
Discontinued: true,
OrderDate: new Date("2011-11-11"),
ProductID: 5,
ProductName: "Chef Antony Gumbo Mix",
QuantityPerUnit: "36 boxes",
ReorderLevel: 0,
UnitPrice: 21.3500,
UnitsInStock: 0
}];
The following code demonstrates how to bind the Web Components data grid to the above local data.
<igc-data-grid id="grid"
height="100%"
width="100%"
auto-generate-columns="true"
default-column-min-width="100"
summary-scope="Root"
is-column-options-enabled="true"
is-group-collapsable="true"
group-summary-display-mode="RowBottom"
column-moving-mode="Deferred"
column-moving-animation-mode="SlideOver"
column-moving-separator-width="2"
column-showing-animation-mode="slideFromRightAndFadeIn"
column-hiding-animation-mode="slideToRightAndFadeOut"
selection-mode="SingleRow"
corner-radius-top-left="0"
corner-radius-top-right="0">
</igc-data-grid>
let grid1 = (document.getElementById("grid") as IgcDataGridComponent);
grid1.dataSource = data;
<igc-data-grid id="grid"
width="100%"
height="500px"
auto-generate-columns="false">
<igc-numeric-column field="ProductID" header-text="Product ID"></igc-numeric-column>
<igc-text-column field="ProductName" header-text="Product Name"></igc-text-column>
<igc-text-column field="QuantityPerUnit" header-text="Quantity Per Unit"></igc-text-column>
<igc-numeric-column field="UnitsInStock" header-text="Units In Stock"></igc-numeric-column>
<igc-date-time-column field="OrderDate" header-text="Order Date"></igc-date-time-column>
</igc-data-grid>
let grid1 = (document.getElementById("grid") as IgcDataGridComponent);
grid1.dataSource = data;
The following code demonstrates how to style specific columns using the provided column's properties.
<igc-text-column
background="SkyBlue"
text-style="Italic Bold 16pt Times New Roman"
></igc-text-column>
RetroSearch is an open source project built by @garambo | Open a GitHub Issue
Search and Browse the WWW like it's 1997 | Search results from DuckDuckGo
HTML:
3.2
| Encoding:
UTF-8
| Version:
0.7.4