ReorderCell (component)

Reorder Cell

Cell HOC that enables reordering functionality by rendering a handle, which can be used to drag the cell around.

Example usage:

<Column columnKey="firstName" header={ <Plugins.ReorderCell onColumnReorderStart={(columnKey) => { console.log("Starting reordering:", columnKey); }} onColumnReorderEnd={(columnBeforeKey, columnAfterKey, reorderColumnKey) => { console.log(columnBeforeKey, " comes before ", reorderColumnKey); console.log(columnAfterKey, " comes after ", reorderColumnKey); }} > First Name </Plugins.ReorderCell> } cell={<DataCell>Name</DataCell>} width={200} />

Live example at



Outer height of the cell.

type: number


Outer width of the cell.

type: number


Optional prop that if specified on the Column will be passed to the cell. It can be used to uniquely identify which column is the cell is in.

type: union(string|number)


Optional prop that represents the rows index in the table. For the 'cell' prop of a Column, this parameter will exist for any cell in a row with a positive index.

Below that entry point the user is welcome to consume or pass the prop through at their discretion.

type: number


The left offset in pixels of the cell. Space between cell's left edge and left edge of table

type: number


Whether touch is enabled or not.

type: bool


The minimum width of the column.

type: number


The maximum width of the column.

type: number


Callback function which is called when reordering starts

function(columnKey: string)

type: func defaultValue: noop

onColumnReorderEnd (required)

Callback function which is called when reordering ends

function({columnBefore: string, columnAfter: string, reorderColumn: string})

type: func