TP2WDataTables

TP2WDataTables is a database-aware Delphi wrapper for DataTables.net

Properties

property	description
Columns	one or more TP2WDataTablesColumns
DataSource	identifies the link to the dataset where the table finds its data. set DataSource to the TWebDataSource object that links to the dataset where the table should fetch its data. DataSource allows the table to read from and navigate around the dataset
Options	please see: TP2WDataTablesOptions
RowCount	specifies the number of rows in the table. read RowCount to determine the number of rows in the table. set RowCount to add or delete rows at the bottom of the table.

Methods

method	description
Clear	clear the table and do a full redraw
ClearSelection	removes the selection, leaving all rows unselected
Redraw	redraw the table. the paging will be reset back to the first page if reset is true, otherwise the current page will be shown
SelectedRows	returns an array with row indexes
SelectRow	deselect the selected rows, and then select a row by row index
ShowLoading	show the processing indicator. see also: TP2WDataTablesOptions.ShowIndicator
HideLoading	hide the processing indicator. please note that the processing indicator disappears automatically when the table is done loading data
SortByColumn	set the ordering applied to the table

Events

event	description
OnButtonClick	fired when the user clicked on a button in a TP2WDataTablesColumn whose RenderMode is set to rmButton
OnCheckBoxClick	fired when the user clicked on a checkbox in a TP2WDataTablesColumn whose RenderMode is set to rmCheckBox
OnDblClick	fired when the user double-clicks the left mouse button when the mouse pointer is over a row
OnDrawCell	fired if TP2WDataTablesColumn.RenderMode is set to rmCustom
OnDrawComplete	fired once the table has completed a draw
OnGetLanguageCode	respond to this event with a (two-letter) ISO-639-1 language code, for example en or nl or de. this is where you can hook up with TP2WTranslator.Language
OnGetValue	this event is how you feed static data into the table (as an alternative to setting the DataSource property)
OnInitialized	this event is fired when the table has been fully initialized and data loaded. you can optionally select a row if you want (defaults to -1, in other words: no row will get selected by default)
OnRenderButton	fired if TP2WDataTablesColumn.RenderMode is set to rmButton
OnRenderCheckBox	fired if TP2WDataTablesColumn.RenderMode is set to rmCheckBox
OnRenderDateTime	fired if TP2WDataTablesColumn.RenderMode is set to rmDateTime
OnRenderNumeric	fired if TP2WDataTablesColumn.RenderMode is set to rmNumeric
OnRowCreated	this event is a callback for whenever a <tr> element is created for the table's body
OnSelectionChanged	this event is fired whenever a row got selected

TP2WDataTablesColumn

property	description
Attributes	extra HTML attributes that will get added to the column's title element. this is how you can add a data-translate attribute and have TP2WTranslator translate your column title at runtime, for example.
ButtonType	when RenderMode is rmButton, this propery decides what button to display. possible values are: btEdit or btDelete or btCustom (default). see also: TP2WDataTables.OnRenderButton event.
CssClassName	CSS classname to assign to each cell in the column
DataField	dataset field name for this column
Orderable	enable or disable ordering on this column (default True)
RenderMode	render mode: rmText (default), rmNumeric, rmCheckBox, rmButton, rmCustom or rmDateTime
Searchable	enable or disable search on the data in this column (default True)
Title	the title of a column is shown in the header cell for that column
Visible	enable or disable the display of this column (default True)
Width	this property can be used to define the width of a column, and may take any CSS value (3em, 20px etc). see also: TP2WDataTablesOptions.AutoColumnWidth.

TP2WDataTablesOptions

option	description
AutoColumnWidth	enable or disable automatic column width calculation
FixedColumns	freeze one column at the start or end of a horizontally scrolling table
FixedHeader	show a header that is sticky - i.e. the element will affix itself to the top of the window as the end user scrolls through the table
Paging	split the rows into individual pages
Responsive	enable or disable the Responsive extension
RowSelect	determines whether an entire row in the table can be selected
Searching	enable or disable search
ShowIndicator	enable or disable the display of a processing indicator when the table is being processed
ShowInfo	enable or disable table information display and the end user's ability to change the paging display length