AppDataGrid

Owned selection, sorting, filtering, columns and paging.

Select page	Course	Status	Score
Select Course 1	Course 1	archived	100
Select Course 2	Course 2	active	97
Select Course 3	Course 3	active	94
Select Course 4	Course 4	archived	91
Select Course 5	Course 5	active	88
Select Course 6	Course 6	active	85
Select Course 7	Course 7	archived	82
Select Course 8	Course 8	active	79
Select Course 9	Course 9	active	76
Select Course 10	Course 10	archived	73
Select Course 11	Course 11	active	70
Select Course 12	Course 12	active	67
Select Course 13	Course 13	archived	64
Select Course 14	Course 14	active	61
Select Course 15	Course 15	active	58
Select Course 16	Course 16	archived	55
Select Course 17	Course 17	active	52
Select Course 18	Course 18	active	49

Loading examples…

Prop playground

Grid accessible label

Page-size options

Initial rows per page

Show pagination footerWrap cell textUse long course namesShow Reset view

Density

Dataset state

Enable row sorterEnable row selection

Search dataset

Select page	Course	Status	Score
Select Course 1	Course 1	archived	100
Select Course 2	Course 2	active	97
Select Course 3	Course 3	active	94
Select Course 4	Course 4	archived	91
Select Course 5	Course 5	active	88
Select Course 6	Course 6	active	85
Select Course 7	Course 7	archived	82
Select Course 8	Course 8	active	79
Select Course 9	Course 9	active	76
Select Course 10	Course 10	archived	73
Select Course 11	Course 11	active	70
Select Course 12	Course 12	active	67
Select Course 13	Course 13	archived	64
Select Course 14	Course 14	active	61
Select Course 15	Course 15	active	58
Select Course 16	Course 16	archived	55
Select Course 17	Course 17	active	52
Select Course 18	Course 18	active	49

'use client';

import { useState } from 'react';
import { ThemeScope } from '@structured-growth/sg-ui/theme';
import { Button, AppDataGrid, AppDataGridShell, CourseCardFrame, createDataGridColumns, createActionMenuColumn, type AppDataGridColumn, type AppDataGridRowDragReorderParams } from '@structured-growth/sg-ui/components';
import { Stack, Typography, Link } from '@structured-growth/sg-ui/primitives';

export default function DataGridExample() {
  type Course={id:string;name:string;status:string;score:number};
  const [rows,setRows]=useState<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 [message,setMessage]=useState("");
  const [search,setSearch]=useState("");
  const [view,setView]=useState<'list'|'cards'>("list");

  const columns:AppDataGridColumn<Course>[] = createDataGridColumns([{field:'name',headerName:'Course',flex:2,minWidth:180,locked:true,truncate:true},{field:'status',headerName:'Status',width:140,filterType:'enum'},{field:'score',headerName:'Score',width:120,filterType:'number'},createActionMenuColumn<Course>({getMenuActions:row=>[{id:'open',label:'Open course',onPress:()=>setMessage(`Opened ${row.name}`)}]})]);
  return (
    <>
      <ThemeScope density="comfortable">
      <Stack gap={3}><AppDataGrid label={"Courses"} rows={rows} columns={columns} getRowLabel={row=>row.name} selection={true} searchValue={search} onSearchChange={setSearch} pageSizeOptions={[25,50,100]} defaultPaginationModel={{page:0,pageSize:25}} hideFooter={false} filterFields={[{"id":"status","label":"Status","type":"enum","enumOptions":[{"id":"active","label":"Active"},{"id":"archived","label":"Archived"}]}]} loading={false} refreshing={false} errorMessage={undefined} onRetry={()=>setMessage('Retry requested')} showResetView={true} style={{height:"max-content",flex:"none"}}/>{message && <Typography role="status">{message}</Typography>}</Stack>
      </ThemeScope>
    </>
  );
}

Loading examples…

Examples

AppDataGrid: Wrapped and truncated cells

Both columns display the same long course name at equal widths. The first wraps onto multiple lines; the second stays on one line with an ellipsis. Activate a row to see the host callback result; your application supplies navigation.

Select page	Wrapped text	Truncated text
Select Foundations of accessible learning experiences and inclusive course design	Foundations of accessible learning experiences and inclusive course design	Foundations of accessible learning experiences and inclusive course design
Select Practical workshop on building accessible activities and providing meaningful learner feedback	Practical workshop on building accessible activities and providing meaningful learner feedback	Practical workshop on building accessible activities and providing meaningful learner feedback
Select Leading collaborative projects across distributed learning teams	Leading collaborative projects across distributed learning teams	Leading collaborative projects across distributed learning teams

AppDataGrid: List · compact

A fixed reference configuration with its own row interactions and host feedback.

Select page	Course	Status
Select Course 1	Course 1	archived
Select Course 2	Course 2	active
Select Course 3	Course 3	active
Select Course 4	Course 4	archived
Select Course 5	Course 5	active
Select Course 6	Course 6	active

AppDataGrid: List · comfortable

A fixed reference configuration with its own row interactions and host feedback.

Select page	Course	Status
Select Course 1	Course 1	archived
Select Course 2	Course 2	active
Select Course 3	Course 3	active
Select Course 4	Course 4	archived
Select Course 5	Course 5	active
Select Course 6	Course 6	active

AppDataGrid: Loading dataset · comfortable

Initial loading: no rows have arrived yet.

Select page	Course	Status
Loading rows

AppDataGrid: Refreshing dataset · comfortable

Existing rows remain in place during refresh, with busy semantics and a polite announcement. Standalone hosts can compose DataToolbar to show refresh progress.

Refreshing rows

Select page	Course	Status
Select Course 1	Course 1	archived
Select Course 2	Course 2	active
Select Course 3	Course 3	active
Select Course 4	Course 4	archived
Select Course 5	Course 5	active
Select Course 6	Course 6	active

AppDataGrid: Empty dataset · comfortable

A fixed reference configuration with its own row interactions and host feedback.

Select page	Course	Status
No rows available

AppDataGrid: Error dataset · comfortable

A fixed reference configuration with its own row interactions and host feedback.

Sample request failed.

Select page	Course	Status
Select Course 1	Course 1	archived
Select Course 2	Course 2	active
Select Course 3	Course 3	active
Select Course 4	Course 4	archived
Select Course 5	Course 5	active
Select Course 6	Course 6	active

Loading examples…

Contains

AppPaginationFooter ArrowDropDownIcon Button Checkbox ContentCopyIcon DataGridDragHandle IconButton Link Menu MoreVertIcon Progress SortIcon Status Typography

Used In

AppDataGridShell