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.
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:
public myMultipleCustomColumnConfigArray: ColDef[] = [
{
headerName: 'Country',
field: 'country',
// cellRenderer, etc
},
{
headerName: 'Custom Year Header',
field: 'year',
width: 100,
// cellRenderer, etc
},
];
public mySingleCustomColumnConfigObj: ColDef =
{
headerName: 'Type',
field: 'type',
width: 50,
// cellRenderer, etc
}
;
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:
<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
:
import {html, ref, repeat} from '@genesislcap/web-core';
...
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.
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.
<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.