# Introduction

The hhl-datagrid component is used for displaying tabular data. Features include sorting, filter, virtual scroll

# Data

The data need to be an array of objects and added by using :data=""

# Font size

By adding the property font-size="value" you can set the font size.
The default is "1em".

# Row size/lines

By adding the property :lines="value" you can set the amount og lines that will be shown i each row.

# Styling rows

By adding the property :row-style="function" you will get a callback function for every row to set a style.

# Filter global

By adding the property :filter="function" you will get a callback function for every row.

# Filter global "Google like"

By adding the property :filter-all="value" you will filter on all columns by the value

# Rows Changed

By adding the event @rowsChanged="function" you will get a data object
data.list: is the filtered list.
data.orgList: is the origanal list.

# Columns

The hhl-datagrid-column is how you add columns to the datagrid.
It have the following properties.

Name	Values	Default	Describtion
prop			The name of the item to bind to in the datasource.
label			The text to show in the header.
sorting	up/down/none/disabled	none	The sorting start value sorting is active by default.
filter	text/number/date/select		The type of filter to use.
width	value/auto	auto	The width of the column. value is a number in px.
max-width		1000	The max width of the column.
min-width		34	The min width of the column.
cell-format	function		A callback function to format the value.
cell-style	function		A callback function to style the cells in the column.
cell-html	function		A callback function that should return a HTML string.

# Column width.

You can adjust the width of a column with the mouse by dragging the border in the header.
By adding the property width="auto" the column width will auto adjust the width.
By adding the property width="80" the column width will be set to 80px.
By adding the property max-width="200" the column max width will be set to 200px.
By adding the property min-width="100" the column min width will be set to 100px.

# Column sorting

By Default sorting is enabled for all columns
If you click the header, a dropdown will come with the sorting option.
By adding the property sorting="value" you can set the start sorting to up or down
By adding the property sorting="disabled" you can remove sorting for the column.

# Column filtering

If you enable filter and you click the header, a dropdown will come with the filter option.
By adding the property filter="text" will add a string filter option.
By adding the property filter="number" will add a number filter option.
By adding the property filter="date" will add a date filter option.
By adding the property filter="select" will add a select filter option.

# Column format value

By adding the property :cell-format="function" you will get a callback function for every cell in the column to format the value.

# Column cell style

By adding the property :cell-style="function" you will get a callback function for every cell in the column to style the cell.

# Column custom HTML

By adding the property :cell-html="function" you will get a callback function that should return a string with HTML.