Menu
GridLite styling: row height, column spacing, toolbar layouts, custom CSS classes, theming. Use when customising GridLite appearance.
Install with Codex or Claude Copy this prompt, paste it into Codex, Claude, or another assistant, and let it review the skill page and install it for you.
Based on SOC occupation classification
GridLite filtering: enabling FilterBar, filter operators by column type, programmatic filter control, AND/OR logic. Use when adding or configuring filters.
Complete prop reference for GridLite component: every prop with type, default, and usage. Use when you need to know what props GridLite accepts.
GridLite state management: onStateChange callback, GridState shape, reading current state, view persistence. Use when tracking or persisting grid state.
Minimal setup for svelte-gridlite-kit: install, adapter init (PGLite or TanStack DB), basic GridLite component, SvelteKit SSR/Vite config. Use when integrating GridLite into a new project.
GridLite common integration patterns: custom cell formatters, rich cell rendering via slots, toolbar slots, row detail modal, raw query mode, programmatic refresh. Use for copy-paste examples.
GridLite sorting and grouping: SortBar, GroupBar, multi-level grouping with aggregations, programmatic control. Use when configuring sort or group behaviour.
| name | gridlite-styling |
| description | GridLite styling: row height, column spacing, toolbar layouts, custom CSS classes, theming. Use when customising GridLite appearance. |
| user-invocable | true |
<script>
import '@shotleybuilder/svelte-gridlite-kit/styles';
</script>
Or import directly:
import '@shotleybuilder/svelte-gridlite-kit/styles/gridlite.css';
<GridLite rowHeight="medium" />
| Value | Vertical Padding |
|---|---|
'short' | 4px |
'medium' | 8px (default) |
'tall' | 12px |
'extra_tall' | 16px |
<GridLite columnSpacing="normal" />
| Value | Horizontal Padding |
|---|---|
'narrow' | 6px |
'normal' | 12px (default) |
'wide' | 20px |
<GridLite toolbarLayout="airtable" />
| Layout | Description |
|---|---|
'airtable' | Right-aligned: Columns, Filter, Group, Sort, View, Search (default) |
'excel' | Two rows: data controls top, view controls bottom |
'shadcn' | Search left, data controls middle, view controls right |
'aggrid' | Sidebar panel (experimental — issue #1) |
All layouts support toolbar-start and toolbar-end slots for injecting custom buttons. See the Props API or Recipes skills for usage.
Override any element's class:
<GridLite
classNames={{
container: 'my-grid',
table: 'my-table',
thead: 'my-header',
tbody: 'my-body',
tr: 'my-row',
th: 'my-header-cell',
td: 'my-cell',
pagination: 'my-pagination'
}}
/>
Key classes for custom styling:
/* Container */
.gridlite-container { }
/* Table */
.gridlite-table { }
.gridlite-thead { }
.gridlite-th { }
.gridlite-td { }
.gridlite-tr { }
/* Toolbar */
.gridlite-toolbar { }
.gridlite-search { }
.gridlite-view-controls { }
.gridlite-view-control-btn { }
/* Grouped view */
.gridlite-group-row { }
.gridlite-group-header { }
.gridlite-group-chevron { }
.gridlite-group-count { }
.gridlite-group-agg { }
/* Pagination */
.gridlite-pagination { }
/* Column picker */
.gridlite-column-picker { }
/* States */
.gridlite-empty { }
.gridlite-loading { }
Override CSS variables or classes:
/* Dark theme override */
.my-grid .gridlite-table { background: #1a1a2e; color: #e0e0e0; }
.my-grid .gridlite-th { background: #16213e; border-color: #2a2a4a; }
.my-grid .gridlite-td { border-color: #2a2a4a; }
.my-grid .gridlite-tr:hover { background: #1a1a3e; }