# Column Info

Canonical page: https://www.adaptabletools.com/docs/ui-settings-panel-column-info

- The Column Info Panel contains at a glance information about each Column
- It is typically the second page in the [Settings Panel](https://www.adaptabletools.com/docs/ui-settings-panel/index.md)

The Column Info Panel is in the [Settings Panel](https://www.adaptabletools.com/docs/ui-settings-panel/index.md) (the 2nd panel displayed by default).

- Column Info can also be opened via the `Column Info` Menu Option in the [Column Menu](https://www.adaptabletools.com/docs/ui-column-menu/index.md) and [Context Menu](https://www.adaptabletools.com/docs/ui-context-menu/index.md)
- The 2 Menus have an associated menu item `Grid Info` which opens the [Grid Info Panel](https://www.adaptabletools.com/docs/ui-settings-panel-grid-info/index.md)

- Use `columnApi.openColumnInfoSettingsPanel(columnId)` to open the panel with that Column already selected
- The Column and Context Menus do this automatically for the clicked Column

The Column Info Panel contains a dropdown listing all the Columns in the Grid.

When a Column is selected, the Panel displays all the information about the Column in 2 tabs:

- Column Summary
- State

## Column Summary

The Column Summary tab provides basic information about the selected Column. This includes:

- Column Id
- Column Header
- Column DataType
- Other Column properties - e.g. Aggregatable, Filterable, Editable, Queryable, Sortable, Movable etc

## Column State

The Column State tab displays information about every [Adaptable Object](https://www.adaptabletools.com/docs/dev-guide-adaptable-state-initial-state/index.md#adaptable-objects) related to the selected column.

It also contains buttons to edit / delete these Objects via the relevant [Wizard](https://www.adaptabletools.com/docs/ui-settings-panel-wizards/index.md).

**Example: Column Info Panel**

Using Column Info to see details about specific Columns

- This demo opens Column Info on the `Name` column via `openColumnInfoSettingsPanel('name')`

Demo project (Vanilla); the files without a marker are shown below:

```text
src/
  adaptableOptions.ts
  agGridModules.ts     [template]
  columnDefs.ts        [template]
  gridOptions.ts       [template]
  index.ts             [template]
  onAdaptableReady.ts
  rowData.ts           [template]
  styles.css           [template]
index.html             [template]
package.json           [template]
tsconfig.json          [template]
```

Files marked `[template]` are the same in every demo; see the [demo template](https://www.adaptabletools.com/llms/demo-template.md#vanilla).

**`src/adaptableOptions.ts`**

```ts
import {AdaptableOptions} from '@adaptabletools/adaptable';
import {WebFramework} from './rowData';

export const adaptableOptions: AdaptableOptions<WebFramework> = {
  primaryKey: 'id',
  adaptableId: 'Column Info',
  initialState: {
    Theme: {CurrentTheme: 'dark'},
    Layout: {
      CurrentLayout: 'Standard Layout',
      Layouts: [
        {
          TableColumns: [
            'name',
            'language',
            'github_stars',
            'license',
            'has_projects',
            'has_pages',
            'created_at',
            'has_wiki',
            'updated_at',
            'pushed_at',
            'github_watchers',
            'week_issue_change',
          ],
          Name: 'Standard Layout',
          AutoSizeColumns: true,
        },
      ],
    },
  },
};
```

**`src/onAdaptableReady.ts`**

```ts
import {AdaptableReadyInfo} from '@adaptabletools/adaptable';

export const onAdaptableReady = ({adaptableApi}: AdaptableReadyInfo) => {
  adaptableApi.columnApi.openColumnInfoSettingsPanel('name');
};
```

### FAQ

**Can I use Column Info to make a readonly column editable?**
Not currently - but that may change in the future if it can be permissioned correctly