> For the complete documentation index, see [llms.txt](https://docs.grid.glideapps.com/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.grid.glideapps.com/extended-quickstart-guide/grid-columns.md).

# 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="/files/UEUMY8wIiEnhIJjBSFF4" 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="/files/kLJ2lzezNAon2yPFID8o" 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="/files/325rNrgVqp6DaMCxFWpD" alt=""><figcaption><p>Lovely teal colors</p></figcaption></figure>