Angular Data GridDemo
Play around with a demo of Handsontable, in your favorite framework.
/* file: app-demo.component.ts */
import { Component } from '@angular/core';
import Handsontable from 'handsontable';
// constants.ts
export const data = [
[
false,
'Tagcat',
'United Kingdom',
'Classic Vest',
'11/10/2025',
'01-2331942',
true,
'172',
2,
2,
],
[
true,
'Zoomzone',
'Indonesia',
'Cycling Cap',
'03/05/2025',
'88-2768633',
true,
'188',
6,
2,
],
[
true,
'Meeveo',
'United States',
'Full-Finger Gloves',
'27/03/2025',
'51-6775945',
true,
'162',
1,
3,
],
[
false,
'Buzzdog',
'Philippines',
'HL Mountain Frame',
'29/08/2025',
'44-4028109',
true,
'133',
7,
1,
],
[
true,
'Katz',
'India',
'Half-Finger Gloves',
'02/10/2025',
'08-2758492',
true,
'87',
1,
3,
],
[
false,
'Jaxbean',
'China',
'HL Road Frame',
'28/09/2025',
'84-3557705',
false,
'26',
8,
1,
],
[
false,
'Wikido',
'Brazil',
'HL Touring Frame',
'24/06/2025',
'20-9397637',
false,
'110',
4,
1,
],
[
false,
'Browsedrive',
'United States',
'LL Mountain Frame',
'13/03/2025',
'36-0079556',
true,
'50',
4,
4,
],
[
false,
'Twinder',
'United Kingdom',
'LL Road Frame',
'06/04/2025',
'41-1489542',
false,
'160',
6,
1,
],
[
false,
'Jetwire',
'China',
'LL Touring Frame',
'01/02/2025',
'37-1531629',
true,
'30',
8,
5,
],
[
false,
'Chatterpoint',
'China',
'Long-Sleeve Logo Jersey',
'14/07/2025',
'25-5083429',
true,
'39',
7,
2,
],
[
false,
'Twinder',
'Egypt',
"Men's Bib-Shorts",
'31/08/2025',
'04-4281278',
false,
'96',
6,
1,
],
[
false,
'Midel',
'United States',
"Men's Sports Shorts",
'27/06/2025',
'55-1711908',
true,
'108',
10,
3,
],
[
false,
'Yodo',
'India',
'ML Mountain Frame',
'16/03/2025',
'58-8360815',
false,
'46',
1,
1,
],
[
false,
'Camido',
'Russia',
'ML Mountain Frame-W',
'13/09/2025',
'10-3786104',
true,
'97',
8,
3,
],
[
false,
'Eire',
'Thailand',
'ML Road Frame',
'10/04/2025',
'45-1186054',
true,
'161',
1,
4,
],
[
false,
'Vinte',
'United Kingdom',
'ML Road Frame-W',
'22/01/2025',
'62-6202742',
true,
'58',
4,
3,
],
[
false,
'Twitterlist',
'China',
'Mountain Bike Socks',
'09/11/2025',
'88-9646223',
true,
'92',
8,
3,
],
[
false,
'Eidel',
'Bangladesh',
'Mountain-100',
'19/09/2025',
'45-5588112',
true,
'5',
6,
5,
],
[
false,
'Trunyx',
'Nigeria',
'Mountain-200',
'09/03/2025',
'66-6271819',
true,
'158',
4,
1,
],
[
false,
'Katz',
'Turkey',
'Mountain-300',
'05/03/2025',
'38-9245023',
false,
'121',
5,
4,
],
[
false,
'Kaymbo',
'United States',
'Mountain-400-W',
'24/12/2025',
'44-5916927',
false,
'61',
5,
4,
],
[
false,
'Ozu',
'Pakistan',
'Mountain-500',
'13/06/2025',
'31-5449914',
true,
'155',
2,
2,
],
[
false,
'Rhynyx',
'India',
'Racing Socks',
'05/12/2025',
'19-9413869',
true,
'162',
2,
4,
],
[
false,
'Flashset',
'Iran',
'Road-150',
'14/12/2025',
'25-9807605',
false,
'46',
7,
1,
],
[
false,
'Yata',
'Congo (Kinshasa)',
'Road-250',
'12/06/2025',
'74-4291983',
true,
'47',
4,
4,
],
[
false,
'Brainlounge',
'Vietnam',
'Road-350-W',
'10/03/2025',
'83-0980643',
true,
'104',
2,
3,
],
[
false,
'Babblestorm',
'United States',
'Road-450',
'10/10/2025',
'19-2878430',
true,
'101',
6,
4,
],
[
false,
'Youspan',
'Brazil',
'Road-550-W',
'16/12/2025',
'19-1838230',
true,
'150',
10,
3,
],
[
false,
'Nlounge',
'China',
'Road-650',
'31/10/2025',
'32-2267938',
true,
'42',
4,
2,
],
[
false,
'Twinte',
'India',
'Road-750',
'17/08/2025',
'79-2821972',
true,
'144',
9,
3,
],
[
false,
'Oyonder',
'United Kingdom',
'Short-Sleeve Classic Jersey',
'04/12/2025',
'46-6597557',
true,
'195',
4,
1,
],
[
false,
'Gigabox',
'Pakistan',
'Sport-100',
'03/02/2025',
'15-1793960',
true,
'199',
4,
4,
],
[
false,
'Livetube',
'France',
'Touring-1000',
'16/05/2025',
'86-0811003',
true,
'110',
4,
5,
],
[
false,
'Voomm',
'United Kingdom',
'Touring-2000',
'15/07/2025',
'95-3068680',
true,
'51',
4,
4,
],
[
false,
'Voonyx',
'China',
'Touring-3000',
'27/11/2025',
'35-3085360',
false,
'69',
2,
5,
],
[
false,
'Zoombeat',
'United States',
"Women's Mountain Shorts",
'03/11/2025',
'56-8673088',
false,
'53',
2,
3,
],
[
false,
'Roomm',
'China',
"Women's Tights",
'16/03/2025',
'76-0085918',
true,
'168',
1,
1,
],
[
false,
'Leenti',
'China',
'Mountain-400',
'16/05/2025',
'03-0893276',
false,
'58',
1,
4,
],
[
false,
'Jetpulse',
'United States',
'Road-550',
'08/02/2025',
'79-9013306',
true,
'152',
9,
3,
],
[
false,
'Katz',
'Peru',
'Road-350',
'15/02/2025',
'55-7799920',
true,
'66',
4,
2,
],
[
false,
'Cogidoo',
'India',
'LL Mountain Front Wheel',
'04/06/2025',
'07-0881122',
false,
'112',
9,
2,
],
[
false,
'Divavu',
'Colombia',
'Touring Rear Wheel',
'24/02/2025',
'58-6157387',
true,
'50',
10,
4,
],
[
false,
'Mydeo',
'China',
'Touring Front Wheel',
'07/12/2025',
'12-2810010',
false,
'31',
3,
5,
],
[
false,
'Browsebug',
'Japan',
'ML Mountain Front Wheel',
'14/01/2025',
'64-9249984',
true,
'132',
5,
5,
],
[
false,
'Layo',
'China',
'HL Mountain Front Wheel',
'24/04/2025',
'45-0739652',
true,
'45',
1,
5,
],
[
false,
'Snaptags',
'United Kingdom',
'LL Touring Handlebars',
'06/08/2025',
'09-5712761',
true,
'197',
4,
2,
],
[
false,
'Cogilith',
'China',
'HL Touring Handlebars',
'31/05/2025',
'01-7345008',
true,
'190',
4,
3,
],
[
false,
'Reallinks',
'United Kingdom',
'LL Road Front Wheel',
'14/05/2025',
'62-1065350',
true,
'184',
3,
4,
],
[
false,
'Quaxo',
'United States',
'ML Road Front Wheel',
'23/03/2025',
'44-7241323',
true,
'169',
3,
4,
],
[
false,
'Devify',
'China',
'HL Road Front Wheel',
'12/12/2025',
'52-0295699',
false,
'152',
4,
4,
],
[
false,
'Youopia',
'Angola',
'LL Mountain Handlebars',
'01/04/2025',
'52-2650922',
false,
'182',
6,
4,
],
[
false,
'Ainyx',
'China',
'Touring Pedal',
'27/02/2025',
'48-3618525',
true,
'141',
6,
1,
],
[
false,
'Browsetype',
'Malaysia',
'ML Mountain Handlebars',
'28/04/2025',
'51-8893923',
true,
'169',
7,
1,
],
[
false,
'Muxo',
'China',
'HL Mountain Handlebars',
'22/08/2025',
'68-5911361',
false,
'39',
7,
1,
],
[
false,
'Bubbletube',
'China',
'LL Road Handlebars',
'04/10/2025',
'41-5880042',
true,
'71',
8,
3,
],
[
false,
'Fadeo',
'Vietnam',
'ML Road Handlebars',
'23/04/2025',
'90-5913983',
true,
'148',
10,
3,
],
[
false,
'Yadel',
'United Kingdom',
'HL Road Handlebars',
'18/04/2025',
'92-0960699',
true,
'116',
8,
1,
],
[
false,
'Blognation',
'China',
'LL Headset',
'10/01/2025',
'06-9493898',
true,
'96',
10,
1,
],
[
false,
'Devpoint',
'China',
'ML Headset',
'25/12/2025',
'69-5878565',
true,
'35',
4,
2,
],
[
false,
'Aibox',
'United Kingdom',
'HL Headset',
'18/03/2025',
'13-1133017',
true,
'16',
8,
2,
],
[
false,
'Brightdog',
'China',
'LL Mountain Pedal',
'11/09/2025',
'39-6530433',
true,
'194',
2,
5,
],
[
false,
'Gabcube',
'Nigeria',
'ML Mountain Pedal',
'22/04/2025',
'96-6860388',
true,
'24',
1,
3,
],
[
false,
'Muxo',
'China',
'HL Mountain Pedal',
'05/06/2025',
'30-0356137',
true,
'170',
4,
4,
],
[
false,
'Tambee',
'China',
'ML Touring Seat/Saddle',
'22/02/2025',
'93-9058255',
true,
'184',
9,
5,
],
[
false,
'Cogilith',
'India',
'LL Touring Seat/Saddle',
'06/04/2025',
'82-9268909',
false,
'153',
10,
4,
],
[
false,
'Dynabox',
'Hong Kong',
'HL Touring Seat/Saddle',
'10/01/2025',
'20-6913815',
false,
'88',
10,
1,
],
[
false,
'Shuffledrive',
'Sudan',
'LL Road Pedal',
'16/09/2025',
'08-8238817',
true,
'57',
9,
2,
],
[
false,
'Fivechat',
'China',
'ML Road Pedal',
'26/08/2025',
'44-7370350',
false,
'62',
4,
1,
],
[
false,
'Meembee',
'United States',
'HL Road Pedal',
'27/12/2025',
'01-3525949',
true,
'123',
2,
4,
],
[
false,
'Dynazzy',
'United Kingdom',
'LL Mountain Seat/Saddle 1',
'15/12/2025',
'04-2414623',
true,
'77',
10,
5,
],
[
false,
'Eare',
'China',
'ML Mountain Seat/Saddle 1',
'04/04/2025',
'15-1917509',
false,
'199',
9,
4,
],
[
false,
'Yozio',
'China',
'HL Mountain Seat/Saddle 1',
'15/03/2025',
'06-2526845',
true,
'149',
8,
2,
],
[
false,
'Quinu',
"Xi'an",
'425-777-7829',
'22/02/2025',
'83-1713558',
false,
'191',
9,
5,
],
[
false,
'Jazzy',
'United Kingdom',
'ML Road Seat/Saddle 1',
'07/08/2025',
'00-8892524',
true,
'150',
10,
2,
],
[
false,
'Thoughtsphere',
'China',
'HL Road Seat/Saddle 1',
'28/11/2025',
'39-5538991',
true,
'130',
7,
3,
],
[
false,
'Leenti',
'China',
'ML Road Rear Wheel',
'29/12/2025',
'06-9002973',
true,
'179',
1,
2,
],
[
false,
'Quaxo',
'United Kingdom',
'HL Road Rear Wheel',
'06/09/2025',
'73-6104901',
true,
'98',
5,
3,
],
[
false,
'Tanoodle',
'Chile',
'LL Mountain Seat/Saddle 2',
'24/05/2025',
'68-7384479',
true,
'175',
2,
3,
],
[
false,
'Feednation',
'China',
'ML Mountain Seat/Saddle 2',
'21/11/2025',
'26-7757763',
true,
'11',
1,
3,
],
[
false,
'Kayveo',
'China',
'HL Mountain Seat/Saddle 2',
'21/06/2025',
'07-4873562',
false,
'184',
7,
4,
],
[
false,
'Meevee',
'Saudi Arabia',
'LL Road Seat/Saddle 1',
'16/11/2025',
'46-5819554',
false,
'27',
9,
3,
],
[
false,
'Twitterworks',
'China',
'ML Road Seat/Saddle 2',
'19/04/2025',
'01-2666826',
true,
'186',
3,
2,
],
[
false,
'Wikizz',
'Tanzania',
'HL Road Seat/Saddle 2',
'08/03/2025',
'54-7090503',
true,
'20',
3,
3,
],
[
false,
'Yoveo',
'United States',
'LL Mountain Tire',
'14/10/2025',
'78-7658520',
false,
'153',
2,
1,
],
[
false,
'Yakidoo',
'China',
'ML Mountain Tire',
'12/10/2025',
'23-9926318',
true,
'161',
8,
5,
],
[
false,
'Oyope',
'China',
'HL Mountain Tire',
'20/09/2025',
'20-0179517',
true,
'98',
10,
5,
],
[
false,
'Skipstorm',
'United States',
'LL Road Tire',
'01/10/2025',
'02-9543343',
true,
'30',
7,
3,
],
[
false,
'Minyx',
'United States',
'ML Road Tire',
'07/07/2025',
'98-3938169',
true,
'73',
10,
2,
],
[
false,
'Miboo',
'China',
'HL Road Tire',
'25/07/2025',
'68-5197934',
true,
'158',
9,
1,
],
[
false,
'Realfire',
'United States',
'Touring Tire',
'27/08/2025',
'39-8260460',
true,
'122',
5,
2,
],
[
false,
'Shufflester',
'China',
'Mountain Tire Tube',
'08/06/2025',
'45-9776170',
true,
'33',
2,
4,
],
[
false,
'Ntag',
'China',
'Road Tire Tube',
'06/12/2025',
'45-0858451',
true,
'107',
6,
2,
],
[
false,
'Jabberbean',
'United States',
'Touring Tire Tube',
'26/04/2025',
'15-4247305',
true,
'15',
1,
2,
],
[
false,
'Thoughtblab',
'China',
'LL Bottom Bracket',
'21/05/2025',
'15-8534931',
true,
'168',
5,
2,
],
[
false,
'Jabbertype',
'China',
'Classic Vest',
'25/07/2025',
'23-1251557',
true,
'135',
4,
2,
],
[
false,
'Buzzshare',
'United Kingdom',
'Cycling Cap',
'07/07/2025',
'86-5920601',
true,
'11',
1,
4,
],
[
false,
'Roodel',
'United States',
'Full-Finger Gloves',
'13/01/2025',
'48-1055459',
true,
'41',
6,
4,
],
[
false,
'Zoovu',
'China',
'Half-Finger Gloves',
'03/06/2025',
'12-7842022',
true,
'144',
6,
1,
],
[
false,
'Photofeed',
'China',
'HL Mountain Frame',
'14/07/2025',
'94-5088099',
true,
'106',
1,
4,
],
];
export const SELECTED_CLASS = 'selected';
export const ODD_ROW_CLASS = 'odd';
export function addClassesToRows(
TD: HTMLTableCellElement,
row: number,
column: number,
_prop: any,
_value: any,
cellProperties: any
) {
// Adding classes to `TR` just while rendering first visible `TD` element
if (column !== 0) {
return;
}
const parentElement = TD.parentElement;
if (parentElement === null) {
return;
}
// Add class to selected rows
if (cellProperties.instance.getDataAtRowProp(row, '0')) {
Handsontable.dom.addClass(parentElement, SELECTED_CLASS);
} else {
Handsontable.dom.removeClass(parentElement, SELECTED_CLASS);
}
// Add class to odd TRs
if (row % 2 === 0) {
Handsontable.dom.addClass(parentElement, ODD_ROW_CLASS);
} else {
Handsontable.dom.removeClass(parentElement, ODD_ROW_CLASS);
}
}
@Component({
selector: 'example1-demo',
standalone: false,
template: ` <div>
<hot-table [data]="initialData" [settings]="gridSettings"></hot-table>
</div>`,
})
export class Example1DemoComponent {
initialData = data;
gridSettings = {
height: 450,
colWidths: [180, 220, 140, 120, 120, 120, 140],
colHeaders: [
'Company Name',
'Name',
'Sell date',
'In stock',
'Quantity',
'Order ID',
'Country',
],
contextMenu: [
'cut',
'copy',
'---------',
'row_above',
'row_below',
'remove_row',
'---------',
'alignment',
'make_read_only',
'clear_column',
],
dropdownMenu: true,
hiddenColumns: {
indicators: true,
},
multiColumnSorting: true,
filters: true,
rowHeaders: true,
headerClassName: 'htLeft',
beforeRenderer: addClassesToRows,
manualRowMove: true,
autoWrapRow: true,
autoWrapCol: true,
autoRowSize: true,
manualRowResize: true,
manualColumnResize: true,
navigableHeaders: true,
imeFastEdit: true,
columns: [
{ data: 1 },
{ data: 3 },
{ data: 4, type: 'date', allowInvalid: false },
{ data: 6, type: 'checkbox', className: 'htCenter' },
{ data: 7, type: 'numeric' },
{ data: 5 },
{ data: 2 },
]
};
}
/* file: app.module.ts */
import { NgModule, ApplicationConfig } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { registerAllModules } from 'handsontable/registry';
import { HOT_GLOBAL_CONFIG, HotGlobalConfig, HotTableModule, NON_COMMERCIAL_LICENSE } from '@handsontable/angular-wrapper';
import { CommonModule } from '@angular/common';
import { Example1DemoComponent } from './app-demo.component';
// register Handsontable's modules
registerAllModules();
export const appConfig: ApplicationConfig = {
providers: [
{
provide: HOT_GLOBAL_CONFIG,
useValue: {
themeName: 'ht-theme-main',
license: NON_COMMERCIAL_LICENSE,
} as HotGlobalConfig
}
],
};
@NgModule({
imports: [ BrowserModule, HotTableModule, CommonModule ],
declarations: [ Example1DemoComponent ],
providers: [...appConfig.providers],
bootstrap: [ Example1DemoComponent ]
})
export class AppModule { }Find the code on GitHub
Try out the demo's features
Explore the demo and discover Handsontable's most popular features:
- Context menu
- Dropdown cell type
- Column groups
- Column menu
- Column filter
- Column hiding
- Rows sorting
- And more!
Edit the demo's source code
You can:
- View the complete source code behind your framework's demo
- Run your framework's demo on your local machine
- Fork the directory with your framework's demo, and add changes of your own
Just select your framework from the demo above.
There is a newer version of Handsontable available. Switch to the latest version ⟶