Posts

In JavaScript, an ag-Grid column is bound to a row property by assigning a string to field config. This is quite fragile: a typo or change in row model will cause and empty column in the grid. Fortunately, a much safer binding is possible thanks to TypeScript’s keyof operator. Check grid component example and demo page.

Vanilla JS cell renderers are faster than framework renderers (just like the docs suggest) but renderers created with React class components are quite decent. Unfortunately, cell renderers build with function components are noticeably worse. The grid team is aware of the issue and might fix it soon (I’ve done my test on ag-Grid 23.1.0 released just 2 days ago)… See live demo that compares different ways to render cell content and check the source code on GitHub.

You can use measureText method to calculate widths of text and then use setColumnWidth to adjust columns. This the demo and this is the repo. It’s quite likely that you don’t need this technique (suppressColumnVirtualisation might be enough), but read on if your grid has huge amount of columns and users need high data density…

Utilize useState or useRef hooks and gridReady event to maintain access to Grid API and Column API. Check here for code samples.

Making website layout used to be hard… Frames, tables, floats, display: table, vertical-align, negative margins, absolute positioning… you name it! People & frameworks had to abuse HTML/CSS features just to center a div (let alone do a responsive page setup)… Fortunately the dark ages are over, Flexbox is supported for quite a while and about two years ago mayor browsers implemented Grid. It took 30 years, but website layout problem is solved (almost, still waiting for Subgrid).

It’s October 2018 so I should probably write something about React 16.5, Angular 7.0 or Blazor 0.6… But… How about some fun with iframe-infested legacy application instead? ;)

Part 1 introduced you to OpenCV and its Emgu CV wrapper library plus showed the easiest way to create Emgu project in Visual Studio 2017. Part 2 was all about grabbing frames from video file. The third (and last) episode focuses on image transformations and contour detection…