# resourceAreaColumns

> FullCalendar v5 documentation, for an old release. Web version: https://legacy.fullcalendar.io/v5/resourceAreaColumns
>
> Latest version (v7): https://fullcalendar.io/docs/resourceColumns.md

Premium feature.

Turns the resource area from a plain list of titles into a grid of data.

An array of objects can be provided, each with information about a column:

```js
var calendar = new Calendar(calendarEl, {
  resourceAreaColumns: [
    {
      field: 'fname',
      headerContent: 'First Name'
    },
    {
      field: 'lname',
      headerContent: 'Last Name'
    }
  ]
  resources: [
    {
      id: 'a',
      fname: 'John',
      lname: 'Smith'
    },
    {
      id: 'b',
      fname: 'Jerry',
      lname: 'Garcia'
    }
  ]
});
```

Each column object can have the following properties:

<table>

<tr>
<th>field</th>
<td>the property of the <a href='https://legacy.fullcalendar.io/v5/resource-object.md'>Resource Object</a> where the data will come from. The data is displayed in the cell of the grid.</td>
</tr>

<tr>
<th>group</th>
<td>
If specified as <code>true</code>, resources will be grouped by this column.
</td>
</tr>

<tr>
<th>width</th>
<td>the width of the column, either in a number of pixels or a string percentage like `"50%"`</td>
</tr>

<tr>
<th>headerClassNames</th>
<td markdown='1'>
a [ClassName Input](https://legacy.fullcalendar.io/v5/classname-input.md) for the `<th>` at the top
</td>
</tr>

<tr>
<th>headerContent</th>
<td markdown='1'>
a [Content Injection Input](https://legacy.fullcalendar.io/v5/content-injection.md) for the `<th>` at the top
</td>
</tr>

<tr>
<th>headerDidMount</th>
<td markdown='1'>
called right after the `<th>` was added to the DOM
</td>
</tr>

<tr>
<th>headerWillUnmount</th>
<td markdown='1'>
called right before the `<th>` will be removed from the DOM
</td>
</tr>

<tr>
<th>cellClassNames</th>
<td markdown='1'>
a [ClassName Input](https://legacy.fullcalendar.io/v5/classname-input.md) for the `<td>` in the body
</td>
</tr>

<tr>
<th>cellContent</th>
<td markdown='1'>
a [Content Injection Input](https://legacy.fullcalendar.io/v5/content-injection.md) for the `<td>` in the body
</td>
</tr>

<tr>
<th>cellDidMount</th>
<td markdown='1'>
called right after the `<td>` was added to the DOM
</td>
</tr>

<tr>
<th>cellWillUnmount</th>
<td markdown='1'>
called right before the `<td>` will be removed from the DOM
</td>
</tr>

</table>


[See a simple demo of resourceAreaColumns](https://legacy.fullcalendar.io/v5/resourceAreaColumns-demo).

[See a demo of resourceAreaColumns with **grouping**](https://legacy.fullcalendar.io/v5/resourceAreaColumns-grouping-demo).


Here is an example that incorporates `cellClassNames` and `cellContent`:

```js
resourceAreaColumns: [
  {
    headerContent: 'My Column',

    cellClassNames: function(arg) {
      var extendedProps = arg.resource.extendedProps;

      if (extendedProps.isUrgent) {
        return [ 'urgent-resource' ]
      }
    },

    cellContent: function(arg) {
      var extendedProps = arg.resource.extendedProps;
      var message = extendedProps.message;

      if (extendedProps.isUrgent) {
        message += '!!!';
      }

      return message;
    }
  }
  // other columns...
]
```