> ## Documentation Index
> Fetch the complete documentation index at: https://docs.ploterr.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Add a column

> Put a column at a point on a storey.

export const LiveExample = ({path, title = 'Live example', height = 460}) => {
  return <Frame>
      <iframe src={`https://floorkit-examples.ploterr.com/floorkit/${path}?embed=1`} ref={frame => {
    if (!frame || !['localhost', '127.0.0.1'].includes(window.location.hostname)) return;
    const local = `http://localhost:5555/${path}?embed=1`;
    if (frame.src !== local) frame.src = local;
  }} title={title} loading="lazy" allow="fullscreen" style={{
    width: '100%',
    height: `${height}px`,
    border: 0,
    display: 'block'
  }} />
    </Frame>;
};

A column is a vertical member at one point. You give its position and its section. Its height is the storey height.

<LiveExample path="guides/add-a-column" />

## Before you start

You have a session from [Start a building](/floorkit/guides/start-a-building).

## Write the column

This column is at `[0, 0]` and has a section of 0.3 by 0.3 metres.

```typescript theme={null}
import {
  ColumnShape,
  type BmColumn,
  type BuildingSession,
  type ElementListCommand,
} from '@opengeometry/floorkit';

export const cornerColumn: BmColumn = {
  id: 'column-a1',
  shape: ColumnShape.RECTANGULAR,
  center: [0, 0],
  baseOffset: 0,
  width: 0.3,
  depth: 0.3,
};
```

## Add it to the storey

A column is an entry in the `columns` list of its storey.

```typescript theme={null}
export function addColumn(session: BuildingSession): void {
  session.apply(
    {
      kind: 'add-element',
      buildingId: 'building',
      storeyId: 'ground',
      list: 'columns',
      element: cornerColumn,
    },
    session.revision,
  );
}
```

The `add-element` command adds the column to the list, and the session builds it. You keep the session and its undo history. The command rejects an id that the list has.

## Sections

| `shape` | You give |
| - | - |
| `ColumnShape.RECTANGULAR` | `width` and `depth` |
| `ColumnShape.CIRCULAR` | `radius` |
| `ColumnShape.CUSTOM` | `customProfile`, your own outline |

In a JSON file, write the shape as text: `"RECTANGULAR"`.

## Rules

* `center` is `[x, z]` in metres. `rotation` turns the section, in degrees.
* `baseOffset` is the distance from the storey elevation to the base of the column.
* The height is the storey height. Set `height` to change it.
* A column is geometry. Floorkit does not calculate loads.

## A grid of columns

Make one entry for each position. Give each column its own id.

```typescript theme={null}
export function columnGrid(columns: number, rows: number, spacing: number): BmColumn[] {
  return Array.from({ length: columns * rows }, (_, index) => ({
    ...cornerColumn,
    id: `column-${index + 1}`,
    center: [(index % columns) * spacing, Math.floor(index / columns) * spacing],
  }));
}
```

A grid is a change of many elements at one time. Send it as one `batch`. The session applies the commands of a batch in order and builds one time. This batch removes the corner column and adds the six columns of the grid.

```typescript theme={null}
export function addColumnGrid(session: BuildingSession): void {
  const grid: ElementListCommand[] = columnGrid(3, 2, 3).map((column) => ({
    kind: 'add-element',
    buildingId: 'building',
    storeyId: 'ground',
    list: 'columns',
    element: column,
  }));
  session.apply(
    {
      kind: 'batch',
      commands: [
        {
          kind: 'remove-element',
          buildingId: 'building',
          storeyId: 'ground',
          list: 'columns',
          elementId: cornerColumn.id,
        },
        ...grid,
      ],
    },
    session.revision,
  );
}
```

One batch is one step: one undo takes the grid away. If one command of the batch fails, the session changes nothing. See [A batch of commands](/floorkit/concepts/editing-and-history#a-batch-of-commands).

## Next

<CardGroup cols={2}>
  <Card title="Define a room" icon="draw-polygon" href="/floorkit/guides/define-a-room">
    Give a name and an area to a space.
  </Card>

  <Card title="Column API" icon="code" href="/floorkit/api/architecture/column">
    See each option of a column.
  </Card>
</CardGroup>


This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.