@guiexpert/angular-table

This is the angular component of the GuiExpert Table Project.

Become a master at creating web applications with large tables

This is the UI-agnostic table component for your next web app. 😊

Version compatibility

Angular	@guiexpert/angular-table
17.x.x	^17.0.0
16.x.x	^16.0.7
15.x.x	^15.0.2
14.x.x	^14.0.3

|

Features

• Handle large datasets easily
• Excellent performance for large tables by vertical and horizontal virtual scrolling
• Fully-featured (advanced sorting and filtering)
• Highly customizable orderData grid
• Outstanding performance
• No third-party dependencies
• UI-agnostic
• Column Interactions (resize, reorder)
• Sorting Rows
• Row, Column, and Range Selection
• Single and Multi Selection
• UI-agnostic
• Row and Column Spanning
• Fixed Columns (Left and Right)
• Tree table (Hierarchical View)
• Accessibility support: Keyboard Shortcuts
• Custom Filtering
• In-place Cell Editing
• Userdefined Key and Mouse Events
• Customizable Look & Feel (via CSS variables)
• Row sorting
• Column Reordering (Drag and Drop)
• State Persistence (Row Sorting, Column Order, Selection)
• Customizable Cell Contents via Renderer for Header, Body and Footer
• Full control over the HTML structure and style

Links

• Demos
• Documentation
• API

Get Started

Add the following two NPM packages to your existing angular project (run this in your project root directory):

npm install --save @guiexpert/table @guiexpert/angular-table

Import the (standalone) TableComponent in your angular module:

@NgModule({
    imports: [
      CommonModule,
      TableComponent, ...

Add guiexpert-table component to a template:

<guiexpert-table
  [tableModel]="tableModel"
  [tableOptions]="tableOptions"
  class="table-div"
></guiexpert-table>

Add two properties (tableModel and tableOptions) to the component:

import {
  TableFactory,
  TableModelIf,
  TableOptions,
  TableOptionsIf
} from "@guiexpert/table";

tableModel: TableModelIf = TableFactory.createTableModel({
  headerData: [
    ['Header 1', 'Header 2']
  ],
  bodyData: [
    ['Text 1a', 'Text 2a'],
    ['Text 1b', 'Text 2b'],
  ]
});

tableOptions = {
  ...new TableOptions(),
  hoverColumnVisible: false,
  defaultRowHeights: {
  header: 40,
  body: 34,
  footer: 0
}

There are numerous possibilities to create table models. Please refer to the Documentation for further information or the Demo section for examples.