# Column & Row Spanning

#### Description

You can use Colspan and/or Rowspan by using the DataView Item Metadata Provider, however please note that row spanning is under a flag because of its small perf hit (`rowspan` requires an initial loop through of all row item metadata to map all row span).

> \[!NOTE] Please note that `colspan` and `rowspan` have multiple constraints that you must be aware, any side effects will **not** keep anything in sync since metadata are based on grid row index based... for example: Filtering/Sorting/Paging/ColumnReorder/ColumnHidding These side effect will require user's own logic to deal with such things!

#### Demo

**Colspan / Rowspan**

[Employee Timesheets](https://ghiscoding.github.io/aurelia-slickgrid-demos/#/example43) / [Demo Component](https://github.com/ghiscoding/slickgrid-universal/blob/master/demos/aurelia/src/examples/slickgrid/example43.ts)

[Large Dataset](https://ghiscoding.github.io/aurelia-slickgrid-demos/#/example44) / [Demo Component](https://github.com/ghiscoding/slickgrid-universal/blob/master/demos/aurelia/src/examples/slickgrid/example44.ts)

#### Basic Usage

You can see a basic example below where we set static `metadata`, however you will must often use it with dynamic `metadata`, and it works in both cases. From the example below, the first object key is a number, `0` in our case, which represents the row index (again this can be dynamic). Then if we continue drilling down, we get a `columns` property which holds another object containing all the column indexes that will have a span (which can be individual `colspan`, `rowspan` or both of them at the same time).

What if we have a side effect that kicks in, for example a Sorting, Filtering, ...? Well, that is where you the developer will have to add your own logic to update this `metadata` with the expected code logic of what and how it's supposed to behave. Because as mentioned in the note above, the library is pretty dumb and does not know what is the expected behavior for any side effects and it **will not change any** of the `metadata` spans, you have to implement such logic yourself (for example, if we drag a column to another position then the `rowspan` will stay at the same exact column index which is most probably not what you want, you could subscribe to the `onColumnsChanged` to deal with this one). You can see the full list of Events that you can listen for changes and implement necessary callback to update your `metadata` accordingly (see [List of Available Events](https://ghiscoding.gitbook.io/aurelia-slickgrid/events/available-events) docs).

**Component**

```ts
import type { Column, GridOption, ItemMetadata } from 'aurelia-slickgrid';

example class MyExample {
  gridOptions: GridOption;
  columns: Column[];
  dataset: any[];

  // metadata can be dynamic too, it doesn't have to be preset
  metadata: ItemMetadata | Record<number, ItemMetadata> = {
    0: {
      columns: {
        1: { rowspan: 2 },
        2: { colspan: 2 },
        10: { colspan: 3, rowspan: 10 },
        13: { colspan: 2 },
        17: { colspan: 2, rowspan: 2 },
      },
    }
  };

  defineGrid() {
    this.columns = [ /*...*/ ];

    this.gridOptions.value = {
      enableCellNavigation: true,
      enableCellRowSpan: true, // required for rowspan to work
      dataView: {
        globalItemMetadataProvider: {
          getRowMetadata: (_item, row) => {
            return this.metadata[row];
          },
        },
      },
      rowTopOffsetRenderType: 'top', // rowspan doesn't render well with 'transform', default is 'top'
    };
  }
}
```


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://ghiscoding.gitbook.io/aurelia-slickgrid/grid-functionalities/column-row-spanning.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.