CODEWITHSUNDEEP
angularng2-smart-table
Chanaka Amarasinghe
Chanaka Amarasinghe

Reputation: 3788

How to change ng2 smart table column width?

This is a sample of my three columns. I want to customize the width sizes.

resetPassword: {
    title: this.gridTittle["ResetPassword"],
    type: 'custom',
    renderComponent: UserPasswordResetComponent,
    filter: false
},
userName: {
    title: this.gridTittle["UserName"],
},
roleTypeDescription: {
    title: this.gridTittle["UserType"],
    type: 'text',
    filter: false
},

Upvotes: 3

Views: 15875

Answers (3)

RicardoVallejo
RicardoVallejo

Reputation: 1096

I was not able to make it work with the column attribute.
My solution is:

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

or

:host {
  ::ng-deep .ng2-smart-title {
    min-width: 150px;
  }
}

You have a thread here with it

Upvotes: 0

Ezequiel Tavares
Ezequiel Tavares

Reputation: 123

Important >> this value of widht between quotation marks

columns: {
      id: {
        title: '#',
        type: 'string',
        sortDirection: 'desc',
        width: '30px'
      },
      name: {
        title: 'Nome',
        type: 'string',
      },
      lastName: {
        title: 'Sobrenome',
        type: 'string',
      },
      username: {
        title: 'Usuário',
        type: 'string',
      }
}

Upvotes: 0

Caio Ladislau
Caio Ladislau

Reputation: 1307

You can use the width property. As the documentation, "column width example: '20px', '20%'". In your code:

resetPassword: {
    title: this.gridTittle["ResetPassword"],
    type: 'custom',
    renderComponent: UserPasswordResetComponent,
    filter: false,
    width: 25%
},
userName: {
    title: this.gridTittle["UserName"],
    width: 25%
},
roleTypeDescription: {
    title: this.gridTittle["UserType"],
    type: 'text',
    filter: false,
    width: 50%
},

Upvotes: 7

Related Questions