Component documentation
| Course 1 | archived | 100 | |
| Course 2 | active | 97 | |
| Course 3 | active | 94 | |
| Course 4 | archived | 91 | |
| Course 5 | active | 88 |
Search, sort, resize columns and choose how many courses to show per page. The host owns this grid’s state.
| Course 1 | archived | 100 | |
| Course 2 | active | 97 | |
| Course 3 | active | 94 | |
| Course 4 | archived | 91 | |
| Course 5 | active | 88 |
'use client';
import { useState } from 'react';
import { DataGrid, type GridColumn, type GridState } from '@structured-growth/sg-ui/experimental';
export default function CourseDataGridExample() {
type Course={id:string;name:string;status:string;score:number};
const rows:Course[]=[{"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},{"id":"5","name":"Course 5","status":"active","score":88},{"id":"6","name":"Course 6","status":"active","score":85},{"id":"7","name":"Course 7","status":"archived","score":82},{"id":"8","name":"Course 8","status":"active","score":79},{"id":"9","name":"Course 9","status":"active","score":76},{"id":"10","name":"Course 10","status":"archived","score":73},{"id":"11","name":"Course 11","status":"active","score":70},{"id":"12","name":"Course 12","status":"active","score":67},{"id":"13","name":"Course 13","status":"archived","score":64},{"id":"14","name":"Course 14","status":"active","score":61},{"id":"15","name":"Course 15","status":"active","score":58},{"id":"16","name":"Course 16","status":"archived","score":55},{"id":"17","name":"Course 17","status":"active","score":52},{"id":"18","name":"Course 18","status":"active","score":49}];
const columns:GridColumn<Course>[]=[{id:'name',label:'Course',getValue:row=>row.name},{id:'status',label:'Status',getValue:row=>row.status},{id:'score',label:'Score',getValue:row=>row.score}];
const [state,setState]=useState<GridState>({"sort":[],"filters":[],"search":"","page":0,"pageSize":5,"selectedIds":[],"hiddenColumns":[],"widths":{}});
return (
<>
<DataGrid label="Courses" rows={rows} columns={columns} getRowId={row=>row.id} getRowLabel={row=>row.name} state={state} onStateChange={setState} />
</>
);
}