# Array Renderer
URL: https://pro.rv-grid.com/api/array-renderer/
Source: src/content/docs/api/array-renderer.md
### `arrayRenderer`

The `arrayRenderer` is a custom cell renderer for RevoGrid that can handle both single values
and arrays of values. It applies different renderers based on the value type.

**Features**:
- Detects if the value is an array or a single value
- For arrays, renders multiple elements using the provided renderer
- For single values, renders a single element using the provided renderer
- Supports custom separator between array items
- Supports custom wrapper for array items

**Usage**:
- Import `arrayRenderer` and use it as a wrapper around your existing renderer
- Configure the renderer with options like separator and wrapper

### Example
```typescript
import { arrayRenderer } from '@revolist/revogrid-pro';
import { linkRenderer } from '@revolist/revogrid-pro';

const grid = document.createElement('revo-grid');
grid.columns = [
  {
    prop: 'links',
    name: 'Links',
    cellTemplate: arrayRenderer(linkRenderer, {
      separator: ', ',
      wrapper: 'div',
    }),
  },
];
```

Example of using multiRenderer to handle different types of values

  prop: 'data',
  name: 'Data',
  cellTemplate: multiRenderer({
    default: progressLineRenderer,
    renderers: [
      {
        // Use linkRenderer for URLs
        condition: (value) => typeof value === 'string' &&
          (value.startsWith('http://') || value.startsWith('https://')),
        renderer: linkRenderer,
      },
      {
        // Use progressLineRenderer for numbers
        condition: (value) => typeof value === 'number',
        renderer: progressLineRenderer,
      },
    ],
    separator: ' | ',
    wrapper: 'div',
    wrapperClass: 'multi-data-container',
  }),
};

```ts
export function arrayRenderer(
  renderer: ColumnRegular['cellTemplate'],
  options: ArrayRendererOptions =;
```

---

### `multiRenderer`

The `multiRenderer` is a custom cell renderer for RevoGrid that can apply different renderers
based on the value type. It's similar to `arrayRenderer` but allows for more complex rendering logic.

**Features**:
- Detects if the value is an array or a single value
- For arrays, applies a different renderer for each item based on a condition
- For single values, applies a default renderer
- Supports custom separator between array items
- Supports custom wrapper for array items

**Usage**:
- Import `multiRenderer` and use it to define different renderers for different value types
- Configure the renderer with options like separator and wrapper

### Example
```typescript
import { multiRenderer } from '@revolist/revogrid-pro';
import { linkRenderer } from '@revolist/revogrid-pro';
import { progressLineRenderer } from '@revolist/revogrid-pro';

const grid = document.createElement('revo-grid');
grid.columns = [
  {
    prop: 'data',
    name: 'Data',
    cellTemplate: multiRenderer({
      default: progressLineRenderer,
      renderers: [
        {
          condition: (value) => typeof value === 'string' && value.startsWith('http'),
          renderer: linkRenderer,
        },
      ],
    }),
  },
];
```

```ts
export function multiRenderer(config:;
```

---

### `ArrayRendererOptions`

```ts
export type ArrayRendererOptions = {
  /**
   * Separator between array items
   * @default ', '
   */
  separator?: string;

  /**
   * Wrapper element for array items
   * @default 'div'
   */
  wrapper?: string;

  /**
   * CSS class for the wrapper element
   */
  wrapperClass?: string;

  /**
   * CSS style for the wrapper element
   */
  wrapperStyle?: Record<string, string>;
};
```
