File: ../Proj.demo/Demo.page.php - ver:1.7.3
Open source - π˜“π˜π˜Šπ˜Œπ˜•π˜šπ˜Œ & 𝘊𝘰𝘱𝘺𝘳π˜ͺ𝘨𝘩𝘡 Β© 2019-2026 EV-soft *** See the file: LICENSE
Skip to the contentGo to the view tools

DEMO and examples


Clever-Html-Engine / php2html-Demo:




Test site and documentation for Clever html engine β€’ Errors may occur and future news may be shown β€’ ver.1.7.3: 78 core functions.


Be inspired - Here you can see examples of almost all htm_ system functions...

MOVE: Drag to place this card elsewhere among the cards. Alt + arrow up/down: one place. The order is remembered in this browser.The variants of Input / Output: TOGGLE-height: Click icon to toggle viewHeight for this card WIDE: Click to maximize/normalize this card width COLLAPSE: Click to close all cards EXPAND: Click to open all cards HELP:Click icon to goto custom help for this card: CustHelp.htm

TEXT variants
Demo of htm_Input Field type single-line text
Demo of htm_Input Field type barc: shown with font barcode
Demo of htm_Input Field type html: Multi-line formatted html-text

Demo of htm_Input Field type area: Multi-line text
You can put anything html-code in htm_Inbox().
Here it is a QR-code.
QR code: π˜“π˜π˜Šπ˜Œπ˜•π˜šπ˜Œ & Β© 2019-2026 EV-soft
You can put anything in htm_Inbox().
Here it is a Code128 barcode.
Barcode: Copyright EV-soft [Code128]


Demo of htm_Input Field type mail with syntax control
Demo of htm_Input Field type url with syntax control
Show/Hide password
Demo of htm_Input Field type pass with "hidden" output


NUMBER variants
Demo of htm_Input Field type intg: centered integer
Demo of htm_Input Field type dec0: centered number with 0 decimals
Unit: %
Demo of htm_Input Field type dec1: number with 1 decimal
Unit: Unit prefix
Demo of htm_Input Field type dec2: number with 2 decimal
Unit: Unit suffix


Demo of htm_Input Field type dec0: left aligned number with %-suffix
Unit: %
Demo of htm_Input Field type dec1: centered number with %-suffix
Unit: %
Demo of htm_Input Field type dec2: right aligned number with %-suffix
Unit: %


Demo of htm_Input Field type numb: number with 1 decimal
Demo of htm_Input Field type numb: left-justified number
Demo of htm_Input Field type date with browser popup selector


SELECT variants
Demo of htm_Input Field type opti: left aligned number with %-unit
Unit: %
Demo of htm_Input Field type chck: Multi-line formatted chck-text
Demo of htm_Input Field type chck: Multi-line formatted chck-text, vertical layout





Demo of htm_Input Field type radio, vertical layout


30
min=0 max=50
Demo of htm_Input Field type range: 0..50
Demo of htm_Input Field type checkbox in a row, horisontal layout
   Demo of htm_Input Field type radio in a row, horisontal layout


OTHER variants
Demo of htm_Input Field type search
Demo of htm_Input Field type time
NOT supported by all browsers
Demo of htm_Input Field type week
NOT supported by all browsers
Demo of htm_Input Field type month
NOT supported by all browsers


Demo of htm_Input Field type file
Demo of htm_Input Field type image
Demo of htm_Input Field type color
Demo of htm_Input Field type button
Drag to resize the card (or use the arrow keys). Double-click or Home: original sizeColumn view: the column decides the width of the card - only the height can be dragged (down to less than the content). Turn the column view off to change the width.
MOVE: Drag to place this card elsewhere among the cards. Alt + arrow up/down: one place. The order is remembered in this browser.Example of htm_Table(): TOGGLE-height: Click icon to toggle viewHeight for this card WIDE: Click to maximize/normalize this card width COLLAPSE: Click to close all cards EXPAND: Click to open all cards HELP:Click icon to goto custom help for this card: CustHelp.htm

Inland VAT (incoming):
No. Position number in the group
{Editable}
Description Item Description. A descriptive text of your choice
{Editable}
Account The number in the statement of account to which the sales tax must be posted.
{Editable}
%-rate VAT % rate
{Editable}
Note Note about the record
{Editable}
Delete Click the red cross to delete a entry


Notes about htm_Table():
Records can be sorted, filtered, created, modifyed and more...
The visibly rows can be scrolled in a window below the fixed header.
MOVE: Drag to place this card elsewhere among the cards. Alt + arrow up/down: one place. The order is remembered in this browser.PHP Source-code: htm_Table();View part of the demo source-code. ! TOGGLE-height: Click icon to toggle viewHeight for this card WIDE: Click to maximize/normalize this card width COLLAPSE: Click to close all cards EXPAND: Click to open all cards HELP:Click icon to goto custom help for this card: CustHelp.htm
Show the codeHide the code
function htm_Table(# capt:[ ], pref:[ ], body:[ ], suff:[ ], note:'', list:['',''], data:[], wdth:'98%', vhgh:'400px', styl:'', filt:true, sort:true, crea:true, modi:true, from:__FILE__, expo:'', rtrn:false)
    $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
)
All details, with examples: table.page.php
Drag to resize the card (or use the arrow keys). Double-click or Home: original sizeColumn view: the column decides the width of the card - only the height can be dragged (down to less than the content). Turn the column view off to change the width.
Drag to resize the card (or use the arrow keys). Double-click or Home: original sizeColumn view: the column decides the width of the card - only the height can be dragged (down to less than the content). Turn the column view off to change the width.


MOVE: Drag to place this card elsewhere among the cards. Alt + arrow up/down: one place. The order is remembered in this browser.Containers TOGGLE-height: Click icon to toggle viewHeight for this card WIDE: Click to maximize/normalize this card width COLLAPSE: Click to close all cards EXPAND: Click to open all cards HELP:Click icon to goto custom help for this card: CustHelp.htm
The system includes the following functions of container-type:.
htm_Page_()
htm_Card_()
htm_Fieldset()
htm_wrapp_()

An example of htm_Page_() is this actual page.
On this page you also see examples on multiple cards
Tables... (also a container-type)

Caption: You can use hints You place your html-objects here inside fieldset-frames...
Caption: You can use hints You place your html-objects here inside fieldset-frames...
MOVE: Drag to place this card elsewhere among the cards. Alt + arrow up/down: one place. The order is remembered in this browser.PHP Source-code: htm_Field_0_(); TOGGLE-height: Click icon to toggle viewHeight for this card WIDE: Click to maximize/normalize this card width COLLAPSE: Click to close all cards EXPAND: Click to open all cards HELP:Click icon to goto custom help for this card: CustHelp.htm
Show the codeHide the code
// PHP7-syntax: (Fixed order)
htm_Fieldset($capt='@Caption: ',
             $hint='@You can use hints',$icon='',
             $wdth='180px',$marg='',
             $attr='background-color:MintCream',
             $rtrn=false); 

// PHP8-syntax: (Named, free order, can be omitted)
htm_Fieldset(capt:'@Caption: ',
             hint:'@You can use hints',
             wdth:'180px',
             attr:'background-color:MintCream'),
             rtrn:false); 

// htm_Fieldset() must be followed by the html-content and htm_Fieldset_end() !
    
htm_Fieldset_end(rtrn:false);
echo 'You place your html-objects here inside fieldset-frames...';
Drag to resize the card (or use the arrow keys). Double-click or Home: original sizeColumn view: the column decides the width of the card - only the height can be dragged (down to less than the content). Turn the column view off to change the width.


HTML-Content
in container htm_Field()
---
Tip for htm_Field()
htm_Field(labl:'Label with hint', hint:'Tip for htm_Field()', name:'fld', body:'HTML-Content...');
MOVE: Drag to place this card elsewhere among the cards. Alt + arrow up/down: one place. The order is remembered in this browser.PHP Source-code: htm_Field(); TOGGLE-height: Click icon to toggle viewHeight for this card WIDE: Click to maximize/normalize this card width COLLAPSE: Click to close all cards EXPAND: Click to open all cards HELP:Click icon to goto custom help for this card: CustHelp.htm
Show the codeHide the code
// PHP8-syntax:
htm_Field(labl:'Label with hint',
          hint:'Tip for htm_Field()',
          icon:'',name:'fld',
          body:'HTML-Content <br>in container htm_Field() <br>---',
          wdth:'',styl:'',
          ftop:'',attr:'',
          rtrn:false);
               
Drag to resize the card (or use the arrow keys). Double-click or Home: original sizeColumn view: the column decides the width of the card - only the height can be dragged (down to less than the content). Turn the column view off to change the width.
You place your html-objects here inside Wrapper-window...

A Wrapper-window is a window with a fixed height
in with you can scroll the content
if it owerflow the window-height


MOVE: Drag to place this card elsewhere among the cards. Alt + arrow up/down: one place. The order is remembered in this browser.PHP Source-code: htm_wrapp_(); TOGGLE-height: Click icon to toggle viewHeight for this card WIDE: Click to maximize/normalize this card width COLLAPSE: Click to close all cards EXPAND: Click to open all cards HELP:Click icon to goto custom help for this card: CustHelp.htm
Show the codeHide the code
// PHP7-syntax:
htm_wrapp_($ViewHeight='60px'); // htm_wrapp_() must be followed by htm_wrapp_end() !
    echo 'You place your html-objects here inside Wrapper-window...<br><br>
          A Wrapper-window is a window with a fixed height<br>
          in with you can scroll the content<br>
          if it owerflow the window-heigh';
          
htm_wrapp_end();
    
Drag to resize the card (or use the arrow keys). Double-click or Home: original sizeColumn view: the column decides the width of the card - only the height can be dragged (down to less than the content). Turn the column view off to change the width.


Drag to resize the card (or use the arrow keys). Double-click or Home: original sizeColumn view: the column decides the width of the card - only the height can be dragged (down to less than the content). Turn the column view off to change the width.


Examples of foldable card-system:

MOVE: Drag to place this card elsewhere among the cards. Alt + arrow up/down: one place. The order is remembered in this browser.Htm_Card_(W= 560px) (click to close/open) TOGGLE-height: Click icon to toggle viewHeight for this card WIDE: Click to maximize/normalize this card width COLLAPSE: Click to close all cards EXPAND: Click to open all cards HELP:Click icon to goto custom help for this card: CustHelp.htm
Cards are used to display a collection of html-objects.
They are defined i 14 widths from 160px to 1200px and width 100%.
The height adapts to the content.

The card content can be displayed/hidden by clicking card-header text.
In the header you see som icons which can controle
actual or all cards dimensions.
Drag to resize the card (or use the arrow keys). Double-click or Home: original sizeColumn view: the column decides the width of the card - only the height can be dragged (down to less than the content). Turn the column view off to change the width.


MOVE: Drag to place this card elsewhere among the cards. Alt + arrow up/down: one place. The order is remembered in this browser.Signup: TOGGLE-height: Click icon to toggle viewHeight for this card WIDE: Click to maximize/normalize this card width COLLAPSE: Click to close all cards EXPAND: Click to open all cards
The name of the accounting for wich you have access
Type your email as your accont
Show/Hide password
Type your password for your account
Click to request a new password

   Remember me

Confirm you are not a robot
Are you human? Grab and slide to right to change state


Orange frames: required field !
Login with the given data
Drag to resize the card (or use the arrow keys). Double-click or Home: original sizeColumn view: the column decides the width of the card - only the height can be dragged (down to less than the content). Turn the column view off to change the width.


MOVE: Drag to place this card elsewhere among the cards. Alt + arrow up/down: one place. The order is remembered in this browser.Contact info: TOGGLE-height: Click icon to toggle viewHeight for this card WIDE: Click to maximize/normalize this card width COLLAPSE: Click to close all cards EXPAND: Click to open all cards HELP:Click icon to goto custom help for this card: CustHelp.htm
Demo of htm_Input Field type area: Multi-line text
Demo of htm_Input Field type mail
Demo of htm_Input Field type chck

Demo of htm_Input Field type date with browser popup selector
Demo of htm_Input Field type date with browser popup selector
Save data in this card
Keyboard shortcut: Alt+S
Drag to resize the card (or use the arrow keys). Double-click or Home: original sizeColumn view: the column decides the width of the card - only the height can be dragged (down to less than the content). Turn the column view off to change the width.




MOVE: Drag to place this card elsewhere among the cards. Alt + arrow up/down: one place. The order is remembered in this browser.User rights:In this card, you see a DEMO of the Multi-state button TOGGLE-height: Click icon to toggle viewHeight for this card WIDE: Click to maximize/normalize this card width COLLAPSE: Click to close all cards EXPAND: Click to open all cards HELP:Click icon to goto custom help for this card: CustHelp.htm
Users
Name: Title:Chart of AccountsAccount settingsJournal Entry Financial AccountingFinancial reportsDebtor ordersDebtor accountsDebtor reportsCreditor ordersCreditor accountsCreditor reportsItem stockProduct receptionProduct receptionProduction ordersProgram settingData backupSecurity
admAdministrator

bokBookkeeper

audAuditor

 
Create New User
Rights:

Password: Repeat:
 
 Meaning:

: No access

: Read only

: Full access

: Undefined
CLICK symbol to change 
Create new user

This is an example of using the multi-state button.
Save data in this card
Keyboard shortcut: Alt+S
Drag to resize the card (or use the arrow keys). Double-click or Home: original sizeColumn view: the column decides the width of the card - only the height can be dragged (down to less than the content). Turn the column view off to change the width.
MOVE: Drag to place this card elsewhere among the cards. Alt + arrow up/down: one place. The order is remembered in this browser.Popup menues:Examples of context popup menues TOGGLE-height: Click icon to toggle viewHeight for this card WIDE: Click to maximize/normalize this card width COLLAPSE: Click to close all cards EXPAND: Click to open all cards HELP:Click icon to goto custom help for this card: CustHelp.htm
You can build popup-menues with the PHP2HTML-system.
Both left-click and context right-click triggered.

Here you can test it:
Try clicking me
to test popup-menues
Try right-clicking me
to test context-menu


Drag to resize the card (or use the arrow keys). Double-click or Home: original sizeColumn view: the column decides the width of the card - only the height can be dragged (down to less than the content). Turn the column view off to change the width.
MOVE: Drag to place this card elsewhere among the cards. Alt + arrow up/down: one place. The order is remembered in this browser.Switch buttons: TOGGLE-height: Click icon to toggle viewHeight for this card WIDE: Click to maximize/normalize this card width COLLAPSE: Click to close all cards EXPAND: Click to open all cards
Click to toggle setting
Switch accepting Here you can toggle setting
Drag to resize the card (or use the arrow keys). Double-click or Home: original sizeColumn view: the column decides the width of the card - only the height can be dragged (down to less than the content). Turn the column view off to change the width.
MOVE: Drag to place this card elsewhere among the cards. Alt + arrow up/down: one place. The order is remembered in this browser.Theme, dialogs and folding: TOGGLE-height: Click icon to toggle viewHeight for this card WIDE: Click to maximize/normalize this card width COLLAPSE: Click to close all cards EXPAND: Click to open all cards
Theme (remembered in this browser):

Your own theme:


Theme-aware dialogs:   Result:

All cards:
Drag to resize the card (or use the arrow keys). Double-click or Home: original sizeColumn view: the column decides the width of the card - only the height can be dragged (down to less than the content). Turn the column view off to change the width.
MOVE: Drag to place this card elsewhere among the cards. Alt + arrow up/down: one place. The order is remembered in this browser.This card starts folded - click the caption to open it TOGGLE-height: Click icon to toggle viewHeight for this card WIDE: Click to maximize/normalize this card width COLLAPSE: Click to close all cards EXPAND: Click to open all cards Drag to resize the card (or use the arrow keys). Double-click or Home: original sizeColumn view: the column decides the width of the card - only the height can be dragged (down to less than the content). Turn the column view off to change the width.
MOVE: Drag to place this card elsewhere among the cards. Alt + arrow up/down: one place. The order is remembered in this browser.Toggleable Tabs:How to use Toggleable Tabs TOGGLE-height: Click icon to toggle viewHeight for this card WIDE: Click to maximize/normalize this card width COLLAPSE: Click to close all cards EXPAND: Click to open all cards
Here you see the htm_Tabs_() - Toggleable tabs system:
 
FOOTER for Toggleable Tabs
Drag to resize the card (or use the arrow keys). Double-click or Home: original sizeColumn view: the column decides the width of the card - only the height can be dragged (down to less than the content). Turn the column view off to change the width.
MOVE: Drag to place this card elsewhere among the cards. Alt + arrow up/down: one place. The order is remembered in this browser.Containers:The fieldset container TOGGLE-height: Click icon to toggle viewHeight for this card WIDE: Click to maximize/normalize this card width COLLAPSE: Click to close all cards EXPAND: Click to open all cards
This is af fieldSet container
Tabels, Cards, Tabs and Fieldsets is areas that contains other elements.
Drag to resize the card (or use the arrow keys). Double-click or Home: original sizeColumn view: the column decides the width of the card - only the height can be dragged (down to less than the content). Turn the column view off to change the width.
MOVE: Drag to place this card elsewhere among the cards. Alt + arrow up/down: one place. The order is remembered in this browser.Navigate functions:Various buttons to link to project pages TOGGLE-height: Click icon to toggle viewHeight for this card WIDE: Click to maximize/normalize this card width COLLAPSE: Click to close all cards EXPAND: Click to open all cards
To navigate in your project, you can use htm_Menu_TopDown() - the menu on top of all demo pages (its content: $menudata in project.init.php).
You can also use various buttons for that...
Drag to resize the card (or use the arrow keys). Double-click or Home: original sizeColumn view: the column decides the width of the card - only the height can be dragged (down to less than the content). Turn the column view off to change the width.
MOVE: Drag to place this card elsewhere among the cards. Alt + arrow up/down: one place. The order is remembered in this browser.About function parameters:PHP rules for reference to functions parameters TOGGLE-height: Click icon to toggle viewHeight for this card WIDE: Click to maximize/normalize this card width COLLAPSE: Click to close all cards EXPAND: Click to open all cards
A new way to give parameters to functions in PHP 8+ is:
Named arguments
  --> Specify only required parameters, skipping optional ones. (free order!)   --> Arguments are order-independent and self-documented.

That means a simpler way to call functions.

Positional arguments (fixed order - all arguments up to the last one you need):
htm_Input('@htm_Input(Dec2)', '', '@Demo of htm_Input Field type dec2: number with 2 decimal', '',
'dec2', 'dec2', $dec2, [], '', '', 'center', '', '', '<$ ');


Named arguments (free order - only the ones you need):
htm_Input(labl:'@htm_Input(Dec2)', vrnt:'dec2',name:'dec2',valu:$dec2,unit:'<$ ',hint:'@Demo of htm_Input Field type dec2: number with 2 decimal');


The library needs PHP 8.1 or newer.
Use named arguments...
Drag to resize the card (or use the arrow keys). Double-click or Home: original sizeColumn view: the column decides the width of the card - only the height can be dragged (down to less than the content). Turn the column view off to change the width.
MOVE: Drag to place this card elsewhere among the cards. Alt + arrow up/down: one place. The order is remembered in this browser.Demo of some newer functions:System functions developed in 2024 TOGGLE-height: Click icon to toggle viewHeight for this card WIDE: Click to maximize/normalize this card width COLLAPSE: Click to close all cards EXPAND: Click to open all cards


The logo

Missing image !
EV-soft
Here you see mine Github-logo
Demo for htm_Figure()

Details

Summery first
This is the first details...
These are summaries with collapsible details
Summery second
This is the second details...
Collapsible details

Demo of htm_Details()
htm_GoTopButt(): the buttons at the right edge of this page take you to the top, the middle or the bottom.
Demo of htm_List_() li list type
Marker: upper-roman
htm_List_(li):
  • Description1
  • Description2
  • Description3
Demo of htm_List_() ul unordered type
htm_List_(ul):
  • Description1
  • Description2
  • Description3
Demo of htm_List_() ol ordered type
Marker: square
htm_List_(ol):
  1. Description1
  2. Description2
  3. Description3
Demo of htm_List_() dl destriptive type
htm_List_(dl):
Label1
Description1
Label2
Description2
Label3
Description3



Drag to resize the card (or use the arrow keys). Double-click or Home: original sizeColumn view: the column decides the width of the card - only the height can be dragged (down to less than the content). Turn the column view off to change the width.



MOVE: Drag to place this card elsewhere among the cards. Alt + arrow up/down: one place. The order is remembered in this browser.
Program name


The htm_Card() can also be used as a program window,
with icon-links for menu and settings to the right.

Drag to resize the card (or use the arrow keys). Double-click or Home: original sizeColumn view: the column decides the width of the card - only the height can be dragged (down to less than the content). Turn the column view off to change the width.


The htm_DataGroup() function
Caption
Hint for this datagroup
Header
Label1:Data1
Label2:Data2
Label3:Data3
Label4:Data4
Footer


Use datalist to pick a value from list



MOVE: Drag to place this card elsewhere among the cards. Alt + arrow up/down: one place. The order is remembered in this browser.PDF-viewer: Data.demo/User-manual.pdf TOGGLE-height: Click icon to toggle viewHeight for this card WIDE: Click to maximize/normalize this card width COLLAPSE: Click to close all cards EXPAND: Click to open all cards


Under development
Drag to resize the card (or use the arrow keys). Double-click or Home: original sizeColumn view: the column decides the width of the card - only the height can be dragged (down to less than the content). Turn the column view off to change the width.
MOVE: Drag to place this card elsewhere among the cards. Alt + arrow up/down: one place. The order is remembered in this browser.Simple table: Just a demo TOGGLE-height: Click icon to toggle viewHeight for this card WIDE: Click to maximize/normalize this card width COLLAPSE: Click to close all cards EXPAND: Click to open all cards
Name.
{Editable}
Age
{Editable}
Email
{Editable}
Create an empty row, so you can fill in data in the yellow fields !
Keyboard shortcut: Alt+C

Table-Filtering/Searching: Hold mouse over the colored row below the column headers.

Drag to resize the card (or use the arrow keys). Double-click or Home: original sizeColumn view: the column decides the width of the card - only the height can be dragged (down to less than the content). Turn the column view off to change the width.