A data grid is an interactive table for presenting API-backed records in a UI. MUI DataGrid supplies sorting, searching, and filtering with little custom work, making it useful when operational data must be scanned, compared, and acted on quickly. section 8.7.1
Build a grid by retrieving typed records into component state, defining columns, and passing the results to the grid. Keep data fetching inside a component when its data is unique; when several components need similar data, pass shared data down to reduce server calls, latency, and unnecessary UX cost. section 8.7.1 section 10.5.2
Columns turn raw records into a useful working view:
- Map ordinary fields such as filename, record number, code, description, and application directly to named columns. section 8.7.1 section 8.8.3
- Use valueGetter to transform a stored value, such as formatting a date before display. section 8.7.1
- Use renderCell when a cell needs custom content, such as an info icon or a clickable View link. section 8.7.1 section 10.5.2
- Let a custom action request detailed data only after a user selects a row action, then open the detail view with the response or error message. section 8.7.1
Listing 8.32 Defining the DataGrid
…
const columns: GridColDef[] = [
{field: 'view', headerName: 'View',
➥ sortable: false, width: 10, renderCell: (params) => (
<IconButton #1
onClick={(e) => { #1
e.preventDefault(); #1
setIsOpen(true); #1
}} #1
color="primary" #1
▶ #1
<InfoIcon /> #1
</IconButton> #1
)},
{field: 'file_name', headerName: 'Filename', width: 150},
{field: 'created_at', headerName: 'Date',
➥ width: 150, valueGetter: (params) => convertDateFormat(params.value)},
{field: 'record_number', headerName: 'Record Number', width: 150},
{field: 'exception_code', headerName: 'Code', width: 10},
{field: 'description', headerName: 'Description', width: 300},
]
…
<DataGrid columns={columns} rows={entries}/> #2
…
<AlertMessage open={isOpen} setOpen={setIsOpen} #3
message="Exception Record" title="Record Exception" /> #3
…
This column definition shows three common grid choices together: a non-sortable action column, a custom icon rendered in a cell, and a date value transformed for display. section 8.7.1
Exception review screen
An exceptions page loads exception records into a grid so a user can review the list, select an info icon, and retrieve the unparsed record for that exception. The same pattern supports an audit-log view, recent company batches with direct links to files or batches, and an Expected Files dashboard component. section 8.7.1 section 9.5 section 10.5.2 section 10.6
A grid is not the only way to display changing data. Use a manually generated layout, such as an accordion, when its structure better fits the information; choose a DataGrid when a table structure is the clearer view. section 6.6.3
