القائمة
GridLite column visibility, ordering, resizing, and ColumnPicker component. Use when configuring column display, hiding columns, or setting up drag-to-reorder.
التثبيت باستخدام Codex أو Claude انسخ هذا Prompt والصقه في Codex أو Claude أو مساعد آخر ليراجع صفحة Skill ويثبّتها لك.
استنادا إلى تصنيف SOC المهني
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-column-management |
| description | GridLite column visibility, ordering, resizing, and ColumnPicker component. Use when configuring column display, hiding columns, or setting up drag-to-reorder. |
| user-invocable | true |
<GridLite
features={{ columnVisibility: true }}
config={{
id: 'grid',
defaultVisibleColumns: ['name', 'email', 'department'] // Hide others
}}
/>
The ColumnPicker dropdown appears in the toolbar with:
<GridLite
features={{ columnResizing: true }}
config={{
id: 'grid',
defaultColumnSizing: { name: 250, email: 300 } // Initial widths
}}
/>
table-layout: fixed activates automaticallyonStateChange<GridLite features={{ columnReordering: true }} />
columnOrder state<GridLite
config={{
id: 'grid',
defaultColumnOrder: ['name', 'department', 'title', 'salary']
}}
/>
The ColumnPicker supports:
interface ColumnConfig {
name: string; // Must match database column
label?: string; // Display label
dataType?: 'text' | 'number' | 'date' | 'boolean' | 'select';
format?: (value: unknown) => string;
visible?: boolean;
width?: number; // Default width in px
minWidth?: number;
maxWidth?: number;
}
<GridLite
onStateChange={(state) => {
console.log(state.columnVisibility); // { name: true, email: false }
console.log(state.columnOrder); // ['name', 'department', ...]
console.log(state.columnSizing); // { name: 250, email: 300 }
}}
/>