Table Pro Bric

Your Cart:

Item(s):

0

$0.00

Provides Flexible Table Layouts

Provides easy setup of even the most complex responsive tables and has a large selection of function & styling controls.

$25usd | Add to Cart

Are You Looking to Build Beautiful Tables Easily & Quickly ?

Full responsive with custom mobile layout
Full styling controls for all headers & content cells
Can have multiple tables on a page
Custom cell functions
Works in Bootstrap 4 & 5 frameworks
Works in Blocs 5
Current Ver. Admin: 1.2.1, Row: 1.2.0, Cell: 1.2.0

Capabilities

Beautiful

Provides simple layout of responsive rows and columns similar to spreadsheets for visitors to easily understand

Fast Setup

Quickly adjust all the controls and get tables on your site in minutes.

Admin Controls

Controls to set column layout type, border width, header & content: font, min & max text size (auto-resizing), hor. & vert. text alignment, text color, border color, background color, alternating row & column color, padding, table background image, table border radius & width, rotated header height, header & content text breaking, mobile row button text, button symbol left margin & line-height, button padding, button border radius, thousand & decimal characters, currency support, start date, date format, long date language, skip sat/sun for date function, accessibility for table title, skip table, show row and highlight color

Cell Controls

Controls to set header & content: text, custom text color, custom background color, bold, italic, header rotation, content alignment, content background image, cell height, background image sizing, column span width (% width) or (fr number), hide header, hide content, cell functions: line numbering, date, count rows, sum, average, maximum & minimum, and cell prefix text.

Automated

Auto first row header visibility. Currency symbol & highest decimal support in math functions. Height auto-adjustment on header and content rows. One-column layout on smaller mobile devices with space-saving row reveal buttons. Row button text auto-generation.

Essential

Provides modern table generator that everyone should have in their toolbox.

Admin Controls:

Col. Type - Select the number of columns you will have (Must drop/duplicate cells in a row to build the columns), Auto has no column limit, the others are a fixed number of columns, Note: Must preview to see
Border Wd - Set the cell border widths, in px
Tbl Bor Rad - Set the table outer border radius on desktop, in em
TBorWd - Set the table outer border width on desktop, in px
Header Font - Set the font used for the header text
Hd Min T Sz - Set the header minimum text size (usually mobile), in em
HMaxSz - Set the header maximum text size (usually desktop), in em
HTxt HAlign - Select the header horizontal text alignment: center, left or right
Header Text Vert. Center - Set the header text to vertical centered alignment
Header Ln Ht - Set the header text line height
Header Txt - Set the header text color
Hd Bor - Set the header border color
Header BG - Set the header background color
Rot. Hdr. Ht - Set the height of rotated headers in desktop when enabling 'Rotate Header' in Table Pro-Cell, in px
Hdr. Break - Select the type of word break to use in headers, Normal will break on spaces, Hyphen & Space will break on spaces and hyphens & create hyphens at line end, Break in Word will break within a word, Note: Must preview to see
Cont Font - Set the font used for the content text
Cn Min T Sz - Set the content minimum text size (usually mobile), in em
CMaxSz - Set the content maximum text size (usually desktop), in em
Cn HorAlign - Select the content text horizontal alignment: left, center or right
Cn VerAlign - Select the content text vertical alignment: center, top or bottom
Cn Ln Ht - Set the content text line height
Cont Txt - Set the content text color
ContBor - Set the content border color
Cont BG - Set the content background color
Cont Break - Select the type of word break to use in content, Normal will break on spaces, Hyphen & Space will break on spaces and hyphens & create hyphens at line end, Break in Word will break within a word, Note: Must preview to see

Alternating Row Color - Enable alternating row color for content 2nd row, 4th row, etc.
Alt Row BG - Set the alternating row background color
Alternating Column Color - Enable alternating column color for content, Note: 1st col, 3rd col, etc.
Alt Col. BG - Set the alternating column background color
Pd. Top / Bot / Left / Rt - Set header & content top/bottom/left/right padding, in em
Table BG - Set the overall table background image, Note: must lower header & content bg color opacity to allow image to be seen, Must export/publish to see background image
Btn. Label - Select the content columns used to create text in the mobile row buttons: : first column or first + second column
Sym Mar Lft - Set the left margin for the symbol in the mobile row buttons, in em
Sy LnHt - Set the line height for the symbol in the mobile row buttons, in %, Note: use to change vertical alignment
BtPd Top / Bot / Left / Rt - Set the top/bottom/left/right padding of the mobile row buttons, in em
Btn Bor. Rad - Set the border radius of the mobile row buttons, in em
Thou Char - Set the thousand character for numbers in cell functions
DecChr - Set the decimal character for numbers in cell functions
Start Date - Set the start date for the cell date function, Format: yyyy-mm-dd
Date Format - Set the date format displayed for the cell date function; yyyy-mm-dd, mm/dd/yyyy, dd/mm/yyyy or mmmm dd(comma) yyyy
Language - Set the language displayed for the cell date function: English, Dutch, French, German, Italian, Japanese, Portuguese or Spanish
Skip Saturday - enable to skip a saturday date for the cell date function
Skip Sunday - Enable to skip a sunday date for the cell date function
Table Title - Enter accessibility title for the table
Skip Table - Enter accessibility title for button to allow skipping past the table
Show Row - Enter accessibility title for show row buttons in mobile
Tab Color - Set the accessibility highlight color when tabbing to and within a table

Row Controls:

Allow Row Collapse - Enable to allow a click on the row bar in edit window to collapse the row to save vertical room

Cell Controls:

Header Text - Set the header text
Hdr Vis - Select if this cell's header should use default visibility, hidden or shown
Hdr Text - Set a custom header text color
Hdr BG - Set a custom header background color
Header Bold - Enable to set custom header to bold
Header Italic - Enable to set custom header to italic
Rotate Header - Enable to rotate the header text, use with 'Rot. Hdr. Ht' in Table Pro-Admin, Note: Don't put content in row with rotated headers, enable 'Hide Content' & set 'Hidden Pos'
Hdr Bord - Set a custom header border color, Note: Preview to see color
Content Txt - Set the content text , Note: '<br>' (w/o quotes) will create a line break; '<a href="some url">Link Text</a>' (w/o quotes) will create a link
Hide Content - Enable if cell content should be hidden, ie. showing header only, will be hidden on small mobile width
Hidden Pos - Select the row position within the table, if using Hide Content

Cont Text - Set a custom content text color
Cont BG - Set a custom content background color

Cont Bold - Enable to set custom content text to bold
Cont Italic - Enable to set custom content text to italic
Cont. Align - Select the custom content text alignment to left, center or right
ContBG Img - Set the content background image, Note: must publish/export to see background image
Cont Ht - Set an optional content cell height, in px
BG Size - Select how the background image will expand within the cell: Expand to Fill Cell or Fit to Cell
Cont Bord - Set a custom content border color, Note: Preview to see color
ColSp % - Set the column width based on overall width, in %, Note: use this control OR 'Col Fr' for all cells in a row
Col Fr - Set the number of columns this column will span, in fr, Note: use this control OR 'ColSp %' for all cells in a row
Cell Func - Select custom cell functions: Line Numbering, Date, Count Rows, Sum, Average, Maximum or Minimum Note: 'Line Numbering' & 'Date' need to be set in a matching cell in every row, others only need to set one cell in the bottom row
Prefix Text - Set custom prefix text appearing before cell function results

Please review the examples below & the FAQs page for more setup info.

Basic Column Layouts:

Row Button

Cell Functions:

Row Button

Advanced Column Spanning & Wrapping:

Row Button

Table Borders, Outer Radius, Rotated Headers, Images/Icons & Accessibility:

Row Button

Table Pro Bric

Provides Flexible Table Layouts

Are You Looking to Build Beautiful Tables Easily & Quickly ?

Full responsive with custom mobile layout

Full styling controls for all headers & content cells

Can have multiple tables on a page

Custom cell functions

Works in Bootstrap 4 & 5 frameworks

Works in Blocs 5

Current Ver. Admin: 1.2.1, Row: 1.2.0, Cell: 1.2.0

Capabilities

Beautiful

Fast Setup

Admin Controls

Cell Controls

Automated

Essential

Admin Controls:

Col. Type - Select the number of columns you will have (Must drop/duplicate cells in a row to build the columns), Auto has no column limit, the others are a fixed number of columns, Note: Must preview to see

Border Wd - Set the cell border widths, in px

Tbl Bor Rad - Set the table outer border radius on desktop, in em

TBorWd - Set the table outer border width on desktop, in px

Header Font - Set the font used for the header text

Hd Min T Sz - Set the header minimum text size (usually mobile), in em

HMaxSz - Set the header maximum text size (usually desktop), in em

HTxt HAlign - Select the header horizontal text alignment: center, left or right

Header Text Vert. Center - Set the header text to vertical centered alignment

Header Ln Ht - Set the header text line height

Header Txt - Set the header text color

Hd Bor - Set the header border color

Header BG - Set the header background color

Rot. Hdr. Ht - Set the height of rotated headers in desktop when enabling 'Rotate Header' in Table Pro-Cell, in px

Hdr. Break - Select the type of word break to use in headers, Normal will break on spaces, Hyphen & Space will break on spaces and hyphens & create hyphens at line end, Break in Word will break within a word, Note: Must preview to see

Cont Font - Set the font used for the content text

Cn Min T Sz - Set the content minimum text size (usually mobile), in em

CMaxSz - Set the content maximum text size (usually desktop), in em

Cn HorAlign - Select the content text horizontal alignment: left, center or right

Cn VerAlign - Select the content text vertical alignment: center, top or bottom

Cn Ln Ht - Set the content text line height

Cont Txt - Set the content text color

ContBor - Set the content border color

Cont BG - Set the content background color

Cont Break - Select the type of word break to use in content, Normal will break on spaces, Hyphen & Space will break on spaces and hyphens & create hyphens at line end, Break in Word will break within a word, Note: Must preview to see

Alternating Row Color - Enable alternating row color for content 2nd row, 4th row, etc.

Alt Row BG - Set the alternating row background color

Alternating Column Color - Enable alternating column color for content, Note: 1st col, 3rd col, etc.

Alt Col. BG - Set the alternating column background color

Pd. Top / Bot / Left / Rt - Set header & content top/bottom/left/right padding, in em

Table BG - Set the overall table background image, Note: must lower header & content bg color opacity to allow image to be seen, Must export/publish to see background image

Btn. Label - Select the content columns used to create text in the mobile row buttons: : first column or first + second column

Sym Mar Lft - Set the left margin for the symbol in the mobile row buttons, in em

Sy LnHt - Set the line height for the symbol in the mobile row buttons, in %, Note: use to change vertical alignment

BtPd Top / Bot / Left / Rt - Set the top/bottom/left/right padding of the mobile row buttons, in em

Btn Bor. Rad - Set the border radius of the mobile row buttons, in em

Thou Char - Set the thousand character for numbers in cell functions

DecChr - Set the decimal character for numbers in cell functions

Start Date - Set the start date for the cell date function, Format: yyyy-mm-dd

Date Format - Set the date format displayed for the cell date function; yyyy-mm-dd, mm/dd/yyyy, dd/mm/yyyy or mmmm dd(comma) yyyy

Language - Set the language displayed for the cell date function: English, Dutch, French, German, Italian, Japanese, Portuguese or Spanish

Skip Saturday - enable to skip a saturday date for the cell date function

Skip Sunday - Enable to skip a sunday date for the cell date function

Table Title - Enter accessibility title for the table

Skip Table - Enter accessibility title for button to allow skipping past the table

Show Row - Enter accessibility title for show row buttons in mobile

Tab Color - Set the accessibility highlight color when tabbing to and within a table

Row Controls:

Allow Row Collapse - Enable to allow a click on the row bar in edit window to collapse the row to save vertical room

Cell Controls:

Header Text - Set the header text

Hdr Vis - Select if this cell's header should use default visibility, hidden or shown

Hdr Text - Set a custom header text color

Hdr BG - Set a custom header background color

Header Bold - Enable to set custom header to bold

Header Italic - Enable to set custom header to italic

Rotate Header - Enable to rotate the header text, use with 'Rot. Hdr. Ht' in Table Pro-Admin, Note: Don't put content in row with rotated headers, enable 'Hide Content' & set 'Hidden Pos'

Hdr Bord - Set a custom header border color, Note: Preview to see color

Content Txt - Set the content text , Note: '<br>' (w/o quotes) will create a line break; '<a href="some url">Link Text</a>' (w/o quotes) will create a link

Hide Content - Enable if cell content should be hidden, ie. showing header only, will be hidden on small mobile width

Hidden Pos - Select the row position within the table, if using Hide Content

Cont Text - Set a custom content text color