Closed 32x0lf closed 1 year ago
@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;
}
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.
@32x0lf Do you want to change the color of the sorted column?
Yes,all sorted column only. It will change only when sort header column is clicked.
@32x0lf
in this case you have to listen to (sorterValueChange)
events
@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);
@32x0lf
Let's try this way:
<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>
Thanks, should I do the same for the header as well? Should I use th instead of td?
@32x0lf
cTemplateId="tableData"
works for <tbody>
only
columns
and every column def has a key
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 };
});
}
Thank you so much @xidedix
@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
@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[] = [
...
Oh. thanks for the info.
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.
@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;
})
this.columns.forEach((column) => { column._style = column.key === sorterValue?.column ? { ...column._style, backgroundColor: '#badce3' } : { ...column._style, backgroundColor: null }; }); this.columns = [...this.columns]
Thank you.
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