@guiexpert/table
TypeScript icon, indicating that this package has built-in type declarations

1.1.29 • Public • Published

GuiExpert Table with plain JS

This is the base component of the GuiExpert Table Project. One can use this in a plain JS project.

Become a master at creating web applications with large tables

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

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

Get Started

Add the following NPM package to your existing plain JS project (run this in your project root directory):

npm install --save @guiexpert/table

Add an empty

element to your html code:
<div
    class="container-div"
    style="width:100%;height:100%;background:transparent;margin:0;padding:0;"
    ></div>

If you are working with plain JS, you don't need to do this. If you are using TypeScript as a language, please import the following classes:

import {
  EventAdapter,
  SimpleDomService,
  TableModelIf,
  TableOptions,
  TableScope } from "@guiexpert/table";

Create a table model. Select ('querySelector') the

element and create a table scope. Finally, call firstInit() at least once. In this example, you will see the plain TS version. For plain JS, remove ': TableModelIf'.
const tableModel: TableModelIf = TableFactory.createTableModel({
  headerData: [
    ['Header 1', 'Header 2']
  ],
  bodyData: [
    ['Text 1a', 'Text 2a'],
    ['Text 1b', 'Text 2b'],
  ]
});  

const ele = document.querySelector(".container-div") as HTMLDivElement;

const tableScope = new TableScope(
  ele, tableModel, new SimpleDomService(), new TableOptions(), new EventAdapter()
);
tableScope.firstInit();

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

Readme

Keywords

none

Package Sidebar

Install

npm i @guiexpert/table

Weekly Downloads

16

Version

1.1.29

License

none

Unpacked Size

549 kB

Total Files

166

Last publish

Collaborators

  • guiexpert