Configuration

To render the data in a table, we need to create a configuration object like this, were rowData is our interface for our row.

config: GtConfig<rowData> = {
  "settings":[], // An array of settings
  "fields":[], // An array of fields
  "totals":[], // An array of rows used for totals (OPTIONAL)
  "data":[] // An array with row data
}

Settings array

Each column must have it's own settings object that can have the following properties:

Key	Type	Usage	Default
objectKey	string	unique identifier for column, used for data mapping
visible	boolean	should column be visible	true	(OPTIONAL)
enabled	boolean	should column be enabled, if not enabled a user shouldn't be able to toggle visibility for column	true	(OPTIONAL)
sort	string	"enable", "asc" or "desc" use "disable" to disable sorting	'enable'	(OPTIONAL)
sortOrder	number	initial sort order (table supports sorting on multiple columns)	order in array	(OPTIONAL)
columnOrder	number	initial column order	order in array	(OPTIONAL)
export	boolean	should column be included when exporting to CSV	true	(OPTIONAL)
search	boolean	should column be included when using global search	true	(OPTIONAL)
lockSettings	boolean	should column settings be locked for editing (hidden i columns settings component etc.)	false	(OPTIONAL)

Usage:

[{
    "objectKey":"first_column",
    "sort":"asc"
  }, {
    "objectKey":"second_column",
    "sort":"enable"
  }, {
    "objectKey":"third_column",
    "sort":"disable"
}]

Fields array

Each column must also have it's own field definition object that can have the following properties:

Key	Type	Usage
name	string	heading for column
objectKey	string	unique identifier for column, used for data mapping
classNames	string	class names to be applied to column	(OPTIONAL)
columnClass	function(row, column) or string	string containing class names for column or function that returns a string see example	(OPTIONAL)
rowClass	function(row, column) or string	string containing class names for row or function that returns a string see example	(OPTIONAL)
render	function(row)	custom function for data presentation, ex. display 1480579417501 as 2016-12-01 09:03:37	(OPTIONAL)
value	function(row)	custom function for data manipulation/creation ex. combine first name and last name into a new column	(OPTIONAL)
sort	function(row)	custom function used when sorting column, i.e. you might want to sort a value as a number but display (render) it as a string	(OPTIONAL)
search	function(row)	custom function used when searching column, i.e similar to render, you might want to match on something else than the raw data. If no search function is defined, generic table will look for a value function and if no value function is defined table will use raw data value.	(OPTIONAL)
export	function(row)	custom function used when column is exported, i.e. you might want it to be displayed differently when exported to CSV	(OPTIONAL)
click	function(row)	execute function when column cell is clicked	(OPTIONAL)
expand	object	object containing custom component to be displayed in expanded row, optionally pass custom data using data property in object (supports a function with row as parameter) see example.	(OPTIONAL)
columnComponent	object	object containing custom component to be displayed in table cell see example.	(OPTIONAL)
inlineEdit	boolean, type or array	if true table cell will be editable using input field with type text, pass password for type password, number for type number, email for type email. If an array of values are passed they will be presented in dropdown.	(OPTIONAL)

Usage:

[{
    "objectKey":"first_column",
    "name":"First column"
  }, {
    "objectKey":"second_column",
    "name":"Second column"
  }, {
    "objectKey":"third_column",
    "name":"Third column"
}]

Data array

The data for each row needs to be stored in an object where each key in the object should map against object keys specified in the settings and field arrays ex.

[{
  "first_column":"first row",
  "second_column":1,
  "third_column":"third column"
}, {
  "first_column":"second row",
  "second_column":2,
  "third_column":"third column"
}]

Totals array

Pass an array with totals, each object in the array represents a row which could be either total, average etc. Note that it's optional to use gtTotals.

Key	Type	Usage
name	string	heading shown in table for row, i.e. total, sum, average etc.
position	'header' or 'footer'	place in header or footer of table, header is default	(OPTIONAL)
update	boolean	should value update when data is filtered/sorted, by default it's updated	(OPTIONAL)
fields	object	object with key and value pairs, key should be object key of the field/column the value is connected to. The value could be either static or created on the fly using a function. The whole data array is passed to the function together with the object key for the specific column. See basic usage below.

The example below uses map and reduce to sum all sales values within the data array, but feel free to write your own custom function to do whatever you like or pass a static value or string like the second key 'revenue', which uses a static string.

Usage:

[{
    name: 'Total',
    fields: {
        sales: (rows, objectKey) => {
            return rows
                .map(row => parseFloat(row[objectKey]))
                .reduce((sum, value) => {
                    return (isNaN(sum) ? 0 : sum) + (isNaN(value) ? 0 : value)
                }).toFixed(2)
        },
        revenue: '100 000,00'
    }
}]

Pass config using inputs

Read more about available inputs here