1

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 Answer 1

1

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 + "%" }
      });
    });
2
  • For future troubleshooters, it'll be nice with an example / codeblock
    – ClydeFrog
    Commented May 20, 2022 at 6:32
  • 1
    Thanks for your comment! I'll add the code example to my response Commented Jun 3, 2022 at 11:22

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.