Resizable columns

Simply add resizable: true to your config to enable resizable columns:

Live Editor

const grid = new Grid({
  columns: ['Name', 'Email', 'Phone Number'],
  data: [
    ['John', 'john@example.com', '(353) 01 222 3333'],
    ['Mark', 'mark@gmail.com',   '(01) 22 888 4444']
  ],
  resizable: true,
  sort: true
});


const grid = new Grid({
  columns: ['Name', 'Email', 'Phone Number'],
  data: [
    ['John', 'john@example.com', '(353) 01 222 3333'],
    ['Mark', 'mark@gmail.com',   '(01) 22 888 4444']
  ],
  resizable: true,
  sort: true
});

Result

Name	Email	Phone Number
John	john@example.com	(353) 01 222 3333
Mark	mark@gmail.com	(01) 22 888 4444

You can also set width before passing the resizable flag:

Live Editor

const grid = new Grid({
  columns: ['Name', 'Email', 'Phone Number'],
  data: [
    ['John', 'john@example.com', '(353) 01 222 3333'],
    ['Mark', 'mark@gmail.com',   '(01) 22 888 4444']
  ],
  width: 500,
  resizable: true
});


const grid = new Grid({
  columns: ['Name', 'Email', 'Phone Number'],
  data: [
    ['John', 'john@example.com', '(353) 01 222 3333'],
    ['Mark', 'mark@gmail.com',   '(01) 22 888 4444']
  ],
  width: 500,
  resizable: true
});

Result