Skip to content

dkonasov/react-sortable-dashboard

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

90 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

React sortable dashboard · npm

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

Links

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