Slickgrid Extended
SlickGrid is a javascript data table created by Michael Leibman (michael.leibman@gmail.com, http://github.com/mleibman/slickgrid).
It supports large amount of data by presenting only visible part of data rows as html-DIVs.
So size of html DOM structure is independent from length of data table to show.
SlickGrid Extended extends SlickGrid with following features (some of them available via right click context menu):
- Automatic sizing of column widths dependent from content width
- Automatic wraping of column content to prevent horizontal scroll bar
- Sort columns according to column type (string, float, date). Date and time sorting according to given locale sign.
- User can change table height with slider at table bottom
- Context menu (right mouse click in table) with additional actions (for table and also for diagram)
- Filter table result with filter conditions per row (activate filter via context menu "show search filter")
- Show numeric column content in diagram (x-axis numeric or time line)
- Export table content in CSV formatted file (import into Excel etc.)
- Show sum, count and distinct values for numeric columns
SlickGrid Extended consists of tree files:
slickgrid_extended.js,
plot_diagram.js
and
slickgrid_extended.css.
It depends from the following products, that need to be included with Javascript and CSS before (see source code of this demo page also):
jQuery, jQuery-ui, SlickGrid, jQuery.flot, jQuery.contextmenu
SlickGrid Extended is used by calling javascript function:
> createSlickGridExtended(HTML-DIV-ID, Data-Aarray, Columns-Array, options, Additional menu entries);
Structure of column array entry
{
id: 'col0', // Column-ID, mandatory
name: 'ColName', // Column Name for display in header row, mandatory
toolTip: 'Col-Hint', // Tooltip for mouse over hint, optional
sort_type: 'string', // Defines sort function for column (supported values: 'string', 'float', 'date'), optional (default=string)
cssClass: 'myClass', // set class value for displayed rows of this column, optional
style: 'text-align: right', // set css style value for displayed rows of this column, optional
no_wrap: true, // suppress wrapping of column content if table exceeds page width, optional
max_wrap_width_allowed: 200, // maximum allowed witdh in pixel of column in wrapped mode, optional
plot_master: true, // Use this column as x-axis in diagram, optional
plot_master_time: true, // Use this column as x-axis with time line in diagram, optional
field: 'col0', // Field reference in data row, for most cases defaults to id, optional
show_pct_hint: true, // Show percentage of total column sum concatenated to mouse over hint, optional
show_pct_background: true, // Show percentage of total column sum as transparent horizontal gauge in background, optional
hidden: true, // Supress column in grid view (use it for computations only), optional
// field_decorator_function: compute cell value based on parameters, optional
// slickGrid: reference to SlickGridExtended-Object
// row_no,cell_no row number and column number starting with 0
// cell_value: original raw value of cell in data array
// full_cell_value: original complete value of cell in data array (dataContext['metadata']['columns'][columnDef['field']['fulldata'])
// columnDef: column specification
// dataContext: current complete record from data array
field_decorator_function: function(slickGrid, row_no, cell_no, cell_value, full_cell_value, columnDef, dataContext){ return cell_value; },
}
Structure of row in data array
{
col0: 'Value for first column', // column value for display, reduced to sortable content
col1: 'Value for first column', // column value for display, reduced to sortable content
....
metadata: { // Metadata for all columns of row
col0: {
title: 'myHint', // row-specific mouse over hint for this column, optional
style: 'background-color:red;', // row-specific style this column, optional
fulldata: '<a href="">data</a>', // complete column value incl. additional html-decorations, optional, only if different to column value above
},
col1: {
}
}
}
Supported options
maxHeight: '200', // maximum height in pixel (if numeric) or javascript expression to calculate height in pixel, optional
plot_area: 'area_1521', // html-DIV to display diagram in it, optional
caption: 'MyCaption', // table caption text (may be html-decorated), optional
width: 'auto', // table width, 'auto' = miminum witdh to display columns, '100%' = full parent width
line_height_single: true, // limit line height to one text line, also if content is wrapped, optional
locale: 'en', // Locale/language, supported: 'de', 'en'
multiple_y_axes: true | false, // Use own y-axis scale for every column in diagram, optional
show_y_axes: true | false, // show y-axis labels in diagram, optional
sort_method: 'QuickSort', // Define sort method for column sort. Supported values: 'QuickSort', 'BubbleSort'
Array entry of additional context menu entries
{
label: 'label', // Label for menu entry
hint: 'label hint', // Mouse over hint for entry
ui_icon: 'icon_image', // Image resource with icon
action: function(t){ alert('Hugo';} // Action to execute if menu entry is clicked
}