EverWeb Widgets

Data Tables & Graphs

Updates to the EverWeb widget API have made it possible to easily create tables. This widget pack includes tables for various purposes, a data column layout, a bar graph with optional animation and a pie chart with a 3d option. A widget for creating a basic table with up to 8 columns can be found in the Elements section
Click any widget icon to see the demo …

Styled Table

The table can accommodate up to six columns and one hundred rows. The header can have a contrasting style and has options for removing the cell borders as well as font style, weight and text align.
The first column can have a contrasting background and font color and the rows can be zebra striped. An outer border or a box shadow can be added.

Link Column Table

The last column in this table can be configured as a link tab. The file path can be a relative one to an internal page or file or an absolute one to an external source. The link can open in a new window if required.
Both the header and the link column can have contrasting font and background colors and the link column has options for hover colors and text decoration.

Price or Menu Table

By default, the table has three columns for item, description and price. It can also be arranged as a two column table for creating restaurant style menu price lists.
The header is optional and can have contrasting styles to the rest of the table rows. The rows can have zebra striping if required.

Sortable Table

A table with the ability to sort each column by clicking the column header. The table has an optional caption which can be used to indicate to visitors that they can sort the data.
The table to six columns and one hundred rows with optional zebra striping. The table can have a border and/or a box shadow if needed.

Event List

An event list with up to five columns and an optional header which can have contrasting colors. The last column is configured as a link tab to a web page or download with more info.
The table can accommodate up to one hundred rows and the rows can be zebra striped. There are options for cell borders and a table border and/or box shadow.

Fixed Header Scrolling Table

The table can have up to eight columns and up to one hundred rows. and can be responsive if required The table header is fixed and the data scrolls.
There is an optional header for the table name and scroll arrows can be turned on. There are numerous styling options including zebra striping.

Data Columns

Many EverWeb users have found out the hard way how difficult it is to line up data created in separate text boxes. This widget makes the process much easier by using a table layout with the cell borders removed to arrange rows of data. There are options for including a caption, contrasting header and either a hover underline or contrasting hover colors to the rows.

Spec List

This two column widget is primarily designed for item specifications although it can be use to line up any type of data.
There is an optional table caption and the header can have a contrasting background and font color. The first column has a width setting and can also have contrasting colors.

Bar Graph

The bar graph can display up to twelve columns and each column can have a custom color. The graph is responsive and the optional axis with percentage divisions disappears when the page is opened on a mobile device.
Each column has a label and displays its value at the top of the column. The graph can be animated on page load if required and the animation time can be adjusted.

Pie Chart

A pie chart with different coloured segments which has the option to display the percentage on each slice. Up to ten slices can have custom colors and there is an option to make it 3D by simply checking a box.
The chart has a title and a legend. The legend displays the segment color and name and can be positioned to align vertically left or right or horizontally top or bottom.

Horizontal Bar Graph

A responsive horizontal bar graph for comparing up to six items in a container with optional heading and data info.
The animated bars can each have a different gradient color and their widths are set using a percentage value.
The widget incorporates a jQuery plugin which prevents the animation from taking place until the item is scrolled into the viewport.

© EverWeb Widgets -