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

# Configure Grid Columns

> This guide shows you how to add, configure, and customize the columns displayed in the Nextedy GANTT grid panel (the left side of the Gantt chart).

export const LastReviewed = ({date}) => {
  if (!date) return null;
  const formatted = new Date(`${date}T00:00:00Z`).toLocaleDateString("en-US", {
    year: "numeric",
    month: "long",
    day: "numeric",
    timeZone: "UTC"
  });
  return <p className="mt-10 text-sm text-gray-400 dark:text-zinc-500 not-prose">
      Last reviewed on {formatted}
    </p>;
};

## Default Column Layout

Out of the box, the Gantt grid displays the following columns:

| Column            | Content                                               | Editable           |
| :---------------- | :---------------------------------------------------- | :----------------- |
| Task number (WBS) | Work breakdown structure number                       | No                 |
| Title             | Work item ID, type icon, and title (with tree indent) | No                 |
| Start date        | Task start date                                       | Yes (date picker)  |
| End date          | Task end date                                         | Yes (date picker)  |
| Duration          | Task duration in days                                 | Yes (number input) |
| Assignee          | Assigned resource                                     | No                 |

## Configure the First Column

The first column always displays the task label and cannot be hidden. You can control what appears in it through the **Widget Properties > Table > First Column** settings:

| Parameter             | Effect                                                              |
| :-------------------- | :------------------------------------------------------------------ |
| `FIRST_COL.showId`    | Displays the work item ID prefix (e.g., "WI-123:") before the title |
| `FIRST_COL.showTitle` | Displays the work item title text                                   |
| `FIRST_COL.showIcon`  | Displays the work item type icon before the label                   |

Set `showId` to `true` when users need to quickly identify work items by their Polarion ID without opening the lightbox.

<Tip title="Save space by hiding the title">
  If you only need to see work item IDs in the grid, set `showTitle` to `false` and `showId` to `true`. This produces a compact first column showing only the ID.
</Tip>

## Add Custom Columns

Navigate to **Widget Properties > Table > Columns** to add additional columns beyond the defaults. Each column has these parameters:

| Parameter | Description                                                         | Default                |
| :-------- | :------------------------------------------------------------------ | :--------------------- |
| `field`   | Polarion work item field ID (e.g., `priority`, `status`, `dueDate`) | Required               |
| `label`   | Column header text                                                  | Field's Polarion label |
| `width`   | Column width in pixels                                              | 300                    |
| `align`   | Text alignment: `left`, `center`, or `right`                        | `left`                 |
| `render`  | Template identifier controlling how cell values are displayed       | Standard               |

### Available Column Templates

The following template identifiers control how column values are rendered:

| Template ID  | Rendering Behavior                                    |
| :----------- | :---------------------------------------------------- |
| `deadline`   | Shows dates in red when the task is overdue           |
| `start_date` | Renders the start date with precision formatting      |
| `end_date`   | Renders the end date with precision formatting        |
| `owner`      | Shows assignees as initials in circles or full names  |
| `standard`   | Renders duration values                               |
| `progress`   | Shows progress percentage rounded to 2 decimal places |

## Configure the Grid Width

Set the overall width of the grid panel through **Widget Properties > Table > WIDTH**. This controls how much horizontal space the column area occupies relative to the timeline.

<Note title="User preferences override widget settings">
  When a user resizes the grid panel or individual columns by dragging, those widths are saved to browser local storage. On the next visit, the saved widths are restored instead of the widget parameter defaults. Users can reset to defaults via the hamburger menu.
</Note>

## Configure Assignee Display Mode

The assignee column supports two display modes controlled by the configuration property:

```
nextedy.gantt.assignee_column_display_mode=initials
```

| Value      | Display                                   |
| :--------- | :---------------------------------------- |
| `initials` | User initials shown in a circle (compact) |
| `fullname` | Full user name displayed as text          |

Set this property in **Administration > Configuration Properties**.

## Access the Hamburger Menu

The first column header contains a ☰ hamburger menu icon that provides quick access to:

* **Refresh** the Gantt data
* **Drag children** toggle
* **Go to today** navigation
* **Set scale** submenu
* **Column visibility** submenu
* **Help** link to the documentation

## Verification

You should now see the configured columns in the Gantt grid. Verify that custom field columns display the expected values and that column widths match your configuration. If a column shows empty values, confirm the field ID matches a valid Polarion work item field.

## See also

* [Manage Column Visibility](/gantt/guides/visualization/column-visibility)
* [Use Inline Cell Editing](/gantt/guides/editing/inline-cell-editing)
* [Show Deadlines and Due Dates](/gantt/guides/visualization/deadlines)
* [Configure the Toolbar and Menus](/gantt/guides/layout/toolbar-configuration)
* [Set Up a Basic Gantt Chart](/gantt/getting-started/setup-basic-gantt)

<LastReviewed date="2026-07-02" />