⠿
My notes
Test site and documentation for Clever html engine β’ Errors may occur and future news may be shown β’ ver.1.7.3: 78 core functions.
Only body (the columns) and data (the rows) are needed. Each column: label, width, type, format, style, field name.
| Name {Editable} | City {Editable} | Date {Editable} |
|---|---|---|
Table-Filtering/Searching: Hold mouse over the colored row below the column headers.
Show the codeHide the code
$people= [['Anna', 'Copenhagen', '2026-10-01'], ['Bo', 'Aarhus', '2026-10-05'], ['Carl', 'Odense', '2026-09-28']]; htm_Table(body: [['@Name', '35%', 'text', '', ['left'], 'name'], ['@City', '35%', 'text', '', ['left'], 'city'], ['@Date', '30%', 'date', '', ['center'], 'date']], data: $people, crea: false, vhgh: '160px');
0d 0 decimals | 1d 1 decimal | 2d 2 decimals | 2% 2 decimals and % | >0 Blank when 0 or less | '= ' Always blank | B Bold #00000 (type html) | R Red (type html) | L Blue (type html) |
|---|---|---|---|---|---|---|---|---|
| #00042 | red text | blue text | ||||||
| #00007 | stop | go |
Show the codeHide the code
$numbers= [['1234.5', '1234.5', '1234.5', '12.5', '0', '1234.5', '42', 'red text', 'blue text'], ['-7', '-7', '-7', '100', '3', '-7', '7', 'stop', 'go']]; htm_Table(body: [ ['0d', '10%', 'show', '0d', ['right'], 'f0', '@0 decimals'], ['1d', '10%', 'show', '1d', ['right'], 'f1', '@1 decimal'], ['2d', '12%', 'show', '2d', ['right'], 'f2', '@2 decimals'], ['2%', '12%', 'show', '2%', ['right'], 'fp', '@2 decimals and %'], ['>0', '8%', 'show', '>0', ['right'], 'fz', '@Blank when 0 or less'], ["'= '", '8%', 'show', '= ', ['right'], 'fb', '@Always blank'], ['B', '12%', 'html', 'B', ['center'], 'fB', '@Bold #00000 (type html)'], ['R', '14%', 'html', 'R', ['center'], 'fR', '@Red (type html)'], ['L', '14%', 'html', 'L', ['center'], 'fL', '@Blue (type html)']], data: $numbers, crea: false, modi: false, filt: false, sort: false, vhgh: '130px');
The numbers use the separators of the program (DecimalSep / ThousandsSep).
| [0] align [0] text-align {Editable} | [1] background [1] cell background {Editable} | [2] field style [2] style of the text field {Editable} | [3] marking [3] cell background (row marking) {Editable} | [4] font-size [4] font-size {Editable} |
|---|---|---|---|---|
Show the codeHide the code
$styled= [['Normal', 'Yellow cell', 'Italic field', 'Marked cell', 'Small text'], ['Normal', 'Yellow cell', 'Italic field', 'Marked cell', 'Small text']]; htm_Table(body: [ ['@[0] align', '20%', 'text', '', ['right'], 'a', '@[0] text-align'], ['@[1] background', '20%', 'text', '', ['left', 'lightyellow'], 'b', '@[1] cell background'], ['@[2] field style', '20%', 'text', '', ['left', '', 'font-style:italic; color:#900;'], 'c', '@[2] style of the text field'], ['@[3] marking', '20%', 'text', '', ['left', '', '', '#d8ecff'], 'd', '@[3] cell background (row marking)'], ['@[4] font-size', '20%', 'text', '', ['left', '', '', '', '10px'], 'e', '@[4] font-size']], data: $styled, crea: false, filt: false, sort: false, vhgh: '130px');
Each row can be a list (the values in the order of body) or have field names (e.g. a database row) - then the values are placed by the field names, in any order, and a missing field is empty. Both kinds can be mixed, as here.
Id | Name {Editable} | City {Editable} |
|---|---|---|
Show the codeHide the code
$rows= [['1', 'Anna', 'Copenhagen'], # A list: the values in the order of body ['city' => 'Aarhus', 'id' => '2', 'name' => 'Bo'], # Field names: any order ['name' => 'Carl', 'id' => '3']]; # Field names: a missing field is empty htm_Table(body: [['@Id', '20%', 'show', '', ['center'], 'id'], ['@Name', '40%', 'text', '', ['left'], 'name'], ['@City', '40%', 'text', '', ['left'], 'city']], data: $rows, crea: false, filt: false, vhgh: '160px');
No. | Description {Editable} | Account {Editable} | %-rate {Editable} |
|---|---|---|---|
Show the codeHide the code
$vat= [['1', lang('@Input VAT'), '66200', '25,00'], ['2', lang('@Output VAT'), '66201', '25,00'], ['3', '=SUM(A1:A9)', '66202', '-12,50']]; # A formula is written with a leading apostrophe htm_Table(body: [['@No.', '10%', 'show', '', ['center'], 'vat_no'], ['@Description', '50%', 'text', '', ['left'], 'vat_desc'], ['@Account', '20%', 'text', '', ['center'], 'vat_acc'], ['@%-rate', '20%', 'text', '', ['right'], 'vat_rate']], data: $vat, crea: false, filt: false, vhgh: '160px', expo: 'tableexport.csv');
Read from the library itself: the name, the default value and the description.
Parameter | Default | Type | Description |
|---|---|---|---|
| capt | [] | array | Fields above the table: [0:labl, 1:wdth, 2:type, 3:name, 4:algn, 5:hint, 6:plho, 7:valu] type: show (only the text) / rows (the number of rows + 6) / html (7 as HTML) / data (a field with name 3 - posted) / text, number, date ... (a field without name - not posted). Shown only when the table has data. |
| pref | [] | array | Columns before the data: [0:labl, 1:wdth, 2:-, 3:-, 4:[algn], 5:hint, 6:html] 6 is the same HTML in every row; name="x" becomes name="i<row>_x" |
| body | [] | array | The data columns: [0:labl, 1:wdth, 2:type, 3:frmt, 4:[style], 5:fkey, 6:hint, 7:plho, 8:calc, 9:[list, css]] 2 type: text data area sttu (field) / show (read only) / intg (integer) / date / ddwn (select, 9) / opti (htm_Input option field, 9) chck (checkbox) / bold ital (read only: is the text bold/italic) / indx keyn (the value as a link, clickable) html htm0 (the value as HTML) / blnk (nothing) / hidd (hidden, posted) / calc (a number from field 8) / vars (old select) 3 frmt: 0d 1d 2d (decimals) / 2% (2 decimals + %) / >0 (blank when 0 or less) / '= ' (always blank) / B R L (bold #00000, red, blue - type html) 4 style: [0:text-align, 1:cell background, 2:field style (text fields), 3:cell background (row marking), 4:font-size] 5 fkey: the field name - posted as fkey[] (one value per row, in the order of the rows) 8 calc: fn($row) => number - $row is [fkey => value], e.g. fn($r) => toNum($r['qty']) * toNum($r['price']) 9 list: [[[value, label, hint], ...], 'css of the select'] (ddwn/opti) |
| suff | [] | array | Columns after the data (only with modi): [0:labl, 1:wdth, 2:type, 3:-, 4:[algn], 5:hint, 6:valu] type rowact: row actions in the browser, 6 = 'del copy move undo' (any of them) type button: a submit button named btn_<del|hid|cpy|ren|sel>_<table>_<row> - by 0: @Delete @Hide @Copy @Rename @Select, 6 = its icon else: 6 is shown as HTML (an "open-modal_N" in it opens one dialog per row) |
| note | '' | string | HTML below the table ('' with filt: a hint about the filter) |
| list | ["",""] | array | The row rules of customRules.inc.php, e.g. ['KONTOPLAN'] - and the options of 'vars' columns |
| data (&) | [] | array | The rows (by reference - give a variable): [[v0, v1, ...], ...] in the order of body, or [[fkey => value, ...], ...] |
| wdth | '98%' | string | The width of the table |
| vhgh | '400px' | string | The height of the scrolling window with the rows (the header stays) |
| styl | '' | string | Style for the span that holds the table |
| filt | true | bool | A filter field below each header |
| sort | true | bool | Sort by clicking a header (SHIFT+click: by more columns) |
| crea | true | bool | A button that adds an empty row - a string is the label of the button |
| modi | true | bool | The fields can be changed, and the suffix columns are shown |
| from | __FILE__ | string | Where the table is made (__FILE__ / __FUNCTION__) - shown by indx/keyn clicks |
| expo | '' | string | Also write the data to this CSV file (UTF-8, Excel-safe) |
| rtrn | false | bool | Return the HTML instead of echoing it |
htm_Table() uses Mottie Tablesorter (sticky header, sort, filter, zebra). mottie.github.io/tablesorter
Without jQuery: htm_TableTools() gives search and sort for any table.
Without jQuery: htm_TableTools() gives search and sort for any table.