> ## 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.

# Table and Grid Configuration

> Nextedy GANTT displays a grid panel on the left side of the Gantt chart containing task data columns.

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>;
};

## Table Widget Parameters

| Name    | Type    | Default         | Description                                                                                                                                       |
| ------- | ------- | --------------- | ------------------------------------------------------------------------------------------------------------------------------------------------- |
| `WIDTH` | Integer | See application | The total width of the grid panel (left side of the Gantt chart) in pixels. This controls the split point between the grid and the timeline area. |

## First Column Configuration

The first column always appears in the grid and displays the task label. The `FIRST_COL` configuration block controls what information is shown in this column:

| Name                  | Type    | Default         | Description                                                                                                                                                                        |
| --------------------- | ------- | --------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| `FIRST_COL.showId`    | Boolean | See application | When `true`, the first column displays the work item ID prefix (e.g., `WI-123:`) before the title.                                                                                 |
| `FIRST_COL.showTitle` | Boolean | See application | When `true`, the first column displays the work item title text. Set to `false` if only the ID is needed.                                                                          |
| `FIRST_COL.showIcon`  | Boolean | See application | When `true`, the first column displays the work item type icon before the label. Type icons help visually distinguish work item types (task, milestone, work package) in the grid. |

<Frame>
  <img src="https://mintcdn.com/none-17b4493f/Q-nbebUq0JUAc6vq/gantt/diagrams/reference/widget-parameters/table-configuration/diagram-1.svg?fit=max&auto=format&n=Q-nbebUq0JUAc6vq&q=85&s=d3fa17d3f0622ca9276f48a625d9a58a" alt="diagram" style={{ maxWidth: "620px", width: "100%" }} width="620" height="310" data-path="gantt/diagrams/reference/widget-parameters/table-configuration/diagram-1.svg" />
</Frame>

<Tip title="Compact First Column">
  Set `FIRST_COL.showId` to `true` and `FIRST_COL.showTitle` to `false` to create a compact first column that shows only work item IDs. This is useful for dense schedules where screen space is limited.
</Tip>

## Columns List

The `COLUMNS` list parameter defines additional data columns that appear after the first column. Each column entry is configured with field mapping, label, width, alignment, and render template properties. For detailed column sub-parameters, see [Column Configuration Parameters](/gantt/reference/widget-parameters/columns).

The default columns list includes:

| Column     | Field          | Description                                     |
| ---------- | -------------- | ----------------------------------------------- |
| WBS        | Task number    | Hierarchical work breakdown structure numbering |
| Title      | Task label     | Task label with tree indent                     |
| Start date | Start field    | Task start date                                 |
| End date   | End field      | Task end date                                   |
| Duration   | Duration field | Task duration value                             |
| Assignee   | Resource field | Assigned resource(s)                            |

## Column Custom Field Dependency

When you add a column and set its type to `CUSTOM_FIELD`, the widget parameter editor reveals two additional sub-parameters:

* **Other Field** -- specifies an alternate field reference for the custom column.
* **Render** -- specifies the rendering template for the custom field column.

These parameters are hidden for standard field columns to reduce clutter in the configuration panel.

## User Settings Persistence

The Gantt saves user-specific grid preferences to the browser's local storage. The following settings are persisted per user:

| Setting       | Description                                                               |
| ------------- | ------------------------------------------------------------------------- |
| Zoom scale    | The current timeline zoom level (e.g., `W` for week, `M` for month).      |
| Column widths | Individual column widths after user resizing.                             |
| Grid width    | The overall grid panel width (the split point between grid and timeline). |

These preferences are keyed by the document URL and widget version. When a user returns to the same Gantt page, the saved zoom level, column widths, and grid width are restored automatically.

<Note title="Reset to Defaults">
  Use the **Reset View** toolbar action to clear all saved user settings and restore the Gantt to its default zoom level and column layout.
</Note>

## Grid Width Behavior

The grid width (`WIDTH` parameter) sets the initial width of the left panel. Users can adjust the grid width by dragging the splitter between the grid and the timeline. The adjusted width is saved to local storage and restored on subsequent visits.

If no `WIDTH` parameter is set, the Gantt uses a default width determined by the sum of configured column widths.

## Configuration Example

To configure a compact grid with work item IDs and a priority column:

1. Open **Widget Properties** for the Gantt widget.
2. In the **Table** section:
   * Set **WIDTH** to `400`.
   * Set **FIRST\_COL.showId** to `Yes`.
   * Set **FIRST\_COL.showTitle** to `Yes`.
   * Set **FIRST\_COL.showIcon** to `Yes`.
3. In the **Columns** section, add a column entry:
   * Set **Field** to `priority`.
   * Set **Label** to `Priority`.
   * Set **Width** to `80`.
4. Save the widget parameters.

The Gantt grid now displays a 400px-wide panel with the task label (including icon and ID) in the first column, followed by the default columns and the added priority column.

## Related Pages

* [Column Configuration Parameters](/gantt/reference/widget-parameters/columns) -- per-column field mapping, templates, and rendering
* [Work Items Gantt Widget Parameters](/gantt/reference/widget-parameters/work-items-gantt) -- main widget parameters
* [Zoom and Scale Levels Reference](/gantt/reference/zoom-scale-levels) -- timeline scale options
* [Toolbar Actions and Keyboard Shortcuts](/gantt/reference/keyboard-shortcuts) -- Reset View and other toolbar actions

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