# TableColumn

**Category:** Common/Types

## API

### Overview

Defines a column in a [`Table`](./?path=/story/base-components-collections-table--table) component. Extends the Wix Design System table column with Patterns-specific features: `sortable` / `defaultSortOrder`, `searchable`, `hideable` (for [`CustomColumns`](./?path=/story/features-display--customcolumns)), and `mobile` layout configuration.

### Description

A column of a [`Table`](./?path=/story/base-components-collections-table-table--table) collection component.

> **Note:** `TableColumn` properties affect the behavior of features such as [Custom Columns](./?path=/story/features-display-custom-columns--overview) and [Sortable Columns](./?path=/story/features-sort-sortable-columns-sortable-columns--sortable-columns).


### Props

| Prop | Type | Required | Default | Description |
|------|------|----------|---------|-------------|
| `id` | `string` | Yes | - | A unique identifier for the column. This value is required to enable [custom columns](./?path=/story/features-display-custom-columns--overview) or [sortable columns](./?path=/story/features-sort-sortable-columns-sortable-columns--sortable-columns). |
| `name` | `string` | Yes | - | A name for the column. This value is shown in the [custom columns](./?path=/story/features-display-custom-columns--overview) dropdown. |
| `title` | `ReactNode` | Yes | - | The text to be shown at the top of the column. |
| `hiddenFromCustomColumnsSelection` | `boolean` | No | - | Hides the column from the custom column selection panel, making it always visible. Relevant for [custom columns](./?path=/story/features-display-custom-columns--overview). |
| `hideable` | `boolean` | No | - | When `false`, the column is always selected and displayed. Relevant for [custom columns](./?path=/story/features-display-custom-columns--overview). |
| `searchable` | `boolean` | No | - | When `true`, search matches in the column's values will be highlighted. Mark a column as searchable only if iy's data is relevant for your search. |
| `reorderDisabled` | `boolean` | No | - | When `true`, disables drag and drop for the column. |
| `sortable` | `boolean` | No | - | When `true`, makes the column a [sortable column](./?path=/story/features-sort-sortable-columns-sortable-columns--sortable-columns). |
| `defaultSortOrder` | `"asc" \| "desc"` | No | - | Determines the default sort order for the column, either `asc` or `desc`. The column must be a [sortable column](./?path=/story/features-sort-sortable-columns-sortable-columns--sortable-columns). |
| `defaultHidden` | `boolean` | No | - | For [custom columns](./?path=/story/features-display-custom-columns--overview), when `true`, this property causes the column to be unchecked and thus not shown by default. This isn't relevant when `hideable` `=` `false`. |
| `field` | `Field` | No | - | The source field this column was built from; used to resolve manage actions. |
| `isPii` | `boolean` | No | - | Whether the field contains personally identifiable information. |
| `isSystem` | `boolean` | No | - | only for cms. Whether this is a system-managed field. |
| `isPrimary` | `boolean` | No | - | Whether this is the primary display field. |
| `validation` | `ValidationRule[]` | No | - | Column-level validation rules. When a `required` rule is present, a required indicator is shown in the custom columns panel. |
| `render` | `(row: any, rowNum: number) => ReactNode` | Yes | - | A callback that is called for each row in the data to display the value of this row for the specified column. |
| `mobile` | `ColumnMobileConfig` | No | - | Mobile column configuration. Determines how this column is displayed on mobile devices. - column: 'first' - Stacks vertically with other 'first' columns - column: 'second' - Displays as standalone second column - undefined - Hidden on mobile |
| `fieldType` | `"SHORT_TEXT" \| "LONG_TEXT" \| "NUMBER" \| "BOOLEAN" \| "DATE" \| "DATE_TIME" \| "DATETIME" \| "TIME" \| "URL" \| "EMAIL" \| "IMAGE" \| "MEDIA_GALLERY" \| "AUDIO" \| "DOCUMENT" \| "MULTI_DOCUMENT" \| "RICH_TEXT" \| "RICH_CONTENT" \| "REFERENCE" \| "MULTI_REFERENCE" \| "OBJECT" \| "ARRAY" \| "ADDRESS" \| "COLOR" \| "INTEGER" \| "DECIMAL" \| "CHECKBOX" \| "DROPDOWN" \| "FILES" \| "MULTI_SELECT"` | No | - | The field type string used to resolve a prefix icon for the column. Cairo maps this to the appropriate icon internally. |