Grid Pro - Column

This is a slotted component that allows a more visual approach to defining columns. Each <grid-pro-column> takes a ColDef typed object. To check all the available fields for the variable type coldef, look here.

tip

Customising column definitions using this approach is useful in connected data cases, where the data is dynamic; but there's still a need for extra definitions (e.g. events, transformers, etc).

Usage

To create or configure columns in the grid, there are two things that you need to consider:

• Create a ColDef variable.
• Implement your columns.

ColDef

Create a new ColDef variable. This must store all the configuration for the columns in your grid. There is an extensive list of fields and parameters that can be used. Here are the most common fields:

Name	Type	Description
field	String	Name of the field to be connected with
checkboxSelection	boolean	Set this to true to enable the selection checkbox to your grid
editable	boolean	Sets the the column to be editable
filter	String	Sets the type of the filter
headerName	String	Name of the header
pinned	any	Sets the column to be pinned. It can be: boolean, left, right, null
autoHeight	boolean	If true, the grid will select the appropriate height for the row
cellRenderer	any	Renders a component into each cell of this column
cellRendererParams	any	Parameters to be passed to the cellRenderer
sortable	boolean	Set to true to make the column sortable
sort	asc or desc	Set the column to be sorted ascending or descending
width	Number	The width of the column

You can find out more about fields and configurations in the ag-grid documentation.

You can define ColDef objects in different ways. in the example below, it's being set in the context/component's own class:

ColDef array setting custom headerName and others

public myMultipleCustomColumnConfigArray: ColDef[] = [
  {
    headerName: 'Country',
    field: 'country',
    // cellRenderer, etc
  },
  {
    headerName: 'Custom Year Header',
    field: 'year',
    width: 100,
    // cellRenderer, etc
  },
];

Single column definition

public mySingleCustomColumnConfigObj: ColDef =
  {
    headerName: 'Type',
    field: 'type',
    width: 50,
    // cellRenderer, etc
  }
;

tip

Where you implement your ColDef determines how you access it. In the example above, it has been placed in the context/component's own class, so we have used public. If ColDef is placed somewhere else, you need to access it in a different way.

Implement the columns

Single column

To create a new column that uses the definitions provided by the ColDef, you need to insert a new component called <grid-pro-column>. Each <grid-pro-column> must be assigned to one ColDef. The basic implementation is:

Defining a single custom column

<foundation-grid-pro>
 <grid-pro-column :definition=${(x) => x.mySingleCustomColumnConfigObj} />
</foundation-grid-pro>

By doing this, you are defining a single custom column.

Not seeing anything?

If you try to implement this code, you might not be able to see the grid created, because this grid has no data. Once you connect your grid with the back-end or insert simple data manually, you will be able to see the grid with your custom column.

Multiple columns

If you want to create multiple columns at once, you can use the repeat directive.

This is how you can implement multiple custom columns defined in the variable myMultipleCustomColumnConfigArray:

Using repeat to create multiple columns

import {html, ref, repeat} from '@microsoft/fast-element';

...

export const YourTemplate = html<YourTemplate>`
    <foundation-grid-pro>
        ${repeat((x) => x.myMultipleCustomColumnConfigArray, html`
          <grid-pro-column :definition="${x => x}" />
          `)}
    </foundation-grid-pro>
`;

Note that inside the repeat directive, the context is myMultipleCustomColumnConfigArray instead of YourTemplate. This enables you to use ${x => x} to access the myMultipleCustomColumnConfigArray elements.

You can find more information about the repeat directive in the FAST documentation.

A different way to creating multiple columns

When using ColDef objects, it's up to you to decide the approach. You can use the directive repeat to create an array of definitions, or you can create each column separately.

Using the ColDef array of objects with an extra single object

<foundation-grid-pro>

  <grid-pro-column :definition=${x => x.mySingleCustomColumnConfigObj}></grid-pro-column>
  <grid-pro-column :definition=${x => x.myOtherSingleCustomColumnConfigObj}></grid-pro-column>

</foundation-grid-pro>

Connected data and custom columns

When you connect the grid with the back end using <grid-pro-genesis-datasource />, your grid automatically creates all the columns, based on the metadata that comes from the server.

You can now create a new custom column defining the field, using the same name as the field in the back end. The grid then automatically sets the data to be displayed in this field.

In the example below, the grid is connected to the back end through a Data Server query called ALL_TRADES. This has the fields: TRADE_ID, PRICE and QUANTITY:

<foundation-grid-pro>
    <grid-pro-genesis-datasource resource-name="ALL_TRADES" />
</foundation-grid-pro>

If you don't define any additional columns, this is the grid you will see:

In the context/component's own class, you can now define a new column. The code below defines a field called PRICE. There must be a field with this name in the back end. Note that we pin this field to the right.

public myCustomColumn: ColDef =
  {
    headerName: 'Custom Name',
    field: 'PRICE',
    pinned: 'right'
  }

Now let's create a new custom column in our HTML template:

<alpha-grid-pro>
    <grid-pro-genesis-datasource resource-name="ALL_TRADES" />
    <grid-pro-column :definition="${(x) => x.myCustomColumn}" />
</alpha-grid-pro>

This is the expected result:

Custom renderers

If you want to add a web component inside the grid-pro, you can use two fields when you define the columns:

• cellRenderer is responsible for creating the structure of the cell. Here you need to return a string containing the HTML that will be rendered in that cell.
• cellRendererParams enables you to supply any additional parameters that you want to add.

Here is an example ColDef to enable the cell renderer:

const customCompleteDef: any = {
  headerName: 'Header Name',
  field: 'NAME_OF_THE_FIELD',
  cellRenderer: `<span> This is a custom rendering <span>`,
  },
};

Dynamic parameters add more detail to the cell renderer. The following example passes the colour as a parameter to the cellRenderer field:

const customCellRenderer = (params) => {
  return `<span>Value from params: ${params.value}</span>`;
};

const customCompleteDef: any = {
  headerName: 'Header Name',
  field: 'NAME_OF_THE_FIELD',
  cellRenderer: customCellRenderer,
  cellRendererParams: {
    value: 'Custom Value'
    }
  },
};

In the example above, you can change the return of the customCellRenderer variable to other web components, such as buttons or comboboxes.