Grid: mat-badge support in MtxGridColumnButton

[SYS64738]

Hi, it would be great if MtxGridColumnButton would support mat-badge for a button, with rowData support too, so it could be possible to show badge content data dinamcally.

Thank you very much!

[nzbin]

Do you try the custom template? https://ng-matero.github.io/extensions/components/grid/overview#custom-cell-template-2

[SYS64738]

hi, thank you for your quick answer; for sure I suppose that with custom cell template I could resolve (I use currently cell templates in different situations)... but in this case I have a set of buttons in a button type column (in addition with expandable button) and I think a badge support could be useful, as you already support pop, etc... thank you!!!

[nzbin]

The new version 16.1.0 has added mat-badge support, it also supported dynamical data.

columns: MtxGridColumn[] = [
  {
    header: 'operation',
    field: 'operation',
    buttons: rowData => [{ 
      text: rowData.text, 
      badge: rowData.badge 
    }]
  }
]

[SYS64738]

Thank you very much! it's exactly what I need. Unfortunately I couldn't use it immediately, due I cannot upgrade my projects to Angular 16 at the moment. I suppose you don't make available this feature in the last 15.x ng-matero/extensions. Have a nice day!

[nzbin]

Now the v15 has supported mat-badge, please have a try.

[SYS64738]

hi @nzbin! you're super!!! it works fine, just an aesthetic issue: in case of standard row height, badge is hidden by previous row, as you can see:

thanks a lot!

[nzbin]

Because there has no enough space to display the badge. You can customize the badge with its config.

https://github.com/ng-matero/extensions/blob/cd3cdff602defcb42d628aaaf78c77c4749948c8/projects/extensions/grid/interfaces.ts#L125-L134

columns: MtxGridColumn[] = [
  {
    header: 'operation',
    field: 'operation',
    buttons: rowData => [{ 
      text: rowData.text, 
      badge: {
        content: rowData.badge,
        size: 'small',
        overlap: true
      }
    }]
  }
]

Another way, you can also modify the padding of table td or button's size.

.mtx-grid .mat-mdc-cell {
  padding-top: 16px;
  padding-bottom: 16px;
}

[SYS64738]

thank you for your quick reply. I'd already configured badge similar to your example (I also tried small size but it's not enough).

so I try your suggestion changing td padding, but the only way I found to get any results is this:

::ng-deep .mtx-grid .mat-mdc-cell {
  padding-top: 16px !important;
  padding-bottom: 16px !important;
}

(I don't want to set padding in the global style-sheet, since I use badge in a very few tables).

this is the result, badge now is properly shown, but padding affects the expansion row (that contains colspan cell); I'm not a super expert in css, maybe there's a way to avoid this...

this is my badge setting:

badge: {
  content: ...
  description: ...
  color: 'warn',
  size: 'small',
  overlap: true
},

[nzbin]

I have updated the following example, you can check the styles what I wrote. https://ng-matero.github.io/extensions/components/grid/overview#row-with-buttons

[SYS64738]

now looks perfect! thank you so much!