FlexTable Stack

A highly flexible and responsive table Stack, capable of generating arrays of Stacks, Text entries, or based on a CSV spreadsheet.
Overview
FlexTable Stack icon
This is your Stack if you need to create attractive tables: you can choose to create a fixed array of Text fields, Stacks, or generate a table based on content from a CSV spreadsheet with Markdown. There are many options for formatting, style, borders, shadows, hover effects and so on.

The latest Responsive update added tons of new features including One Record and Single Column mode for mobile screens. Plus new Pager and Search features great for large tables. A responsive caption tab can also be added.

How does it work?
The HTML <table> is used and javascript manipulates the layout responsively, reshaping, re-ordering, and re-formatting the table and contents for mobile screens.
  • FlexTable Stack screen shot
  • FlexTable Stack screen shot
  • FlexTable Stack screen shot
Customize
FlexTable Stack parameters
The FlexTable Stack has a multitude of controls for managing table array size, and cell dimensions, and overall appearance. You won’t be left wanting for options - scroll the parameter form at right to see some of the available options. The full list of parameters is documented in the table below (yes, a FlexTable itself!) …

Parameters

 
Content typeSelect the type of table content container: Text requires simply editing the text fields provided; Stack requires dragging stacks into the table; File (requires php) reads lines from a CSV file specified below. CSV files may contain Markdown. Note: for Text/Stacks, if your table is larger than 50 cells, consider using a CSV File instead.
File to readProvide a relative file path or a complete url (containing http: or https:) to a CSV format file from which to read non-blank, non-comment (starts with # or character selected below) lines, showing only the first n columns (and only lines that have at least that many columns) and up to the number of rows specified below. Files are automatically located one or two directories above if not found exactly where specified first. If a url is specified it must be complete and the file must exist. The CSV delimiter defaults to comma, but can be set below. Text may contain Markdown.
File delimiterSelect the CSV file delimiter, which is usually the comma but may be the semi-colon in European countries. Please check the content of your exported CSV file to see which delimiter is used, and set this to match.
Comment charChoose a character that signifies a comment line when present as the first character of a line. Comment lines are ignored when the file is read. Note: since # is special to Markdown you may need to choose a new comment character when Parse Markdown is enabled.
Match file linesChoose which lines of the file will be used to generate the table. By default All lines are used without regard to their content. You may choose to filter only those lines whose first, second, or last display column (nth) word/number matches certain criteria. ie: 1st and 2nd refer to the first and second data columns in the original file, whereas nth refers to the last column displayed in the output table, not the last entry in the lines of the file.
... Match valueUse this field to specify a word or value that is used to filter the File, based on the setting above in Match file lines. When Match file lines is set to All lines, this field is ignored. This may be the name of a URL parameter if the option below is enabled.
GET parameter from URLEnable this to evaluate the Match value string as a GET parameter passed in the URL. For example, if the URL contains "?product=abc" then you would specify "product" as the Match value and check this box to enable searching for its value of "abc" in a column of the CSV file. This setting is ignored when Match file lines is set to All lines.
Add title row textUse the first row as column titles. Note that this does not use one of the rows below, but it will affect the odd/even row coloring.
Mac to utf8Convert mac to utf8 in CSV files exported with characters such as accents etc. This is not necessary in many cases, but can be useful for Spanish language characters.
Debug info in outputAdd debug comments to HTML output to assist with resolving problems. This is not normally necessary and should be disabled.
Auto row numberingUse the first column for automatically numbering rows in the table from 1 up. Note that this uses one of the columns below so you may need to increase the Columns value and adjust the first column width to a small value if enabled.
Parse MarkdownTreat file contents as Markdown and convert to HTML. Note: Auto links option below is ignored when Markdown is enabled. You may need to choose a new comment line character since # is special in Markdown.
Auto links, mailto, imgsAutomatically generate links for words containing www. or http: or https:, and mailto links for words containing @ and period, and images for files containing http: or https: and ending with jpg, png, gif, etc. This option is ignored when Parse Markdown is enabled.
Bold first columnAutomatically bold the first column (with strong) on the left of the output table.
Bold first rowAutomatically bold the first row (with strong) at the top of the output table. If Add title row is enabled then this feature makes the title row bold, and not the first row of data. If Reverse rows is enabled this bolds the last row of the table.
Unlimited rowsIf this option is enabled then the number of Rows in the table is unlimited, based on the number of lines in the File, otherwise the Rows entry below places an upper limit on the number of Rows in the table. Uncheck this before changing the Type from File back to Text or Stack!
Reverse rowsRenders rows in reverse order so that newly added items on the bottom of the edited table will appear at the top of the final output table. Excludes the title row if any, which remains at the top of the table. If Bold first row is enabled, the last row is bold.
Skip columnsSkip the first n columns of the File above when generating table output. The number of columns in the table is still set by Columns below.
ColumnsVertical columns in table. When Content type is File and Auto numbering is enabled, the first column is used for numbering, so you may wish to add another column for your data since this is the total number of columns in the table. When editing Text or Stack content, be sure to choose this value carefully once as it will be very difficult to change at a later date - File content is automatically regenerated by PHP each time so it is not a problem in that case. Note: if your table is larger than 50 cells, consider using a CSV file instead.
RowsHorizontal rows in table, not including title row if enabled. When Content type is File there is a checkbox above to read All lines/rows without limit, in which case the Rows setting is ignored. Note: if your table is larger than 50 cells, consider using a CSV file instead.
First col widthCell width in pixels or percent for first vertical column on left only - blank is auto. Eg: 50% or 200px or auto
Other col widthCell width in pixels or percent for all remaining vertical columns right of the first - blank is auto. Eg: 25% or 100px or auto
Min row heightMinimum row or cell vertical height in pixels, or zero for automatic. Useful for matching cell heights within the table and to other tables. See also Cell t/b padding below.
Limit table heightEnable a limit on the table height when checked, otherwise the default behaviour is to allow the table to grow vertically based on content.
Max table heightLimit maximum table height to this size and scroll vertically when content is larger.
Border typeChoose a preset border type. Full draws borders on all sides of every cell and around the outer edge of the table (and is necessarily double-width). Outer draws a border only around the outside of the table. Experiment with other option values to get the styling needed.
Border widthInternal border width in pixels. Outer border color can be controlled by generic settings above.
Border colorInternal table border color, for lines inside the table. Outer border can be controlled by generic settings above.
Border roundingBorder radius in pixels. Try increasing Cell l/r spacing or Cell t/b spacing below for better effect. Note that the outer table border will not round properly when cells are not spaced apart.
Text colorColor of text in table. Default color is used when this is set to match the main Table color below. Hover effects below can also set text color.
Table colorBackground color of main table body. Set Text color above to match this if you want Text color to be ignored.
First rowBackground color of first row. Inactive if matched to main table color; match this color to the main Table color above if you are seeing unwanted coloring in the first row.
First columnBackground color of first column. Inactive if matched to main table color; match this color to the main Table color above if you are seeing unwanted coloring in the first column.
Color even rowsCheck this to enable coloring of even rows. You may get unusual results combining this with even column coloring! If the first column coloring looks incorrect, change it to match the main Table color above.
Even rowsBackground color of even rows.
Color even columnsCheck this to enable coloring of even columns. You may get unusual results combining this with even row coloring!
Even columnsBackground color of even columns.
Cell l/r spacingInternal horizontal cell spacing, as a gap between cells in x. A value of 0 for this and t/b spacing below collapses cells to prevent double-width internal borders. A non-zero value enables the Border rounding above.
Cell t/b spacingInternal vertical cell spacing, as a gap between cells in y. A value of 0 for this and l/r spacing above collapses cells to prevent double-width internal borders. A non-zero value enables the Border rounding above.
Cell l/r paddingInternal horizontal cell padding or space inside each cell to its left/right edge.
Cell t/b paddingInternal vertical cell padding or space inside each cell to its top/bottom edge.
Font scalingScale all table text using ems, where 1.0 is default. Use the responsive scaling below to change size for mobile screens.
Cell l/r alignAlign cell contents horizontally. Alignment during text edits wins over this setting.
Nth column alignment enable ...Check this to enable custom text alignment in any selected column.
Nth columnChoose which column to custom align. This is used inside a css nth-child() expression to choose the column td cells, so you may use a constant column number such as 2, 3, etc. or an expression like n, 2n+1, etc.
Nth col alignSet alignment of one specific column.
Cell t/b alignAlign cell contents vertically.
Enable shadowsCheck this to enable shadow controls. Note that table padding is increased automatically so that shadows are not clipped.
Shadow colorColor of drop shadow. Fade this color to dim the shadow instead of using blur below.
Shadow sizeSize of shadow in pixels beyond the default cell size. 0 is default size, resulting in shadows the same size as the table or cell.
Shadow blurSize of shadow blur in pixels. 0 is sharp and not blurred.
Shadow l/r offsShadow horizontal offset in pixels.
Shadow t/b offsShadow vertical offset in pixels.
Enable hoverCheck this to enable mouse hover coloring.
Hover typeSelect the scope of mouse hovering on table rows or individual cells.
Hover fadeChoose a hover effect: fade to the hover colors, or instantly change.
BackgroundColor of cell background during mouse hover.
Hover textColor of text in cell during mouse hover.
Responsive modeEnable responsive styling for the table by adjusting the table appearance based on screen size. Hor Scroll (the default) simply scrolls the table horizontally for large content; Ver Column converts rows into columns and creates one large single column of entries; One Record displays a single table row at a time, formatted as a record entry of one column of header info, and one column of data (you must enable the Pager below).
Responsive widthClient width below which responsive behaviour begins.
Cell gapExtra vertical column cell spacing in pixels. When a table is responsively changed to a single vertical column, this spacing may be inserted between cells for a nice effect.
Resp font scaleResponsive font scaling to use on top of font scaling above, when screen width is below the responsive width. This setting allows you increase or decrease the size of the text in tables for mobile screens. This value is multiplied against the font scaling setting above to compute the overall mobile font scaling.
Enable PagerCheck this to enable the Pager, showing only a portion of the table and adding Pager buttons. This also enables the option to search the entire table. You must enable this option when using responsive Record mode, otherwise only the first record will ever be shown!
Pager on top sideCheck this to move the Pager tab to the top of the table instead of the bottom.
Pager arrows wrapDisable this feature if you want the Pager left/right arrows to stop working when the first or last page is reached. By default, when this feature is enabled, the arrows will wrap around to the first or last page when clicked.
Pager styleChoose a style for the Pager arrows etc. Experiment with this setting and view results in Preview.
Rows/pageSet the number of rows from the original table shown per page of the displayed table. If you want to disable the Pager set this value to more than the number of rows in your table, or a very large number - the Pager will disappear. Set the responsive Pager rows/page below to then re-enable the Pager on mobile screens.
Rows/page respSet the number of rows from the original table shown per page of the displayed table, when a small screen size is detected. Usually this would be a small number compared to the rows/page of the non-mobile Pager set above. In record mode this is automatically set to 1 row per page, so no need to edit this value.
Consecutive numWhen there are many page numbers, the Pager will hide some resulting in 1 2 3 ... 7 8 9 ... 13 14 15. This control specifies how many consecutive numbers to show at minimum. All means page numbers will not be hidden, but this may not work when there are many pages. None means that Pager links will be disabled and only the arrows will be available with the current page number. The + link will always be available to show all rows of the table without paging. And the - link can be used to reset back to paging (also after a Search).
Pager colorColor of the Pager tab background.
Pager hoverColor of Pager background when it is being used or the mouse hovers over it. Set this to the same color as the pager background to disable the hover effect.
Pager text hoverColor of text in Pager during mouse hover.
Enable SearchCheck this to enable searching the table, and adding a Search box, as long as the Pager is enabled. Search is not available without the Pager.
Search buttonSet the text in the Search button and placeholder text in the search field. The default is Search, but you can set it to any language or string necessary.
Search on top sideUncheck this to move the Search tab to the bottom of the table instead of the top.
Search colorColor of Search tab background.
Search hoverColor of Search background when it is being used or the mouse hovers over it. Set this to the same color as the search background to disable the hover effect.
Search width respResize the search input text field to this width in pixels for mobile screens.
Hide Search below widthCheck this to automatically hide the Search tab when the screen size is small for mobile.
Enable a caption tabCheck this to add caption text box to the top or bottom of the table.
Caption on top sideCheck this to move the caption tab to the top of the table instead of the bottom.
Caption is full table widthEnable this for a caption that spans the entire table width. When this is disable, the caption is a tab like pager and search, and can be hidden responsively when the screen size is small for mobile.
Caption alignText and tab alignment of caption. This setting sets the caption text alignment inside a full width caption, and also the tab location relative to the Pager and Search tabs otherwise.
Hide caption below widthCheck this to automatically hide the caption when the screen size is small for mobile.
Caption stringAdd this caption to the bottom of the table and style it.
Caption colorColor of caption background.
Caption textColor of caption text.
Caption italicsCheck this to change caption font to italics.
Caption boldCheck this to change caption font to bold.
Tab heightsSet the height of Pager, Search, and caption tabs so they all match.
Tab roundingBorder radius in pixels. This rounds the outer edges of the tabs where they do not meet the table, unless t/b spacing permits.
Tab offsetSet the edge spacing and spacing between Pager, Search and caption tabs so they do not touch each other.
Tab l/r paddingExtra padding of Pager, Search and caption tabs on the inside l/r edges.
ContainerThe div within the Stack that the entire table and tabs etc. sit within.
TableThe main table that sits within the container div.
First rowFirst row of table, applies to td elements in first row tr of table.
First colFirst column of table, applies to td elements in first position of each row tr.
Even rowsEven rows of table, applies to td elements in table.
Even colsEven columns of table, applies to td elements in table.
Table cellsThe main table td elements inside all rows.
PagerThe pager span element that sits in the container div.
SearchThe entire search form element.
Search fieldThe search form text input search field.
Search buttonThe search form input button.
CaptionThe caption span or div element that sits in the container div.
Examples
Check out examples of FlexTable - this is a killer stack with TONS of possibilities, and dynamic behavior, so you'll find only a few of the many options demonstrated below …
Example 1: a table of Text fields, 3 columns x 5 rows …
EditEditEdit
EditEditEdit
EditEditEdit
EditEditEdit
EditEditEdit
Example 2: a different border style and alternating row colors, with additional colors for first row and column …
EditEditEditEdit
EditEditEditEdit
EditEditEditEdit
EditEditEditEdit
EditEditEditEdit
Example 3: a table with shadows, transparency to a background, hover effects, and fade, and responsive text scaling and caption hide …
EditEditEditEditEdit
EditEditEditEditEdit
EditEditEditEditEdit
EditEditEditEditEdit
EditEditEditEditEdit
Example of a 5 x 5 blank table
Example 4: large tables can have a Pager and Search box, even a Caption - these all behave responsively, so stretch that browser! The Pager, Search, and Caption all have many options for styling, coloring, borders, and location and size, so the table below is just one example …
Responsive Example
NumberStackFeaturesPrice
1FlexTableResponsive, Pager, Search, Caption$8
2RandomQuoteRead from CSV file or text edit region$5
3FlexCanvasGenerate thousands of shapes, gradients, logos, text$5
4RandomStacksMultiple options for random quantity, order, and selection$4
5WinMacDetect client operating system and show content accordingly$3
6ShowHideDetect browser width and show or hide content$3
1 2 ··· +
Example 5: tables can be Stacks as well, not just Text, and table cells can be spaced apart …
Stacks Image 3726
Stacks Image 3734
Stacks Image 3750
Stacks Image 3742
Example 6: tables can be populated with CSV spreadsheet content, and more than one table can use the same file …
To create and use a CSV file - Click here to show more …
Export from Excel or Numbers, or create it by hand in a text editor. Each line of your CSV file should look like this:
“X”,”Y”,”Z”,…
(strings surrounded by plain double-quotes, and separated by commas). You may use Markdown in each table cell to add formatting, links, etc.
Note that any line beginning with # is considered a comment, and ignored. Blank lines are also ignored.

Place the CSV spreadsheet where you can use it:
Drag the CSV file into your RapidWeaver Resources or Publish the flle online somewhere (you will need the URL in this case).

Add a FlexTable and use the CSV file:
In RapidWeaver, add a FlexTable Stack to your page and set the Content Type option to File.
Then specify the path to your file as resources/yourfile.csv (FlexTable is smart enough to look around for your resources directory so don’t worry about ../resources, or ../../resources etc.)
If your CSV file is online somewhere else you can specify the file name as a URL instead, such as http://somewhere.com/yourfile.csv

Choose how to read the CSV file:
FlexTable will read all lines by default and show as many rows and columns as you have specified.
You may choose options to unlimit the number of rows so the table grows when the CSV file grows.
You can also filter the lines that are read by telling FlexTable to match the contents of the first, second, or last column.

For these examples consider the CSV file below …
"1","English","Hello"
"1","French","Bonjour"
"1","Spanish","Hola"
"2","English","One"
"2","French","Une"
"2","Spanish","Uno"
In the first table below, only lines where the first column of the CSV file is 1 are shown, and that column was skipped so it does not appear in the output …

English

Hello

French

Bonjour

Spanish

Hola

In the second table, lines where the first column in the CSV file is 2 are shown …
EnglishOne
FrenchUne
SpanishUno

FlexTable Features

  • Responsive
  • Markdown (CSV files)
  • Requires PHP (CSV files)
  • Requires JS
  • Sparkle updates

Purchase FlexTable

  • $8 USD via PayPal
  • Immediate download *