Columns width

Generic UI allows you to edit width of any column. By default it is set to auto, but it can be specified in number which relates to pixels. Column width can be set up by adding width to the particular column you wish to change. Just like on example below.

Name
Position
Team
Training
Company
Mark Ross Team Leader TI 13 Genco Pura Olive Oil Company Concepción King Carpenter KN 33 Globex Corporation Vanecia Green Painter CR 42 Soylent Corp Samara Anderson Electrician PU 100 Initech Maxine Hamilton SEO Manager KN 29 Gekko & Co Dan Lee Director TI 92 Sterling Cooper Paul Long Web Developer AN 13 Hooli Madonna Snyder Product Manager DR 81 Vehement Capital Partners Oriole Perkins Public Relations TI 72 Massive Dynamic Ernest Jordan Copywriter TI 55 Wonka Industries
@Component({
	template: `
		<gui-grid [columns]="columns"
				  [source]="users">
		</gui-grid>
	`
})
export class ColumnWidthComponent {

	users = users;

	columns = [{
        header: 'Name',
        field: 'name',
        width: 160
    }, {
        header: 'Position',
        field: 'position',
        width: 80
    }, {
        header: 'Team',
        field: 'teamShort',
        width: 120
    }, {
        header: 'Training',
        field: 'training',
        type: GuiDataType.NUMBER,
        width: 200
    }, {
        header: 'Company',
        field: 'company'
    }];


}

Related articles:

We use cookies to improve your experience. If you continue browsing, we assume that you consent to our use of cookies.