Format individual columns in a datatable

[mikey]

i’d like to be able to format different columns in a datatable differently. some columns i’d like to center, some left, and some right.
example: a columns that represents “selected” might have one letter, an “X”, and it should be centered.
product names should be left justified, and currency fields right justified.

[al_mostafa_nahas]

Hello Mikey,

To do this, you need to create a class CSS and then you can affect the name of your column depending on its name and your needs.

For example, in the CSS class of the datatable below, we have two stylings:
-the first one is for aligning the first name’s column header and its rows to center.
-and the second style is applied to the last name’s column and selecting only the first letter of each line.

[mikey]

sorry for all the n00b-type questions. my experience is with mobe and desktop, and just a tiny bit with web.

here’s the custom css i wrote:

self .col-X > span, self .header-X{
    text-align:center
}

i assigned it to my dataTable

the title of my column is “X”

but it does not seem to affect the alignment:

[al_mostafa_nahas]

Thanks for your feedback Mikey,

In fact, you should use the name of the datasource instead of the name of column, it means you should replace X with the name of the source of that column (selected).

To be helpful, you can inspect the page and as you see in the screenshot below you find this class name by clicking on an element (header or a row):
1- It represents the class name of the header (header-id).
2- It represents the class name of the row column (col-id).

So, you should write like this to apply your desired style for the column X which is binded with “selected”:

self .col-X > span, self .header-X{
text-align:center
}

[ayoub]

@mikey

self .col-X > span, self .header-X{
    text-align:center
}

Actually, those are two condition in one,
this one for column

self .col-X > span,

and this one for the header,

self .header-X

you can inspect the table to get the right name/ID for the col and header.

[mikey]

thanks @al_mostafa_nahas and @ayoub

1. the docs should probably get an update with this sort of helpful info, for those of us who aren’t native web devs.
2. while the change to the header works in studio, it does not seem to work in preview.
   css:

self .col-selected > span , self .header-selected {
	text-align:center;
}

studio:

preview:

[mikey]

btw, see #2, in the last post, above. consider this a bug report.

[basmael]

@mikey

• the docs should probably get an update with this sort of helpful info, for those of us who aren’t native web devs.

The documentation has already covered instances of DataTable component styles using specific CSS classes for different table elements.

In Customizing DataTable Styles, a mockup illustrates row and cell access, and the CSS Table Classes subsection details each class and its application area. Explore detailed examples in the Examples subsection.

For a smoother Swift experience with Qodly, leverage our existing templates and utilize pre-styled, ready-to-use datatables found in the Datatables category.

[mikey]

the suggestion was that the docs should not assume that the person using qodlly is familiar with css, since qodly is supposed to be a low-code tool, targeting folks who don’t already do web dev.
i’m one of those folks. i’ve done everything but web dev for a long time. i can trip over css, but i would still consider myself a beginner when it comes to css and js. i can trial-and-error my way through flexbox, for instance, but it is not intuitive - neither is the rest of css.
right now i’m trying to fight through implementing a grid in qodlly. at best, it is difficult.

[basmael]

Hello Mikey,

CSS struggles, right? We’ve all been there. Quick tip – have you explored the templates section? Ready-made, pre-styled templates are there for you to configure and roll with. Browse all categories and grab what you need:

For datatables, head to the dedicated category, change the datasource and column settings:

@mikey

right now i’m trying to fight through implementing a grid in qodlly. at best, it is difficult.

Regarding the grid inquiry, check my response – hope it helps!

Any future CSS hurdles? Lean on the community – both internal team members and fellow Qodlers are ready to lend a hand.

Best regards,

[mikey]

don’t you worry, i’ll be suffering all of you, regularly.
for this particular example, there still seems to be an issue with the “X” column in my table: in the editor, the heading is centered, but once it hits preview, it is not. i have messed with it, several times, but never got it to center in preview. in this post you can see it. the top shot is the editor (notice the “X” heading is centered). in the bottom, see how the “X” heading is not centered? the row below that, with the data, is.

[basmael]

Hello Mikey,

@mikey

for this particular example, there still seems to be an issue with the “X” column in my table

As I don’t have your specific example on hand, I can’t provide insights into the exact origin of the problem.

@mikey

a columns that represents “selected” might have one letter, an “X”, and it should be centered.
product names should be left justified, and currency fields right justified.

It works perfectly for me. I recreated the desired datatable layout from your initial question by following these steps:

1. Go to Templates under the Datatables category, and drag the datatable with the blue header onto the canvas for quick styling.

2. Update the datasource and column sources accordingly.

   

3. Access the CSS class affecting the datatable and add the following CSS code:

   self .header-id, self .col-id {
   	text-align: center;
   }
   self .header-currency, self .col-currency {
   	text-align: right;
   }
   

4. Save your changes and test to ensure everything appears as desired in Preview:

   

   This setup centers the ID header and its column, while right-aligning the currency header and its column.

@mikey

a columns that represents “selected” might have one letter, an “X”

For the desired selected effect in your datatable, add the following code to the CSS class affecting the datatable:

  self:has(.row.selected) .row.selected .col-id::after{
    content: "";
    width: 20px;
    height: 20px;
    margin-left: -100%;
    background-image: url("https://cdn-icons-png.flaticon.com/512/5290/5290058.png"); 
    background-size: cover;
  }

Explanation:

1. self:has(.row.selected): This part uses the :has pseudo-class to check if the component (.self) has a child with the class .row that is also selected.

2. .row.selected: This part targets the selected row.

3. .col-id::after: This pseudo-element ::after targets the content that comes after the content of the ID column (.col-id) to insert generated content. It attempts to visually represent a selected state by adding a background image through a URL.

   

This addition creates a selected effect with the specified image for the ID column in your datatable.

Best regards,

[mikey]

welp, yours is prettier than mine, that’s for sure
how would i go about debugging this particular (weird) issue on the alignment being borked in preview?

[basmael]

Hello Mikey,

@mikey

how would i go about debugging this particular (weird) issue

To troubleshoot your specific case, inspect the component in the preview and confirm whether it has been assigned the specified CSS class. Additionally, ensure there are no conflicting CSS rules with higher specificity that might be overriding the properties you intend to apply.

To inspect an element:

1- Right-click on the component you want to inspect.
2- Select Inspect or Inspect Element from the context menu. This will open the browser’s Developer Tools.
3- Hover over the HTML elements to highlight corresponding sections on the webpage.
4- Within the Elements panel, locate the Styles tab to view applied styles for the selected element.

@mikey

issue on the alignment being borked in preview?

Without having your specific case at hand, I’m speculating about potential issues.
I suspect the problem may originate from the assigned text-align property in the datatable Properties Panel. Since Properties configured through the properties panel override theme, local, and shared CSS classes.

Two key observations to keep in mind:

1. When a datatable is added to the canvas without panel modifications or CSS classes, the text-align property isn’t applied to the datatable or its child elements.

2. Changing the text-align property to justify in the Properties Panel affects the entire datatable, causing the headers and columns to inherit justified alignment.
   

   

To resolve this issue, one might believe that the following CSS code would provide a solution:

self .header-id > span, self .col-id > span {
    text-align: center;
}

However, this solution will not work because Properties Panel styles take precedence.

To ensure the CSS class prevails, add the !important declaration:

self .header-id > span, self .col-id > span {
    text-align: center !important;
}

This way the text alingment centered would override the inherited text alignment:

Best regards,

[mikey]

what i find completely weird is the fact that in the editor, it looks fine

and the css

but once i get to the preview,

and the css

i’m not web dev nerd, but it kinda looks like the css isn’t making it over the wall.

[mikey]

side note: adding !important didn’t fix it, either.

self .col-selected > span , self .header-selected {
	text-align:center !important;
	align-items: center;
  	justify-content: center;
}

[basmael]

Try to center-align the child element span of the header

self .col-selected > span, self .header-selected > span {
    text-align: center !important;
}

[mikey]

that does not fix the preview, but it breaks the editor:

editor (notice the column heading is no longer centered):

preview

self .col-selected > span , self .header-selected > span {
	text-align:center !important;
	align-items: center;
  	justify-content: center;
}

[ayoub]

Hey mikey,

We did some changes for this Component.

can you please update your Qoldy’s version from the dashboard:

for the CSS you can use this :

self .col-first-name > span,
self .header-first-name > span{
text-align: center;
}

[mikey]

yes, it works in 0.14.3.