### Install RevoGrid for Vue 3

Source: https://github.com/revolist/revogrid/blob/main/readme/vue3.usage.md

Instructions for installing the RevoGrid Vue 3 package using either npm or yarn package managers.

```bash
npm i @revolist/vue3-datagrid --save;
```

```bash
yarn add @revolist/vue3-datagrid;
```

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

### Install RevoGrid with Yarn

Source: https://github.com/revolist/revogrid/blob/main/readme/install.md

This command installs the RevoGrid library using the Yarn package manager. Yarn is an alternative to npm for managing project dependencies.

```bash
yarn add @revolist/revogrid;
```

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

### Install RevoGrid Svelte Package

Source: https://github.com/revolist/revogrid/blob/main/readme/svelte.usage.md

Instructions for installing the RevoGrid Svelte data grid package using npm or yarn package managers.

```bash
npm i @revolist/svelte-datagrid
```

```bash
yarn add @revolist/svelte-datagrid;
```

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

### Install RevoGrid Vue 2 with NPM

Source: https://github.com/revolist/revogrid/blob/main/readme/vue2.usage.md

Command to install the RevoGrid Vue 2 datagrid package using npm. This package provides the necessary components for integrating RevoGrid into a Vue 2 application.

```bash
npm i @revolist/vue2-datagrid --save;
```

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

### Basic RevoGrid JavaScript Usage

Source: https://github.com/revolist/revogrid/blob/main/readme.md

Demonstrates how to select the RevoGrid element from the DOM and programmatically define its columns and data source using JavaScript. This example illustrates a simple setup for displaying structured data within the grid component.

```javascript
// Select the RevoGrid element from the DOM
const grid = document.querySelector('revo-grid');

// Define the columns for the grid
grid.columns = [{ prop: 'name', name: 'First Column' }, { prop: 'details' }];
// Define the data source for the grid
grid.source = [{ name: 'New Item', details: 'Item Description' }];
```

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

### Vue 3 RevoGrid Basic Usage and Customization (App.vue)

Source: https://github.com/revolist/revogrid/blob/main/readme/vue3.usage.md

An example Vue 3 component (`App.vue`) demonstrating how to integrate RevoGrid, define columns and data source, register custom editors and cell templates, and handle grid events like cell clicks and custom actions.

```vue
// App.vue
<template>
    <Grid
      :editors="gridEditors"
      :source="source"
      :columns="columns"
      @cell-custom-action="testCustomCellAction"
      @cell-click="testAction"
    />
</template>

<script lang="ts" setup>
/**
 * This is an example of a Vue3 component using Revogrid
 */
import { provide, readonly, ref } from 'vue';
/**
 * Import Revogrid, Renderer and Editor for Vue
 */
import Grid, { VGridVueEditor, VGridVueTemplate, Editors } from '@revolist/vue3-datagrid';

import Editor from './Editor.vue';
import Cell from './Cell.vue';

const count = ref(0)
provide('read-only-count', readonly(count));

const MY_EDITOR = 'custom-editor';

// Vue column editor register
const gridEditors: Editors = { [MY_EDITOR]: VGridVueEditor(Editor) };

// Define columns
const columns = [
  {
    prop: 'name',
    name: 'First',
    // editor type
    editor: MY_EDITOR,
    // vue cell component register
    cellTemplate: VGridVueTemplate(Cell),
  },
  {
    prop: 'details',
    name: 'Second',
  },
];
// Define source
const source = [
  {
    name: '1',
    details: 'Item 1',
  },
  {
    name: '2',
    details: 'Item 2',
  },
];

// For testing events
function testCustomCellAction(e: CustomEvent) {
  console.log('Custom cell action', e);
}
function testAction(e: CustomEvent) {
  console.log('Editor action', e);
}
</script>
```

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

### Install RevoGrid with NPM

Source: https://github.com/revolist/revogrid/blob/main/readme/install.md

This command installs the RevoGrid library as a scoped NPM package using the npm package manager. The '--save' flag adds the package to the dependencies in your project's package.json file.

```bash
npm i @revolist/revogrid --save;
```

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

### Install RevoGrid Package

Source: https://github.com/revolist/revogrid/blob/main/readme.md

Instructions for installing the RevoGrid library using popular JavaScript package managers like NPM and Yarn. These commands add the package as a dependency to your project, making it available for use in your application.

```bash
npm i @revolist/revogrid --save;
```

```bash
yarn add @revolist/revogrid;
```

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

### Install RevoGrid Angular DataGrid

Source: https://github.com/revolist/revogrid/blob/main/readme/angular.usage.md

Instructions for installing the RevoGrid Angular DataGrid library using either npm or yarn package managers.

```bash
npm i @revolist/angular-datagrid --save;
```

```bash
yarn add @revolist/angular-datagrid;
```

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

### Basic RevoGrid Vue 2 Usage in App Component

Source: https://github.com/revolist/revogrid/blob/main/readme/vue2.usage.md

Demonstrates how to integrate and use the VGrid component in a Vue 2 application. This example shows defining columns, binding a data source, importing the necessary components, and registering VGrid for use in the template. It also illustrates how to use a custom cell template.

```vue
// App.vue

<template>
  <!-- Use the VGrid component and bind the data source and columns -->
  <v-grid :source="rows" :columns="columns" />
</template>

<script>
import Grid, { VGridVueTemplate } from '@revolist/vue-datagrid'; // Import the VGrid component
import Cell from './Cell.vue'; // Custom cell template

export default {
  name: 'App',
  data() {
    return {
      // Define the columns for the grid
      columns: [
        { prop: 'name', name: 'First' }, // Simple column definition
        { prop: 'details', cellTemplate: VGridVueTemplate(Cell) }, // Another column definition
      ],
      // Define the data source for the grid
      rows: [{ name: '1', details: 'Item 1' }],
    };
  },
  components: {
    VGrid // Register the VGrid component
  }
};
</script>
```

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

### Initialize RevoGrid with Basic Columns and Data (JavaScript)

Source: https://github.com/revolist/revogrid/blob/main/readme/js.usage.md

This snippet demonstrates how to select the RevoGrid element from the DOM, define its columns with properties and names, and assign a simple data source. It covers the fundamental setup for displaying data in the grid.

```javascript
// Select the RevoGrid element from the DOM
const grid = document.querySelector('revo-grid');

// Define the columns for the grid
grid.columns = [{ prop: 'name', name: 'First Column' }, { prop: 'details' }];
// Define the data source for the grid
grid.source = [{ name: 'New Item', details: 'Item Description' }];
```

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

### Install RevoGrid Vue 2 with Yarn

Source: https://github.com/revolist/revogrid/blob/main/readme/vue2.usage.md

Command to install the RevoGrid Vue 2 datagrid package using yarn. This package provides the necessary components for integrating RevoGrid into a Vue 2 application.

```bash
yarn add @revolist/vue-datagrid;
```

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

### Install RevoGrid React Datagrid Package

Source: https://github.com/revolist/revogrid/blob/main/readme/react.install.md

Commands to install the `@revolist/react-datagrid` package using popular JavaScript package managers. This package provides a React component for the RevoGrid data grid, replacing the older `@revolist/revogrid-react` package.

```bash
npm i @revolist/react-datagrid
```

```bash
pnpm add @revolist/react-datagrid
```

```bash
yarn add @revolist/react-datagrid
```

```bash
bun add @revolist/react-datagrid
```

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

### Basic RevoGrid Usage in React

Source: https://github.com/revolist/revogrid/blob/main/readme/react.usage.md

Demonstrates the simplest way to integrate and display data using the RevoGrid component in a React application. It initializes the grid with predefined columns and static source data, highlighting the essential props for basic functionality.

```tsx
import { useState } from 'react'
import { RevoGrid } from '@revolist/react-datagrid'

/**
 * note: columns & source need a "stable" reference in order to prevent infinite re-renders
 */
const columns = [
  { prop: 'name', name: 'First' },
  { prop: 'details', name: 'Second' },
]

function App() {
  const [source] = useState([
    { name: '1', details: 'Item 1' },
    { name: '2', details: 'Item 2' },
  ]);
  return (<RevoGrid columns={columns} source={source} />)
}
export default App
```

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

### Define a Custom Cell Template in Vue 2

Source: https://github.com/revolist/revogrid/blob/main/readme/vue2.usage.md

Example of a simple Vue 2 component used as a custom cell template for RevoGrid. This component demonstrates how to define a basic template and access cell-specific properties passed down by RevoGrid.

```vue
// Cell.vue
<template>Custom cell</template>
<script>
import Vue, { PropType } from 'vue';
export default {
  props: ['prop', 'model', 'column', 'rowIndex', 'colIndex', 'colType', 'type', 'data']
};
</script>
```

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

### Revolist Revogrid 4.0+ Event Signature Change Example

Source: https://github.com/revolist/revogrid/blob/main/readme/version.md

Highlights an example of an event signature change in Revogrid 4.0+, specifically for the `beforerowrender` event, which now returns a more specific event object.

```APIDOC
Event: beforerowrender
  Returns: BeforeRowRenderEvent
```

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

### Basic RevoGrid Svelte Component Usage

Source: https://github.com/revolist/revogrid/blob/main/readme/svelte.usage.md

Example of integrating and configuring the RevoGrid component in a Svelte application, defining a data source and column definitions, including a custom cell template for rendering cell content.

```svelte
// App.svelte
<script lang="ts">
    import { RevoGrid, type ColumnRegular } from '@revolist/svelte-datagrid';
    const source = [
    {
      name: '1',
      details: 'Item 1',
    },
    {
      name: '2',
      details: 'Item 2',
    },
  ];
    const columns: ColumnRegular[] = [
    {
      prop: 'name',
      name: 'First',
      cellTemplate(h, { value }) {
        return h('span', { style: { background: 'red' } }, value);
      }
    },
    {
      prop: 'details',
      name: 'Second',
    },
  ];
</script>

<main>
	<RevoGrid {source} {columns}></RevoGrid>
</main>
```

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

### Bootstrap Angular Standalone Application

Source: https://github.com/revolist/revogrid/blob/main/readme/angular.usage.md

Example of bootstrapping an Angular application using standalone components, which is the default behavior from Angular CLI v17+.

```typescript
import "@angular/compiler";
import { bootstrapApplication } from "@angular/platform-browser";
import { AppComponent } from "./app/app.component";

bootstrapApplication(AppComponent, {
  providers: []
}).catch((err) =>
  console.error(err)
);
```

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

### Custom Editor Implementation for RevoGrid in React

Source: https://github.com/revolist/revogrid/blob/main/readme/react.usage.md

Shows how to create and integrate a custom editor component for RevoGrid cells in a React application. This enables interactive editing experiences beyond the default grid functionalities, allowing for specialized input methods.

```tsx
// App.tsx
import { useState } from 'react';
import { RevoGrid, Editor, type EditorType, type Editors } from '@revolist/react-datagrid';

/**
 * Custom editor component
 */
const Button = ({ close } : EditorType) => {
  return <button onClick={close}>Close</button>
};

const gridEditors: Editors = { ['custom-editor']: Editor(Button) };

/**
 * note: columns & source need a "stable" reference in order to prevent infinite re-renders
 */
const columns = [
  {
    prop: 'name',
    name: 'Custom editor',
    editor: 'custom-editor',
  },
];

function App() {
  const [source] = useState([
    { name: '1', details: 'Item 1' },
    { name: '2', details: 'Item 2' },
  ]);
  return (<RevoGrid columns={columns} source={source} editors={gridEditors} />)
}

export default App
```

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

### Custom Cell Template for RevoGrid in React

Source: https://github.com/revolist/revogrid/blob/main/readme/react.usage.md

Illustrates how to customize the rendering of individual cells in RevoGrid using a React functional component as a cell template. This allows for custom styling or complex content within grid cells, enhancing visual presentation.

```tsx
import { useState } from 'react';
import { RevoGrid, Template, type ColumnDataSchemaModel } from '@revolist/react-datagrid';

/**
 * Custom cell component
 */
const Cell = ({ model, prop, value }: ColumnDataSchemaModel) => {
  return <div><strong>{value}</strong></div>;
};
/**
 * note: columns & source need a "stable" reference in order to prevent infinite re-renders
 */
const columns = [
  { prop: 'name', name: 'First', cellTemplate: Template(Cell) },
];

function App() {
  const [source] = useState([{ name: '1' }, { name: '2' }]);
  return (<RevoGrid columns={columns} source={source} />)
}
export default App
```

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

### Vue 3 Custom Cell Template Component (Cell.vue)

Source: https://github.com/revolist/revogrid/blob/main/readme/vue3.usage.md

A Vue 3 component (`Cell.vue`) serving as a custom cell template for RevoGrid. It demonstrates how to access row data, inject dependencies, and dispatch custom events from within a cell.

```vue
// Cell.vue
<template>
  <div ref="cell" @click="customCellClickEvent">{{ rowIndex }}</div>
</template>

<script lang="ts" setup>
import { defineProps, ref, inject } from 'vue';
import type { ColumnDataSchemaModel } from '@revolist/vue3-datagrid';

const props = defineProps<ColumnDataSchemaModel>();
const cell = ref<HTMLElement>();

const message = inject('sample');
function customCellClickEvent() {
  console.log('Custom cell click > Injected message:', message);
  const event = new CustomEvent('cell-custom-action', {
      bubbles: true,
      detail: { row: props.model },
  });
  cell.value?.dispatchEvent(event);
}
</script>
```

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

### Implement Custom Cell Template in RevoGrid (JavaScript)

Source: https://github.com/revolist/revogrid/blob/main/readme.md

This JavaScript snippet demonstrates how to define a custom cell template for a RevoGrid column. It uses the `cellTemplate` function to render a `div` element with custom styling and a CSS class, displaying the cell's value. The example initializes a grid with a single column and a data source.

```javascript
// Select the RevoGrid element from the DOM
const grid = document.querySelector('revo-grid');

// Define the columns for the grid
grid.columns = [
  {
    prop: 'name',
    name: 'Custom cell template',
    // Custom cell template
    cellTemplate(h, { value }) {
      return h(
        'div',
        {
          style: { backgroundColor: 'red' }, // Styling the cell background
          class: { 'inner-cell': true }, // Adding a CSS class
        },
        value || '' // Display the cell content or an empty string if undefined
      );
    },
  },
];
// Define the data source for the grid
grid.source = [{ name: 'New Item' }];
```

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

### Vue 3 Custom Cell Editor Component (Editor.vue)

Source: https://github.com/revolist/revogrid/blob/main/readme/vue3.usage.md

A Vue 3 component (`Editor.vue`) implementing a custom cell editor for RevoGrid. It shows how to handle user interaction (e.g., button click) and signal the grid to finish editing using the provided `close` method.

```vue
// Editor.vue
<template>
  <button @click="onBtn">Finish edit</button>
</template>
<script lang="ts">
import { defineComponent } from 'vue';
export default defineComponent({
  props: ['rowIndex', 'model', 'save', 'close'],
  methods: {
    onBtn(e: MouseEvent) {
      // create and dispatch event
      const event = new CustomEvent('cell', {
        bubbles: true,
        detail: { row: this.model },
      });
      this.$el.dispatchEvent(event);

      e.stopPropagation();
      if (typeof this.close === 'function') {
        (this.close as () => void)();
      }
    },
  },
});
</script>
```

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

### Create Custom Cell Template in RevoGrid (JavaScript)

Source: https://github.com/revolist/revogrid/blob/main/readme/js.usage.md

This example illustrates how to define a custom cell template for a RevoGrid column. It uses a `cellTemplate` function to render custom HTML elements, apply inline styles, add CSS classes, and display cell values, allowing for advanced visual customization of grid cells.

```javascript
// Select the RevoGrid element from the DOM
const grid = document.querySelector('revo-grid');

// Define the columns for the grid
grid.columns = [
  {
    prop: 'name',
    name: 'Custom cell template',
    // Custom cell template
    cellTemplate(h, { value }) {
      return h(
        'div',
        {
          style: { backgroundColor: 'red' }, // Styling the cell background
          class: { 'inner-cell': true }, // Adding a CSS class
        },
        value || '' // Display the cell content or an empty string if undefined
      );
    },
  },
];
// Define the data source for the grid
grid.source = [{ name: 'New Item' }];
```

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

### Revolist Revogrid 3.0+/4.0+ Method and Event Naming Convention Changes

Source: https://github.com/revolist/revogrid/blob/main/readme/version.md

Shows the update in method and event naming conventions across Revogrid 3.0+ and 4.0+ to align with modern JavaScript event naming practices, where all names are now lowercase.

```APIDOC
// Old -> New Method/Event Names
afterEdit -> afteredit
```

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

### RevoGrid Version 3.0+ API Breaking Changes

Source: https://github.com/revolist/revogrid/blob/main/readme.md

This section details the breaking changes introduced in RevoGrid version 3.0+, focusing on renamed CSS classes and method names. It highlights the shift to lowercase method names for alignment with modern event conventions.

```APIDOC
Renamed classes:
  - `row` -> `rgRow`
  - `col` -> `rgCol`
  - `data-cell` -> `rgCell`
  - `data-header-cell` -> `rgHeaderCell`
Method name convention:
  - `afterEdit` (old) -> `afteredit` (new)
```

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

### Integrate RevoGrid in Angular Standalone Component

Source: https://github.com/revolist/revogrid/blob/main/readme/angular.usage.md

Demonstrates how to integrate RevoGrid into an Angular standalone component, defining data sources, columns, and custom cell templates/editors. This component serves as the main application root.

```typescript
// app.component.ts

import { Component } from "@angular/core";
import { RevoGrid, Template, Editor, Editors, ColumnRegular } from "@revolist/angular-datagrid";
import { CellComponent } from './cell.component';
import { EditorComponent } from './editor.component';


const MY_EDITOR = 'custom-editor';

@Component({
  selector: 'app-root',
  standalone: true,
  imports: [RevoGrid, CellComponent, EditorComponent],
  template: `<revo-grid [source]="source" [columns]="columns" [editors]="editors"/>`,
})
export class AppComponent {
    source = [
    {
      name: "1",
      details: "Item 1",
    },
    {
      name: "2",
      details: "Item 2",
    },
  ];
  columns: ColumnRegular[] = [
      {
        prop: 'name',
        name: 'First',
        editor: MY_EDITOR,
        cellTemplate: Template(CellComponent),
      },
      {
        prop: 'details',
        name: 'Second',
      },
  ];
  editors: Editors = { [MY_EDITOR]: Editor(EditorComponent) };
}
```

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

### RevoGrid Version 4.0+ API Breaking Changes and Type Redesign

Source: https://github.com/revolist/revogrid/blob/main/readme.md

This section outlines the significant breaking changes in RevoGrid version 4.0+, particularly concerning redesigned type support and updated event naming conventions. It shows how deprecated namespaces were removed and type imports were simplified, along with changes to viewport type names and event casing.

```APIDOC
Type Support Redesign:
  - Deprecated namespaces removed:
    - Before: `RevoGrid.ColumnRegular`
    - Now: `ColumnRegular`
  - Improved type import:
    - Before: `import { RevoGrid } from '@revolist/revogrid/dist/types/interfaces'`
    - Now: `import { ColumnRegular } from '@revolist/revogrid'`
  - Viewport type names changed:
    - Before: `rowDefinitions: [{ type: "row", index: 0, size: 145 }]`
    - After: `rowDefinitions: [{ type: "rgRow", index: 0, size: 145 }]`
Event Naming Convention:
  - Events are all lowercase:
    - Before: `afterEdit`
    - Now: `afteredit`
  - Event object changes:
    - `beforerowrender` now returns `BeforeRowRenderEvent`
```

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

### Revolist Revogrid 4.0+ Type System Updates

Source: https://github.com/revolist/revogrid/blob/main/readme/version.md

Details the significant changes in the type system for Revogrid 4.0+, including the removal of deprecated namespaces, simplification of type imports, and updates to viewport type names for improved consistency and ease of use.

```TypeScript
// Before:
RevoGrid.ColumnRegular

// Now:
ColumnRegular
```

```TypeScript
// Before:
import { RevoGrid } from '@revolist/revogrid/dist/types/interfaces'

// Now:
import { ColumnRegular } from '@revolist/revogrid'
```

```TypeScript
// Before:
rowDefinitions: [{ type: "row", index: 0, size: 145 }]

// After:
rowDefinitions: [{ type: "rgRow", index: 0, size: 145 }]
```

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

### Create Custom RevoGrid Cell Component

Source: https://github.com/revolist/revogrid/blob/main/readme/angular.usage.md

Defines a standalone Angular component to be used as a custom cell template within RevoGrid. It demonstrates how to access cell data via input properties.

```typescript
// cell.component.ts
import { Component, Input } from '@angular/core';
import { ColumnDataSchemaModel } from '@revolist/revogrid';


@Component({
  selector: 'app-cell',
  standalone: true,
  template: '<span> {{value}} works!</span>',
})
export class CellComponent {
  @Input() props!: ColumnDataSchemaModel;

  get value() {
    return this.props.rowIndex;
  }
}
```

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

### Create Custom RevoGrid Editor Component

Source: https://github.com/revolist/revogrid/blob/main/readme/angular.usage.md

Implements a standalone Angular component for a custom cell editor in RevoGrid. It shows how to interact with the editor's properties and close it programmatically.

```typescript
// editor.component.ts
import { Component, Input } from '@angular/core';
import { type EditorType } from '@revolist/angular-datagrid';

@Component({
  selector: 'app-editor',
  standalone: true,
  template: '<button (click)="testClick()">{{ props.val }} close!</button>',
})
export class EditorComponent {
  @Input() props!: EditorType;

  
  testClick() {
    this.props.close();
  }
}

```

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

### RevoGrid Component Base Styling

Source: https://github.com/revolist/revogrid/blob/main/src/serve/index.html

Defines the base CSS styling for the `revo-grid` custom element, ensuring it behaves as a block-level element and occupies 100% of its parent's height. This is crucial for proper layout within a web page.

```CSS
revo-grid { display: block; height: 100%; }
```

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

### Revolist Revogrid 3.0+ Class and Data Attribute Renames

Source: https://github.com/revolist/revogrid/blob/main/readme/version.md

Illustrates the renaming of CSS classes and data attributes in Revogrid 3.0+ to prevent conflicts with popular CSS frameworks like Bootstrap. This change affects how custom styling and selectors might need to be updated.

```APIDOC
// Old -> New Class/Attribute Names
row -> rgRow
col -> rgCol
data-cell -> rgCell
data-header-cell -> rgHeaderCell
```

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

### Inner Cell Styling for RevoGrid

Source: https://github.com/revolist/revogrid/blob/main/src/serve/index.html

Applies CSS styling to elements with the class `inner-cell` within the RevoGrid, ensuring they fill 100% of their parent's width and height. This is typically used for content within grid cells to ensure proper rendering and responsiveness.

```CSS
.inner-cell { width: 100%; height: 100%; }
```

=== COMPLETE CONTENT === This response contains all available snippets from this library. No additional content exists. Do not make further requests.