Table

Complete table with all features

Article No.	Description	Unit	Net	VAT	Status
ART-001	Webdesign Paket S	psch	1.200,00 €	20%	active
ART-002	Hosting Standard	Stk	9,90 €	20%	active
ART-003	SEO Beratung	h	95,00 €	20%	inactive
ART-004	Logo Design	psch	450,00 €	20%	draft
ART-005	Newsletter Setup	psch	350,00 €	20%	active
ART-006	Social Media Paket	psch	680,00 €	20%	active
ART-007	E-Mail Marketing	psch	420,00 €	20%	draft
ART-008	Content Erstellung	h	75,00 €	20%	active
ART-009	Server Administration	h	110,00 €	20%	inactive
ART-010	SSL Zertifikat	Stk	49,00 €	20%	active
ART-011	Domain Registration	Stk	15,00 €	20%	active
ART-012	Webdesign Paket L	psch	3.500,00 €	20%	active
ART-013	App Entwicklung	h	125,00 €	20%	draft
ART-014	Datenbank Migration	psch	890,00 €	20%	active
ART-015	Security Audit	psch	1.500,00 €	20%	inactive

Invoice list with date and currency formatting

Customer	Date	Due	Amount	Status
RE-2026-001	Mustermann GmbH	01.02.2026	01.03.2026	1.450,00 €	paid
RE-2026-002	Tech Solutions AG	05.02.2026	05.03.2026	3.200,00 €	pending
RE-2026-003	Weber & Partner	08.02.2026	08.03.2026	890,50 €	overdue
RE-2026-004	Digital Agentur Wien	10.02.2026	10.03.2026	5.600,00 €	draft
RE-2026-005	Startup Hub Vienna	12.02.2026	12.03.2026	2.100,00 €	paid
RE-2026-006	Cafe Central KG	14.02.2026	14.03.2026	780,00 €	pending
RE-2026-007	Alpen Consulting	15.02.2026	15.03.2026	4.200,00 €	paid
RE-2026-008	Donau Logistics	17.02.2026	17.03.2026	1.890,00 €	pending
RE-2026-009	Wiener Werkstatt	18.02.2026	18.03.2026	560,00 €	draft
RE-2026-010	Graz IT Services	20.02.2026	20.03.2026	3.450,00 €	paid
RE-2026-011	Salzburg Media	22.02.2026	22.03.2026	1.200,00 €	overdue
RE-2026-012	Linz Digital	25.02.2026	25.03.2026	2.750,00 €	pending

Compact table without toolbar

Name	E-Mail	Role	Active
Martin Huber	martin@example.com	admin	✓
Anna Schneider	anna@example.com	editor	✓
Thomas Berger	thomas@example.com	viewer	–
Lisa Wagner	lisa@example.com	editor	✓
Peter Gruber	peter@example.com	admin	–

Sizes

size('sm') Compact

Name	Value	Status
Widget A	1.200 €	active
Widget B	340 €	inactive
Widget C	890 €	active

size('md') Standard

Name	Value	Status
Widget A	1.200 €	active
Widget B	340 €	inactive
Widget C	890 €	active

size('lg') Spacious

Name	Value	Status
Widget A	1.200 €	active
Widget B	340 €	inactive
Widget C	890 €	active

$table->size('sm');  // compact
$table->size('md');  // standard (default)
$table->size('lg');  // spacious

Display variants

variant('default') Default

Description	Price	Status
Webdesign Paket	1.200 €	active
Hosting Standard	9,90 €	active
SEO Beratung	95 €	inactive
Logo Design	450 €	draft

variant('bordered') Bordered

Description	Price	Status
Webdesign Paket	1.200 €	active
Hosting Standard	9,90 €	active
SEO Beratung	95 €	inactive
Logo Design	450 €	draft

variant('striped') Striped

Description	Price	Status
Webdesign Paket	1.200 €	active
Hosting Standard	9,90 €	active
SEO Beratung	95 €	inactive
Logo Design	450 €	draft

variant('celled') Celled

Description	Price	Status
Webdesign Paket	1.200 €	active
Hosting Standard	9,90 €	active
SEO Beratung	95 €	inactive
Logo Design	450 €	draft

variant('padded') Padded

Description	Price	Status
Webdesign Paket	1.200 €	active
Hosting Standard	9,90 €	active
SEO Beratung	95 €	inactive
Logo Design	450 €	draft

variant('compact') Compact

Description	Price	Status
Webdesign Paket	1.200 €	active
Hosting Standard	9,90 €	active
SEO Beratung	95 €	inactive
Logo Design	450 €	draft

variant('selectable') Selectable

Description	Price	Status
Webdesign Paket	1.200 €	active
Hosting Standard	9,90 €	active
SEO Beratung	95 €	inactive
Logo Design	450 €	draft

variant('minimal') Minimal

Description	Price	Status
Webdesign Paket	1.200 €	active
Hosting Standard	9,90 €	active
SEO Beratung	95 €	inactive
Logo Design	450 €	draft

variant('flat') Flat

Description	Price	Status
Webdesign Paket	1.200 €	active
Hosting Standard	9,90 €	active
SEO Beratung	95 €	inactive
Logo Design	450 €	draft

variant('inverted') Inverted

Description	Price	Status
Webdesign Paket	1.200 €	active
Hosting Standard	9,90 €	active
SEO Beratung	95 €	inactive
Logo Design	450 €	draft

Definition table

First column as label/key — ideal for detail views.

Company name	SSI Schaefer IT Solutions GmbH
Founded	2003
Location	Wien, Oesterreich
Employees	24
Website	ssi.at
Status	Active

$table->variant('default');     // Default
$table->variant('bordered');    // Full border lines
$table->variant('striped');     // Zebra stripes
$table->variant('celled');      // Grid lines around each cell
$table->variant('padded');      // Extra spacing
$table->variant('compact');     // Compact, more rows
$table->variant('selectable');  // Hover cursor, clickable
$table->variant('minimal');     // Only separator, no border
$table->variant('flat');        // Completely flat
$table->variant('inverted');    // Dark table (also in Light Mode)

// Combinable:
$table->variant('striped')->size('compact');
$table->variant('celled')->variant('padded');

Mobile-Responsive

Resize the browser window to <768px to see the mobile layout.

mobile('card') – Standard

Article No.	Description	Price	Status
ART-001	Webdesign Paket S	1.200 €	active
ART-002	Hosting Standard	9,90 €	active
ART-003	SEO Beratung	95 €	inactive

mobile('scroll') – Horizontal Scroll

Article No.	Description	Price	Status
ART-001	Webdesign Paket S	1.200 €	active
ART-002	Hosting Standard	9,90 €	active
ART-003	SEO Beratung	95 €	inactive

hideOnMobile – Hide columns

Article No.	Description	Price	Status
ART-001	Webdesign Paket S	1.200 €	active
ART-002	Hosting Standard	9,90 €	active
ART-003	SEO Beratung	95 €	inactive

// Demo 1: Complete article table with pagination
$table = new Table('articles');
$table->setData($articles)
    ->search(['article_number', 'name'])
    ->column('name', 'Description', ['sortable' => true])
    ->column('net_price', 'Net', ['format' => 'currency'])
    ->column('tax_rate', 'VAT', ['format' => 'percent'])
    ->column('is_active', 'Status', ['format' => 'label'])
    ->button('edit', ['icon' => 'edit', 'class' => 'primary'])
    ->button('delete', ['icon' => 'delete', 'class' => 'danger'])
    ->newButton('New Article', ['icon' => 'add'])
    ->nowrap(true)
    ->paginate(5)
    ->render();

// Mobile-Responsive
$table->mobile('card');      // Cards on mobile (default)
$table->mobile('scroll');    // Horizontal Scroll
$table->column('desc', 'Description', ['hideOnMobile' => true]);

Form

Grid Layout (16 columns)

Toggle & Slider

File Upload

RichText Editor (CKEditor 5)

Local vendor bundle (vendor/ckeditor5/), no CDN. Initialization via IntersectionObserver — works in tabs and modals too.

Clearable date/time fields

Trash icon only appears when a value is set — disappears automatically after clearing.

New field types

Uniform height of 44px for all input types. No browser spinner for number.

Select extensions

Searchable Select – Country selection with search field

Multi-Select – Select multiple categories (with chips)

Ajax Select – Customer search via API (min. 2 characters)

// Grid Layout (16 columns)
$form->row()
    ->field('name', 'Name', 'text', ['width' => 8])
    ->field('email', 'E-Mail', 'email', ['width' => 8])
->endRow()
->field('agree', 'Accept terms', 'checkbox', ['checked' => true])
->field('payment', 'Payment method', 'radio', [
    'options' => ['card' => 'Credit card', 'bank' => 'Bank transfer'],
    'value' => 'card', 'inline' => true
])
->field('active', 'Active', 'toggle', ['inline' => true])
->field('volume', 'Volume', 'range', ['min' => 0, 'max' => 100, 'value' => 50])
->field('doc', 'Document', 'file', ['accept' => '.pdf', 'multiple' => true, 'maxSize' => '10MB'])
->field('content', 'Content', 'richtext', ['preset' => 'full'])
->field('datum',  'Date',    'date',     ['value' => date('Y-m-d'),      'clearable' => true])
->field('farbe', 'Color',  'color',  ['value' => '#6750a4'])
->field('preis', 'Price',  'number', ['placeholder' => '0.00'])

File Upload (extended)

drag_indicatorDrag & Drop

Select files via drag & drop or click

verifiedValidation

Type, size (min/max), count and total size

imagePreview

Image thumbnails directly in the upload zone

list_altQueue UI

Progress indicator, states, errors per file

Variant 1 — Simple

Document upload with type filter and size limit.

Variant 2 — Images with preview

Multi-upload with image thumbnails directly in the zone.

Variant 3 — Full configuration

All options combined: types, min/max size, total limit, file count.

Queue states live

Manually cycle queue items through states: pending → uploading → done / error.

Validation error demo

Zone with strict limits — PDF only, max. 100 KB.

Color Picker

Styled native color input — color swatch on the left (clickable) + hex field on the right. Swatch and hex value sync automatically, validated as #RRGGBB.

Live Demo

Behavior

Clicking the color swatch opens the native browser color picker
The hex text field shows the current value and is directly editable
Both fields synchronize in real time
Validation: only valid #RRGGBB values are accepted
Uniform 44px height like all other GridKit inputs

Cards

Card grid for structured content — responsive, with header, body and footer.

Auto-Grid (responsive)

Webdesign

Package S · from 1,200 €

Responsive design, CMS integration and SEO basics for small projects.

5 projects active

Hosting

Managed · from 9.90 €/month

SSD storage, daily backups and SSL included. 99.9% uptime.

12 servers active

SEO

Consulting · 95 €/h

Keyword analysis, on-page optimization and monthly reports.

3 customers active

Fixed column count

speedPerformance

99.9% Uptime

securitySecurity

SSL & Firewall

support_agentSupport

Available 24/7

backupBackups

Daily automatic

2 columns

Development

Frontend and backend development with modern technologies.

Consulting

Strategic IT consulting for digital transformation.

3 columns

webWeb

phone_androidMobile

cloudCloud

.gk-cards          // Auto-Grid (min 280px)
.gk-cards-2 / -3 / -4  // Fixed columns
.gk-card .gk-card-header / .gk-card-body / .gk-card-footer
.gk-card-link      // Clickable Card

Stat Cards

Customers248

Revenue84.250,00 €

Orders64

Outstanding12.480,00 €

$stats = new StatCards('dashboard');
$stats->card('Customers', 248, ['format' => 'number', 'color' => 'blue'])
    ->card('Revenue', 84250.00, ['format' => 'currency', 'color' => 'green'])
    ->card('Outstanding', 12480.00, ['format' => 'currency', 'color' => 'red'])
    ->render();

Layout

Segment

Container for related content — single, stacked or with header.

A simple segment visually groups related content.

Segment with header

Project overview

Segments can have a header to describe the content.

Stacked segments

Step 1

Create account and confirm email.

Step 2

Fill out profile and configure settings.

Step 3

Create first project and get started.

Variants

Raised

With shadow — stands out more from the background.

Muted

Muted background — for secondary content.

Compact

Less padding — for denser layouts.

.gk-segment / .gk-segment-raised / .gk-segment-muted / .gk-segment-compact
.gk-segment-padded / .gk-segment-basic
.gk-segments > .gk-segment  // Stacked

Message

Notices, warnings and status messages for users.

info

A neutral message without a specific status.

Types

info

Information

Your changes are saved automatically.

check_circle

Success

The profile has been successfully updated.

warning

Warning

Your SSL certificate expires in 7 days.

error

Error

Could not establish connection to the database.

Host unreachable
Timeout after 30 seconds

Compact

info

Compact message for less space.

Dismissible

warning

This message can be closed.

.gk-message / .gk-message-info / .gk-message-success
.gk-message-warning / .gk-message-error / .gk-message-compact
.gk-message-dismiss  // Close button

Navigation & Filter

Accordion

Collapsible content areas — individually or as a group.

GRIDKit is a lightweight PHP/CSS/JS framework for admin dashboards and internal tools. Zero dependencies, M3-inspired.

Table, Form, Modal, Cards, StatCards, Sidebar, Header, Tabs, Accordion, Breadcrumb, Toast, Confirm and more. All with Light & Dark Mode.

No. GRIDKit has no dependencies — one CSS file, one JS file, done. Just include and get started.

<div class="gk-accordion" data-gk-single>
    <div class="gk-accordion-item open">
        <button class="gk-accordion-trigger">
            <span>Question?</span>
            <span class="material-icons">expand_more</span>
        </button>
        <div class="gk-accordion-content">
            <div class="gk-accordion-body">Answer...</div>
        </div>
    </div>
</div>

// data-gk-single: only one item open at a time
// .open: item open by default

Avatar

Profile pictures with initials fallback, status dot and groups.

Sizes

Status

Group (stacked)

.gk-avatar.gk-avatar-lg           // Sizes: xs, sm, md, lg, xl
.gk-avatar-status.online          // Status: online, away, busy, offline
.gk-avatar-group                  // Stacked group
.gk-avatar-square                 // Square instead of round

Gallery + Lightbox

Image grid with lazy loading, hover overlay and lightbox (arrow keys, Escape).

Landscape

Architecture

Nature

City

Abstract

Panorama

<div class="gk-gallery">
    <div class="gk-gallery-item" data-lightbox="full.jpg" data-caption="Titel" data-lazy>
        <img data-src="thumb.jpg" alt="">
        <div class="gk-gallery-overlay">
            <span class="gk-gallery-caption">Titel</span>
        </div>
    </div>
</div>

// Variants:
.gk-gallery-sm              // Smaller thumbnails (100px min)
.gk-gallery-lg              // Larger thumbnails (220px min)
.gk-gallery-masonry         // Pinterest layout (columns)
// Lightbox: arrow keys, Escape, click outside to close
// data-lazy: load images only when visible

Breadcrumb

Path navigation for orientation in nested areas.

Page content here...

<nav class="gk-breadcrumb">
    <a href="#"><span class="material-icons">home</span></a>
    <span class="gk-breadcrumb-sep"><span class="material-icons">chevron_right</span></span>
    <a href="#">Products</a>
    <span class="gk-breadcrumb-sep">...</span>
    <span class="gk-breadcrumb-current">Current Page</span>
</nav>

Tabs

Tab navigation for switching between content areas.

This is the overview — the first tab is active by default.

Detail information is displayed here.

Settings and configuration options.

<div class="gk-tabs">
    <div class="gk-tab-nav">
        <button class="gk-tab-btn gk-active" data-tab="tab-1">Tab 1</button>
        <button class="gk-tab-btn" data-tab="tab-2">Tab 2</button>
    </div>
    <div class="gk-tab-panel gk-active" data-tab="tab-1">Content 1</div>
    <div class="gk-tab-panel" data-tab="tab-2">Content 2</div>
</div>

Combinations

Combination examples showing the full potential of GRIDKit.

Tabs + Accordion (combined)

Tabs for main categories, accordion for details — a common pattern in admin UIs.

3 packages available: S (1,200 €), M (2,400 €), L (3,500 €). All incl. responsive design and CMS.

Managed hosting from 9.90 €/month. SSD, backups, SSL included. 99.9% uptime guarantee.

info

24 active customers, 3 open inquiries

Mustermann GmbH

Since 2024 · 12 projects

Tech Solutions AG

Since 2023 · 8 projects

Weber & Partner

Since 2025 · 3 projects

Notifications

Email on new inquiries

Weekly report

Segment + Message + Table

Dashboard view with status message and data table in a segment.

Server-Status

check_circle

All 3 servers are online — last check 2 minutes ago.

Server	Status	CPU	RAM	Uptime
Baerli (server8)	Online	12%	4.2 GB	47 days
Theo (server7)	Online	8%	3.8 GB	23 days
Waldi (server6)	Online	15%	5.1 GB	31 days

Pagination (standalone)

Page navigation — automatically generated by Table, but can also be used standalone.

<nav class="gk-pagination">
    <button class="gk-page-btn" disabled>&laquo;</button>
    <button class="gk-page-btn gk-active">1</button>
    <button class="gk-page-btn">2</button>
    <button class="gk-page-btn">&raquo;</button>
</nav>

FilterChips

All 152 Active 89 Draft 23 Paid 31 Overdue 9

$chips = new FilterChips('status-filter', 'status');
$chips->chip('', 'All', ['count' => 152])
    ->chip('active', 'Active', ['count' => 89, 'color' => 'green'])
    ->render();

YearFilter

2026 2025 2024 2023 2022

$years = new YearFilter('year-nav', 'year');
$years->range(2022, 2026)->render();

Formatter

Built-in formatting for table columns: currency, percent, date, boolean, label, email.

Currency	Percent	Date	Boolean	Label	Email
1.234,56 €	20%	13.02.2026	✓	paid	info@ssi.at
99,00 €	10%	28.01.2026	–	pending	office@panel.at
5.500,00 €	0%	01.12.2025	✓	cancelled

->column('amount', 'Amount', ['format' => 'currency'])    // 1,234.56 EUR
->column('tax', 'VAT', ['format' => 'percent'])           // 20%
->column('date', 'Date', ['format' => 'date'])            // 02/13/2026
->column('active', 'Active', ['format' => 'boolean'])     // Yes / No
->column('status', 'Status', ['format' => 'label'])       // Colored label
->column('email', 'E-Mail', ['format' => 'email'])        // mailto: Link

Feedback & Dialogs

Toast

Toast notifications for success, error and info messages. Disappear after 3 seconds.

GK.toast.success('Successfully saved!');
GK.toast.error('Error while saving!');
GK.toast.warning('Warning: Limit reached!');
GK.toast.info('3 new entries');

Confirm

Confirm dialogs as clean modals. Promise-based, with danger mode for destructive actions.

GK.confirm('Send invoice?', {
    title: 'Send Invoice', confirmText: 'Send'
}).then(ok => { if (ok) GK.toast.success('Sent!'); });

GK.confirm('Really delete?', {
    title: 'Delete', confirmText: 'Delete', danger: true
}).then(ok => { if (ok) { /* ... */ } });

Modal

Modals in four sizes. Loaded via AJAX, backdrop click and ESC close them.

Nesting: Modal with form

A modal loads a form via AJAX – the most common use case.

Nesting: Modal with table + sub-modal

A large modal shows a customer list. Clicking "Edit" opens a second modal with the form.

GK.modal.open('Titel', 'form/edit.php', {id: 42}, 'small');
GK.modal.open('Titel', 'form/edit.php', {id: 42}, 'medium');
GK.modal.open('Titel', 'form/edit.php', {id: 42}, 'large');
GK.modal.open('Titel', 'form/edit.php', {id: 42}, 'full');

$table->button('edit', ['icon' => 'edit', 'modal' => 'edit_form'])
    ->modal('edit_form', 'Edit', 'form/edit.php', ['size' => 'large']);

UI Components

Buttons

Variants

Colors – Filled

Colors – Outlined

Colors – Tonal

Colors – Text

Icon-Only

Sizes

States

Icon Position & Special

open_in_newAs Link

Button Group

Shapes

FAB (Floating Action Button)

use GridKit\Button;
echo Button::render('Save', ['variant' => 'filled', 'color' => 'primary', 'icon' => 'save']);
echo Button::icon('edit', ['variant' => 'filled', 'color' => 'primary']);
echo Button::fab('add');
echo Button::fab('edit', ['extended' => true, 'label' => 'Edit']);

Labels

Colored labels for status display — also usable standalone, not only in tables.

Active Draft Error Archived Info

<span class="gk-label gk-label-green">Active</span>
<span class="gk-label gk-label-orange">Draft</span>
<span class="gk-label gk-label-red">Error</span>
<span class="gk-label gk-label-gray">Archived</span>
<span class="gk-label gk-label-blue">Info</span>

Tooltip

Tooltips appear automatically on buttons with a title attribute. Hover over the buttons:

// Tooltip via title attribute (CSS-only, no JS)
Button::icon('edit', ['title' => 'Edit']);
<button class="gk-btn" title="Tooltip-Text">...</button>

Empty State

Placeholder for empty tables or lists.

Name	E-Mail	Status
inboxNo entries found

<div class="gk-empty">No entries found</div>

Header

Invoices

Martin Huberexpand_more

Minimal (title + user with initials only)

Dashboard

Anna K.expand_more

$header = new Header();
echo $header->title('Invoices')
    ->breadcrumb(['Dashboard' => '/', 'Invoices'])
    ->search('Search...', 'q')
    ->action(Button::render('New', ['icon' => 'add', 'size' => 'sm']))
    ->user('Martin Huber', ['avatar' => '...', 'menu' => [...]])
    ->sticky()->render();

Sidebar

Responsive sidebar navigation with groups, icons, badges and mobile toggle. Visible live on this page.

$sidebar = new Sidebar('main');
$sidebar->brand('My Project', 'dashboard', 'v0.7.0')
    ->group('Modules')
    ->item('Dashboard', '/dashboard', 'analytics', ['active' => true])
    ->item('Invoices', '/invoices', 'receipt_long', ['badge' => 3])
    ->render();

GK.sidebar.toggle(); GK.sidebar.open(); GK.sidebar.close();

Themes

M3-compliant theme system with 6 themes and Dark/Light Mode.

Layout Mode

Theme Selection

Live Preview

Card Title

Surface-container background with on-surface text colors.

Color Roles

Primary Secondary Tertiary Error

Primary Container Secondary Container Tertiary Container

Surface Container Highest

Theme::set('ocean', 'dark');
echo Theme::bodyTag('gk-root');
echo Theme::switcher();
GK.theme.set('forest'); GK.theme.toggleMode(); GK.theme.restore();

Examples

Dashboard Demo

Invoices152

Revenue 2026127.840,00 €

Open18.320,00 €

Overdue4.280,00 €

All Paid Pending Overdue

2026 2025 2024

Invoice No.	Customer	Amount	Date	Status
RE-2026-001	Mustermann GmbH	2.400,00 €	01.02.2026	paid
RE-2026-002	Technik AG	5.800,00 €	05.02.2026	pending
RE-2026-003	Design Studio	1.200,00 €	15.01.2026	overdue
RE-2026-004	Web Solutions	3.600,00 €	10.02.2026	paid
RE-2026-005	Media House	950,00 €	12.02.2026	pending

Skeleton — Starting point for new projects

skeleton.php is the ready-made scaffolding for a new GridKit project. Just copy, adjust title + navigation, fill in sections — done.

Quick start:
cp /path/to/gridkit/skeleton.php my-project/index.php

Anatomy of a GRIDKit Page

Every page follows this structure — from skeleton.php to production.

settings Config

widgets

home people settings

SIDEBAR

Header

Content

Footer · JS

settings

Configuration

Theme::set('indigo') · Layout::bodyTag('gk-root')

Sidebar

->brand() · ->group() · ->item(label, url, icon)

web

Header

->title() · ->fixed() · ->user(name, opts)

dashboard

Content

<main class="gk-main"> · Tables, Forms, Cards…

code

Footer

Modal::container() · <script src="gridkit.js">

Auth — Login Protection

Auth protects pages with session-based login. Passwords are stored as bcrypt hashes.

Auth::protect(); // Protect page Auth::login($user, $pass); // Login attempt Auth::logout('login.php'); // Clear session Auth::check(); // Logged in? Auth::user(); // Username Auth::hashPassword('abc'); // bcrypt hash Auth::renderLogin([...]); // Login page

Open the login page live demo:

lock_open Open Login Demo

Credentials: demo / demo

Tooltip

CSS-only Tooltips

Pure CSS tooltips via data-gk-tooltip attribute. No JavaScript needed.

Top (default) Bottom Left Right

Multiline Tooltip

Hover for multiline

Rich Tooltip (HTML content)

Rich tooltips use data-gk-tooltip-rich pointing to a hidden element. Supports links, formatting, and stays open on hover.

Hover for details

GridKit Tooltip

Rich tooltips support full HTML content including links, images, and interactive elements.

Learn more →

Tooltip on Buttons

Usage

<!-- Simple tooltip (CSS-only) -->
<span data-gk-tooltip="Hello!">Hover me</span>

<!-- Position: top (default), bottom, left, right -->
<span data-gk-tooltip="Bottom" data-gk-tooltip-pos="bottom">...</span>

<!-- Multiline -->
<span data-gk-tooltip="Long text here" data-gk-tooltip-wrap>...</span>

<!-- Rich tooltip (HTML content) -->
<span data-gk-tooltip-rich="#myTip">Hover</span>
<div id="myTip">HTML content here</div>

Changelog

1.8.0]2026-04-17 — Table: Tabular-Nums für Währung/Zahlen

Added / Changed · **Table**: Spalten mit `format: 'currency'` oder `format: 'number'` bekommen automatisch: - `font-variant-numeric: tabular-nums` → gleichbreite Ziffern, Euro-Zeichen stehen zeilenübergreifend untereinander - `text-align: right` (wenn nicht anders gesetzt) - `white-space: nowrap` (wenn nicht explizit gesetzt) Damit sehen Beträge in Tabellen sofort typografisch korrekt aus, ohne dass jede View einzeln CSS setzen muss. ---

1.7.1]2026-04-17 — YearFilter: Fix `URL is not a constructor`

Fixed · **YearFilter Dropdown**: `new URL(...)` → `new window.URL(...)` und `window.location.href` statt `window.location`. Behebt `Uncaught TypeError: URL is not a constructor` auf Seiten, die irgendwo ein Element mit `id="URL"` oder `name="URL"` haben (z.B. `/faktura/invoices`) — "named access on Window" überschattet sonst den globalen `URL`-Konstruktor. ---

1.7.0]2026-04-17 — YearFilter: Toolbar-tauglich + „Alle"-Option

Added · **`allOption(string $label = 'Alle Jahre', int $value = 0)`**: Fügt eine „Alle"-Option am Anfang des Dropdowns ein. Der Controller muss den übergebenen Wert (default `0`) als „kein Filter" interpretieren. · **`selectClass(string $class)`**: Legt die CSS-Klasse des `<select>` fest (default `gk-filter`). Changed · **`mode('dropdown')` rendert jetzt nur das `<select>`** — ohne umgebenden `<div class="gk-year-filter-dropdown">`. Dadurch lässt sich das Dropdown direkt in eine bestehende `.gk-toolbar` (z.B. via `Table::toolbarHtml()`) einspeisen, ohne Layout-Bruch. Example ```php ob_start(); (new YearFilter('cust-year', 'year')) ->baseUrl('/faktura/customers') ->range(2010, (int)date('Y')) ->preserve(['quarter', 'month', 'q']) ->mode('dropdown') ->allOption('Alle Jahre') ->render(); $toolbarHtml = ob_get_clean(); (new Table('customers'))->setData($rows)->toolbarHtml($toolbarHtml)->render(); ``` ---

1.6.0]2026-04-17 — YearFilter: Dropdown-Modus

Added · **YearFilter `mode('dropdown')`**: Zeigt die Jahre als `<select>`-Dropdown statt als Chip-Liste — nützlich wenn der verfügbare Zeitraum groß ist (z.B. 17 Jahre Firmenhistorie) und die Chip-Leiste zu lang würde. · Default bleibt `mode('chips')` — bestehende Verwendungen ändern sich nicht. · Kombinierbar mit `->range($from, $to)` um auch Jahre ohne Daten anzubieten. Example ```php (new YearFilter('cust-year-filter', 'year')) ->baseUrl('/faktura/customers') ->range(2010, (int)date('Y')) ->preserve(['quarter', 'month', 'show', 'q']) ->mode('dropdown') ->render(); ``` ---

1.5.0]2026-04-15 — AJAX Sidebar Navigation (SPA-lite)

Added · **AJAX Navigation**: Sidebar-Links laden Content per fetch() ohne Full-Page-Reload - Opt-in: `$sidebar->ajaxNav(true)` + `data-gk-content` auf Content-Container - Ladebalken (Progress-Bar) am oberen Bildschirmrand - Browser Zurück/Vorwärts via pushState/popstate - Automatische Re-Initialisierung von GRIDKit-Komponenten - Fallback auf normale Navigation bei Fehler · Sidebar.php: Neue Methode `ajaxNav(bool $enabled)` ---

1.4.17]2026-04-15 — Form: Date-Felder max-Jahr begrenzen

Fixed · **Form date/datetime**: Automatisch `max="9999-12-31"` gesetzt, damit Browser kein 6-stelliges Jahr erlaubt · **Form**: `min` und `max` Attribute für alle Input-Typen unterstützt (text, number, date etc.) ---

1.4.13]2026-04-10 — Form Compact: alle Elemente + Demo

Added · **Form Compact — vollständig**: `.gk-form-compact` skaliert jetzt alle Formular-Elemente: - Inputs: 44px → 34px, Padding/Font reduziert - Selects: Höhe 34px, kompakteres Arrow-Positioning - Toggles: 48×28px → 38×22px - Checkboxen: 20×20px → 16×16px - Searchable Selects: Display + Options kompakter - Field-Inline: Gap 12px → 8px · **Demo**: Side-by-side Vergleich Normal vs Compact unter gridkit.ssi.at/demo/#form · **Doku**: SPEC.md, GRIDKIT_SKILL.md mit Form Density Tabellen Changed · **Input Borders** (global): 1.5px #d0d7de → 1px #dde1e6 (zartere Linien) ---

1.4.1]2026-03-31 — Table renderStatic Button-Fix + Icons

Fixed · **Table renderBtnGroup JS**: Buttons nach renderStatic (Suche/Sort) hatten nur `gk-btn gk-btn-icon` — fehlten `gk-btn-text`, `gk-btn-neutral`, `gk-btn-sm`. Jetzt identisch mit PHP-Renderer (variant=text, color=neutral, size=sm per Default). · **iconSvg()**: Nur 3 Icons bekannt — unbekannte Icons wurden als roher Text gerendert. Jetzt erweitert: `add`, `visibility`, `download`, `upload`, `copy`, `email`, `search`, `settings`, `open_in_new`, `auto_awesome`, `login`, `print`. Unbekannte Icons fallen auf Material Icons `<span class="material-icons">` zurück statt Text. ---

Table

Complete table with all features

Invoice list with date and currency formatting

Compact table without toolbar

Sizes

Display variants

Definition table

Mobile-Responsive

Form

Grid Layout (16 columns)

Checkbox & Radio

Toggle & Slider

File Upload

RichText Editor (CKEditor 5)

Clearable date/time fields

New field types

Select extensions

File Upload (extended)

Variant 1 — Simple

Variant 2 — Images with preview

Variant 3 — Full configuration

Queue states live

Validation error demo

Color Picker

Live Demo

Behavior

Form Density

Cards

Auto-Grid (responsive)

Fixed column count

2 columns

3 columns

Stat Cards

Layout

Segment

Segment with header

Stacked segments

Variants

Message

Types

Compact

Dismissible

Navigation & Filter

Accordion

Avatar

Gallery + Lightbox

Breadcrumb

Tabs

Combinations

Tabs + Accordion (combined)

Segment + Message + Table

Pagination (standalone)

FilterChips

YearFilter

Formatter

Feedback & Dialogs

Toast

Confirm

Modal

Nesting: Modal with form

Nesting: Modal with table + sub-modal

UI Components

Buttons

Variants

Colors – Filled

Colors – Outlined

Colors – Tonal

Colors – Text

Icon-Only

Sizes

States

Icon Position & Special

Button Group

Shapes

FAB (Floating Action Button)

Labels

Tooltip

Empty State

Header

Sidebar