luid-table-grid

A table directive to display any data

• Show datas as a table.
• Handles fixed colums and scrollable columns.
• Can take any form of data as a n input.
• Filtering and order by supported.
• Show custom html in cells.
• Handles nested headers.
• Text alignment property : left/center/right

• header : this describes your header and how you get values for cells. See example below.
• datas : a list of things you want to display.
• height : your table won't be higher than that (px).
• height-type : (global | body, default: body) specify if the given height should be applied on the whole tablegrid (global), or on the body (body)
• selectable : if this attribute is present, your table will contain a checkboxes column as first fixed column.
• default-order : At first load, your table will be order by the header of which the label is the value of this attribute. The value can be optionally prefixed with + or - to control ascending or descending sort order.
• on-row-click : can specify a function which will be called on a row tablegrid click. The function take one parameter containing the row object.

 <luid-table-grid header="headerTree" datas="people" height="500"></luid-table-grid>

 // example header
{
node: null,
children: [
	{
		node: {
			filterType: Lui.Directives.FilterTypeEnum.TEXT,
			fixed: true,
			label: "id",
			width: 20,
			getValue: function (someone) { return someone.id; },
			getOrderByValue: function (someone) { return someone.id; },
			colspan: null,
			hidden: false,
			rowspan: null,
			textAlign: "right",
		},
		children: []
	},
	{
		node: {
			filterType: Lui.Directives.FilterTypeEnum.SELECT,
			fixed: false,
			label: "name",
			width: 20,
			getFilterValue: function (someone) { return someone.name; },
			getValue: function (someone) { return someone.name; },
			colspan: null,
			hidden: false,
			rowspan: null,
			textAlign: "left",
		},
		children: [],
	},
]
}