[ENHANCEMENT] InputType Table missing <th>?

Hi mod more,

Firstly, words do not describe how much of a game changer ContentBlocks (CB) is for MODX!!! Well done, seriously…

I have a question… do you have any plans to extend the InputType Table that comes with CB?

It’s lacking the possibilities of using table header <th> in the markup (like we can, say, for example with Redactor). If this was in place, we could bring modular graphs and charts to MODX (turning tables into graphs/charts with JS) using something like http://highcharttable.org

Hey Jon, thanks for the kind words :smile:

The table input is definitely quite limited currently, and aside from the missing feature you mention there are also some known issues (biggest one being it completely goes nuts with more than 10 rows), that as of yet have not been very straightforward to resolve.

Short term we’ll get it updated to the latest version of handsontable, hopefully fixing the bugs and adding a couple of requsted features. Long term I’d like to completely rewrite it from scratch or find a better table editor plugin to use to provide better and more solid table editing.

If you’re feeling adventurous, it is possible to create custom inputs (see https://www.modmore.com/extras/contentblocks/custom-inputs/) so it would be possible to create a different table input type. :wink:

To add <th>s or a <thead> currently, you could use the [[+idx]] in the row template to see if it’s the first row, and if so use the other/additional markup.

handsontable sounds great. any idea what release of content blocks this will make it into?

To add <th>s or a <thead> currently, you could use the [[+idx]] in the row template to see if it’s the first row, and if so use the other/additional markup.

Sounds a little hacky but good idea - would like to go for the path of least resistance, so will wait for handsontable

Hi @jonleverrier,

I found your idea of the modular graph very interesting!
It can be implemented using http://d3js.org/ what do you think?
If you are planing to implement this custom input as open source tell us the repository link so that we can contribute to your work :wink:

For the hacky table… we have already implemented this one, and you can use our version if you wish.
We use :filter for the conditions and we introduced some parameters as the on/off for the header.

have a nice day

<?xml version="1.0" encoding="UTF-8"?>
<data package="contentblocks" exported="2015-11-16@09:55:26" total="1">
<cbField>
	<id>24</id>
	<input><![CDATA[table]]></input>
	<name><![CDATA[Table]]></name>
	<description><![CDATA[]]></description>
	<sortorder>24</sortorder>
	<icon><![CDATA[table]]></icon>
	<icon_type><![CDATA[core]]></icon_type>
	<template><![CDATA[[[+header:is=`yes`:then=`[[+idx:is=`1`:then=`<th>`:else=`<td>`]]`:else=`<td>`]]
   [[+cell]]
[[+header:is=`yes`:then=`[[+idx:is=`1`:then=`</th>`:else=`</td>`]]`:esle=`</td>`]]]]></template>
	<properties><![CDATA[{"row_template":"[[+header:is=`yes`:then=`[[+idx:is=`2`:then=`<tbody>`]]`]]\n<tr>\n   [[+row]]\n<\/tr>\n[[+header:is=`yes`:then=`[[+idx:is=`1`:then=`<\/thead>`]]`]]","wrapper_template":"<table class=\"[[+type]]\" style=\"table-layout: [[+layout]]\">\n   [[+header:is=`yes`:then=`<thead>`:else=`<tbody>`]]\n   [[+body]]\n   <\/tbody>\n<\/table>"}]]></properties>
	<availability><![CDATA[[]]]></availability>
	<layouts><![CDATA[]]></layouts>
	<times_per_layout>0</times_per_layout>
	<times_per_page>0</times_per_page>
	<settings><![CDATA[[{"reference":"type","title":"Type","fieldtype":"select","default_value":"","fieldoptions":"horizontal=\nvertical=vertical","field_is_exposed":"modal"},{"reference":"header","title":"Header","fieldtype":"select","default_value":"yes","fieldoptions":"yes\nno","field_is_exposed":"modal"},{"reference":"layout","title":"layout","fieldtype":"select","default_value":"auto","fieldoptions":"auto\nfixed","field_is_exposed":"modal"}]]]></settings>
</cbField>
</data>

basic instruction: save as xml and import directly in your CB manager.

Nice one @webmasterunifr. Indeed modular graphs/charts in MODX would be fantastic.

I’ll take a look at your code and see if I can get it working. I’ve not made a custom input yet, it’s next on my list of things todo with CB :slight_smile:

D3JS would be the ultimate goal - I thought highcharttable.org would be a quicker and simpler alternative but I could be wrong.

=)

“known issues (biggest one being it completely goes nuts with more than 10 rows), that as of yet have not been very straightforward to resolve.”

haha, yeah, that’s quite a matching description…just had a client notice me of that^^…seems like the table’s absolute positioning causes these problems (why it has to be abs-pos I don’t know though…), if I find a solution, I’ll send it to you…

I can fix the table crazyness with more than 10 rows by just disabling the “nativeScrollbars” property of handsontable…, e.g. nativeScrollbars: false, (it’s set to true)…with the consequence that the table-block will be as long as the table has data, that could be a lot, but better than being completely inaccessible…

2 Likes

Dear sir, you deserve a cookie. I’ve spent so much time on this but must’ve had the wrong idea about nativeScrollbars in my mind. That seems to fix it! I’ve patched it and it will be available with ContentBlocks 1.3 coming within the next few weeks.

Do you already have a modmore beanie? If not I’d like to send you one as token of my appreciation. Is the address on your modmore.com profile correct?

1 Like

=), no Mark, I don’t have such a beanie and for sure would love one! The address in my profile should be correct! But it’s really not necessary, happy I could help, just keep up the great work with content blocks and all the other extras from modmore!!