BB Code Enhancements - BB Code [table]

BB Code [table]
by StGaensler

Description
This Hack provides a BB code [table] to add a table to the post
The skin of the table automatically fits the style because the CSS classes of vBulletin are used.

A table is simply made of some lines (will be the rows). The cols are seperated by |. So this will be a table:

[table="head"]head col1|head col2|head col3
row1 col1|row1 col2|row1 col3
row2 col1|row2 col2|row2 col3[/table]

A screenshot of a "ready" table is attached

Usage

1. install attached product XML through product manager (overwrite existing)
2. install at least one language pack in AdminCP -> Languages & Phrases -> Download / Upload Languages -> Import Language XML File
   Important: Select the language you want to import the phrases into, not "(Create New Language)" - this won't work! If you use another version of vBulletin than I use enable "Ignore Language Version" to import the language pack.

Please note: (installing)
Installing this product will: (reverted during uninstall)

1. rename a existing BB code "table" to "table_saved"
2. add a new BB code [table]

If you want to have live sortable columns (JavaScript): Download attached sorttable.js.txt rename it to sorttable.js and place it into the /clientscript/ folder of your vBulletin. Then go to AdminCP -> vBulletin Options -> BB Code [table] Settings -> Enabled Features Of This BB Code and enable sortable
Note: Including the file on the webpages where it is necessary is done by my product. So if sortable is disabled, it won't be included automatically.
If you want to have a icon for the editor you may use this for free: Download this icon and place it in your /images/editor/ folder.

Please note: (usage)

• Of course you can use vB Code and smilies inside the table!
• The first line defines how much columns are in the table. If the other lines have more or less colums they are cut off or filled with   (space)
• You can find a detailed description of the options (please read it before requesting help)
• Empty rows are (should be ) removed.

New features

• define colspan of cells
• small panel in AdminCP
• define CSS class of table and tablerows
• live sorting of table through clicking the head of a column
• defining maximum width of a table

Maybe planned features

• detailed description of the vB Code in misc.php?do=bbcode depending on the features enabled in AdminCP (planned for next beta version)
• define formatting (bold, italic), align (left, right, center) and width of the cols

Suggested but not planned features

• none

Known problems

• Bugfix of version 0.1.1 doesn't work if vBulletin should write template names into the source code

Version history:
0.0.1 - 0.0.5 internal releases for testing purposes (Thanks to Zombie79 from powerforen.de for testing)
0.1 first official release
0.1.1 fixed small bug: if a line ends with eg vbcode quote no new row was generated (should already have been fixed but did not work)
0.1.2 workaround: removed call to function bcmod(), it could also be done another way
0.1.3.x beta version described here (and following) - added admin panel, colpan and css feature
0.1.4 stable version - no significant changes to the last beta (0.1.3.8)
0.1.5.x beta version described here (and following) - added sortable, maxwidth, versioncheck, upgrade message, compatibility to vB 3.6
0.1.6 stable version - two bugfixes to last beta, {br} for posting linebreaks in a tablecell
0.1.7.x stable version - compatibility to vB 3.7 (description) - added tab seperated tables

This hack can be used for free. If you want to make a small donation, just contact me. We will find a way
I don't want this product to be distributed from other sources. Please don't upload it to other vBulletin related boards etc.

[Detomah]

If this is as good as it looks and I think it is, one of the admins on my site is going to love you forever. Although I can see a lot of thread editing going on to update all the old one's done using the other table code I had installed.

/me uninstalls a less well made version of a table code and gets ready to install this version.

[Detomah]

Could you possibly do an example table, using pretty much every formatting function available as an example please. My admins are having a bit of trouble trying to do certain tasks.

Aslo, would there be any chance of making it so you can actually doing the following:

1. Have a code to allow you to choose the cell class alt1 or alt2 instead of it being automatically alternating.
2. Make it so we can use tcat or thead for the header cells.
3. Make it so we can merge cells.

If they are already possible and i'm missing it, could you give me an example of how they work.

[StGaensler]

Do you mean formating options of my vBCode or generally formatting (with vBulletin vBCode)? I am already using every (included) formating option in my example table in the first and second picture.

1. + 3. This would require some time of work - time I don't really have. I add these things on the feature list for the next version but I can not promise when I can release it.
2. My vBCode already uses thead for the header cells. This is the source code of the table in the attachment:

<table class="stg_table tborder" style="width: 15em;"><thead class="thead"><tr><th>rank</th><th>name</th><th>age</th><th>points</th></tr></thead><tbody><tr class="alt1"><td>1</td><td>
Marvin</td><td>28</td><td>482</td></tr><tr class="alt2"><td>2</td><td>
Nadja</td><td>30</td><td>300</td></tr><tr class="alt1"><td>3</td><td>
Nicky</td><td>34</td><td>300</td></tr><tr class="alt2"><td>4</td><td>
Henry</td><td>46</td><td>298</td></tr><tr class="alt1"><td>5</td><td>
Nadja</td><td>12</td><td>85</td></tr><tr class="alt2"><td>6</td><td>
Tom</td><td>56</td><td>-</td></tr></tbody></table>

You only have to "say" that there is a header: [table=head] .... [/table]
Or didn't I get your question?

[mkdevo]

is there any way to merge cells? say i want to have a 2-column table, and i want something centered across 2 cells for the header cell - is that possible?

EDIT - whoops, just noticed that was #3 in the post 2 above mine, though it wasn't answered...

[StGaensler]

It was much work but I have tried it:
Here is a new version supporting colspans!

BUT this is a beta version!
You can try this version but use it on your own risk!
Currently colspan is not supported in WYSIWYG-Editor so the plain code is displayed

To add a colspan to a cell simply write {colsp=X} at the beginning of the cell. X is the number of cells the cell should be big.

If you find bugs please report them here.

Good night (I'll go to bed now)
Stefan

Edit: I wrote a better version than yesterday so I edited my post
The bugs mentioned before have been taken out

There is only one thing to consider when using colspan and sort: Cells "behind" the colspan are internally filled with "!!!colspan" and can be sorted as every other cell.

EDIT: removed attachment (4 views) - new version is out: post #915835

[mkdevo]

StGaensler - thanks for your continued support with this hack! i'm currently testing out the beta. just wanted to let you know about a small problem i ran into:

i'm testing out the colspan on the header row. i want the header row to be centered. if i use the center BBCode, it messes up the table. however, if i use the center html code, it works.

to show you what i mean, this does NOT work:

[table=head; width=100%]{colsp=2}[CENTER][b]1999[/b] [i](6 shows)[/i][/CENTER]

this DOES work:

[table=head; width=100%]{colsp=2}<CENTER>[b]1999[/b] [i](6 shows)[/i]</CENTER>

[mkdevo]

also, you've described how to define table width. is there a way to define cell width?

[StGaensler]

Thanks for the feedback but I can't reproduce it.
Code I used:

[table=head; width=20%]{colsp=2}[center][B]1999[/B] [I](6 shows)[/I][/center]
test 1|test 2
test 1|test 2
test 1|test 2[/table]

Result -> attachment
Could you give me a full example of the table or an account on your board so I can test it there?

No currently there is no possibility to define cell/column width, I added it to the list.

[mkdevo]

Originally Posted by StGaensler

Thanks for the feedback but I can't reproduce it.
Code I used:

[table=head; width=20%]{colsp=2}[center][B]1999[/B] [I](6 shows)[/I][/center]
test 1|test 2
test 1|test 2
test 1|test 2[/table]

Result -> attachment
Could you give me a full example of the table or an account on your board so I can test it there?

interesting. using the exact code you have above, you can see my result in the attachment:

[mkdevo]

i figured out a workaround to make it work, but i need to add an extra line break after the header:

[table=head; width=20%]{colsp=2}[center][B]1999[/B] [I](6 shows)[/I][/center]

test 1|test 2
test 1|test 2
test 1|test 2[/table]

i wonder why that is...