Column width

[FaisalAriyanto]

Is there a way to quickly setup the width for each colom?

[PrazSam]

I'm facing the same issue. @FaisalAriyanto you are asking about a "quick" way. It seems you have a workaround or..?

[FaisalAriyanto]

@PrazSam My bad way to set width:

ngAfterViewInit() {
document.getElementsByClassName('column_name')['0'].style.width = '100px'
}

[PrazSam]

Since there are no any other way yet, this is the greatest way. @FaisalAriyanto Thanks for saving my day.

[alifatic]

@FaisalAriyanto i want to ask, do u know how to add overflow-x , inside tbody, i've added in css but not working

[PrazSam]

@alifatic Why overflow-x just for tbody ? I don't know what you really looking for. If you are trying to make the table horizontally scrollable, just use table inside a div and make it scrolable.

<div class="smart-table-container">
    <ng2-smart-table ..... > </ng2-smart-table >
</div>

.smart-table-container{
    overflow-x: scroll;
}

you may use min width for the table.

.ng2-smart-table  {
    min-width: 1500px;
}

[ManpreetSingh80]

You can also use css class in column or just insert data in html type and define width there.

[sushanzh]

@FaisalAriyanto I was trying your workaround below where Region is my column name. I placed the function in the component.ts file. It didn't seem to take any effect. Did I miss anything? I'm looking for a way to set the width of each column, or alternatively configure it so that the column width accommodates the text value inside the cells full but don't wrap to the next row (go horizontally across, not wrap to the next row. Thank you for your help!

ngAfterViewInit() {
document.getElementsByClassName('Region')['0'].style.width = '100px'
}

[sushanzh]

@ManpreetSingh80 I tried adding class: 'wide' to the column setting, it doesn't take effect either. I think I'm missing something...

settings = {
columns: {
region: {
title: 'Region',
filter: false,
class: 'wide'
},
...
}

[ManpreetSingh80]

@sushanzh You can try html type

title: 'Region', type: 'html', filter: false, valuePrepareFunction: (value) => { return '<div class="wide">' + value + '</div>'; }

[FaisalAriyanto]

@sushanzh Maybe ngAfterViewInit cannot find your table, i run script there because i expect that table show in DOM and can find column name and change width manual by javascript.

[sushanzh]

@FaisalAriyanto and @ManpreetSingh80 thank you for your replies. I have tried again, and the html type method works for me! Thank you!!!

[gregoiremotot]

:host {
  ::ng-deep .yourColumnName .ng2-smart-title {
    width: 100px;
  }
}

thanks to @ishansinghania
#103 (comment)

[Ajinkyadon]

@alifatic Why overflow-x just for tbody ? I don't know what you really looking for. If you are trying to make the table horizontally scrollable, just use table inside a div and make it scrolable.

<div class="smart-table-container">
    <ng2-smart-table ..... > </ng2-smart-table >
</div>

.smart-table-container{
    overflow-x: scroll;
}

you may use min width for the table.

.ng2-smart-table  {
    min-width: 1500px;
}

Thanks, man you help me a lot.