Combine separate tables on a page

Help Center Get Answers
1

Hi,

I have a page that has three different tables from three different objects. The tables have the same columns and I would like to combined them into one table using CSS. I haven’t been able to find anything that can help me with this.

Thanks in advance.

2

I’m not a coder, and not sure if it’s possible, but I can recommend reaching out to @KnackPros who may be able to assist you as a paid project. https://knackpros.com/

1 Like
3

Although this is not an answer to your question about CSS: maybe an integration via Make.com could combine these tables.

1 Like
4

This would likely get very complex as you’ll have to create a new table (via Make) combining the date from the other tables, and then keep this new table synchronised when changes are made. Potentially a headache I’d want to avoid at all costs.
Manipulating and “slicing and dicing” tables with code may be possible. :man_shrugging: Can’t say I’ve ever come across this requirement before :thinking:

1 Like
5

Thanks so much. I will have to check them out.

6

I was thinking last night. If your objects are related then you can create a new table based on one of the objects and simply add the other fields as connected fields.

7

Hello Damir,

Create another object and connect that new object with all other tables that you want to display. And when a record is created create a record in that new object as well connected to another object’s.
object=>table

  1. Table A contains 10 records
  2. Table B contains 10 records
  3. Table C contains 15 records.

then the new table will contain 35 records and you can show records using this new object.

And then you can show that table records instead of showing the individual tables. In that new table, you can also create formula fields to show directly into the front end.

Thanks,
Sunny Singla
ssingla1985@gmail.com
+919855089359

2 Likes
8

Hi Damir.

I’ve run into this before too - in my case wanting to show ‘note’ records, but notes both connected to the parent record AND those connected to a record connected to the parent. There’s no native way to do this other than have two separate tables.

I don’t think using CSS is the right approach here. It’s definitely possible with code, but it’s non-trivial.

For a very basic solution you can use custom Javascript do something like:

$(‘#view_source tbody tr’).appendTo(‘#view_target tbody’)

(replacing source and target with the actual view ids). This will move all the visible records from the source table into the target table. However, you’ll lose any native table functionality including pagination, changing the number of records displayed and sorting - trying to do any of these things will reset the target table and wipe the source table data. Pagination in any of the tables is the biggest issue - if any of the tables has records that are not visible this approach falls apart. Hidden empty columns, grouped rows and summary rows are also a headache.

Ultimately I just decided to have multiple tables, trying to make it work properly wasn’t worth the effort for me.

9

The use of jQuery and CSS will help here. However, you’ll need to consider UI regarding mobile applications too.

Also, does it need to be dynamic or can it be constructed on a daily basis. Knack by default renders into tables which can make CSS tricky, but everything is possible with the right budget :slight_smile:

10

Thank you everyone for these very helpful comments.