Our blazing fast Grid component built with pure JavaScript

Post by thanarie »

Due to the way the grid it set up, this seems not possible.

I don't want the grid to fill all the available space (i.e. not 100%), nor do I want the grid to be a fixed with (e.g. 800px). I want the grid to take the size of its columns.

Purely by CSS this doesn't seem possible. I've tried modifying everything to inline-flex and disabling the width:0 for the header cells. However due to flexbox calculating the container width based on the actual size of the cells, and not the resized site set with flex-basis, the containing header div can become larger or smaller than the set flex-basis columns. It also messes up during resizing.

Perhaps setting explicit width for a header column might make it work, but that requires changing internal code. I presume all this is done for a reason.

One other thing I came up with, as a last resort, is a bit hack, but seems to work. Is basically in an interval check the column widths, and apply that same size to the grid:

const header = document.querySelector('.b-grid-headers');

const width = [...header.children]
  .map((element) => element.getBoundingClientRect().width)
  .reduce((a, b) => a + b);

grid.element.style.width = `${width}px`;

I'm wondering if there is a way to listen for resize events on the grid?

Or if there is a better way to accomplish this?

Post by mats »

Here's a quick POC for you as a starting point: https://codepen.io/matsbryntse/pen/NWVxYrm?editors=1010

Is this close to what you had in mind?

Post by thanarie »

That's exactly what I needed, thanks so much!
With this, I was also able to figure out in the docs where I could have found it if I understood everything correctly :)

The only "issue" i'm having is with typing, so I needed to do some manual casting :(

// this is typed as a union, along with ColumnConfig stuff
const columnStore gridRef.current.instance.columns as ColumnStore; 

// this 2nd param is required, even though the comment above that code says it's optional
columnStore.sum('width', undefined as any); 

// related to the first line (but from somewhere else in our code),
// I noticed that all the array methods are not generic,
// so you loose your typing, and had to do this:
(gridInstance.columns as Array<Column>).find(.....)

I'm using the React version, and I couldn't find how to do it on there, but accessing the grid instance from the ref on mount made it work :)

Again thanks!

Post by natalija »

I have a question that's like this one. The only issue I have is with the solution involving a horizontal scroller. Could you show all the columns in the table without needing to scroll?

Post by mats »

So you would like to stretch the containing element / BODY or page instead?

Post by natalija »

I want to see the right column values without needing to use a horizontal scroll.

scroll.png (37.35 KiB) Viewed 205 times

Post by Animal »

Just add the scroll bar width like here: https://codepen.io/Animal-Nige/pen/vYwWqvp?editors=0010

Post Reply