Table Tool or Table Bloc

I have no desire to get into whatever argument is going on here.
I did not want tp begin a new thread…

I need to create some tables.

Is there no bric I can buy, other than to use a bootstrap html code, which i agree with the statement above…is going to take some time.

Any suggestions for this kind of data would be most welcome…

Thank you

Rich

1 Like

Tables are for sure a very important piece of need - various options!
I was one of those crying for a solution a while ago…
Online tables never did it! But thanks for all at that time giving hints.
All is possible now with rows and colums in blocs.
And yes, it needs some fustidious work :joy:
A side effect is - You learn a lot about the resonsive system and the use of classes :sunglasses:
Mine is for a while visible on this test page:
https://www.bluecruise.org/Test/
NO EXTRA CODE :star_struck:

1 Like

You did all with rows and columns?
Looks good…shame there isn’t a bric.

Thank you…

Rich

1 Like

Yes, and clsses!
Hell of work, but once done, blocs of the scott @Norm is trustworthy!

Rapid weaver has a add-on called Stacks. When you buy stacks you can buy other stacks to use. And one is a spreadsheet stack that you can add a Excel spreadsheet or a numbers spreadsheet. I prefer Blocs because of the ease of use. Adding a tables bric would be all I need to make Blocs my preferred web design software.

@gmedlock, et al.

Here is the Table Example.bloc.zip (90.2 KB) I created by hand using rows, columns, classes, cunning, pain and suffering.

That table looks pleasing to my eyes across all breakpoints. Note the Classes I use and see how I selectively allowed certain columns in smaller breakpoints to be hidden due to insufficient room. “Hiding content” is the big sacrifice you must make for large and detailed tables like this. I also used alternate row colors to make content easier to see. That is critically important on large tables and is common practice.

As you can see, adjusting that example table for your needs can in some ways be as time consuming as rebuilding it from the ground up. But at least my example gives you a design guide you can use in Blocs 4.

Also note that I created vertical dividers in the table header which vary across breakpoints because I have to hide content at smaller breakpoints. Getting those classes to work across all breakpoints was fiddly to say the least.

I still think there ought to be a tool to make this happen in a much easier manner.

I also think there ought to be special features like a table that can be made to selectively hide content (in order to fit the table on a small display), but when an easy-to-spot button or trigger on the table is clicked, the hidden content should fold out and over existing content. Not sure how that trickery would be implemented in Blocs, but my desire would be to give access to the full table content even on an iPhone, where all content of a large table cannot be displayed all at once (not at reasonable font sizes).

I never could conceptualize how to do a “fold-out table” on my own (for the iPhone breakpoint), hence the example document I provide above permanently hides certain table content in the smaller breakpoints, with no option to display it. I do provide a notice that displays above the table on an iPhone that explains content is missing. In other places in my websites, that notice will link to a PDF of the full table. But again, a fully responsive table that can selectively hide and show content would be idea for iPhone. I suppose it even could be used on the LG breakpoint for truly massive tables.

I hope this helps. It’s all we have for now. If we could get a few hundred Blocs users to support a table creation tool, it might happen someday. Demand is everything. And no matter how loud my one voice is, it is but one voice in a massive sea of “I don’t need that!” opinions.

–James

1 Like

It looks good. Thanks for sharing this with me. This is very helpful.

1 Like

While there is currently no option natively built into Blocs at the moment, you could either make the HTML markup in a code widget, or you can make a table using Divs, it will be responsive, you can have it scroll horizontally on very small screens. Best of all you don’t spend forever playing with columns per breakpoint.

Here is a very simple example, that uses only 4 classes! and Divs. Add a few more to style it up better. I will make a tutorial on how to build this.

This approach also allows you to do things, like alternative background colours dynamically on the rows too.

4 Likes

Awesome @PeteSharp!
A second option is the use of @Jannis amazing Volt! You will only need to add the HTML <table> tag with a few lines of code to do any fancy styling. You can find it here: HTML Tables. You can even do a “Copy / Paste” directly from an excel sheet into Volt:
Kapture 2021-03-22 at 11.21.54

The datasheet is fully responsive and is live here.

6 Likes

Good idea @Jerry, if your running Volt on your site. The copy and past is an advantage for sure.

2 Likes

This is extremely helpful.
I don’t have an extensive need for tables, like importing spreadsheets, but this presentation format is essential for the data elements I do want to present on my site, and I think, for all of us, bringing data to websites. There really ought to be a bric.
I await your tutorial; and applaud your effort.

Thank you so much!!

Rich

I give up!! How did you do it? Watched the vid about 25 times…tried to pick out the page tree…no luck.

This is really all I probably all I need Malachiman…

Thanks

Rich

Like I said I’ll make a tutorial.

You won’t be able to make it by just looking at the layer tree. I’m also using CSS that’s not in the class editor. :sunglasses:

It’s not complicated though :grin: and I’ll explain each step.

1 Like

VERY MUCH appreciated!!!

Thank you

Rich

1 Like

My question is are any of these sortable?

Not the table by div I created, its simple with minimal CSS by design.

Is not the sortable option important to those who want to use it?

Mix tables with searching, sorting and pagination in Bootstrap 5

Another source

Sure, they can also make their own one up.

The method I am doing is specifically using Divs with minimal CSS. Its not a solution for every use case. Was not intended to be.

Feel free to post your own method for this, since you have all the references ;-). (the Material Design docs are not suitable for blocs?).

By the way I did mention you can do the HTML markup with the code widget. So with the link you provided, I look forward to seeing your example.

2 Likes

Hi @KBConcepts. Here you go, a fully responsive searchable table in Blocs. With 4 different solutions provided to manage tables, there must be a solution for everyone now.

6 Likes

Now that is impressive work Jerry! :smile: Did you make this entirely in Blocs?
So many would like to be able to do that?