Smart Table Props Color

[32x0lf]

Hi,

I tried to change colors of cells when clicking sort. I used HandleSortValueChanged event but I cannot make use of the _styles.
Is this possible changing colors of the cells(odd) when sorted in smart table?

Thank you

[xidedix]

@32x0lf what you're looking for is to overwrite css variables for .table-striped
For example, in src/scss/_custom.scss file:

// Here you can add other styles
.table-striped {
  --cui-table-striped-bg: lightpink;
  --cui-table-striped-color: darkred;
}

[32x0lf]

Hi,

What I meant is to changed the color of the cells when the column is sorted by clicking the arrow up and arrow down in smart table columns.

[xidedix]

@32x0lf Do you want to change the color of the sorted column?

[32x0lf]

Yes,all sorted column only. It will change only when sort header column is clicked.

[xidedix]

@32x0lf
in this case you have to listen to (sorterValueChange) events

[32x0lf]

@xidedix

Do you have sample code on how to implement this? I tried putting color inside that event but it didn't work.
html file
(sorterValueChange)="handleSorterValueChange($event)"
ts file

handleSorterValueChange(sorterValue: any) {
  const sorter = Object.keys(sorterValue).length
    ? { color: "success"}
      : { color: 'info'};
  console.log('handleSorterValueChange', sorter);

[xidedix]

@32x0lf

Let's try this way:

1. in your component - add props
2. in event handler - store required style and column name
3. in html - style the <td> accordingly for ng-template cTemplateId="tableData"

  ...
  // 1. in your component - add props
  sortedColumnStyle = {};
  sortedColumnKey = '';

  // 2. in event handler - store required style and column name 
  handleSorterValueChange(sorterValue: any) {
    console.log('sorterValueChange', sorterValue);
    this.sortedColumnStyle = sorterValue?.state ? {backgroundColor: '#badce3'} : {};
    this.sortedColumnKey = sorterValue?.column ?? '';
  }

<!-- 3. in html - style the td accordingly  -->
<c-smart-table
  ...
  (sorterValueChange)="handleSorterValueChange($event)"
>
  <ng-template cTemplateId="tableData" let-columnName="columnName" let-item="item" let-tdContent="tdContent">
    <td [ngStyle]="sortedColumnKey === columnName ? sortedColumnStyle: {}">
     ...
     {{tdContent}}
     ...
    </td>
  </ng-template>
</c-smart-table>

[32x0lf]

Thanks, should I do the same for the header as well? Should I use th instead of td?

[xidedix]

@32x0lf

cTemplateId="tableData" works for <tbody> only

• assuming you have defined columns and every column def has a key
• you should also take care of types

handleSorterValueChange(sorterValue: any) {
  
  this.sortedColumnStyle = sorterValue?.state ? {backgroundColor: '#badce3'} : {};
  this.sortedColumnKey = sorterValue?.column ?? '';

  this.columns.forEach((column) => {
    column._style = column.key === sorterValue?.column
      ? { ...column._style, backgroundColor: '#badce3' }
      : { ...column._style, backgroundColor: null };
  });
}

[32x0lf]

Thank you so much @xidedix

[32x0lf]

@xidedix

why I am getting this error?
`Type '{ backgroundColor: string; minWidth?: undefined; width?: undefined; }' is not assignable to type '{ minWidth: string; width: string; backgroundColor: null; } | { backgroundColor: null; minWidth?: undefined; width?: undefined; } | { minWidth: string; width: string; backgroundColor: string; } | { ...; }'.
Type '{ backgroundColor: string; minWidth?: undefined; width?: undefined; }' is not assignable to type '{ minWidth: string; width: string; backgroundColor: null; }'.
Types of property 'minWidth' are incompatible.
Type 'undefined' is not assignable to type 'string'.

81 column._style = column.key === sorterValue?.column`

in my column property there is one column that I set like this _style: {backgroundColor: ''}. If I add another style like width I will get that error

[xidedix]

@32x0lf that's why you should also take care of types

a minimal setup could look like:

interface IColumn {
  key: string;
  label?: string;
  filter?: boolean;
  sorter?: boolean;
  _style?: any;
  _props?: any;
  _classes?: any;
}

and in your component:

columns: IColumn[] = [
  ...

[32x0lf]

Oh. thanks for the info.

[32x0lf]

Hi @xidedix ,

I noticed this code

  this.columns.forEach((column) => {
    column._style = column.key === sorterValue?.column
      ? { ...column._style, backgroundColor: '#badce3' }
      : { ...column._style, backgroundColor: null };
  });

is no longer working. I don't know maybe after updating to latest version of coreui pro for angular 14 version,
Just noticed this one today.

[xidedix]

@32x0lf mutated columns won't trigger change detection,
you can try:

this.columns.forEach((column) => {
  column._style = column.key === sorterValue?.column
    ? { ...column._style, backgroundColor: '#badce3' }
    : { ...column._style, backgroundColor: null };
});
this.columns = [...this.columns]

or

this.columns = this.columns.map((column, index) => {
  column._style = column.key === sorterValue?.column
    ? { ...column._style, backgroundColor: '#badce3' }
    : { ...column._style, backgroundColor: null };
  return column;
})

[32x0lf]

this.columns.forEach((column) => {
  column._style = column.key === sorterValue?.column
    ? { ...column._style, backgroundColor: '#badce3' }
    : { ...column._style, backgroundColor: null };
});
this.columns = [...this.columns]

Thank you.