# Column Autosize
URL: https://pro.rv-grid.com/api/column-autosize/
Source: src/content/docs/api/column-autosize.md
## Module Extensions

### `HTMLRevoGridElement` (Extended from `global`)

```ts
interface HTMLRevoGridElement {
  /**
       * Kebab-case alias for framework bindings.
       */
      'auto-size-column'?: AutoSizeColumnProp
}
```

---

### `AdditionalData` (Extended from `@revolist/revogrid`)

Add autoSizeColumnConfig property to AdditionalData interface

```ts
interface AdditionalData {
  /**
       * @deprecated Use `grid.autoSizeColumn` instead.
       */
      autoSizeColumnConfig?: AutoSizeColumnConfig
}
```

---

### `ColumnRegular` (Extended from `@revolist/revogrid`)

Add autoSize property to ColumnRegular interface

```ts
interface ColumnRegular {
  autoSize?: boolean
}
```

## Plugin API

### `AutoSizeColumnConfig`

```ts
export type AutoSizeColumnConfig = {
  // ui behavior mode
  mode?: ColumnAutoSizeMode;
  /**
   * autoSize for all columns
   * if allColumnes true all columns treated as autoSize, worse for performance
   * false by default
   */
  allColumns?: boolean;
  /**
   * assumption per characted size
   * by default defined as 8, can be changed in this config
   */
  letterBlockSize?: number;
  /** make size calculation exact
   * by default it based on assumption each character takes some space defined in letterBlockSize */
  preciseSize?: boolean;
};
```

---

### `ColumnAutoSizeMode`

```ts
enum ColumnAutoSizeMode {
  // increases column width on header click according the largest text value
    headerClickAutosize = 'headerClickAutoSize',
  // increases column width on data set and text edit, decreases performance
    autoSizeOnTextOverlap = 'autoSizeOnTextOverlap',
  // increases and decreases column width based on all items sizes, worst for performance
    autoSizeAll = 'autoSizeAll'
}
```

---

### `AutoSizeColumnPlugin`

The `AutoSizeColumnPlugin` is a plugin for the RevoGrid framework that provides automatic column resizing
functionality. It allows users to resize columns based on the content of the cells, providing a flexible
and user-friendly interface for data presentation.

 **Features**:
- Automatically resizes columns based on the content of the cells.
- Supports different modes of automatic resizing:
  - Header click autosize: Resizes columns when the header is clicked.
  - Text overlap autosize: Resizes columns when text is edited.
  - All columns autosize: Resizes all columns based on the content of the cells.

**Usage**:
- Add the `AutoSizeColumnPlugin` to the grid's plugins array.
- Configure the plugin using the `additionalData` property with the `autoSizeColumnConfig` key.

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

const grid = document.createElement('revo-grid');
grid.plugins = [AutoSizeColumnPlugin]; // Add the plugin to the grid
grid.additionalData = {
  autoSizeColumnConfig: {
    mode: ColumnAutoSizeMode.autoSizeOnTextOverlap,
  },
};
```

#### Dependencies

- **Event integration** `aftersourceset`, `afteredit`, `headerdblclick`: Integrates with grid lifecycle events to recalculate column widths.
- **Config integration** `additionalData.autoSizeColumnConfig`: Reads legacy auto-size configuration from additionalData.autoSizeColumnConfig.

```ts
class AutoSizeColumnPlugin {
  async setSource(source: DataType[]): Promise<void>;

  getLength(len?: any): number;

  afteredit(e: EditEvent);

  afterEditAll(e: EditEvent);

  getColumnSize(index: number, type: DimensionCols): number;

  columnSet(columns: Record<DimensionCols, ColumnRegular[]>);

  clearPromise();

  isRangeEdit(e: EditEvent): e is BeforeRangeSaveDataDetails;

  initiatePresizeElement(): HTMLElement;

  destroy();
}
```
