Grid Configuration

Grid configurations are passed as the third argument to the FusionGrid constructor while instantiating it. It contains an object with several properties to configure, like columns, rows, inline charts, etc. Here is the syntax:

var grid = new FusionGrid(container, dataTable, gridConfig);COPY

Let’s explore all possible configurable properties available in the grid configuration.

Columns and Headers

Using this property you can configure columns in the grid. It accepts an array of objects. Here is the syntax:

var gridConfig = {
 columns: [
   {
     key_1: 'value_1,
     key2_2: 'value_2',
   },
 ]}COPY

Selecting columns

By default, all data table columns are rendered in the grid. The user can customize this behavior as follows:

config = {
    columns: [{
        field: 'country_name'
      }, {
          field: 'continent'
      }]
};COPY

Here the field is the column name mentioned in the data table schema.

Changing Column Header name

The header text is the same as the corresponding schema field name for a column bound with a schema field. The user can provide the header name explicitly as follows:

config = {
    columns: [{
        field: 'country_name',
            headerText: 'Country'
      }, {
          field: 'continent',
            headerText: 'Continent',
      }]
};COPY

A blank or empty string is also a valid header text if the user wants to render a column without any header name.

Changing Column Appearances

The user can change the appearance of all the cells of a column, including the header cells, as follows:

config = {
    columns: [{
        field: 'country_name',
            class: 'a-css-class'
      }, {
          field: 'continent',
            class: 'another-css-class'
      }]
};COPY

Or change the appearance of just header cell like this:

config = {
    columns: [{
        field: 'country_name',
            headerClass: 'a-css-class-name'
      }, {
          field: 'continent',
            headerClass: 'another-css-class-name'
      }]
};COPY

Or change the appearance of value cells like this:

config = {
    columns: [{
        field: 'country_name',
            cellClass: 'a-css-class-name'
      }, {
          field: 'continent',
            cellClass: 'another-css-class-name'
      }]
};COPY

We recommend using class only to style the grid.

Column Grouping

To create a multi-column group, the user needs to define group names and then columns as children of the group. Any column which has children is considered as a group. The Group header must not be linked to any field in the schema, if it’s specified, the field attribute will be ignored, and a warning is displayed.

config = {
    columns: [{
            headerName: 'Employee Details',
            children: [{
            field: 'Name'
            },{
            field: 'Country'
            }]
       }]
};COPY

Configuring Column Hover

By default, column hover is not enabled, but the user can enable the setting and also define hover style as follows:

config: {
    columns: [{
        field: 'Address',
        width: '300px',
        hover: {
            enable: true,
            class: 'css-class-name'
        }
    }]
}COPY

Column Type and Format

Before going into the details of column type, there’s an important attribute called formatter. Formatter is a callback function that executes before rendering each cell, as follows:

formatter: function(params) {}COPY

Here params contain three major properties -

• cellValue - contains the current cell value
• values - values of all cells of the current record
• cellIndex - index of the cell

There are a total of 4 column types available in the grid; string, number, datetime, and html.

String Column Type

The most common type, and you can use it as follows:

config = {
    columns: [{
        field: 'country_name',
            type: 'string'
      }]
};COPY

Number Column Type

Add numbers like this:

config = {
    columns: [{
        field: 'Revenue',
            type: 'number'
      }]
};COPY

And add numbers using formatters, like this:

config = {
    columns: [{
        field: 'Revenue',
        formatter: function(params) {
            return '$' + parseFloat(params.cellValue).toFixed(2);
            }
      }]
}COPY

In this example, the decimal number is fixed to 2 values, always and also, to denote the currency $ is added before the value.

Datetime Column Type

Here is how to use the Datetime style for your columns:

config = {
    columns: [{
        field: 'registration_date',
            headerText: 'Registration Date & Time',
            type: 'datetime'
      }]
};COPY

HTML Column Type

When custom HTML cells are needed.

config = {
    columns: [{        
            headerText: 'Player Name',
            type: 'html',
            template: function(params) {
                return (

                    '<span class='player-name'><img src=' + params.values['playerPicURL'] + '/>' + params.values['playerName'] + '</span>'
                );
            }
      }]
};COPY

Here is a list of properties supported in columns:

Layout Configurations

Allows you to define layout-related properties for the grid. It accepts only objects. Choose between these four layout configurations for your grid; type, density, template, and autoHeight.

var gridConfig = {
 layout : { key_1: 'value_1' }
}COPY

Layout Type

Choose your layout type by selecting between row or card.

config = {
    layout: {
        type: 'row'/'card'
    }
}COPY

Layout Density

There are three options available to control the density of rows in a grid; default, compact, and comfortable.

config = {
    layout: {
        type: 'row',
        density: 'default'/'compact'/'comfortable'
    }
}COPY

Automatic Height

Users can choose to enable the autoHeight attribute. If the volume of data is high, then vertical scrollbars appear and if the volume of data is low, then the rest of the space is left blank. To override this behavior, i.e. expand or shrink grid size based on its content, users can choose to enable the flag autoHeight. For example:

config = {
    layout: {
        autoHeight: true
    }
}COPY

Number of cards in a row

Use this attribute to configure the number of cards you wish to place in a row. Every card will have the same width and if any text cannot be accommodated in the assigned width, then an ellipsis will appear. For example:

config = {
    layout: {
        numCards: 4
    }
}COPY

Here is a list of configurations available under layout:

Pagination

This property allows you to configure the pagination component of the grid. Here is the syntax:

var gridConfig = {
 pagination : { key_1: 'value_1' }
}COPY

Simple Pagination

Use only two arrows to navigate between pages, like this:

config = {
    pagination: {
        enable: true
    }
}COPY

Show Page Numbers

To show the page number on top of the navigation arrows, follow this example:

config = {
    pagination: {
        showPages: {
            enable: true
        }
    }
}COPY

Show Total number of Pages

To show the current page number, the total number of pages as well as arrows, follow the example below:

config = {
    pagination: {
        showPages: {
            showTotal: true
        }
    }
}COPY

Jump to a specific page

Users can also enable jumping to a specific page, apart from linear navigation.

config = {
    pagination: {
        showPages: {
            userInput: true
        }
    }
}COPY

Show Total number of Rows

This attribute shows the total number of rows in the grid and the currently viewed rows.

config = {
    pagination: {
        showRecordCount: true
    }
}COPY

Configuring Page Size

Users can configure the default page size like this:

config = {
    pagination: {
        pageSize: {           
            default: 30
        }
    }
}COPY

Or use the options attribute and select page size from the dropdown options:

config = {
    pagination: {
        pageSize: {
           options: true/false/[number array],
        }
    }
}COPY

If a user provides an array of numbers, those numbers are shown in the dropdown options. If a user provides any value beyond the range of the total number of elements, we will show those values, but if someone chooses those values, we will show all elements. If all provided values are beyond the range, we will fall back to default options. If the default page size is not provided but options are configured, then the first value of the options array will be considered the default page size. Suppose both options and default page size are configured, but the default page size value is not present in the options array. In that case, the first value of the options array will be considered as default page size, and additionally, an error will be logged in the background.

First and Last pages

If this control is set to true, then two buttons will appear to navigate to the first or last page:

config = {
    pagination: {
       showJumpToEndButtons: true
    }
}COPY

Users can also individually disable the start or end button

config = {
    pagination: {
       showJumpToFirstPageButton: false,
       showJumpToLastPageButton: true
    }
}COPY

Here is a list of the available options:

Tooltips

This property is part of column configuration. Tooltips for cells or columns should be configured on the individual column level. Here is the syntax:

var gridConfig = {
 columns: [
   {
     field: 'value_1',
     tooltip : { }, // tooltip configs
   },
 ]}COPY

Enabling Tooltips

Enable header and column tooltips like this:

config = {
    columns: [{
        field: 'country_name',
            tooltip: {
                enableHeaderTooltip: true/false
            }
      }]
};COPY

By default, header tooltips are enabled once the tooltip object is defined. However, users can select to disable/enable header tooltip specifically.

Configuring Header Tooltips

To provide custom text to tooltip in the header, follow the example below:

config = {
    columns: [{
        field: 'country_name',
            tooltip: {
                headerTooltip: 'Countries having trade connection.'
            }           
      }]
};COPY

To show the tooltip on hovering a separate info/helper icon in the header, follow the example below:

config = {
    columns: [{
        field: 'country_name',
            tooltip: {
                headerTooltip: 'Countries having trade connection',
                enableHeaderHelperIcon: true
            }           
      }]
};COPY

Enable/Disable a cell tooltip

Tooltip is automatically enabled once the tooltip object is defined. But to selectively disable or enable cell tooltip, users can follow the example below:

config = {
    columns: [{
        field: 'country_name',
            tooltip: {
                enableCellTooltip: true
            }
      }]
};COPY

If cellTooltip is not defined, but the tooltip is enabled, then the cell content will be shown in the tooltip.

Conditionally define content for cell tooltip

config = {
    columns: [{
        field: 'country_name',
            tooltip: {
                cellTooltip: function(params) {
                if (params['country_name']) {
                return 'Country : ' + params['country_name'] + ' in ' + params[continent]; 
                    } else {
                      return 'Country name is missing';
                }
            }
      }]
};COPY

Cell info/helper tooltip

Users can enable info/helper tooltip in cells using the following function:

config = {
    columns: [{
        field: 'country_name',
            tooltip: {
                cellTooltip: function(params) {
                if (params['country_name']) {
                return 'Country : ' + params['country_name'] + ' in ' + params[continent]; 
                    } else {
                      return 'Country name is missing';
                    }
                },
                enableCellHelperIcon: true
            }           
      }]
};COPY

Here is a list of properties available:

Row Configurations

Allows you to configure rows of the grid. It accepts an object of properties explained below. Here is the syntax:

var gridConfig = {
 rowOptions: { key_1: 'value_1' }
}COPY

Setting Row Height

Row height affects all rows, but if the user specifically wants to define header row heights, then they can do so following the example below:

config = {
    rowOptions: {
        rowHeight: '50px',
        headerRowHeight: '20px'
    }
}COPY

Styling Row

Users can apply row style. The attributes ‘style’ and/or ‘css’ can be used to style rows.

config = {
    rowOptions: {
        style: {background: 'green'},
        class: ['row-class1','row-class2']
    }
}COPY

If row style and cell style conflict, then cell style gets the precedence.

Row Hover

Like styling row and column, hoverStyle and hoverClass accepts both style/css and a function for any rule-based hover. By default, row hover is enabled, but users can override these settings.

config = {
    rowOptions: {
        hover: {
            enable: true,
            style: style object/func,
            class: css class name/func
        }
    }
}COPY

Row Selection

If selection is enabled, then on mouse click single row is selected

config = {
    rowOptions: {
        rowSelection: {
            enable: true
        }
    }   
}COPY

Users can also select multiple rows with checkboxes, as follows:

config = {
    rowOptions: {
        rowSelection: {
            showSelectionCheckbox: true/false
        }
    }
}COPY

Here is the list of properties:

Conditional Formatting

Users can enable row and column conditional formatting to improve their grids.

Column Conditional Formatting

Column or cell conditional formatting can be achieved using the formatter option, style, by defaultRow or CSS. Formatter gives more flexibility, as shown in the example below: For instance, if a user wants to color red if revenue is less than 1000, color the cell yellow if revenue is between 1000 to 5000 and above that color green.

config = {
    columns: [{
        field: 'Revenue',
        formatter: function(params) {
            let value = '$' + formatNumbers(params.cellValue);
            let bgColor = '#ff0000';
            if (params.cellValue > 1000 && params.cellValue < 5000) {
                bgColor = '#ffff00'
            } else if (params.cellValue > 5000) {
                bgColor = '#00ff00'
            }
            return '<span style="background-color: "' + bgColor + '/>' + value + '</span>';
        }
    }]
}COPY

Using style or CSS is more recommended when you are required to set only style conditionally, like this:

config = {
    columns: [{
        field: 'Revenue',
        style: function(params) {           
            let bgColor = '#ff0000';
            if (params.cellValue > 1000 && params.cellValue < 5000) {
                bgColor = '#ffff00'
            } else if (params.cellValue > 5000) {
                bgColor = '#00ff00'
            }
            return { background-color: bgColor };
        }
    }]
}COPY

Row Conditional Formatting

Conditional style can also be applied to rows. The RowOptions has both ‘style’ and ‘css’ attributes that accept functions. If we want to implement the same example above, we want to apply the style to row-level instead of cell-level.

config = {
    rowOptions: {
        style: function(params) {
            let revenue = params.values['Revenue'];
            if (revenue < 1000) {
                return {background-color: '#ff0000'}
            } else if (revenue > 1000 && revenue < 5000) {
                return {background-color: '#ffff00'}
            } else {
                return {background-color: '#00ff00'}
            }
        }       
    }
}COPY

The params consist of the following attributes: values - consists of all cell values rowIndex - index of the row on the current page node - DOM node of row

Viewports

FusionGrid provides fice default viewports with default layouts and default breakpoints.

Sorting

The following are sorting configurations you can add to your grid.

Column Sorting

Users can enable sorting for each column individually.

config = {
    columns: [{
        field: 'country_name',
            sortable: true
      }]
};COPY

The sorting operation triggers when clicking anywhere on the header (apart from other icons like a filter or a tooltip). The first click on the header sorts the column in ascending order. The second click sorts the column in descending order, and a third click clears the sorting.

Enabling or disabling Sorting

Users can choose to enable column sorting by setting the sorting attribute to true or false.

config = {
    columns: [{
        field: 'country_name',
            sortable: true/false
      }]
};

config = {
    columns: [{
        field: 'country_name',
            sortable: {
                enable: true/false
            }
      }]
};COPY

Pre-defined Sorting

Apply sort to specific columns by mentioning the applySort attribute to either asc or desc order.

config = {
    columns: [{
        field: 'Revenue',
            sortable: {
                applySort: 'desc'
            }
      }]
};COPY

Events

All event listeners can be defined in JSON files. And this is the recommended way.

config = {
    'events': {
        'initialized': function(eventObj) { console.log('Grid Initialized - but not yet rendered'); },
        'rendered': function(eventObj) { console.log('Grid rendered'); },
    }
}COPY

Filters

You can apply four different types of filters to your columns; column conditional filter, value filter, custom filter, and quick search filter.

Column Conditional Filter

Apply column filters by enabling them like this:

config = {
    columns: [{
        field: 'Revenue',
            filter: true
      }]
};COPY

Or like this:

config = {
    columns: [{
        field: 'Revenue',
            filter: {
                conditionalFilter: {
                    enable: true
                }
            }
      }]
};COPY

The following are the conditions that users can apply to the filters:

Enable Multiple Filters

Users can enable multiple filters per column by following the example below:

config = {
    columns: [{
        field: 'Revenue',
            filter: {
                conditionalFilter: {
                    enableMultiFilter: true
                }
            }
      }]
};COPY

Users can combine multiple filters per column using the and/or operations.

Show the Apply and Cancel buttons

To enable the Apply and Cancel buttons on your filters, make sure to enable showApplyCancel like the example below:

config = {
    columns: [{
        field: 'Revenue',
            filter: {
                conditionalFilter: {
                    showApplyCancel: true
                }
            }
      }]
};COPY

Value Filters

Enable value filters to show a list of all available values for a particular column. To enable a value filter, follow the example below:

config = {
    columns: [{
        field: 'Category',
            filter: {
                valueFilter: {
                    enable: true
                }
            }
      }]
};COPY

Enabling Multi-select mode

Users can enable the multiple selection operation to use checkboxes to select multiple columns or use the ‘Select All’ operation to select all columns.

config = {
    columns: [{
        field: 'Category',
            filter: {
                valueFilter: {
                    enableMultiSelect: true
                }
            }
      }]
};COPY

Enabling the search box

Users can also enable a search box to search for values like shown in the example below:

config = {
    columns: [{
        field: 'Category',
            filter: {
                valueFilter: {
                    enableMultiSelect: true,
                    enableSearch: true
                }
            }
      }]
};COPY

Custom Filters

Users can customize filters by defining conditions to apply to your filter. Follow the example below:

config = {
    columns: [{
        field: 'Nationality',
            filter: {
                customFilter: {
                    options: [{
                        displayText: 'English Premier League',
                        filterFunc: function(row, column) {
                            return ['Manchester Utd', 'Liverpool', 'Arsenal'].indexOf(row[columns['Nationality']]) >= 0;
                        }
                    }, {
                        displayText: 'Bundesliga',
                        filterFunc: function(row, column) {
                            return ['Bayern Munich', 'Borussia Dortmund'].indexOf(row[columns['Nationality']]) >= 0;
                        }
                    }, ...]
                }
            }
      }]
};COPY

Each option has two configurations a display text and a filter function.

Specify Defaults

Specify your preferences by setting your default common column configurations, using the defaultColumnOptions, like this:

config = {
    defaultColumnOptions: {
        width: 300,
        enableHover: true,
        hoverClass: 'col-hover'
    },
    columns: [{ field: 'Country' },{ 'Continent' },{ 'Revenue' }]
}COPY

The difference between defaultColumnOptions and columns is: columns allow you to configure on an individual column level while defaultColumnOptions allows you to define it on the global level. All the properties available in columns are available in defaultColumnOptions as well with the only exceptions of field and type.