Data Display

Data tables show structured information in rows and columns: student rosters, class schedules, workflow lists, submission histories. The CTD Learns App uses MUI's DataGrid with custom theme overrides for consistent styling: gray50 header background with uppercase labels, subtle row borders, hover highlighting, and an optional striped variant for dense tables. Status columns always use Chip components, never plain text, so state stays scannable.

Interactive Preview

DataGrid — Table display options

Name

Status

Maria Santos

Active

James Chen

Behind

Aisha Johnson

Active

Carlos Rivera

Dropped

Props

density

striped

Row count

4

DataGrid

Name
Email
Status
Cohort
Last Active

Maria Santos

maria@example.com

Active

Spring 2026

Apr 6, 2026

James Chen

james@example.com

Behind

Spring 2026

Apr 3, 2026

Aisha Johnson

aisha@example.com

Active

Fall 2025

Apr 5, 2026

Carlos Rivera

carlos@example.com

Dropped

Spring 2026

Mar 15, 2026

Emily Nguyen

emily@example.com

Active

Fall 2025

Apr 6, 2026

Property
Value

Border

1px solidgray200

Border radius

10pxradiusLg

Font size

14pxsm

Header bg

#F7F7F8gray50

Header font

12px600 weight, uppercase, 0.05em tracking

Header border

bottom1px solidgray200

Cell border

1px solidgray100

Row hover

#F7F7F8gray50

Status cells

Chip component with semantic color variants

Striped Rows Variant

Student
Course
Progress
Grade

Maria Santos

Intro to React

85%

A

James Chen

Node.js Basics

72%

B+

Aisha Johnson

Intro to React

91%

A

Carlos Rivera

Database Design

45%

C

Property
Value

Striped row bg

#F0F0F1gray100

Usage

Dense data tables where row distinction aids scanning

Code

MUI DataGrid
import { DataGrid } from '@mui/x-data-grid';

const columns = [
  { field: 'name', headerName: 'Name', flex: 1 },
  { field: 'email', headerName: 'Email', flex: 1.5 },
  {
    field: 'status',
    headerName: 'Status',
    flex: 1,
    renderCell: (params) => (
      <Chip label={params.value} color={statusColorMap[params.value]} size="small" />
    ),
  },
  { field: 'cohort', headerName: 'Cohort', flex: 1 },
  { field: 'lastActive', headerName: 'Last Active', flex: 1 },
];

<DataGrid
  rows={rows}
  columns={columns}
  pageSize={10}
  disableSelectionOnClick
  sx={{ border: 'none' }}
/>
Striped rows
<DataGrid
  rows={rows}
  columns={columns}
  getRowClassName={(params) =>
    params.indexRelativeToCurrentPage % 2 === 1 ? 'striped-row' : ''
  }
  sx={{
    '& .striped-row': {
      backgroundColor: "action.hover",
    },
  }}
/>
FeedbackCalendar