1. Install the package

A new project with Vite (or use your existing one):

npm create vite@latest my-table -- --template vanilla-ts
cd my-table
npm i @guiexpert/table

The core has no runtime dependencies – only tslib:

my-table@0.0.0
`-- @guiexpert/table@1.1.90
  `-- tslib@2.8.1

For a framework you add one wrapper package next to the core – @guiexpert/react-table, @guiexpert/vue3-table, @guiexpert/angular-table@22 … (part 3).

2. Load the stylesheet

With a bundler (Vite, webpack, Angular CLI …) import it once, e.g. in main.ts:

import "@guiexpert/table/css/main.css";   // styles of the table (bare import since 1.1.85)

Without a build tool, from the CDN:

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@guiexpert/table/css/main.css" />

The file defines all colours as CSS variables (--ge-table-*) for light and dark mode – how to change them is shown in chapter 28 (Theming & dark mode). Angular users don't need this step: the Angular component ships its CSS.

3. Give the container a height

<div class="table-div"></div>

/* the table fills its container – without a height you only see the header row */
.table-div {
  height: calc(100vh - 40px);
}

Checklist

• @guiexpert/table in dependencies (plus the wrapper for your framework)
• main.css loaded once
• a host element with a height

Next

Everything is in place – chapter 5 (First table) puts 100,000 rows on the screen.