---
title: resourceColumns
---

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, {
  resourceColumns: [
    {
      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>
<tbody>
<tr>
<th>field</th>
<td>the property of the <a href='resource-object'>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>headerClass</th>
<td>

a [ClassName Input](classname-input) for the `&lt;th&gt;` at the top

</td>
</tr>

<tr>
<th>headerContent</th>
<td>

a [Content Injection Input](content-injection) for the `&lt;th&gt;` at the top

</td>
</tr>

<tr>
<th>headerDidMount</th>
<td>

called right after the `&lt;th&gt;` was added to the DOM

</td>
</tr>

<tr>
<th>headerWillUnmount</th>
<td>

called right before the `&lt;th&gt;` will be removed from the DOM

</td>
</tr>

<tr>
<th>cellClass</th>
<td>

a [ClassName Input](classname-input) for the `&lt;td&gt;` in the body

</td>
</tr>

<tr>
<th>cellContent</th>
<td>

a [Content Injection Input](content-injection) for the `&lt;td&gt;` in the body

</td>
</tr>

<tr>
<th>cellDidMount</th>
<td>

called right after the `&lt;td&gt;` was added to the DOM

</td>
</tr>

<tr>
<th>cellWillUnmount</th>
<td>

called right before the `&lt;td&gt;` will be removed from the DOM

</td>
</tr>
</tbody>
</table>


[See a simple demo of resourceColumns](resourceColumns-demo).

[See a demo of resourceColumns with **grouping**](resourceColumns-grouping-demo).


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

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

    cellClass: 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...
]
```