SQLPage stylings?

[ToniJ123]

Hi,

We would like to style our table paddings size down, we read from the documentation we could use bootstrap or tabler classes also?
How this is done? Or can we do this tiny change some other way to the table component? We have that lot of data we want to present,
that we need to scale table down to fit everything on the page.

Also another question, can we put example an form component and table component side by side, not another below another? Can this be done also in stylings somehow?

We have done our external .css file and tried to take that in use, also has tried to point the class of table, also bootstrap class and column name as _sqlpage_css_class etc. but haven't got anything working?

Thanks!
-Toni

[DSMejantel]

Hi !
For the second question you can put two components side by side with the 'card' component like this :

select
    'card' as component,
     2      as columns;
select 
    '/intervention/liste.sql?_sqlpage_embed' as embed;
select 
    '/intervention/form.sql?_sqlpage_embed' as embed;

or form table and form like this with the result on the screen :

--Onglet : ajouter des produits à un lot
select 
    'card' as component,
     2      as columns
     where $tab='4';
select 
    '/catalogue/liste_divers.sql?_sqlpage_embed' as embed
    WHERE $tab='4';
select 
    '/catalogue/form_divers.sql?_sqlpage_embed' as embed
    WHERE $tab='4';

[lovasoa]

Hello @ToniJ123 and welcome to the SQLPage community !

Maybe you can show us what you have built already and what styles you have tried ? That would be interesting to us, and could allow pointing to one problem in particular if there is an error in your styles.

But in general, here is what I can say:

Compact tables

The easiest is to use the small property of the table component, as exemplified in the last example in the documentation :

If you need something even terser, you can also add a CSS stylesheet using the css property of the shell component, and overwrite the properties you need with !important declarations:

td {
  padding: 1px !important;
}

Multiple columns

As highlighted by @DSMejantel above, the easiest is to use the built-in cards component.

If you need something more custom, you can also do it in css with a display: flex, or columns, or float, depending on your exact layout needs.

[ToniJ123]

Hi,

Thanks for fast response and good answers! This small property of table helps us enough for scaling, tried that also earlier but didn't get it work somehow, don't know what there was wrong, but that's enough.

So custom .css is always presented to the shell? How does then this class property work in table? Or can you point in class property, in table, to some class that exists in custom .css file, which has to be presented to the shell? What if someone doesn't use this shell component?

Can I use also this card feature without pointing to any external sql files, just like this, not embed?

select
    'card' as component,
     2      as columns;
select 
    'form' as component,
    'search' as validate;

select
    'date' as name,
    'date' as type,
    '2026-01-01' as max,
    '2024-01-01' as value;

select 
    'table' as component,
    TRUE as sort,
    TRUE as search;
    
Select * from tableX;

[lovasoa]

So custom .css is always presented to the shell? How does then this class property work in table? Or can you point in class property, in table, to some class that exists in custom .css file, which has to be presented to the shell?

You use the shell component to include your CSS file at the beginning of your file

select 'shell' as component, '/style.css' as css;

Then later in the file you can create your table

select 'table' as component, 'my_custom_styled_table' as class;
select * from tableX;

and in style.css :

.my_custom_styled_table td {
  padding: 1px !important;
}

Can I use also this card feature without pointing to any external sql files, just like this, not embed?

No. Just create the two sql files.

[ToniJ123]

Thanks for the great answers!