SGUI / Development
DataGridDragHandle
Named drag handles and complete-dataset Move requests.
Loading examples…
Loading examples…
Examples
Loading examples…
Component documentation
SGUI / Development
Named drag handles and complete-dataset Move requests.
Loading examples…
Loading examples…
Loading examples…
Move requests: 0
Move requests: 0
'use client';
import { useState } from 'react';
import { DataGridDragHandle, AppDataGrid, type AppDataGridRowDragReorderParams } from '@structured-growth/sg-ui/components';
import { Stack, Typography, Link } from '@structured-growth/sg-ui/primitives';
export default function DragHandleExample() {
const [pressed,setPressed]=useState(0);
return (
<>
<DataGridDragHandle label={"Move Course 1"} disabled={false} dragging={false} onPress={()=>setPressed(n=>n+1)} /><Typography>Move requests: {pressed}</Typography>
</>
);
}
Course | |
|---|---|
Course 1 | |
Course 2 | |
Course 3 | |
Course 4 |
'use client';
import { useState } from 'react';
import { DataGridDragHandle, AppDataGrid, type AppDataGridRowDragReorderParams } from '@structured-growth/sg-ui/components';
import { Stack, Typography, Link } from '@structured-growth/sg-ui/primitives';
export default function GridReorderExample() {
const [rows,setRows]=useState([{"id":"1","name":"Course 1","status":"archived","score":100},{"id":"2","name":"Course 2","status":"active","score":97},{"id":"3","name":"Course 3","status":"active","score":94},{"id":"4","name":"Course 4","status":"archived","score":91}]);
function reorder({sourceRowIds,targetRowId,position}:AppDataGridRowDragReorderParams<(typeof rows)[number]>) {
setRows(current=>{const source=current.filter(row=>sourceRowIds.includes(row.id));if(!source.length||sourceRowIds.includes(targetRowId))return current;const next=current.filter(row=>!sourceRowIds.includes(row.id));const target=next.findIndex(row=>row.id===targetRowId);if(target<0)return current;next.splice(target+(position==='after'?1:0),0,...source);return next;});
}
return (
<>
<AppDataGrid label="Reorder courses" rows={rows} columns={[{field:"name",headerName:"Course",flex:1}]} getRowLabel={row=>row.name} defaultPaginationModel={{page:0,pageSize:10}} pageSizeOptions={[10]} rowDrag={{onReorder:reorder}} style={{height:"max-content",flex:"none"}}/>
</>
);
}