GridKit

PHP components for admin dashboards. No build step, no dependencies, no JavaScript framework.

You write PHP. You get a searchable, sortable, filterable, paginated table that reloads over AJAX — with themes, dark mode and a mobile layout you didn't have to think about.

---

The whole CRUD table

Not a snippet — this is the complete file.

<?php
require_once '/path/to/gridkit/autoload.php';
use GridKit\Table;

(new Table('products'))
    ->query($db, "SELECT * FROM products ORDER BY name")
    ->search(['name', 'sku'])
    ->column('sku',       'SKU',     ['width' => '120px', 'muted' => true])
    ->column('name',      'Product', ['sortable' => true])
    ->column('price',     'Price',   ['format' => 'currency', 'sortable' => true])
    ->column('is_active', 'Status',  ['format' => 'label'])
    ->button('edit',   ['icon' => 'edit',   'modal' => 'edit_product'])
    ->button('delete', ['icon' => 'delete', 'confirm' => true])
    ->modal('edit_product', 'Edit', 'forms/product.php', ['size' => 'medium'])
    ->newButton('New product', ['modal' => 'edit_product'])
    ->paginate(25)
    ->render();

Search, sort, filter and paging run over AJAX. The edit button opens a modal that loads forms/product.php. The delete button asks first, then fires gk:rowaction with the row's id — your application decides what deleting means. The empty state knows whether the table is genuinely empty or just filtered, and offers a way back.

table.addEventListener('gk:rowaction', e => {
    const { action, params } = e.detail;         // 'delete', { id: 42 }
});

---

A whole application

The snippet above is a table. This is what it looks like around one:

examples/invoices/ is a working invoice manager — list, create, edit, delete, with search, filter, sort and paging answered by the server over AJAX. English and German, its own strings loaded into GridKit's catalogue with Lang::loadDir(). Around 700 lines across five files and a lang/ directory, no database, no build step.

git clone https://github.com/mmollay/gridkit.git
cd gridkit && php -S localhost:8000

Then open http://localhost:8000/examples/invoices/. What each file does.

---

Install

composer require mmollay/gridkit

Composer puts GridKit under vendor/mmollay/gridkit/, and its css/ and js/ go with it. Layout::asset() stamps the path you hand it — it does not resolve one — so hand it a path the browser can reach:

<link rel="stylesheet" href="<?= Layout::asset('vendor/mmollay/gridkit/css/gridkit.css') ?>">
<link rel="stylesheet" href="<?= Layout::asset('vendor/mmollay/gridkit/css/themes.css') ?>">
<script src="<?= Layout::asset('vendor/mmollay/gridkit/js/gridkit.js') ?>"></script>

If vendor/ sits outside your document root, copy or symlink vendor/mmollay/gridkit/{css,js} into the public root and drop the prefix.

Or clone it — GridKit has no build step, so a checkout is a working install:

git clone https://github.com/mmollay/gridkit.git
mkdir -p my-app && cp gridkit/skeleton.php my-app/index.php
php -S localhost:8000

Then open http://localhost:8000/my-app/. skeleton.php is a working page: sidebar, fixed header, theme switcher, content area, a table with a modal form, assets wired up. It looks for GridKit beside itself, one directory up, and in vendor/ — so the copy above works without editing anything. If you put it somewhere none of those reach, it says so and tells you which line to change.

Requirements: PHP 8.2+ and a browser at Baseline 2023 — custom properties, plus color-mix() (Chrome 111, Safari 16.2, Firefox 113), which the hover and focus-ring tokens have quietly depended on for a long while; oklch() and relative colour syntax sit behind @supports and degrade on their own. No npm, no Composer plugins, no compilation. mbstring is used when present but not required — bash ci/matrix.sh runs the suite on every PHP your machine has and tells you which of them had it.

One thing the Composer package leaves out: the bundled CKEditor 5 build that backs the rich-text form field. At 1.7 MB it would otherwise dominate every install of a framework that advertises zero dependencies. A git clone includes it under assets/ckeditor5/ and the demo uses it; if you need the rich-text field from a Composer install, include CKEditor yourself. Every other component works out of the box.

---

Six themes, light and dark

A theme is one hue. Colours are derived in OKLCH from that single value, so every theme keeps the same lightness and the same contrast — white on the primary surface measures between 4.69:1 and 5.73:1 across all six, so every one of them clears WCAG AA rather than most of them.

[data-gk-theme="mint"] { --gk-theme-hue: 175; }

That is a complete seventh theme. Switching happens on <body>:

<body class="gk-root" data-gk-theme="ocean" data-gk-mode="dark">

---

Forms

Sixteen-column grid, validation, file upload with drag & drop, searchable selects, rich text. Same fluent API as everything else.

This is the beginning of the README. Read the rest at the original. Read the full README ↗