Table General Features

Sort and multi-sort features

You can sort data in any table column by clicking at the column header name or by clicking at the images "Sort A-Z" / "Sort Z-A"

Such a simple sorting is working by default.

If you'd like to use multi-sorting feature you only need to set

useMultiSort : true

To reset all sortings click a "Reset Sort" link. To reset sort by one or more columns click at an appropriate column header. In case you click column header that is a primary at you sorting all the sortings will be reseted.

 Keep in mind that sorting features are for PRO version only.

Pages at the table

You can break down data by pages of specified size with all the required navigation automatically created.

You only need to specify default rows number per page by setting parameter

amountPerPage : 30

Hide/show columns

This feature can be useful if a field is a key but should not be displayed.

You specify whether column is visible or not by using

isVisible

boolean property.

For example:

colDef : [
{
	title : "Name",
	titleClass : "",
	type : "String",
	width : 150, //auto
	alignment : "",
	compareFunction : compare,
	isVisible : true,
	useAutoIndex : false,
	useAutoFilter : false
},
...

Auto-index

You have a possibility to specify selective auto-index for columns (index column when creating for faster performance). In appropriate column description set useAutoIndex boolean property in True:

useAutoIndex : true

Auto-filter

You can use selective auto-filter for columns to show a drop-down list wich contains all the data for its column. So you can choose something from this list and show at the table only filtered data.

useAutoFilter : true

To set a default filter string when nothing is filtered use global variable:

var EMPTY_ROW = "no filter";

Example - Multi-sort, columns visibility, auto-index, auto-filter

You can see an example and complete code here - Multi-sort, columns visibility, auto-index, auto-filter [popup]

Read more about CodeThatTable >>