EverWeb Widgets

Sortable Overflow X Table
First NameLast NameDate JoinedMemember ID
GeorgeBrown 04/11/2013010
RichardGreene07/05/2012002
JohnBlack11/11/2012009
BobSmith09/23/2011005
HankMitchell03/07/2014004
WillieShakespeare11/19/2011007
JaniceJones08/17/2013006
MoiraAnderson08/16/2011001
SusanCarter03/05/2011003
BrendaWilliams10/15/2012`010008

Overflow X

Giving a table a responsive width, and have the text in the cells start return to two or more lines, creates an untidy layout. The table can be made to disappear to the right at narrow browser/device width by either setting the content to prevent text wrap or giving the table a minimum width. With both methods, the table has a container div whose overflow is set to scroll on the x-axis which allows the vistor to scroll horizontally to see the offscreen content.
Neither of these methods is particularlt elegant but it does make the table quicker to compile than using the method used in the Switch Table although it does prevent the cells from changing size as they do with the Basic Table.

Switch TableBasic Table

Responsive & Sortable

This table uses the minimum width method so that its value can be used to insert the scroll arrow at the appropriate browser/device width.The table can have up to six columns and one hundred rows.
The caption is aligned center by default. It switches to left align when the minimum width is reached and can then display an optional arrow right to indicate that the table should be horizontally scrolled.
The header can have contrasting colors and a hover color when viewed on computers and laptops to indicate it can be clicked when the sortable mode is turned on.
The rows are added using the EverWeb widget API Assets List and the data for each cell is entered in the boxes below it. This allows row data to be entered quickly by tabbing down the boxes.
The widget can use a web safe font or a non web safe font or a Google hosted one with a web safe fallback and both the cells and the table itself can have borders if required.
As can be seen from the example above, zebra striping can be turned on and there are controls for setting the font colors and background colors of the odd and even rows.
The cell border and the table's overall border can be set separately - each having a control for border width and color.
Container
The table's container has adjustable background color and opacity and a control for setting the vertical spacing from the items abve and below it.

© EverWeb Widgets -