Use Grids

You must have seen two or more sections of grid having their own horizontal scrollbar but synced vertical scroll. useGrids is created to the same thing but allowing developer to customize it extensively.

These grids are little special as unlike normal grid there is a lot is going on. useGrids provides a lot of handler to enable this.

There will be wrapper to solve the common use case, for now there is example doing the same and can be used to develop on top of it.

useGrids takes two param, number & a object. The later same prop as useGrid.

Usage

Copy
const {
  onScroll,
  rowRenderers,
  gridHeight,
  horizontalSync,
  headerRef,
  bodyRef,
  gridRef,
  actions,
  GridHeaders,
  GridBodies,
  ScrollBars,
} = useGrids(3, {
  data: loading.current ? data.concat([null, null]) : data,
  rowHeight: rowHeight || 39,
  buffer,
  limit,
  dynamicHeight: true,
  loadMore: getData,
});

The hooks return couple of useful handles and calculated properties let's go through each of it

Ref's and the wrappers

When there are more than one grid generally one (or) more are pinned and can have their own scroll, let say you have 3 grids and 2 are on each side with 2 column but only have width of 1 column and the middle is consist of 6 columns but had width of 3 columns. This means each is horizontally scroll able but this should also remain vertically sync else, it can't behave as a single grid. There are two ways to keep them vertically synced.

1. Keep the scroll able bodies inside one div.
2. Attach a custom onScroll handle to both, don't forget to call the useGrids onScroll from it.

2nd one can cause sync issue on heavy tables and table might go out of sync while 1st one is tricky to create but will cause no performance issue as no JS involved for that part. But with 2nd option you can skip all extra refs in useGrids as well as wrapper. But for first one we have solved a issue but created another which is also solved through JS but doesn't hamper the performance that much.

With 1st case, table bodies will inside a div and header will live outside now obviously in this case, if you will scroll a body header will not be scrolled to do that all the refs and horizontalSync comes into the picture. Wrapper are just a div pass any children to it, the benefit is refs and horizontalSync are already attached so you don't need to import them until you don't want div's.

You can go with 2nd one if your table are light and can use throttle to prevent sync issues. Example will be added soon. For 1st approach check the example below.

There might be 3rd way too, this is power of React Hooks and Smart Grid, do it in your own way!

Still confused with 1st approach? Don't worry it is confusing, check the example below on CodeSandbox, that will definitely help. Example with 2nd approach will be added soon.

Performance

Obviously the performance will not be same as useGrid, only little lower, as there will multiple rowRenderer (for each sub table) call and then horizontal syncs. Horizontal syncs doesn't matter much as they always have limited scope and it doesn't occur along with vertical.

Multiple rowRenderer cannot be avoided, the thing is here it is happening in front of you, this can be hidden from developer by taking a schema, but at some point there will be multiple calls. Same happened with V1.0.0 just behind the scene.

Don't worry it has been battle tested with very UI intensive rows at InnovAccer.

Example

Loading may take a while: open in CodeSandbox