<SortableTable

    head={ [ 'Name' , 'Job' , 'Favorite Color' ] }

    defaultItems={ people }

    renderRow={ person => (

        <SortableTableRow><td>...</td></SortableTableRow>

    )}

/>

// the empty handle-column <th> is prepended automatically

<SortableTable

    zebra handle={ false }

    items={ rows } onReorder={ next => setRows( next ) }

/>

// zebra stripes follow DOM positions : they reassign after a drop

<SortableTable

    pinRows

    containerClassName="max-h-72 overflow-y-auto"

/>

// the header stays sticky while rows scroll and reorder underneath

<SortableTable

    defaultItems={ people }

    onReorder={ ( items ) => api.saveOrder( items ) }

/>

// onReorder may return a promise : a rejection restores the previous order