Table is broken when using stickyHeader true (Angular + carbon design)

444 views Asked by At

I'm using datatable from carbon design on my angular 13 app. I'm also using the theme grey90.

On the datatable I'm using the expansion, to show more information to the user. Everything works fine when stickyheader is set to false

Table with stickyheader false

But When i try to set sticky header to true, this happens...

Table with sticky header true

I haven't add any css code. my project only has this install. Has anyone face this issue before? I need a workaround to make the header fix and the body scrollable...

<ibm-table   [size]="'sm'" [model]="simpleModel"    [showSelectionColumn]="true" [stickyHeader]="false"
    [striped]="false" [isDataGrid]="false" >
1

There are 1 answers

2
Florencia Cames On BEST ANSWER

I was able to solve this issue by passing specific widths in table header. I'm passing them in % mode and I'm also instead of taking 100% for the header, I'm dividing my items just using 99% because other wise the table collapse with the adding of the scroll at the end and this was causing the styles to break.

I return an array of TableHeaderItem, and here is how I specify the width. For example if I have 4 items I divide 99/4 and the result is 24.75. The items width does not have to be the same width for each element, they can sum 99% in total (like 30%, 20%,49%), I just needed them to be the same width. so here is My example

  const perc = 99/ 5;
    return headerNames.map((item: string) => {
      return new TableHeaderItem({
        data: item,
        sortable: true,
        visible: true,
        style: { width: perc + "%" }
      });
    });