Search code examples
csscuba-platformcuba

Is it possible to style a table with round corners in CUBA Platform?

I want to make rounded edges for my table. Just tried to modify v-table-border-radius. It did just make the border round, so it looks like that:

enter image description here

What could I do?

Solution

  • The following style resolves the issue:

    .v-table {
  background: transparent;

  .v-table-header-wrap {
    overflow: hidden;
  }

  .v-table-body {
    $background-color: $v-table-background-color or valo-table-background-color();
    background: $background-color;
  }
}

    Add it to the theme extension, e.g. in the hover-ext.scss file.

    enter image description here

    It is also worth adding bigger padding for the first column caption, e.g.:

    .v-table-header-cell:first-child:not(.c-grouptable-group-divider-header) .v-table-caption-container {
  padding-left: round($v-unit-size / 2);
}

    enter image description here

    Pay attention that the v-table-border-radius variable is used to add border radius to table header and footer. Footer is hidden until you use aggregation with aggregationStyle="BOTTOM". In order to have bottom border radius without footer, I'd recommend adding a custom style name to a table that adds bottom border radius instead of adding it globally in case you'll use BOTTOM aggregation, e.g.:

    <table stylename="bottom-border-radius" ...> with the following style implementation:

    .bottom-border-radius .v-table-body {
  @if $v-table-border-radius > 0 {
    border-radius: 0 0 $v-table-border-radius $v-table-border-radius;
  }
}

    Upd: improved styles for screen background color that differs from table background color. Upd2: Added custom styles for bottom border radius.