Displaying data in a wide table grid

[WilliamPorter]

I’ve imported data from an existing database app into Tadabase. One of the most important tables is fairly wide — that is, the table has a lot of fields (or putting it differently, the grid has lots of columns). My users will want to view all (or at least quite a few) of the fields/columns in the grid, so they can compare record values easily. I have two questions about how to handle this.

1. Is it possible to format a grid so that it scrolls horizontally?
2. Is it possible to configure a grid so that it has multiple TABS that show different columns? I’d of course keep the primary field on each of these tabs, but it would be helpful if there could be a tab showing say, contact fields, identity fields (name, SSN, drivers license, DOB, citizenship etc), another tab for data relating to the person’s status in the lawsuit (case filed date, court filing number, etc), and more. As I said, there would be one or two columns in common (maybe full name and status) but the other fields would change by group with each tab.

Being able to scroll horizontally would be a start, especially if I could “freeze” the first column or two. But what I really need is to be able to view different groups of fields quickly on different tabs.

Final comment. I see that there seems to be a way to create tabs for filters. That’s nice, but not what I want. I’d like the records on the different tabs to be filtered exactly the same way so user is viewing exactly the same data set but can quickly jump to view columns 3-12, then columns 13-20, then columns 21-28, and so on.

[moe]

You can likely achieve this with a bit of Javascript and CSS. This can get a bit complex, but I’ll try and break it down a bit.

Here’s the final outcome:

It’s 3 steps:

1. Giving each column a unique class name.
2. Adding custom HTML to the page with a button that will be used to show or hide these columns.
3. Using some Javascript to show or hide the columns based on the button clicked.

Open the column and give it a class name. It can be anything you wish, but better if its something a bit unique so there are no conflicts.

Do this for all the columns you wish to manipulate.

So in my case I have 2 groups. ‘display1’ and ‘display2’. 2 of the columns I’ll be using display1 and the other two I’ll be using display2.

Next, we’re going to add some HTML to the page.

On the page, I’m adding his HTML code:

<p><button id="group1" class="btn btn-primary btn-sm m-l-xs t-refresh-button">Group 1</button><button id="group2" class="btn btn-primary btn-sm m-l-xs t-refresh-button">Group 2</button></p>

These will be the 2 buttons I click to toggle the columns I want to see.

Now, make sure each of the buttons have a unique id attribute. I have in my code ‘group1’ and ‘group2’.

Next I’ll add the Javascript to the page to listen for a click and show or hide specific classes based on the event.

In the code below, make sure to change the component id to your ID.

TB.render('component_20', function(data) {
	
	$( "#group1" ).click(function() {
        $('.display1').hide();
        $('.display2').show();
    });
	
	$( "#group2" ).click(function() {
        $('.display1').show(); 
        $('.display2').hide(); 
    });
});

As you can maybe detect, when I click the group1 button it will hide all the columns marked as display1 and show columns in display2.

I know this is a bit complex, at this time this is the only way to do what you wish to do.

I’d be delighted to help further if you need additional help, just let me know.

[WilliamPorter]

Thanks so much, Moe, for the detailed instructions. They were pretty clear and I’ve tried to follow them to the letter — but something is not working. I made one slight change: You had buttons “group1” and “group2”. I added “group3”. I modified the HTML code appropriately (see below) but I’m not getting buttons. Instead the HTML code simply appears on the page, above the table.

NOTE (in case it matters): I have two HTML components on this page. The first one is from a different approach I was trying.

Anyway, thanks again, can you see what am I doing wrong?

[tim.young]

Hey @WilliamPorter,

I’m making an assumption here but it looks like the HTML is entered in the text editor section of the HTML component.

You would need to paste the HTML in the source code section by clicking the “</>” button in the HTML component toolbar.

[WilliamPorter]

@tim.young

I’m making an assumption here but it looks like the HTML is entered in the text editor section of the HTML component.

You would need to paste the HTML in the source code section by clicking the “</>” button in the HTML component toolbar.

Thanks, Tim: exactly right! I’ve now got buttons showing up on the page. Progress!

Now on to the next step of the problem: Clicking the buttons isn’t working. I pasted the JavaScript Moe gave me (with the added third button/third column group). See screen capture below.

Moe mentioned something about CSS. Is there supposed to be some custom CSS in the CSS tab?

[moe]

Did you add the ‘display1’ etc in the column settings? Like so:

[WilliamPorter]

Did you add the ‘display1’ etc in the column settings? …

Yes, I did. See screenshot. For what it’s worth, I didn’t add a value for CSS Class to EVERY column — only to the columns I want to show and hide. The first two columns on the left I’d like to have display always, and ditto for the two columns for Detail and Edit links at the far right. Does that matter?

[moe]

Looks like you did everything correctly. I’d need to take a look to further troubleshoot. Feel free to share the app with me and I’d be happy to take a look.

[SuiteUpstairs]

I see you have gone and done this with some custom code but could you not just use the filter tabs and set each filter the same on all the tabs and just hide the fields you don’t want to see on each filter tab?

You could set the filter to something like “record date is not Jan 1, 1900” that way all the records would show. If you don’t have a date field you could do “record text field is not PLACEHOLDER”

I’m not at the computer right now but I’ll try it later.

Maybe Moe already fixed this for you and it’s a non issue but I thought I’d share anyway

[Marty]

@moe I love this idea and I have it implemented on a couple of pages. Unfortunately when the table is modified (table refresh, column sort, action link, etc) with any of the columns hidden there is a shift in the table. Clicking on one of the buttons restores the alignment but I’m wondering if this code could be modified to prevent the shift, or correct it automatically.

[nazdeb]

This looks like a clever workaround. I m going to try it. Thanks for sharing.