Hide table via css

[agaitan026]

hi got this use case

and app with a table (should be hidden) but if i use retool hidden option i can navigate with next and prev Icons, its possible with CSS?

[dcartlidge]

It's probably possible but I expect it would be a fragile solution as the css in retool isn't guaranteed to remain the same
Can I ask what the use case is where you create a table but then don't want to see the table or use it's functions? I think what I'm asking is - do you need the table?

[agaitan026]

my use case is the following i have app#1:

when i click a row i can see all details from that client in app #2:

but in app #2 i got a filter or search mode too, when i click the switch button it erases all fields

and the app is ready to search around a query of 50k records thats why i put a table at the bottom and two buttons prev and next icons to navigate in between

so when switch is ON, i can filter or search around that 50k records (i used pagination but at the end no matter what i use i need to have all records to search) so user may search by name, id, and others fields in the blue container.

In addition the app also saves updated to a db any modification

[dcartlidge]

I think I understand -
you are switching between edit mode and search mode
the search mode displays search results in a table
you don't want the user to see or interact with the table and to use the < > buttons instead?

[agaitan026]

correct, i know i may have an alternative with jquery but not sure how to work it, the easy way for me was put a table and im looking to hide it, its like an access app (the original app was in access) and user wants almost a same feature

[bobthebear]

so the problem is when the table is hidden, the 2 black arrow buttons at the top still change the page of the hidden table?

you could keep those 2 buttons from functioning in a couple different ways:

is this the functionality you were looking for?

[agaitan026]

when table is hidden, the icons prev and next wont work at all. at the end the table should be always Hidden

[agaitan026]

i used this script for next row and prev (i modify to be -1 instead of +1)

if ((table1.selectedDataIndex + 1) % table1.pagination.pageSize === 0 ) {
  const currentPage = table1.pagination.currentPage
  table1.setPage(currentPage + 1)
}

table1.selectNextRow()

as im using pagination i need to navigate tru pages

[dcartlidge]

Then I guess my next question is, why use a table at all?
If the query is doing the pagination and filtering and is producing the data you need then would all you need to implement is a "current record" variable and display that row from the data set?

As a cheat you could collapse the table to the smallest possible height ( I think it's 4 or 5 ) and it'll show you the "total records" counter but would allow you to do the next/previous record trick without it showing anything else. Might not be ideal.

Not great but might work for you - table squashed to the smallest height:

[agaitan026]

yeah i thought i can use js to read data from query, but that wont be most heavier than a table? not sure, but thanks for that last tip, works good

[bobthebear]

that's a neat little trick! btw, the smallest height for table is 5. I did notice 1 small visual bug:

there's a separator between the data and the pagnation/toolbar areas that makes a thick bar on the top. its not a big deal unless you can't stop seeing it now that I pointed it out (heh my bad)

also, since no records can be displayed it'll always say Showing 1--1 of 100 and -100 of -100

to only see 1 record with no vertical scrollbar i had to use a table height of:

• 16 w Small/X-Small(32/20px) Row Height
• 18 w Medium(48px) Row Height
• 20 w Large(64px) Row Height

if this isn't helpful at all just let me know and i'll delete it so others w a similar problem in the future don't get confused by me

[dcartlidge]

It'll be more code that you write, but as all you need it to do is pagination/current index then I would expect it to be a lot less heavyweight than a full component with event handlers, columns, data transformers, multiple functions etc etc

[dcartlidge]

I think that annoying line can be removed with a border style but if you're using pagination then I don't think you will be able to remove the wording

[bobthebear]

if you set the Toolbar Add-on to Top instead of Bottom, then when the table is at height 5 or 6 the text doesn't show, only the toolbar options:

at height 10 it looks like:

if you try and remove or hide everything from the toolbar it will revert to showing the text, so if you don't need it I'd suggest:

it is possible to hide it w css, but like @dcartlidge said, the class name could change. here's how you do it tho:

1. toggle Preview Mode (this makes it easier)
2. right-click Showing 1-2 of 100 and select Inspect
3. in the dev window under the Elements tab, right-click the highlighted element and select Copy > Copy Selector
4. return to Edit Mode
5. open Custom CSS in App Settings
6. paste the selector copied from Step3. it'll look something like (#table1--0 > div._GqQVz > div._Mq8WR._wpzum) then add brackets to it and insert whatever you want (i used opacity to hide it)

#table1--0 > div._GqQVz > div._Mq8WR._wpzum{
  opacity: 0;
}

7. you technically don't need most of the selector, the following would all do the same (for me, your selector will be different)

._wpzum{
  opacity: 0;
}

div._Mq8WR._wpzum{
  opacity: 0;
}

[dcartlidge]

that's a neat trick, putting the toolbar at the top
I don't think I've ever used it at the top, it just feels unnatural there