Hide column css

Support
#1

Hello,

Is there any method to hide a column from css?
I’ve tried this but hides only the content of the column, the header is still visible.

 .last-column {
 display: none;
  }

Regards,
-n

#3

Hello, @neutrino!

You can use the drop-menu on the right part of the table header to control the visibility of columns (link).

image
image696×249 12.6 KB

image
image697×244 10.9 KB

If you want to use CSS to control the visibility of the last column you can use the follow sample:
XML descriptor

<groupTable id="personsTable"
            width="100%"
            stylename="sample-table"
            dataContainer="personsDc">
    <actions>
        <action id="create" type="create"/>
        <action id="edit" type="edit"/>
        <action id="remove" type="remove"/>
    </actions>
    <columns>
        <column id="name"/>
        <column id="lastName"/>
        <column id="age"/>
    </columns>
    <rowsCount/>
    <buttonsPanel id="buttonsPanel"
                  alwaysVisible="true">
        <button id="createBtn" action="personsTable.create"/>
        <button id="editBtn" action="personsTable.edit"/>
        <button id="removeBtn" action="personsTable.remove"/>
    </buttonsPanel>
</groupTable>

hover-ext.scss

.sample-table {
  .v-table-header .v-table-header-cell:last-child,
  .v-table-body .v-table-cell-content:last-child {
    display: none;
  }
}

Regards,
Gleb

#5

Hi Gleb,

Actually I need to hide several column so meantime I used:

.sample-table {
  .v-table-header .v-table-header-cell:nth-child(17),
  .v-table-body .v-table-cell-content:nth-child(17) {
    display: none;
  }
   .v-table-header .v-table-header-cell:nth-child(18),
    .v-table-body .v-table-cell-content:nth-child(18) {
      display: none;
    }

However I think this is not quite ok because is prone to error (if the column order is changed).
I rather prefer to link css to specific column:

  sampleTable.setStyleProvider((entity, property) -> "mycolumn".equals(property) ? "standard": null);

but in this case I cannot hide the header (only cell content)

.v-table-cell-content.standard{
 display:none;
 }

Also I didn’t set the table stylename (or should I?)

The next approach doesn’t work:


.transaction-table {
 .v-table-header .v-table-header-cell.standard-grade,
 .v-table-body.v-table-cell-content.standard-grade{
 display:none;

 }

}

Best Regards,
-n

#6

As you can see, the style provider does not add style to column header and the platform does not have an API to solve this problem.

If you do not add a stylename for the table, then the last columns in all tables will not be displayed.

You can also try using the XML attributes of column to control the visibility of the column:

  • visible - hides the column by default when set to false. Removes the column from the columnControl menu.
  • collapsed - hides the column by default when set to true. Does not remove the column from the columnControl menu.

Regards,
Gleb

#7

Hi Gleb,

Related to v-table-header-cell:nth-child(17): why the numbering (table columns) starts with an empty column?

image

Regards,
-n

#8

Hello @neutrino,

I think you are using the GroupTable component and this empty column is a separator to group the table by column.

Regards,
Gleb

#9

Ohh, I see…very good observation. I changed GroupTable with Table…
Actually I hide the last two column (17 and 18)…the problem is that now the last column occupies the 2xwidth space.
image
I ve tried to set width in xml and programatically (under onInit):
transactionsTable.getColumn("myDate").setWidth(100);
but seems that has no effect…

Best Regards,
-n

#11

@neutrino, What is the purpose of using CSS styles to hide a column instead of using Table.Column XML attributes (visible or collapsed)?

Regards,
Gleb

#12

Because these columns belong to another Entity (many-to many) and I want to display them only in Excel (not in the browser screen).
Regards,
-n

#13

Perhaps the method described in the next topic will be suitable for you.

#14

Of course! Thank you very much!