dnd-grid

Check out the demo. dnd-grid is a react component that renders a scrollable grid with items sorted into and draggable between cells; axes are easily changable.

Install

npm install dnd-grid

Use

const SomeComponent = ({...}) => {
  ...
  const result = (
    <div>
      ...
      <DnDGrid
        canEdit={bool}
        axisGroups={array, see outline below or example in demo}
        itemList={array, see outline below or example in demo}
        xAxisGroup={string, axisGroupId}
        yAxisGroup={string, axisGroupId}
        handleItemMove={({
          itemId, // string, itemId
          xAxisGroup, // string, axisGroupId
          yAxisGroup, // string, axisGroupId
          xAxisElement, // string, axisElementId
          yAxisElement, // string, axisElementId
          oldxAxisElement, // string, axisElementId
          oldyAxisElement // string, axisElementId
        }) => {...}}
        updateXAxisGroup={(stringOfNewGroupId) => {...}}
        updateYAxisGroup={(stringOfNewGroupId) => {...}}
        backgroundColor={string, color}
      />
    </div>
  )
  return result
}

const axisGroups = [
  {
    id: axisGroupId,
    name: axisGroupName,
    elements: [
      {
        id: axisElementId,
        name: axisElementName,
        color: axisElementColor,
        backgroundColor: axisElementBackgroundColor
      },
      // ... other axis elements
    ],
  },
  // ... other axis groups
]

const itemList = [
  {
    id: itemId,
    conditions: {
      [axisGroupId]: axisElementId ,
      // ... other item conditions
    },
    component: ({itemId, itemConditions, ...other}) => {...}
  },
  // ... other items
]