SVAR Svelte DataGrid

https://github.com/svar-widgets/grid
Admin
SVAR Svelte DataGrid is a high-performance Svelte data grid component for building complex,...
Tokens:55,546
Snippets:634
Trust Score:8.5
License:MIT
Update:3 months ago
Show doc for...
Tokens:
Raw
### Run Test Examples

Source: https://github.com/svar-widgets/grid/blob/main/readme.md

Start the test examples in a separate console.

```bash
yarn start:tests
```

--------------------------------

### Install @svar-ui/grid-store

Source: https://github.com/svar-widgets/grid/blob/main/_autodocs/module-structure.md

This command can be used for direct installation of the grid-store package if needed separately.

```bash
npm install @svar-ui/grid-store
```

--------------------------------

### Complete Grid Configuration Example

Source: https://github.com/svar-widgets/grid/blob/main/_autodocs/configuration.md

A comprehensive example demonstrating the integration of various configuration options including data, columns, sizes, split panes, selection, sorting, filtering, and undo/redo.

```svelte
<script>
  import { Grid, Willow } from '@svar-ui/svelte-grid';
  import { defaultHotkeys } from '@svar-ui/grid-store';
  
  let gridRef;
  
  const data = [
    { id: 1, name: 'Alice', email: 'alice@example.com', status: 'active' },
    { id: 2, name: 'Bob', email: 'bob@example.com', status: 'inactive' }
  ];
  
  const columns = [
    {
      id: 'name',
      header: 'Full Name',
      width: 200,
      editor: 'text',
      sort: true,
      resize: true
    },
    {
      id: 'email',
      header: 'Email Address',
      flexgrow: 1,
      editor: 'text',
      template: (v) => `<a href="mailto:${v}">${v}</a>`
    },
    {
      id: 'status',
      header: {
        text: 'Status',
        filter: 'richselect',
        config: {
          options: [
            { id: 'active', label: 'Active' },
            { id: 'inactive', label: 'Inactive' }
          ]
        }
      },
      editor: {
        type: 'richselect',
        config: {
          options: [
            { id: 'active', label: 'Active' },
            { id: 'inactive', label: 'Inactive' }
          ]
        }
      },
      width: 120
    }
  ];
  
  const sizes = {
    rowHeight: 40,
    headerHeight: 44,
    columnWidth: 150
  };
  
  const split = { left: 200 };
  
  let selectedRows = [];
  let sortMarks = {};
  let filterValues = {};
</script>

<Willow>
  <Grid
    bind:this={gridRef}
    {data}
    {columns}
    {sizes}
    {split}
    {selectedRows}
    {sortMarks}
    {filterValues}
    select={true}
    multiselect={true}
    header={true}
    footer={false}
    reorder={true}
    undo={true}
    hotkeys={defaultHotkeys}
  />
</Willow>
```

--------------------------------

### Install @svar-ui/grid-data-provider

Source: https://github.com/svar-widgets/grid/blob/main/_autodocs/module-structure.md

Use this command to install the data provider package for REST API integration.

```bash
npm install @svar-ui/grid-data-provider
```

--------------------------------

### Basic Svelte Grid Usage with Row Manipulation

Source: https://github.com/svar-widgets/grid/blob/main/_autodocs/api-grid-component.md

This example shows a basic setup for the Svar UI Grid component in Svelte, including data and column definitions. It demonstrates how to bind a reference to the grid instance to call methods like `add-row` and configure features like selection, headers, and hotkeys.

```svelte
<script>
  import { Grid } from '@svar-ui/svelte-grid';
  
  let gridRef;
  let data = [
    { id: 1, name: 'Alice', age: 28 },
    { id: 2, name: 'Bob', age: 35 }
  ];
  
  const columns = [
    {
      id: 'name',
      header: 'Name',
      width: 200,
      editor: 'text',
      sort: true
    },
    {
      id: 'age',
      header: 'Age',
      width: 100,
      editor: 'text',
      sort: true
    }
  ];
  
  async function addRow() {
    await gridRef.exec('add-row', {
      row: { id: 3, name: 'Charlie', age: 42 },
      select: true
    });
  }
</script>

<Grid 
  bind:this={gridRef}
  {data} 
  {columns}
  select={true}
  header={true}
  hotkeys={true}
/>

<button onclick={addRow}>Add Row</button>
```

--------------------------------

### Start Project in Development Mode

Source: https://github.com/svar-widgets/grid/blob/main/readme.md

Run this command to start the project in development mode. This project uses yarn workspaces.

```bash
yarn start
```

--------------------------------

### Complete Svar-UI Grid Example with Components

Source: https://github.com/svar-widgets/grid/blob/main/_autodocs/components-reference.md

A full example demonstrating the integration of the Svar-UI Grid with its associated components like Willow, Toolbar, HeaderMenu, ContextMenu, and Tooltip. Includes basic data and column definitions, and a function to add new rows.

```svelte
<script>
  import { 
    Grid, 
    Willow,
    Toolbar,
    HeaderMenu,
    ContextMenu,
    Tooltip 
  } from '@svar-ui/svelte-grid';
  
  let gridRef;
  
  const data = [
    { id: 1, name: 'Alice', age: 28, email: 'alice@example.com' }
  ];
  
  const columns = [
    { id: 'name', header: 'Name', width: 200, editor: 'text' },
    { id: 'age', header: 'Age', width: 100, editor: 'text' },
    { id: 'email', header: 'Email', flexgrow: 1, editor: 'text' }
  ];
  
  function handleAddRow() {
    gridRef.exec('add-row', { 
      row: { name: 'New Person', age: 0, email: '' },
      select: true
    });
  }
</script>

<Willow>
  <div>
    <!-- Optional toolbar -->
    <div style="margin-bottom: 10px;">
      <button onclick={handleAddRow}>Add Row</button>
    </div>
    
    <!-- Main grid -->
    <Grid
      bind:this={gridRef}
      {data}
      {columns}
      select={true}
      multiselect={true}
    />
    
    <!-- Optional context menus -->
    <HeaderMenu />
    <ContextMenu />
    
    <!-- Tooltips automatically attached -->
  </div>
</Willow>

<style>
  :global(.wx-grid) {
    border: 1px solid #ccc;
  }
</style>
```

--------------------------------

### Example IOption Array

Source: https://github.com/svar-widgets/grid/blob/main/_autodocs/types.md

Demonstrates how to create an array of IOption objects for use in grid editors or filters. This example shows country options.

```typescript
const options: IOption[] = [
  { id: 'us', label: 'United States' },
  { id: 'ca', label: 'Canada' },
  { id: 'mx', label: 'Mexico' }
];
```

--------------------------------

### Install SVAR DataGrid for Svelte 5

Source: https://github.com/svar-widgets/grid/blob/main/readme.md

Use this command to install the datagrid library compatible with Svelte 5.

```bash
npm install @svar-ui/svelte-grid
```

--------------------------------

### Install Dependencies

Source: https://github.com/svar-widgets/grid/blob/main/svelte/readme.md

Install project dependencies using yarn. This project is a monorepo and requires yarn workspaces.

```shell
yarn
```

--------------------------------

### Example of Svelte Hotkeys Action

Source: https://github.com/svar-widgets/grid/blob/main/_autodocs/api-helper-functions.md

Shows how to use the `hotkeys` Svelte action on a `div` element. This example configures a 'ctrl+s' hotkey and provides a handler function to log messages when the hotkey is pressed.

```svelte
<script>
  import { hotkeys } from '@svar-ui/grid-store';
  
  function handleHotkey({ key, event, isInput }) {
    console.log(`Hotkey pressed: ${key}, in input: ${isInput}`);
  }
</script>

<div use:hotkeys={{ keys: { 'ctrl+s': true }, exec: handleHotkey }}>
  Grid content
</div>
```

--------------------------------

### Install SVAR DataGrid for Svelte 4

Source: https://github.com/svar-widgets/grid/blob/main/readme.md

Use this command to install the datagrid library compatible with Svelte 4.

```bash
npm install wx-svelte-grid@1.3.3
```

--------------------------------

### Basic Grid Setup

Source: https://github.com/svar-widgets/grid/blob/main/_autodocs/quick-reference.md

Initialize the Svar Grid with data and column definitions. Ensure necessary imports are included.

```svelte
<script>
  import { Grid } from '@svar-ui/svelte-grid';
  
  const data = [
    { id: 1, name: 'John', age: 30 },
    { id: 2, name: 'Jane', age: 28 }
  ];
  
  const columns = [
    { id: 'name', header: 'Name', width: 200, editor: 'text' },
    { id: 'age', header: 'Age', width: 100, editor: 'text' }
  ];
</script>

<Grid {data} {columns} />
```

--------------------------------

### TypeScript Usage Example

Source: https://github.com/svar-widgets/grid/blob/main/_autodocs/module-structure.md

Demonstrates how to import and use types from `@svar-ui/svelte-grid` and `@svar-ui/grid-store` in a TypeScript project.

```typescript
import { Grid, type IColumn, type IRow } from '@svar-ui/svelte-grid';
import { DataStore, type IData } from '@svar-ui/grid-store';

const columns: IColumn[] = [
  { id: 'name', header: 'Name' }
];

const data: IRow[] = [
  { id: 1, name: 'John' }
];
```

--------------------------------

### Example Grid Sizing Configuration

Source: https://github.com/svar-widgets/grid/blob/main/_autodocs/types.md

Demonstrates how to set custom row height, header height, and column width using the ISizeConfig interface.

```typescript
const sizes: ISizeConfig = {
  rowHeight: 40,
  headerHeight: 44,
  columnWidth: 180
};
```

--------------------------------

### IColumn Usage Example

Source: https://github.com/svar-widgets/grid/blob/main/_autodocs/types.md

Provides an example of an array of `IColumn` objects, defining grid columns with properties like ID, header text, width, editor type, and sortability.

```typescript
const columns: IColumn[] = [
  {
    id: 'name',
    header: 'Name',
    width: 200,
    editor: 'text',
    sort: true,
    resize: true
  },
  {
    id: 'status',
    header: 'Status',
    width: 150,
    editor: {
      type: 'richselect',
      config: {
        options: [
          { id: 'active', label: 'Active' },
          { id: 'inactive', label: 'Inactive' }
        ]
      }
    }
  }
];
```

--------------------------------

### Monorepo Development Scripts

Source: https://github.com/svar-widgets/grid/blob/main/_autodocs/module-structure.md

Scripts to start the development server, including options for running with tests or the documentation site.

```bash
# Start development server with demos
yarn start

# Start with tests
yarn start:tests

# Start documentation site
yarn start:site
```

--------------------------------

### Example Column Sort Configuration

Source: https://github.com/svar-widgets/grid/blob/main/_autodocs/types.md

Shows how to define sort order and index for 'name' and 'age' columns.

```typescript
const sortMarks: ISortMarks = {
  'name': { order: 'asc', index: 1 },
  'age': { order: 'desc', index: 2 }
};
```

--------------------------------

### Full Data Store Usage Example

Source: https://github.com/svar-widgets/grid/blob/main/_autodocs/api-data-store.md

Demonstrates initializing the Data Store, setting initial state, adding an event listener, executing an update action, and retrieving the current state.

```typescript
import { DataStore } from '@svar-ui/grid-store';
import { writable } from 'svelte/store';

const store = new DataStore(writable);

// Initialize data
store.setState({
  data: [
    { id: 1, name: 'Alice', age: 28 },
    { id: 2, name: 'Bob', age: 35 }
  ],
  columns: [
    { id: 'name', header: 'Name', editor: 'text' },
    { id: 'age', header: 'Age', editor: 'text' }
  ]
});

// Add a listener
store.in.on('update-cell', (ev) => {
  console.log('Cell changed:', ev);
});

// Execute an action
await store.in.exec('update-cell', {
  id: 1,
  column: 'name',
  value: 'Alice Updated'
});

// Get current state
const state = store.getState();
console.log(state.data);
```

--------------------------------

### Example Filter Values

Source: https://github.com/svar-widgets/grid/blob/main/_autodocs/types.md

Demonstrates setting filter values for 'name', 'status', and 'date' columns.

```typescript
const filterValues: IFilterValues = {
  'name': 'John',
  'status': 'active',
  'date': new Date('2024-01-01')
};
```

--------------------------------

### Accessor Function Examples

Source: https://github.com/svar-widgets/grid/blob/main/_autodocs/types.md

Demonstrates the usage of ValueGetter and ValueSetter for accessing and modifying simple and nested properties within row objects. Includes an example of configuring a column with these accessors.

```typescript
// Simple property accessor
const getter: ValueGetter = (row) => row.name;
const setter: ValueSetter = (row, value) => { row.name = value; };

// Nested property accessor
const nestedGetter: ValueGetter = (row) => row.user?.profile?.name;
const nestedSetter: ValueSetter = (row, value) => {
  if (!row.user) row.user = {};
  if (!row.user.profile) row.user.profile = {};
  row.user.profile.name = value;
};

const column: IColumn = {
  id: 'name',
  header: 'User Name',
  getter: nestedGetter,
  setter: nestedSetter
};
```

--------------------------------

### Example TEditorHandler Implementation

Source: https://github.com/svar-widgets/grid/blob/main/_autodocs/types.md

Provides an example of a TEditorHandler function that returns a 'richselect' editor with specific options for a 'status' column, otherwise defaulting to a 'text' editor. This demonstrates dynamic editor selection.

```typescript
const editorHandler: TEditorHandler = (row, column) => {
  if (column.id === 'status') {
    return {
      type: 'richselect',
      config: {
        options: getStatusOptions()
      }
    };
  }
  return 'text';
};
```

--------------------------------

### Usage of Default Hotkeys

Source: https://github.com/svar-widgets/grid/blob/main/_autodocs/api-helper-functions.md

Demonstrates how to import and use `defaultHotkeys` to create a custom hotkey configuration for the Grid component. This example shows disabling a hotkey and assigning a custom handler.

```javascript
<script>
  import { defaultHotkeys } from '@svar-ui/grid-store';
  
  let customHotkeys = {
    ...defaultHotkeys,
    'ctrl+s': false,  // Disable save
    'ctrl+a': () => {
      console.log('Custom Ctrl+A handler');
      return false;  // Prevent default
    }
  };
</script>

<Grid hotkeys={customHotkeys} />
```

--------------------------------

### GET List

Source: https://github.com/svar-widgets/grid/blob/main/_autodocs/api-provider.md

Retrieves a list of items from the API.

```APIDOC
## GET /api/items

### Description
Retrieves a list of items from the API.

### Method
GET

### Endpoint
/api/items

### Response
#### Success Response (200)
- `[{ id, ...fields }]` - An array of item objects.
```

--------------------------------

### Example IColumnEditor Configuration

Source: https://github.com/svar-widgets/grid/blob/main/_autodocs/types.md

Shows a sample configuration for a 'richselect' editor, including a list of options and enabling the clear button. Use this to set up custom inline editing experiences.

```typescript
const editor: IColumnEditor = {
  type: 'richselect',
  config: {
    options: [
      { id: 1, label: 'Option 1' },
      { id: 2, label: 'Option 2' }
    ],
    clear: true
  }
};
```

--------------------------------

### Svelte Grid Component Example

Source: https://github.com/svar-widgets/grid/blob/main/_autodocs/api-helper-functions.md

A complete Svelte component demonstrating the integration of the Grid component with various helper functions for data manipulation, sorting, and filtering.

```svelte
<script>
  import {
    Grid,
    defaultToolbarButtons,
    defaultMenuOptions
  } from '@svar-ui/svelte-grid';

  import {
    getEditorConfig,
    getValue,
    setValue,
    createFilter,
    sortByMany,
    defaultHotkeys,
    getRenderValue
  } from '@svar-ui/grid-store';

  let gridRef;
  let data = [...];
  let columns = [...];

  let editorConfig = getEditorConfig(columns);
  let toolbarButtons = defaultToolbarButtons(gridRef?.getState(), gridRef);
  let menuOptions = defaultMenuOptions(gridRef?.getState(), gridRef);

  function customSort() {
    const sortMarks = gridRef.getState().sortMarks;
    const sortArray = Object.entries(sortMarks).map(([key, { order }]) => ({
      key,
      order
    }));
    const compareFn = sortByMany(sortArray, columns);
    data = data.sort(compareFn);
  }

  function customFilter() {
    const filterValues = gridRef.getState().filterValues;
    const filterFn = createFilter(filterValues, columns);
    return data.filter(filterFn);
  }
</script>

<Grid
  bind:this={gridRef}
  {data}
  {columns}
  hotkeys={defaultHotkeys}
/>
```

--------------------------------

### Advanced Grid Import with Willow and DataStore

Source: https://github.com/svar-widgets/grid/blob/main/_autodocs/module-structure.md

Import advanced components like Willow and DataStore for more complex grid setups. Utilizes RestDataProvider for data fetching.

```svelte
<script>
  import { Grid, Willow } from '@svar-ui/svelte-grid';
  import { DataStore } from '@svar-ui/grid-store';
  import RestDataProvider from '@svar-ui/grid-data-provider';
  import type { IColumn, IRow, IData } from '@svar-ui/grid-store';
  
  let gridRef;
  let data: IRow[] = [];
  const columns: IColumn[] = [
    { id: 'name', header: 'Name' }
  ];
  
  const provider = new RestDataProvider('/api/items');
</script>

<Willow>
  <Grid bind:this={gridRef} {data} {columns} />
</Willow>
```

--------------------------------

### TColumnHeader Usage Examples

Source: https://github.com/svar-widgets/grid/blob/main/_autodocs/types.md

Illustrates different ways to define column headers, from simple text to complex objects and multi-level structures.

```typescript
// Simple header
{
  id: 'name',
  header: 'Name'
}
```

```typescript
// Complex header
{
  id: 'name',
  header: {
    text: 'Name',
    filter: 'text',
    collapsible: true
  }
}
```

```typescript
// Multi-level header
{
  id: 'name',
  header: [
    { text: 'Person', colspan: 2, collapsible: 'header' },
    { text: 'First Name', filter: 'text' }
  ]
}
```

--------------------------------

### Get Header/Footer Cells for Printing

Source: https://github.com/svar-widgets/grid/blob/main/_autodocs/api-helper-functions.md

Retrieves configurations for header or footer cells specifically for printing purposes.

```typescript
function getHeaderFooterPrintColumns(
  state: IData, 
  columns: IColumn[], 
  type: TColumnType
): IRenderHeaderCell[]
```

--------------------------------

### Complete Svelte Grid Example with RestDataProvider

Source: https://github.com/svar-widgets/grid/blob/main/_autodocs/api-provider.md

A comprehensive Svelte component demonstrating the integration of Svar Grid with RestDataProvider. It includes data loading, column definitions, and API synchronization for add, delete, update-row, and update-cell actions.

```svelte
<script>
  import { Grid } from '@svar-ui/svelte-grid';
  import RestDataProvider from '@svar-ui/grid-data-provider';
  
  let gridRef;
  let data = [];
  let loading = false;
  
  const normalize = (row) => {
    row.dateCreated = new Date(row.dateCreated);
    return row;
  };
  
  const provider = new RestDataProvider('/api/users', normalize);
  
  const columns = [
    { id: 'name', header: 'Name', width: 200, editor: 'text', sort: true },
    { id: 'email', header: 'Email', width: 250, editor: 'text', sort: true },
    { id: 'role', header: 'Role', width: 150, editor: {
      type: 'richselect',
      config: {
        options: [
          { id: 'admin', label: 'Admin' },
          { id: 'user', label: 'User' }
        ]
      }
    }}
  ];
  
  async function loadData() {
    loading = true;
    try {
      data = await provider.getData();
    } catch (error) {
      console.error('Failed to load data:', error);
    } finally {
      loading = false;
    }
  }
  
  function setupApiSync() {
    const handlers = provider.getHandlers();
    
    // Sync add-row action to API
    gridRef.intercept('add-row', async (ev) => {
      try {
        await handlers['add-row'].handler(ev);
      } catch (error) {
        console.error('Failed to add row:', error);
        return false;  // Cancel action in grid
      }
    });
    
    // Sync delete-row action to API
    gridRef.intercept('delete-row', async (ev) => {
      try {
        await handlers['delete-row'].handler(ev);
      } catch (error) {
        console.error('Failed to delete row:', error);
        return false;
      }
    });
    
    // Sync update-row action to API
    gridRef.intercept('update-row', async (ev) => {
      try {
        await handlers['update-row'].handler(ev);
      } catch (error) {
        console.error('Failed to update row:', error);
        return false;
      }
    });
    
    // Sync update-cell action to API
    gridRef.intercept('update-cell', async (ev) => {
      try {
        await handlers['update-cell'].handler(ev);
      } catch (error) {
        console.error('Failed to update cell:', error);
        return false;
      }
    });
  }
  
  onMount(() => {
    loadData();
    setupApiSync();
  });
</script>

{#if loading}
  <p>Loading...</p>
{:else}
  <Grid 
    bind:this={gridRef}
    {data} 
    {columns}
    select={true}
  />
{/if}
```

--------------------------------

### Import Utility Functions

Source: https://github.com/svar-widgets/grid/blob/main/_autodocs/module-structure.md

Import various utility functions for filtering, sorting, getting editor configurations, values, and render values from '@svar-ui/grid-store'.

```typescript
import {
  createFilter,
  sortByMany,
  getEditorConfig,
  getValue,
  setValue,
  getRenderValue,
  defaultHotkeys,
  defaultMenuOptions,
  defaultToolbarButtons
} from '@svar-ui/grid-store';
```

--------------------------------

### Setup Grid with RestDataProvider

Source: https://github.com/svar-widgets/grid/blob/main/_autodocs/api-provider.md

Integrate RestDataProvider with Svar UI Svelte Grid. Load initial data and attach provider handlers to grid events. Ensure the grid instance is bound and columns are defined.

```typescript
<script>
  import { Grid } from '@svar-ui/svelte-grid';
  import RestDataProvider from '@svar-ui/grid-data-provider';

  let grid;
  let data = [];
  
  const provider = new RestDataProvider('/api/items');
  
  onMount(async () => {
    // Load initial data
    data = await provider.getData();
    
    // Attach provider to grid
    const handlers = provider.getHandlers();
    Object.entries(handlers).forEach(([action, handler]) => {
      grid.on(action, async (ev) => {
        try {
          const result = await handler.handler(ev);
          // Handle success
        } catch (error) {
          console.error('Action failed:', error);
        }
      });
    });
  });
</script>

<Grid bind:this={grid} {data} columns={[...]} />
```

--------------------------------

### IRow Usage Example

Source: https://github.com/svar-widgets/grid/blob/main/_autodocs/types.md

Demonstrates how to define a row object conforming to the `IRow` interface, including custom row height.

```typescript
const row: IRow = {
  id: 1,
  name: 'John Doe',
  email: 'john@example.com',
  rowHeight: 50  // Custom height
};
```

--------------------------------

### Import Grid Locale Data

Source: https://github.com/svar-widgets/grid/blob/main/_autodocs/module-structure.md

Import locale data for UI strings used internally by the Grid. Ensure the `@svar-ui/grid-locales` package is installed.

```typescript
import { en } from '@svar-ui/grid-locales';

// Used internally by Grid for UI strings
```

--------------------------------

### DataStore Initialization and Actions

Source: https://github.com/svar-widgets/grid/blob/main/_autodocs/README.md

Demonstrates how to initialize the DataStore and execute actions like adding a row or listening for cell updates.

```typescript
import { DataStore } from '@svar-ui/grid-store';

const store = new DataStore(writable);
store.in.exec('add-row', { row: {...} });
store.in.on('update-cell', (ev) => {...});
```

--------------------------------

### Get Default Context Menu Options

Source: https://github.com/svar-widgets/grid/blob/main/_autodocs/api-helper-functions.md

Retrieve the default options for the grid's context menu. This function returns an array of menu item configurations, such as 'add row' and 'delete row'.

```typescript
import { defaultMenuOptions } from '@svar-ui/grid-store';

const menuItems = defaultMenuOptions(gridState, gridApi);
// Returns array of menu item configs (add row, delete row, etc.)
```

--------------------------------

### Initialize DataStore

Source: https://github.com/svar-widgets/grid/blob/main/_autodocs/module-structure.md

Import and instantiate the DataStore from '@svar-ui/grid-store' for managing grid state. It requires a writable store as an argument.

```typescript
import { DataStore } from '@svar-ui/grid-store';
import { writable } from 'svelte/store';

const store = new DataStore(writable);
```

--------------------------------

### REST API Contract: GET List

Source: https://github.com/svar-widgets/grid/blob/main/_autodocs/api-provider.md

Defines the expected structure for retrieving a list of items via a GET request. The response should be an array of objects, each containing an 'id' and other fields.

```http
GET /api/items
Response: [{ id, ...fields }]
Status: 200
```

--------------------------------

### Get Column by ID

Source: https://github.com/svar-widgets/grid/blob/main/_autodocs/api-data-store.md

Retrieves a column definition object by its unique ID.

```typescript
getColumn(columnId: TID): IColumn
```

```typescript
const col = store.getColumn('name');
console.log(col.width);
console.log(col.editor);
```

--------------------------------

### Get Cell Styles for Printing

Source: https://github.com/svar-widgets/grid/blob/main/_autodocs/api-helper-functions.md

Determines the appropriate CSS styles for a cell when it is being printed.

```typescript
function getPrintCellStyle(
  state: IData, 
  row: IRow, 
  col: IColumn
): any
```

--------------------------------

### Get Columns for Printing

Source: https://github.com/svar-widgets/grid/blob/main/_autodocs/api-helper-functions.md

Filters columns to include only those that are visible and not hidden, preparing them for printing.

```typescript
function getPrintColumns(state: IData, columns: IColumn[]): IColumn[]
```

--------------------------------

### Configure Responsive Grid Layout

Source: https://github.com/svar-widgets/grid/blob/main/_autodocs/configuration.md

Adapt the Grid layout for different screen sizes using the `responsive` configuration. Define `breakpoints` with specific `width` thresholds to `hideColumns`.

```svelte
<script>
  const responsive = {
    breakpoints: [
      { width: 768, hideColumns: ['description', 'notes'] },
      { width: 480, hideColumns: ['description', 'notes', 'email'] }
    ]
  };
</script>

<Grid {data} {columns} {responsive} />
```

--------------------------------

### Basic Grid Component Usage

Source: https://github.com/svar-widgets/grid/blob/main/_autodocs/components-reference.md

Import and use the main Grid component with data and columns. Ensure 'data' and 'columns' are defined in your script.

```svelte
<script>
  import { Grid } from '@svar-ui/svelte-grid';
</script>

<Grid {data} {columns} />
```

--------------------------------

### getRenderValue

Source: https://github.com/svar-widgets/grid/blob/main/_autodocs/api-helper-functions.md

Gets the rendered string value of a cell, applying templates and option mapping for display.

```APIDOC
## getRenderValue(row, col)

### Description
Get the rendered string value of a cell (applies templates and option mapping).

### Signature
```typescript
function getRenderValue(row: IRow, col: IColumn): string
```

### Parameters
#### Path Parameters
- **row** (IRow) - Row object
- **col** (IColumn) - Column definition

### Example
```typescript
import { getRenderValue } from '@svar-ui/grid-store';

const row = { id: 1, status: 'active' };
const col = {
  id: 'status',
  optionsMap: new Map([
    ['active', 'Active'],
    ['inactive', 'Inactive']
  ])
};

const displayValue = getRenderValue(row, col);  // 'Active'
```
```

--------------------------------

### Import Supporting Grid Components

Source: https://github.com/svar-widgets/grid/blob/main/_autodocs/module-structure.md

Import various supporting components such as Toolbar, Menus, and Tooltip alongside the main Grid component for enhanced functionality.

```svelte
<script>
  import { 
    Grid,
    Toolbar,
    HeaderMenu,
    ContextMenu,
    Tooltip
  } from '@svar-ui/svelte-grid';
</script>
```

--------------------------------

### Get Filter Display Value for Printing

Source: https://github.com/svar-widgets/grid/blob/main/_autodocs/api-helper-functions.md

Retrieves the display value of a filter for use in printed output.

```typescript
function getPrintFilterValue(state: IData, col: IColumn): any
```

--------------------------------

### Get Row by ID

Source: https://github.com/svar-widgets/grid/blob/main/_autodocs/api-data-store.md

Retrieves a specific row object by its unique ID from the current grid data.

```typescript
getRow(rowId: TID): IRow
```

```typescript
const row = store.getRow('row-1');
console.log(row.name);
```

--------------------------------

### Get Specific Row

Source: https://github.com/svar-widgets/grid/blob/main/_autodocs/api-grid-component.md

Retrieve a specific row object from the grid using its unique row ID.

```svelte
<script>
  let gridRef;
  
  function editRow(rowId) {
    const row = gridRef.getRow(rowId);
    console.log('Row data:', row);
  }
</script>

<Grid bind:this={gridRef} {data} {columns} />
```

--------------------------------

### DataStore Constructor

Source: https://github.com/svar-widgets/grid/blob/main/_autodocs/api-data-store.md

Creates a new DataStore instance. It requires a writable store creator function to manage its internal state.

```APIDOC
## DataStore Constructor

### Description
Creates a new DataStore instance with the given writable store creator function.

### Parameters
#### Path Parameters
None

#### Query Parameters
None

#### Request Body
None

### Parameters
- **w** (`TWritableCreator`) - Required - Svelte writable store creator function (typically `writable` from 'svelte/store')

### Request Example
```typescript
import { DataStore } from '@svar-ui/grid-store';
import { writable } from 'svelte/store';

const store = new DataStore(writable);
```

### Response
#### Success Response (200)
None

#### Response Example
None
```

--------------------------------

### DataStore Dependencies

Source: https://github.com/svar-widgets/grid/blob/main/_autodocs/module-structure.md

Details the dependencies for the `@svar-ui/grid-store` module, highlighting its reliance on state utilities, localization, and DOM utilities.

```plaintext
@svar-ui/grid-store
├── @svar-ui/lib-state       (EventBus, Store)
├── @svar-ui/grid-locales    (translations)
└── @svar-ui/lib-dom         (DOM utilities)
```

--------------------------------

### Get Selected Rows State

Source: https://github.com/svar-widgets/grid/blob/main/_autodocs/quick-reference.md

Retrieves the current state of the grid, including an array of selected row IDs.

```typescript
const state = grid.getState();
console.log(state.selectedRows);  // Array of selected row IDs
```

--------------------------------

### Basic Grid Import

Source: https://github.com/svar-widgets/grid/blob/main/_autodocs/module-structure.md

Import and use the basic Grid component from '@svar-ui/svelte-grid'. Requires 'data' and 'columns' props.

```svelte
<script>
  import { Grid } from '@svar-ui/svelte-grid';
  
  let data = [];
  let columns = [];
</script>

<Grid {data} {columns} />
```

--------------------------------

### Example Custom Filter Handler

Source: https://github.com/svar-widgets/grid/blob/main/_autodocs/types.md

Implements a custom filter handler that checks if a cell value includes a specified filter value.

```typescript
const customFilter: TFilterHandler = (cellValue, filterValue) => {
  if (!filterValue) return true;
  return cellValue && cellValue.includes(filterValue);
};
```

--------------------------------

### on(action, callback, config?)

Source: https://github.com/svar-widgets/grid/blob/main/_autodocs/api-grid-component.md

Subscribes to grid events. The provided callback function is executed after a specified action is completed.

```APIDOC
## on(action, callback, config?)

### Description
Subscribe to grid events. Callback fires after action completes.

### Parameters
#### Path Parameters
- **action** (string) - Required - Action/event name
- **callback** (function) - Required - Handler function
- **config** (object) - Optional - Optional event configuration (e.g., `{ tag: 'my-listener' }`)

### Example
```svelte
<script>
  let gridRef;
  
  function setupListeners() {
    gridRef.on('select-row', (ev) => {
      console.log('Row selected:', ev.id);
    });
    
    gridRef.on('update-cell', (ev) => {
      console.log(`Cell [${ev.id}:${ev.column}] updated to`, ev.value);
    });
  }
</script>

<Grid bind:this={gridRef} {data} {columns} onmount={setupListeners} />
```
```

--------------------------------

### Example Custom Sort Function

Source: https://github.com/svar-widgets/grid/blob/main/_autodocs/types.md

Provides a custom sorting function based on a 'score' property, handling potential undefined values.

```typescript
const customSort: TSortFunction = (a, b) => {
  const aVal = a.score || 0;
  const bVal = b.score || 0;
  return aVal > bVal ? 1 : aVal < bVal ? -1 : 0;
};

const column: IColumn = {
  id: 'score',
  header: 'Score',
  sort: customSort
};
```

--------------------------------

### Using the DataStore 'in' Event Bus

Source: https://github.com/svar-widgets/grid/blob/main/_autodocs/api-data-store.md

Shows how to use the 'in' event bus to dispatch actions like 'add-row' and listen for events such as 'update-cell'.

```typescript
const store = new DataStore(writable);
store.in.exec('add-row', { row: { id: 1, name: 'John' } });
store.in.on('update-cell', (ev) => console.log('Cell updated:', ev));
```

--------------------------------

### Monorepo Build Scripts

Source: https://github.com/svar-widgets/grid/blob/main/_autodocs/module-structure.md

Commands for building dependencies, individual packages, and the entire project within the monorepo. Includes watch options for continuous building.

```bash
# Build all dependencies
yarn build:deps

# Build individual packages
yarn build:store      # Build store package
yarn build:provider   # Build provider package
yarn build            # Build everything + svelte

# Watch for changes
yarn watch
yarn watch:store
yarn watch:provider
```

--------------------------------

### Get Package Version Stamp

Source: https://github.com/svar-widgets/grid/blob/main/_autodocs/api-helper-functions.md

Retrieves the package version stamp. This function is useful for identifying the specific version of the package being used.

```typescript
function getStamp(): string
```

--------------------------------

### Load Data into Svelte Grid

Source: https://github.com/svar-widgets/grid/blob/main/_autodocs/README.md

Initialize the grid with data and column definitions in a Svelte component.

```svelte
<script>
  import { Grid } from '@svar-ui/svelte-grid';
  
  let data = [
    { id: 1, name: 'Alice', age: 28 },
    { id: 2, name: 'Bob', age: 35 }
  ];
  
  const columns = [
    { id: 'name', header: 'Name', width: 200 },
    { id: 'age', header: 'Age', width: 100 }
  ];
</script>

<Grid {data} {columns} />
```

--------------------------------

### Get Grid Column Definition

Source: https://github.com/svar-widgets/grid/blob/main/_autodocs/api-grid-component.md

Retrieve a specific column definition using its ID. Useful for dynamically modifying or inspecting column configurations.

```typescript
getColumn(columnId: TID): IColumn
```

```svelte
<script>
  let gridRef;
  
  function configureColumn(colId) {
    const col = gridRef.getColumn(colId);
    console.log('Column settings:', col);
  }
</script>

<Grid bind:this={gridRef} {data} {columns} />
```

--------------------------------

### DataStore.in

Source: https://github.com/svar-widgets/grid/blob/main/_autodocs/api-data-store.md

Provides access to an EventBus for executing and listening to grid actions. Use this to dispatch actions like add-row, update-cell, etc.

```APIDOC
## Properties: in

### Description
Event bus for executing and listening to grid actions. Use this to dispatch actions like add-row, update-cell, etc.

### Type
`EventBus<TMethodsConfig, keyof TMethodsConfig>`

### Example
```typescript
const store = new DataStore(writable);
store.in.exec('add-row', { row: { id: 1, name: 'John' } });
store.in.on('update-cell', (ev) => console.log('Cell updated:', ev));
```
```

--------------------------------

### Basic SVAR Svelte DataGrid Integration

Source: https://github.com/svar-widgets/grid/blob/main/readme.md

Import the Grid component and include it in your Svelte file with data and column definitions.

```svelte
<script>
	import { Grid } from "@svar-ui/svelte-grid";

	const data = [
		{
			id: 12,
			name: "Alex Brown",
			year: 1974,
		},
	];
	const columns = [
		{
			id: "name",
			header: "Title",
			flexgrow: 1,
			sort: true,
			editor: "text",
		},
		{
			id: "year",
			header: "Year",
			width: 100,
			sort: true,
			editor: "text",
		},
	];
</script>

<Grid {data} {columns} />
```

--------------------------------

### Access Grid Data Store

Source: https://github.com/svar-widgets/grid/blob/main/_autodocs/api-grid-component.md

Get the internal data store instance for advanced usage. This provides direct access to the grid's data state.

```typescript
getStores(): { data: DataStore }
```

```svelte
<script>
  let gridRef;
  
  function getStore() {
    const stores = gridRef.getStores();
    const state = stores.data.getState();
  }
</script>

<Grid bind:this={gridRef} {data} {columns} />
```

--------------------------------

### Custom Keyboard Shortcuts

Source: https://github.com/svar-widgets/grid/blob/main/_autodocs/README.md

Customize keyboard shortcuts by merging custom hotkeys with the `defaultHotkeys` from `@svar-ui/grid-store`. Provide a handler function for each shortcut.

```svelte
<script>
  import { defaultHotkeys } from '@svar-ui/grid-store';
  
  const hotkeys = {
    ...defaultHotkeys,
    'ctrl+a': (event) => {
      event.preventDefault();
      console.log('Custom Ctrl+A');
    }
  };
</script>

<Grid {data} {columns} {hotkeys} />
```

--------------------------------

### Get Reactive Grid State

Source: https://github.com/svar-widgets/grid/blob/main/_autodocs/api-grid-component.md

Obtain Svelte stores for each grid state property, enabling reactive subscriptions to changes in data, selections, and other state elements.

```svelte
<script>
  let gridRef;
  let selectedRows;
  
  function subscribeToSelection() {
    const state = gridRef.getReactiveState();
    selectedRows = state.selectedRows;
  }
  
  $: if ($selectedRows) {
    console.log('Selected:', $selectedRows);
  }
</script>

<Grid bind:this={gridRef} {data} {columns} />
```

--------------------------------

### in.on(action, callback, config?)

Source: https://github.com/svar-widgets/grid/blob/main/_autodocs/api-data-store.md

Subscribe to actions after they complete. The callback function receives an event object containing details about the action.

```APIDOC
## `in.on(action, callback, config?)`

### Description
Subscribe to actions after they complete. The callback function receives an event object containing details about the action.

### Parameters
#### Arguments
- **action** (string) - The name of the action to listen for.
- **callback** (function) - The function to execute when the action completes.
- **config?** (object) - Optional configuration object.

### Example
```typescript
store.in.on('update-cell', (ev) => {
  console.log('Cell updated:', ev.id, ev.column, ev.value);
});
```
```

--------------------------------

### Scroll to Position with Svelte Action

Source: https://github.com/svar-widgets/grid/blob/main/_autodocs/api-helper-functions.md

Svelte action to manage scroll position. It requires a scroll configuration store and functions to get container dimensions and scroll margins.

```typescript
function scrollTo(
  node: HTMLElement,
  config: {
    scroll: any;
    scrollLeft?: any;
    scrollTop?: any;
    getHeight: () => number;
    getWidth: () => number;
    getScrollMargin: () => number;
  }
): void
```

```svelte
<script>
  import { scrollTo } from '@svar-ui/grid-store';
</script>

<div 
  use:scrollTo={{
    scroll: store.scroll,
    getHeight: () => element.clientHeight,
    getWidth: () => element.clientWidth,
    getScrollMargin: () => 0
  }}
/>
```

--------------------------------

### defaultHotkeys Configuration

Source: https://github.com/svar-widgets/grid/blob/main/_autodocs/api-helper-functions.md

Provides the default keyboard shortcut configuration for the grid. Each key can be enabled/disabled or assigned a custom handler.

```APIDOC
## `defaultHotkeys`

### Description
Default keyboard shortcut configuration. Each key maps to a boolean (enabled/disabled) or a custom handler function.

### Usage Example
```javascript
let customHotkeys = {
  ...defaultHotkeys,
  'ctrl+s': false,  // Disable save
  'ctrl+a': () => {
    console.log('Custom Ctrl+A handler');
    return false;  // Prevent default
  }
};
```
```

--------------------------------

### Get Editor Configuration from Columns

Source: https://github.com/svar-widgets/grid/blob/main/_autodocs/api-helper-functions.md

Extracts editor configuration from an array of column definitions. Useful for dynamically creating external editor panels based on column settings.

```typescript
function getEditorConfig(columns: IColumn[]): Array<{
  key: TID;
  label: TColumnHeader;
  options?: IOption[];
  comp: TEditorType | string;
  [key: string]: any;
}>
```

```typescript
import { getEditorConfig } from '@svar-ui/grid-store';

const columns = [
  { id: 'name', header: 'Name', editor: 'text' },
  {
    id: 'status',
    header: 'Status',
    editor: {
      type: 'richselect',
      config: { options: [...] }
    }
  }
];

const editorConfig = getEditorConfig(columns);
// Returns: [
//   { key: 'name', label: 'Name', comp: 'text' },
//   { key: 'status', label: 'Status', comp: 'richselect', options: [...] }
// ]
```

--------------------------------

### Grid Sizing Configuration Interface

Source: https://github.com/svar-widgets/grid/blob/main/_autodocs/types.md

Defines the properties for configuring row, header, and footer heights, as well as default column width.

```typescript
interface ISizeConfig {
  rowHeight?: number;
  headerHeight?: number;
  footerHeight?: number;
  columnWidth?: number;
}
```

--------------------------------

### Get Grid State

Source: https://github.com/svar-widgets/grid/blob/main/_autodocs/api-grid-component.md

Retrieve the entire current state of the grid, including data, columns, filters, and sort information. Useful for debugging or persisting grid state.

```svelte
<script>
  let gridRef;
  
  function logState() {
    const state = gridRef.getState();
    console.log('Current data:', state.data);
    console.log('Sorted columns:', state.sortMarks);
  }
</script>

<Grid bind:this={gridRef} {data} {columns} />
<button onclick={logState}>Log State</button>
```

--------------------------------

### Instantiate RestDataProvider

Source: https://github.com/svar-widgets/grid/blob/main/_autodocs/module-structure.md

Import and create an instance of RestDataProvider from '@svar-ui/grid-data-provider', specifying the API endpoint URL.

```typescript
import RestDataProvider from '@svar-ui/grid-data-provider';

const provider = new RestDataProvider('/api/items');
```

--------------------------------

### Column Width Configuration

Source: https://github.com/svar-widgets/grid/blob/main/_autodocs/configuration.md

Configure column widths using fixed pixel values or flexible sizing. Flexible columns distribute available space based on their 'flexgrow' value.

```typescript
// Fixed width
{ id: 'name', width: 200 }

// Flexible width
{ id: 'description', flexgrow: 1 }

// Mix of fixed and flexible
const columns = [
  { id: 'id', width: 50 },
  { id: 'name', flexgrow: 2 },
  { id: 'desc', flexgrow: 1 },
  { id: 'actions', width: 100 }
];
```

--------------------------------

### Get Rendered Cell Value for Export

Source: https://github.com/svar-widgets/grid/blob/main/_autodocs/api-helper-functions.md

Obtain the string representation of a cell's value, applying any configured templates and option mappings. This is useful for exporting data accurately.

```typescript
import { getRenderValue } from '@svar-ui/grid-store';

const row = { id: 1, status: 'active' };
const col = {
  id: 'status',
  optionsMap: new Map([
    ['active', 'Active'],
    ['inactive', 'Inactive']
  ])
};

const displayValue = getRenderValue(row, col);  // 'Active'
```

--------------------------------

### Access Grid API Instance

Source: https://github.com/svar-widgets/grid/blob/main/_autodocs/quick-reference.md

Bind the grid instance to a variable using 'bind:this' to access its API methods like 'exec', 'on', and 'getState'.

```svelte
<script>
  let gridRef;
  
  function handleClick() {
    gridRef.exec(...);
    gridRef.on(...);
    const state = gridRef.getState();
  }
</script>

<Grid bind:this={gridRef} {data} {columns} />
```

--------------------------------

### Get Specific Filter Handler

Source: https://github.com/svar-widgets/grid/blob/main/_autodocs/api-helper-functions.md

Retrieves the appropriate filter handler function for a given filter type. Use this to dynamically apply filtering logic based on the specified type.

```typescript
function getFilterHandler(type: TFilterType): TFilterHandler
```

--------------------------------

### Dynamic Column Rendering

Source: https://github.com/svar-widgets/grid/blob/main/_autodocs/README.md

For grids with a large number of columns (50+), utilize the `dynamic` prop with `columnCount` to optimize rendering by only rendering visible columns.

```svelte
<Grid {data} {columns} dynamic={{ columnCount: 100 }} />
```

--------------------------------

### Enable Row Selection in Grid

Source: https://github.com/svar-widgets/grid/blob/main/_autodocs/configuration.md

Configure the Grid for row selection. Set `select={true}` to enable selection and `multiselect={true}` for multiple selections. Use `bind:selectedRows` for two-way binding of selected row IDs.

```svelte
<script>
  let selectedRows = ['row-1', 'row-2'];
</script>

<Grid 
  {data}
  {columns}
  select={true}           // Enable selection
  multiselect={true}      // Allow multiple selection
  bind:selectedRows       // Two-way binding
/>
```

--------------------------------

### Get Default Toolbar Buttons

Source: https://github.com/svar-widgets/grid/blob/main/_autodocs/api-helper-functions.md

Use this function to obtain the default configuration for toolbar buttons in the grid. It returns an array of button configurations, each including an icon, label, and click handler.

```typescript
import { defaultToolbarButtons } from '@svar-ui/grid-store';

const buttons = defaultToolbarButtons(gridState, gridApi);
// Returns array of button configs with icons, labels, and click handlers
```

--------------------------------

### Grid Component Dependencies

Source: https://github.com/svar-widgets/grid/blob/main/_autodocs/module-structure.md

Lists the direct dependencies for the `@svar-ui/svelte-grid` component, including state management, localization, core UI, toolbar, menus, and utility libraries.

```plaintext
@svar-ui/svelte-grid
├── @svar-ui/grid-store      (state management)
├── @svar-ui/grid-locales    (translations)
├── @svar-ui/svelte-core     (core UI components)
├── @svar-ui/svelte-toolbar  (toolbar)
├── @svar-ui/svelte-menu     (menus)
├── @svar-ui/lib-svelte      (Svelte utilities)
├── @svar-ui/lib-state       (state utilities)
└── @svar-ui/lib-dom         (DOM utilities)
```

--------------------------------

### Single-Level Header Configuration

Source: https://github.com/svar-widgets/grid/blob/main/_autodocs/configuration.md

Configure a simple header with an ID and text. Use for basic column display.

```typescript
{ id: 'name', header: 'Name' }
```

```typescript
{
  id: 'status',
  header:
    {
      text: 'Status',
      filter: 'richselect',
      config: { options: [...] }
    }
}
```

--------------------------------

### Get Cell Value from Row and Column

Source: https://github.com/svar-widgets/grid/blob/main/_autodocs/api-helper-functions.md

Retrieves a cell's value from a given row object using the column definition. It supports direct property access or custom getter functions defined in the column.

```typescript
function getValue(row: IRow, col: IColumn): any
```

```typescript
import { getValue } from '@svar-ui/grid-store';

const row = { id: 1, name: 'John', profile: { email: 'john@example.com' } };

// Direct property
const col1 = { id: 'name', header: 'Name' };
const name = getValue(row, col1);  // 'John'

// Custom getter
const col2 = {
  id: 'email',
  header: 'Email',
  getter: (r) => r.profile?.email
};
const email = getValue(row, col2);  // 'john@example.com'
```
Tokens:
Raw