Mockup Grid Component – Is this the most advanced table/grid in HTML5 ?

When you want to define something as the best, it is always wise to do in context of a certain domain.

Well, today I am almost inclined to declare the "Best grid component" using HTML5 Canvas and MockupTiger has won the award (...drum roll....). Not convinced? Remember, the context/domain is HTML5 Canvas and this record stands valid only till today. Tomorrow, I am sure, someone will develop the most sophisticated Grid component and will take away the "Best HTML5 Canvas Grid/Table Component" and then all the web designing websites will start publishing articles such as "10 most beautiful Grid components using HTML5 Canvas", "Top 5 Table plugins using HTML5 canvas" and so on. I hope mockuptiger grid will be there somewhere in the list atleast for sometime 🙂

In pursuit of building the best Business Intelligence Mockup/wireframe or the best Dashboard wireframe tool , the grid or the table component is at the heart of all the widgets. Why? Because a dashboard application not only displays Charts, it also displays tabular information and what good is a mockup tool without a sufficient Grid component.

Lot of research went into finding the best Grid component that totally renders in html5 canvas element but almost all of them out there use html table with the help of jquery, javascript etc.

So mockuptiger built its own brand new Table component.

Before building the Grid component, a whole new Text component was built from scratch that does word wrapping and allows you to embed Icons and that too Vectorized icons in line with the text.


As you see the icons and text appear naturally in the flow and as you increase the font size so does the icons.

Once the advanced text component was built, it got integrated into the Grid component so that you can have icons appear anywhere in the table header, table cells, or the summary row.

So what does this so called "Best HTML5 Table" contain in terms of the features



Here is the modest list of features

You can define the following attributes of the table in the table editor

  • Number rows and columns
  • Provide individual column alignments (right,left,center)
  • Provide summary row
  • Provide Row banding - you can provide any number of row colors. Each row can have its own color- This is crazy and not practical but mockuptiger likes to empower the BI user.
  • Hide or show the column header
  • Hide or show the summary row
  • Hide Horizontal Grid lines
  • Hide Vertical Grid lines
  • Hide Table border
  • Show or hide all the background colors including the row banding.
  • You can either specify individual column width or just leave it blank to use auto width calculation.

You would think that with all these options the interface would be quite clunky? Inspired by Balsamiq's basic text input method, mockuptiger has strived to maintain that basic text input method. There will be a simpler method for providing the table options just as the Chart widgets currently have. What could be more simpler than text input? The text input is fine if the options are just one or two but as you try to provide columns, rows, individual cell data then its very blunky (becomes clunky).

Here is how you can define the table options


As you see the options become too much verbose. Mockuptiger will later provide another interface on top of this text input so you could easily navigate the cell structure and change the data. You don't have to type the icon names, just point to the icon in the left pane and the name of the icon is embedded automatically for you.

Once you define the table options, you can then individually enable/disable other options.

Table with all the options enabled (Note: the different row band colors)


Disable the Horizontal Lines



Disable the Column header and the bottom summary rows individually (these are exclusive options)


Disable background colors


And finally disable the last piece of decoration on the table



Here are the list of individual options



You can also change the table margin and line spacing between the cells and the wrapped cell text.

If you try the Crazy Stunts you will get this...


Hint: You will need a rorrim (read reverse) to read the above stunt


So, was I able to convince you that MockupTiger deserves the "Best Mockup Grid Component using HTML5 Canvas"?

Nope, ok let me narrow down the domain/context further

How about "Best Mockup Grid Component using HTML5 Canvas built in Pittsburgh,Pennsylvania,USA"?

Common, you are a tough audience, will you please hand me the award atleast for few minutes..please?

Related posts:

  1. Html5 canvas – Use of getimagedata – putimagedata or drawimage
  2. Mockup Update : Integrated Vector Icons and Project Browser

Get MockupTiger downloaded on your PC

Posted in Other

Would you like to build your application?

Start by sketching your idea into a wireframe in few clicks