help(Material Data Table): Dynamically Adjusting Angular Material Data Table Sticky Column Width?

[fireflysemantics]

What are you trying to do?

Adjust with width of a sticky column using ngStyle.

What troubleshooting steps have you tried?

I asked about it here on Stackoverflow. The questions include a Stackblitz demo:

https://stackoverflow.com/questions/68198786/dynamic-adjustment-of-angulars-positioning-of-material-data-table-sticky-column

https://stackoverflow.com/questions/68202545/how-to-override-angular-material-data-table-css-styles-when-the-table-is-package

What are you seeing that does not match your expectations?

Detailed explanation in SO post ... It looks like Angular is calculating the left position of the sticky table column, and using the packaged CSS to do so ... so when the CSS is overridden with a shorter width that is dynamically applied with ngStyle a gap appears between the sticky columns.

Reproduction

https://stackblitz.com/edit/angular-material-data-table-module-styling-sticky-column-adjust?file=src%2Fapp%2Fapp.component.css

Environment

• Angular: 12

[fireflysemantics]

In this demo I try to set the left CSS property manually via the configuration object that is setting the colors etc. for the mat-header, however it looks like it gets overridden and set to 216px by Angular after the ngStyle update is performed ....

https://stackblitz.com/edit/angular-material-data-table-module-styling-sticky-column-adjust

More elaboration here:

https://stackoverflow.com/questions/68211508/setting-the-angular-material-data-table-header-left-css-property

[andrewseguin]

You can force the table to re-check the width styles by using updateStickyColumnStyles(). Here's an example: https://stackblitz.com/edit/angular-material-data-table-module-styling-sticky-column-1x7i2t?file=src%2Fapp%2Fapp.component.ts

[angular-automatic-lock-bot]

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{This action has been performed automatically by a bot.}