React sortable dashboard ·

React library for building modern dashboards with drag-n-drop sorting

Links

• Demo

Usage

import { Dashboard, DashboardWidget } from "react-sortable-dashboard";

const handleWidgetsReorder = (source: number, target: number) => {
  // ... do some stuff with source and target index
};

function App() {
  const widgets = ...; // Array of some widget objects

  return (
    <Dashboard rows={5} columns={5} onWidgetsReorder={handleWidgetsReorder}>
      { widgets.map((widget) => (
        <DashboardWidget
              columns={widget.columns}
              rows={widget.rows}
              key={widget.id}
              dragRef={dragTriggerRef}>
              <SomeWidgetComponent />
        </DashboardWidget>
      ))}
    </Dashboard>
  );
}

API Reference

Dashboard

| Parameter | Type | Description | | :-------- | :------- | :------------------------- | | rows | number | Required. Total number of rows available for widgets on this dashboard | | columns | number | Required. Total number of columns available for widgets on this dashboard | | verticalSpacing | number | Space in pixels, that will be added between columns | | horizontalSpacing | number | Space in pixels, that will be added between rows | | onWidgetsReorder | (source: number, target: number) => void | handler for event that fires when order of widgets was changed via drag and drop |

DashboardWidget

| Parameter | Type | Description | | :-------- | :------- | :------------------------- | | rows | number | Required. Number of rows occupied by widget | | columns | number | Required. Number of columns occupied by widget | | dragRef | RefObject<HTMLElement> | Ref to widget child, that triggers drag and drop interaction