# Grid Columns

### Basic usage

> 💡 The `GridColumn[]` passed to the `DataEditor` in the `columns` property should be memoized to avoid excessive re-rendering. These samples may not do this for the sake of brevity.

There are only two mandatory properties for each `GridColumn`: `title` and `id`. The id should be a stable id and not the index of the column. Additionally a `width` property can be provided which represents the width of the column in pixels. If a width is provided the id may be omited. This may change in a future version.

```typescript
const columns: GridColumn[] = [
    { title: "First", id: "first", width: 150 },
    { title: "Second", id: "second", width: 150 }
];

<DataEditor {...rest} columns={columns} />
```

<figure><img src="https://369991932-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FrmElrOZEiFLa3h8PYkIu%2Fuploads%2FPxcBNdevFlWTx3trQbft%2Fimage.png?alt=media&#x26;token=3b7956e0-c696-4fe1-9ea3-22dce8354b9d" alt=""><figcaption><p>Two beautiful identically sized columns.</p></figcaption></figure>

### Header icons

Default header icons are available. They can also be reaplced by passing a new map to the `headerIcons` property.

```typescript
const columns: GridColumn[] = [
    { title: "Name", id: "name", width: 250, icon: GridColumnIcon.HeaderString, 
      overlayIcon: GridColumnIcon.RowOwnerOverlay 
    },
    { title: "Age", id: "age", width: 100, icon: GridColumnIcon.HeaderNumber },
    { title: "Avatar", id: "avatar", width: 80, icon: GridColumnIcon.HeaderImage },
];

<DataEditor {...rest} columns={columns} />
```

<figure><img src="https://369991932-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FrmElrOZEiFLa3h8PYkIu%2Fuploads%2FwXpq6dWFoYkOqflzWRAJ%2Fimage.png?alt=media&#x26;token=b0036953-aa7a-4fc9-b1e6-5973863d7155" alt=""><figcaption><p>Lovely icons!</p></figcaption></figure>

### Header theming

Headers can be provided with individual theme overrides which themes both the header and its column cells.

```typescript
const columns: GridColumn[] = [
    { title: "Name", id="name", width: 250, icon: GridColumnIcon.HeaderString },
    { title: "Age", id="age", width: 100, icon: GridColumnIcon.HeaderNumber, themeOverride: {
        bgIconHeader: "#00967d",
        textDark: "#00c5a4",
        textHeader: "#00c5a4",
    } },
    { title: "Avatar", id="avatar", width: 80, icon: GridColumnIcon.HeaderImage },
];

<DataEditor {...rest} columns={columns} />
```

<figure><img src="https://369991932-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FrmElrOZEiFLa3h8PYkIu%2Fuploads%2FUptKcCh1vaJR0JfnzFHn%2Fimage.png?alt=media&#x26;token=3f76e3e5-3863-40e9-b49e-e00c05006051" alt=""><figcaption><p>Lovely teal colors</p></figcaption></figure>