Responsive table - Filling the viewport

chunkItems.js

import chunk from "lodash/chunk"

// "items" is the generic term used
// to refer to your database items
const chunkedItems = (items, size) => {
  return chunk(items, size)
}

const getChunkFor = (width) => {
  if (size < 480) {
    return 30
  } else if (size < 960) {
    return 15
  } else {
    return 10
  }
}

// using debounce to improve performance
// Resize event fire much more time than we need in this case
window.addEventListener('resize', debounce(function () {
    const size = getChunkFor(window.innerWidth)
    const itemGroups = chunkedItems(items, size)
    // use itemGroups for rendering
    // usage code: for (items in itemGroups) ...
}, 300))