Smart Grid

Use Grids

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.


const {
} = useGrids(3, {
data: loading.current ? data.concat([null, null]) : data,
rowHeight: rowHeight || 39,
dynamicHeight: true,
loadMore: getData,

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

onScrollScroll handler to attached with scroll able body of grid.true
rowRendererIt's a function which expects a function to return a React.Node (the row), it provides (row,style,index,ref) where row is data[index]. For more checkout.true
gridHeightTotal height of scroll able part of grid, in case of virtualized grid height is dynamic especially in case of dynamic row height, this property is exposed so you can apply on scroll able part to have proper height.false
gridRefref to be attached to scroll able part, the main wrapper. Required for actions.false
headerRefAn array of refs, as grid can have multiple headers, ref need to be attached in orderfalse
bodyRefAn array of refs, as grid can have multiple body inside main wrapper, ref need to be attached in order
footRefAn array of refs, as grid can have multiple footer, ref need to be attached in order, this is mean to fake scrollbar below each body.
horizontalSyncHorizontal sync handler, need to be attached on each header, body and footer.
GridHeadersA ready to use Header wrapper, no need to attach ref or scrollHandler.
GridBodiesA ready to use Body wrapper, no need to attach ref or scrollHandler.
ScrollBarsA ready to use Footer wrapper, no need to attach ref or scrollHandler.
actionsactions is collection of useful methods like scrollToRow, getRowPosition & clear. The first two are self explanatory, clear is to be used when row of height changes, clear that index so grid can re-calculate everything.

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.


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.


Loading may take a while: open in CodeSandbox

Edit this page on GitHub