Demo

Play around with a demo of Handsontable, in your favorite framework.

Source code

TypeScript

/* file: app-demo.component.ts */
import { Component } from '@angular/core';
import Handsontable from 'handsontable/base';

// constants.ts
export const data = [
  [
    false,
    'Tagcat',
    'United Kingdom',
    'Classic Vest',
    '2025-10-11',
    '01-2331942',
    true,
    '172',
    2,
    2,
  ],
  [
    true,
    'Zoomzone',
    'Indonesia',
    'Cycling Cap',
    '2025-05-03',
    '88-2768633',
    true,
    '188',
    6,
    2,
  ],
  [
    true,
    'Meeveo',
    'United States',
    'Full-Finger Gloves',
    '2025-03-27',
    '51-6775945',
    true,
    '162',
    1,
    3,
  ],
  [
    false,
    'Buzzdog',
    'Philippines',
    'HL Mountain Frame',
    '2025-08-29',
    '44-4028109',
    true,
    '133',
    7,
    1,
  ],
  [
    true,
    'Katz',
    'India',
    'Half-Finger Gloves',
    '2025-10-02',
    '08-2758492',
    true,
    '87',
    1,
    3,
  ],
  [
    false,
    'Jaxbean',
    'China',
    'HL Road Frame',
    '2025-09-28',
    '84-3557705',
    false,
    '26',
    8,
    1,
  ],
  [
    false,
    'Wikido',
    'Brazil',
    'HL Touring Frame',
    '2025-06-24',
    '20-9397637',
    false,
    '110',
    4,
    1,
  ],
  [
    false,
    'Browsedrive',
    'United States',
    'LL Mountain Frame',
    '2025-03-13',
    '36-0079556',
    true,
    '50',
    4,
    4,
  ],
  [
    false,
    'Twinder',
    'United Kingdom',
    'LL Road Frame',
    '2025-04-06',
    '41-1489542',
    false,
    '160',
    6,
    1,
  ],
  [
    false,
    'Jetwire',
    'China',
    'LL Touring Frame',
    '2025-02-01',
    '37-1531629',
    true,
    '30',
    8,
    5,
  ],
  [
    false,
    'Chatterpoint',
    'China',
    'Long-Sleeve Logo Jersey',
    '2025-07-14',
    '25-5083429',
    true,
    '39',
    7,
    2,
  ],
  [
    false,
    'Twinder',
    'Egypt',
    "Men's Bib-Shorts",
    '2025-08-31',
    '04-4281278',
    false,
    '96',
    6,
    1,
  ],
  [
    false,
    'Midel',
    'United States',
    "Men's Sports Shorts",
    '2025-06-27',
    '55-1711908',
    true,
    '108',
    10,
    3,
  ],
  [
    false,
    'Yodo',
    'India',
    'ML Mountain Frame',
    '2025-03-16',
    '58-8360815',
    false,
    '46',
    1,
    1,
  ],
  [
    false,
    'Camido',
    'Russia',
    'ML Mountain Frame-W',
    '2025-09-13',
    '10-3786104',
    true,
    '97',
    8,
    3,
  ],
  [
    false,
    'Eire',
    'Thailand',
    'ML Road Frame',
    '2025-04-10',
    '45-1186054',
    true,
    '161',
    1,
    4,
  ],
  [
    false,
    'Vinte',
    'United Kingdom',
    'ML Road Frame-W',
    '2025-01-22',
    '62-6202742',
    true,
    '58',
    4,
    3,
  ],
  [
    false,
    'Twitterlist',
    'China',
    'Mountain Bike Socks',
    '2025-11-09',
    '88-9646223',
    true,
    '92',
    8,
    3,
  ],
  [
    false,
    'Eidel',
    'Bangladesh',
    'Mountain-100',
    '2025-09-19',
    '45-5588112',
    true,
    '5',
    6,
    5,
  ],
  [
    false,
    'Trunyx',
    'Nigeria',
    'Mountain-200',
    '2025-03-09',
    '66-6271819',
    true,
    '158',
    4,
    1,
  ],
  [
    false,
    'Katz',
    'Turkey',
    'Mountain-300',
    '2025-03-05',
    '38-9245023',
    false,
    '121',
    5,
    4,
  ],
  [
    false,
    'Kaymbo',
    'United States',
    'Mountain-400-W',
    '2025-12-24',
    '44-5916927',
    false,
    '61',
    5,
    4,
  ],
  [
    false,
    'Ozu',
    'Pakistan',
    'Mountain-500',
    '2025-06-13',
    '31-5449914',
    true,
    '155',
    2,
    2,
  ],
  [
    false,
    'Rhynyx',
    'India',
    'Racing Socks',
    '2025-12-05',
    '19-9413869',
    true,
    '162',
    2,
    4,
  ],
  [
    false,
    'Flashset',
    'Iran',
    'Road-150',
    '2025-12-14',
    '25-9807605',
    false,
    '46',
    7,
    1,
  ],
  [
    false,
    'Yata',
    'Congo (Kinshasa)',
    'Road-250',
    '2025-06-12',
    '74-4291983',
    true,
    '47',
    4,
    4,
  ],
  [
    false,
    'Brainlounge',
    'Vietnam',
    'Road-350-W',
    '2025-03-10',
    '83-0980643',
    true,
    '104',
    2,
    3,
  ],
  [
    false,
    'Babblestorm',
    'United States',
    'Road-450',
    '2025-10-10',
    '19-2878430',
    true,
    '101',
    6,
    4,
  ],
  [
    false,
    'Youspan',
    'Brazil',
    'Road-550-W',
    '2025-12-16',
    '19-1838230',
    true,
    '150',
    10,
    3,
  ],
  [
    false,
    'Nlounge',
    'China',
    'Road-650',
    '2025-10-31',
    '32-2267938',
    true,
    '42',
    4,
    2,
  ],
  [
    false,
    'Twinte',
    'India',
    'Road-750',
    '2025-08-17',
    '79-2821972',
    true,
    '144',
    9,
    3,
  ],
  [
    false,
    'Oyonder',
    'United Kingdom',
    'Short-Sleeve Classic Jersey',
    '2025-12-04',
    '46-6597557',
    true,
    '195',
    4,
    1,
  ],
  [
    false,
    'Gigabox',
    'Pakistan',
    'Sport-100',
    '2025-02-03',
    '15-1793960',
    true,
    '199',
    4,
    4,
  ],
  [
    false,
    'Livetube',
    'France',
    'Touring-1000',
    '2025-05-16',
    '86-0811003',
    true,
    '110',
    4,
    5,
  ],
  [
    false,
    'Voomm',
    'United Kingdom',
    'Touring-2000',
    '2025-07-15',
    '95-3068680',
    true,
    '51',
    4,
    4,
  ],
  [
    false,
    'Voonyx',
    'China',
    'Touring-3000',
    '2025-11-27',
    '35-3085360',
    false,
    '69',
    2,
    5,
  ],
  [
    false,
    'Zoombeat',
    'United States',
    "Women's Mountain Shorts",
    '2025-11-03',
    '56-8673088',
    false,
    '53',
    2,
    3,
  ],
  [
    false,
    'Roomm',
    'China',
    "Women's Tights",
    '2025-03-16',
    '76-0085918',
    true,
    '168',
    1,
    1,
  ],
  [
    false,
    'Leenti',
    'China',
    'Mountain-400',
    '2025-05-16',
    '03-0893276',
    false,
    '58',
    1,
    4,
  ],
  [
    false,
    'Jetpulse',
    'United States',
    'Road-550',
    '2025-02-08',
    '79-9013306',
    true,
    '152',
    9,
    3,
  ],
  [
    false,
    'Katz',
    'Peru',
    'Road-350',
    '2025-02-15',
    '55-7799920',
    true,
    '66',
    4,
    2,
  ],
  [
    false,
    'Cogidoo',
    'India',
    'LL Mountain Front Wheel',
    '2025-06-04',
    '07-0881122',
    false,
    '112',
    9,
    2,
  ],
  [
    false,
    'Divavu',
    'Colombia',
    'Touring Rear Wheel',
    '2025-02-24',
    '58-6157387',
    true,
    '50',
    10,
    4,
  ],
  [
    false,
    'Mydeo',
    'China',
    'Touring Front Wheel',
    '2025-12-07',
    '12-2810010',
    false,
    '31',
    3,
    5,
  ],
  [
    false,
    'Browsebug',
    'Japan',
    'ML Mountain Front Wheel',
    '2025-01-14',
    '64-9249984',
    true,
    '132',
    5,
    5,
  ],
  [
    false,
    'Layo',
    'China',
    'HL Mountain Front Wheel',
    '2025-04-24',
    '45-0739652',
    true,
    '45',
    1,
    5,
  ],
  [
    false,
    'Snaptags',
    'United Kingdom',
    'LL Touring Handlebars',
    '2025-08-06',
    '09-5712761',
    true,
    '197',
    4,
    2,
  ],
  [
    false,
    'Cogilith',
    'China',
    'HL Touring Handlebars',
    '2025-05-31',
    '01-7345008',
    true,
    '190',
    4,
    3,
  ],
  [
    false,
    'Reallinks',
    'United Kingdom',
    'LL Road Front Wheel',
    '2025-05-14',
    '62-1065350',
    true,
    '184',
    3,
    4,
  ],
  [
    false,
    'Quaxo',
    'United States',
    'ML Road Front Wheel',
    '2025-03-23',
    '44-7241323',
    true,
    '169',
    3,
    4,
  ],
  [
    false,
    'Devify',
    'China',
    'HL Road Front Wheel',
    '2025-12-12',
    '52-0295699',
    false,
    '152',
    4,
    4,
  ],
  [
    false,
    'Youopia',
    'Angola',
    'LL Mountain Handlebars',
    '2025-04-01',
    '52-2650922',
    false,
    '182',
    6,
    4,
  ],
  [
    false,
    'Ainyx',
    'China',
    'Touring Pedal',
    '2025-02-27',
    '48-3618525',
    true,
    '141',
    6,
    1,
  ],
  [
    false,
    'Browsetype',
    'Malaysia',
    'ML Mountain Handlebars',
    '2025-04-28',
    '51-8893923',
    true,
    '169',
    7,
    1,
  ],
  [
    false,
    'Muxo',
    'China',
    'HL Mountain Handlebars',
    '2025-08-22',
    '68-5911361',
    false,
    '39',
    7,
    1,
  ],
  [
    false,
    'Bubbletube',
    'China',
    'LL Road Handlebars',
    '2025-10-04',
    '41-5880042',
    true,
    '71',
    8,
    3,
  ],
  [
    false,
    'Fadeo',
    'Vietnam',
    'ML Road Handlebars',
    '2025-04-23',
    '90-5913983',
    true,
    '148',
    10,
    3,
  ],
  [
    false,
    'Yadel',
    'United Kingdom',
    'HL Road Handlebars',
    '2025-04-18',
    '92-0960699',
    true,
    '116',
    8,
    1,
  ],
  [
    false,
    'Blognation',
    'China',
    'LL Headset',
    '2025-01-10',
    '06-9493898',
    true,
    '96',
    10,
    1,
  ],
  [
    false,
    'Devpoint',
    'China',
    'ML Headset',
    '2025-12-25',
    '69-5878565',
    true,
    '35',
    4,
    2,
  ],
  [
    false,
    'Aibox',
    'United Kingdom',
    'HL Headset',
    '2025-03-18',
    '13-1133017',
    true,
    '16',
    8,
    2,
  ],
  [
    false,
    'Brightdog',
    'China',
    'LL Mountain Pedal',
    '2025-09-11',
    '39-6530433',
    true,
    '194',
    2,
    5,
  ],
  [
    false,
    'Gabcube',
    'Nigeria',
    'ML Mountain Pedal',
    '2025-04-22',
    '96-6860388',
    true,
    '24',
    1,
    3,
  ],
  [
    false,
    'Muxo',
    'China',
    'HL Mountain Pedal',
    '2025-06-05',
    '30-0356137',
    true,
    '170',
    4,
    4,
  ],
  [
    false,
    'Tambee',
    'China',
    'ML Touring Seat/Saddle',
    '2025-02-22',
    '93-9058255',
    true,
    '184',
    9,
    5,
  ],
  [
    false,
    'Cogilith',
    'India',
    'LL Touring Seat/Saddle',
    '2025-04-06',
    '82-9268909',
    false,
    '153',
    10,
    4,
  ],
  [
    false,
    'Dynabox',
    'Hong Kong',
    'HL Touring Seat/Saddle',
    '2025-01-10',
    '20-6913815',
    false,
    '88',
    10,
    1,
  ],
  [
    false,
    'Shuffledrive',
    'Sudan',
    'LL Road Pedal',
    '2025-09-16',
    '08-8238817',
    true,
    '57',
    9,
    2,
  ],
  [
    false,
    'Fivechat',
    'China',
    'ML Road Pedal',
    '2025-08-26',
    '44-7370350',
    false,
    '62',
    4,
    1,
  ],
  [
    false,
    'Meembee',
    'United States',
    'HL Road Pedal',
    '2025-12-27',
    '01-3525949',
    true,
    '123',
    2,
    4,
  ],
  [
    false,
    'Dynazzy',
    'United Kingdom',
    'LL Mountain Seat/Saddle 1',
    '2025-12-15',
    '04-2414623',
    true,
    '77',
    10,
    5,
  ],
  [
    false,
    'Eare',
    'China',
    'ML Mountain Seat/Saddle 1',
    '2025-04-04',
    '15-1917509',
    false,
    '199',
    9,
    4,
  ],
  [
    false,
    'Yozio',
    'China',
    'HL Mountain Seat/Saddle 1',
    '2025-03-15',
    '06-2526845',
    true,
    '149',
    8,
    2,
  ],
  [
    false,
    'Quinu',
    "Xi'an",
    '425-777-7829',
    '2025-02-22',
    '83-1713558',
    false,
    '191',
    9,
    5,
  ],
  [
    false,
    'Jazzy',
    'United Kingdom',
    'ML Road Seat/Saddle 1',
    '2025-08-07',
    '00-8892524',
    true,
    '150',
    10,
    2,
  ],
  [
    false,
    'Thoughtsphere',
    'China',
    'HL Road Seat/Saddle 1',
    '2025-11-28',
    '39-5538991',
    true,
    '130',
    7,
    3,
  ],
  [
    false,
    'Leenti',
    'China',
    'ML Road Rear Wheel',
    '2025-12-29',
    '06-9002973',
    true,
    '179',
    1,
    2,
  ],
  [
    false,
    'Quaxo',
    'United Kingdom',
    'HL Road Rear Wheel',
    '2025-09-06',
    '73-6104901',
    true,
    '98',
    5,
    3,
  ],
  [
    false,
    'Tanoodle',
    'Chile',
    'LL Mountain Seat/Saddle 2',
    '2025-05-24',
    '68-7384479',
    true,
    '175',
    2,
    3,
  ],
  [
    false,
    'Feednation',
    'China',
    'ML Mountain Seat/Saddle 2',
    '2025-11-21',
    '26-7757763',
    true,
    '11',
    1,
    3,
  ],
  [
    false,
    'Kayveo',
    'China',
    'HL Mountain Seat/Saddle 2',
    '2025-06-21',
    '07-4873562',
    false,
    '184',
    7,
    4,
  ],
  [
    false,
    'Meevee',
    'Saudi Arabia',
    'LL Road Seat/Saddle 1',
    '2025-11-16',
    '46-5819554',
    false,
    '27',
    9,
    3,
  ],
  [
    false,
    'Twitterworks',
    'China',
    'ML Road Seat/Saddle 2',
    '2025-04-19',
    '01-2666826',
    true,
    '186',
    3,
    2,
  ],
  [
    false,
    'Wikizz',
    'Tanzania',
    'HL Road Seat/Saddle 2',
    '2025-03-08',
    '54-7090503',
    true,
    '20',
    3,
    3,
  ],
  [
    false,
    'Yoveo',
    'United States',
    'LL Mountain Tire',
    '2025-10-14',
    '78-7658520',
    false,
    '153',
    2,
    1,
  ],
  [
    false,
    'Yakidoo',
    'China',
    'ML Mountain Tire',
    '2025-10-12',
    '23-9926318',
    true,
    '161',
    8,
    5,
  ],
  [
    false,
    'Oyope',
    'China',
    'HL Mountain Tire',
    '2025-09-20',
    '20-0179517',
    true,
    '98',
    10,
    5,
  ],
  [
    false,
    'Skipstorm',
    'United States',
    'LL Road Tire',
    '2025-10-01',
    '02-9543343',
    true,
    '30',
    7,
    3,
  ],
  [
    false,
    'Minyx',
    'United States',
    'ML Road Tire',
    '2025-07-07',
    '98-3938169',
    true,
    '73',
    10,
    2,
  ],
  [
    false,
    'Miboo',
    'China',
    'HL Road Tire',
    '2025-07-25',
    '68-5197934',
    true,
    '158',
    9,
    1,
  ],
  [
    false,
    'Realfire',
    'United States',
    'Touring Tire',
    '2025-08-27',
    '39-8260460',
    true,
    '122',
    5,
    2,
  ],
  [
    false,
    'Shufflester',
    'China',
    'Mountain Tire Tube',
    '2025-06-08',
    '45-9776170',
    true,
    '33',
    2,
    4,
  ],
  [
    false,
    'Ntag',
    'China',
    'Road Tire Tube',
    '2025-12-06',
    '45-0858451',
    true,
    '107',
    6,
    2,
  ],
  [
    false,
    'Jabberbean',
    'United States',
    'Touring Tire Tube',
    '2025-04-26',
    '15-4247305',
    true,
    '15',
    1,
    2,
  ],
  [
    false,
    'Thoughtblab',
    'China',
    'LL Bottom Bracket',
    '2025-05-21',
    '15-8534931',
    true,
    '168',
    5,
    2,
  ],
  [
    false,
    'Jabbertype',
    'China',
    'Classic Vest',
    '2025-07-25',
    '23-1251557',
    true,
    '135',
    4,
    2,
  ],
  [
    false,
    'Buzzshare',
    'United Kingdom',
    'Cycling Cap',
    '2025-07-07',
    '86-5920601',
    true,
    '11',
    1,
    4,
  ],
  [
    false,
    'Roodel',
    'United States',
    'Full-Finger Gloves',
    '2025-01-13',
    '48-1055459',
    true,
    '41',
    6,
    4,
  ],
  [
    false,
    'Zoovu',
    'China',
    'Half-Finger Gloves',
    '2025-06-03',
    '12-7842022',
    true,
    '144',
    6,
    1,
  ],
  [
    false,
    'Photofeed',
    'China',
    'HL Mountain Frame',
    '2025-07-14',
    '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')) {
    parentElement.classList.add(SELECTED_CLASS);
  } else {
    parentElement.classList.remove(SELECTED_CLASS);
  }

  // Add class to odd TRs
  if (row % 2 === 0) {
    parentElement.classList.add(ODD_ROW_CLASS);
  } else {
    parentElement.classList.remove(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: 'intl-date' },
      { data: 6, type: 'checkbox', className: 'htCenter' },
      { data: 7, type: 'numeric' },
      { data: 5 },
      { data: 2 },
    ]
  };
}
/* end-file */

/* 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';
/* start:skip-in-compilation */
import { Example1DemoComponent } from './app-demo.component';
/* end:skip-in-compilation */

// register Handsontable's modules
registerAllModules();

export const appConfig: ApplicationConfig = {
  providers: [
    {
      provide: HOT_GLOBAL_CONFIG,
      useValue: {
        license: NON_COMMERCIAL_LICENSE,
      } as HotGlobalConfig
    }
  ],
};

@NgModule({
  imports: [ BrowserModule, HotTableModule, CommonModule ],
  declarations: [ Example1DemoComponent ],
  providers: [...appConfig.providers],
  bootstrap: [ Example1DemoComponent ]
})

export class AppModule { }
/* end-file */

HTML

<div>
  <example1-demo></example1-demo>
</div>

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→

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.