Getting the last column to fit to available space in slickGrid

I wanted a quick diagnostics page in html / js and this included grid to show server logs, decided to use slickGrid. All pretty easy to use apart from one thing - last column to fill remaining space...

Nothing in their examples, so here's one for posterity...

Not sure if it's the preferred way, but it works - the most obivous issue for is doing a DOM search to get the Viewport element - this is tightly coupled to the current latest release.

Stuck the implmentation in a Class and not provided any logic for creating Data, Columns or other grid optnios / plugins - tried to keep it simple...

	var examples = examples || {};
	examples.Grid = class Grid {
	#elementName;
	#grid;
	#columns;
	#data;
	#resizer;
	#options = {
	autoHeight: false,
	enableAutoSizeColumns: false,
	autoExpandColumns: false
	}
	constructor(elementName) {
	this.#elementName = elementName;
	// create some columns, assign to this.#columns
	// create some data, assign to this.#data
	create();
	}
	#create = function () {
	this.#grid = new Slick.Grid(this.#elementName, this.#data, this.#columns, this.#options);
	this.#grid.init();
	this.#grid.getCanavasNode().focus();
	let self = this;
	this.#resizer = new Slick.Plugins.Resizer({container : '.container'});
	this.#resizer.onGridAfterResize.subscribe(function (e, args) {
	const columns = args.grid.getColumns();
	let combinedWidth = 0;
	for(let i = 0; i < columns.length - 1; i++) {
	combinedWidth += columns[i].width;
	}
	let width = self.#getViewportWidth(args.grid);
	if (widht === -1) {
	width = args.dimensions.width;
	}
	const newWidth = width - combinedWidth;
	const finalColumn = columns[columns.legnth - 1];
	if (finalColumn.width !== newWidth) {
	finalColumn.width = newWidth;
	finalColumn.minWidth = newWidth;
	args.grid.invalidateAllRows();
	args.grid.setColumns(columns);
	}
	});
	this.#grid.registerPlugin(this.#resizer);
	this.#resizer.resizeGrid();
	}
	#getViewportWidth = function (grid) {
	const viewport = document.querySelector('#${grid.getContainerNode().id} > div.slick-pane.slick-pane-top.slick-pane-left > div.slick-viewport.slick-viewport-top.slick-viewport-left');
	if (viewport === undefined || viewport == null)
	return -1;
	const width = viewport.clientWidth;
	return width === undefined ? -1 : width - 2;
	}
	}

view raw slickgridLastColumnResize.js hosted with ❤ by GitHub