reactabular-dnd
provides React DnD based helpers for Reactabular.
Example:
/*import React from 'react';import { DragDropContext } from 'react-dnd';import HTML5Backend from 'react-dnd-html5-backend';import cloneDeep from 'lodash/cloneDeep';import findIndex from 'lodash/findIndex';import * as Table from 'reactabular-table';import * as dnd from 'reactabular-dnd';import * as resolve from 'table-resolver';*/ const rows = id: 1 name: first: 'John' last: 'Johnson' company: 'John Inc.' sentence: 'consequatur nihil minima corporis omnis nihil rem' id: 2 name: first: 'Mike' last: 'Mikeson' company: 'Mike Inc.' sentence: 'a sequi doloremque sed id quo voluptatem voluptatem ut voluptatibus' id: 3 name: first: 'Jake' last: 'Jackson' company: 'Jake Inc.' sentence: 'sed id quo voluptatem voluptatem ut voluptatibus' id: 4 name: first: 'Don' last: 'Donson' company: 'Don Inc.' sentence: 'voluptatem voluptatem ut voluptatibus' ; Component { ; thisstate = columns: props: style: width: 100 header: label: 'Name' props: label: 'Name' this children: property: 'name.first' props: style: width: 50 header: label: 'First Name' props: label: 'First Name' this property: 'name.last' props: style: width: 50 header: label: 'Last Name' props: label: 'Last Name' this property: 'company' props: label: 'Company' style: width: 100 header: label: 'Company' props: this property: 'sentence' props: style: width: 300 header: label: 'Sentence' props: label: 'Sentence' this rows ; thisonRow = thisonRow; thisonMoveRow = thisonMoveRow; thisonMoveColumn = thisonMoveColumn; thisonMoveChildColumn = thisonMoveChildColumn; } { const renderers = header: cell: dndHeader body: row: dndRow ; const columns rows = thisstate; const resolvedColumns = resolve; const resolvedRows = resolverows; return <Table.Provider = = > <Table.Header = /> <Table.Body = ="id" = /> </Table.Provider> ; } { return rowId: rowid onMove: thisonMoveRow ; } { const rows = dndthisstaterows; if rows this; } { const movedColumns = dnd; if movedColumns // Retain widths to avoid flashing while drag and dropping. const source = movedColumnssource; const target = movedColumnstarget; const sourceWidth = sourcepropsstyle && sourcepropsstylewidth; const targetWidth = targetpropsstyle && targetpropsstylewidth; sourcepropsstyle = ...sourcepropsstyle width: targetWidth ; targetpropsstyle = ...targetpropsstyle width: sourceWidth ; this; } { const movedChildren = dnd; if movedChildren const columns = ; columnsmovedChildrentargetchildren = movedChildrencolumns; // Here we assume children have the same width. this; } // Set up drag and drop context//const DragAndDrop = DragDropContext(HTML5Backend)(DragAndDropTable); <DragAndDropTable />