Smart Grid

Use Grid

Use Grid

useGrid is the primary hook to create any grid. It takes an object as input which can be consist of

virtualizedIf true only visible rows and buffer rows exists in DOM, to improve performance if there a lot of rows. This is true by default but should be set false if even the maximum possible rows are not causing any performance issue.falsetrueboolean
rowHeightHeight of row, incase of dynamic row height, this will be treated as minimum height.true-number
dynamicHeightThis will leave the row height calculation to the hook.falsefalseboolean
limitThe number of rows rendered after first visible row, ignored if virtualized is false.false20number
bufferrows rendered before the first visible row and after the limit, ignored if virtualized is false.false20number
loadMorefunction triggered when we are about to hit the last row, this allows user to lookup for any more data available.false-( sp : number ) => void
loadMoreOffsetnumber of rows from bottom when loadMore should be triggeredfalseInfinitynumber


const { onScroll, rowRenderer, tableHeight, tableRef, actions } = useGrid({
data: state.loading ?[null, null]) :,
rowHeight: rowHeight || 39,
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 table.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
tableHeightTotal height of table, in case of virtualized table 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
tableRefref to be attached to scroll able part. Required for actions.false
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 table can re-calculate everything.false


If you have used react-spring this pattern will be familiar, to render each row, useGrid provides a function rowRenderer which expects a function in return and provides 4 params row, style, index, ref.

  • row: row data for that particular row, basically data[index].
  • style: style required table to work properly.
  • index: index of that row.
  • ref: ref to be passed on that row (top level) without this dynamic height grid will not work as there will no access to row's DOM Element to calculate height


Loading may take a while: open in CodeSandbox

Edit this page on GitHub