菜单
GridLite styling: row height, column spacing, toolbar layouts, custom CSS classes, theming. Use when customising GridLite appearance.
用 Codex 或 Claude 帮你安装 复制这段 Prompt，粘贴到 Codex、Claude 或其他助手里，让它检查 Skill 页面并帮你完成安装。
基于 SOC 职业分类
| 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; }
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.