0
# Data Display
1

2
Components for displaying data including table pagination controls, badges for status indicators, and notification systems.
3

4
## Capabilities
5

6
### TablePagination Component
7

8
Comprehensive pagination controls for data tables with customizable page size options and navigation.
9

10
```typescript { .api }
11
/**
12
 * Pagination controls for data tables with customizable options
13
 * @param props - Table pagination properties including count and page handlers
14
 * @returns Pagination element with navigation controls and page size selector
15
 */
16
function TablePagination<RootComponentType extends React.ElementType = "div">(
17
  props: TablePaginationProps<RootComponentType>
18
): JSX.Element;
19

20
interface TablePaginationProps<RootComponentType extends React.ElementType = "div">
21
  extends PolymorphicProps<TablePaginationTypeMap, RootComponentType> {
22
  /** Total number of rows */
23
  count: number;
24
  /** Function to get ARIA label for navigation buttons */
25
  getItemAriaLabel?: (type: 'first' | 'last' | 'next' | 'previous') => string;
26
  /** Function to customize displayed rows text */
27
  labelDisplayedRows?: (paginationInfo: { from: number; to: number; count: number }) => React.ReactNode;
28
  /** Label for rows per page selector */
29
  labelRowsPerPage?: React.ReactNode;
30
  /** Page change callback */
31
  onPageChange: (event: React.MouseEvent<HTMLButtonElement> | null, page: number) => void;
32
  /** Rows per page change callback */
33
  onRowsPerPageChange?: (event: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) => void;
34
  /** Current page number (0-indexed) */
35
  page: number;
36
  /** Number of rows per page */
37
  rowsPerPage: number;
38
  /** Available rows per page options */
39
  rowsPerPageOptions?: ReadonlyArray<number | { value: number; label: string }>;
40
  /** Whether to show first page button */
41
  showFirstButton?: boolean;
42
  /** Whether to show last page button */
43
  showLastButton?: boolean;
44
  /** Props for customizing table pagination slots */
45
  slotProps?: {
46
    root?: SlotComponentProps<TablePaginationSlots["root"], {}, TablePaginationOwnerState>;
47
    toolbar?: SlotComponentProps<TablePaginationSlots["toolbar"], {}, TablePaginationOwnerState>;
48
    spacer?: SlotComponentProps<TablePaginationSlots["spacer"], {}, TablePaginationOwnerState>;
49
    selectLabel?: SlotComponentProps<TablePaginationSlots["selectLabel"], {}, TablePaginationOwnerState>;
50
    selectRoot?: SlotComponentProps<TablePaginationSlots["selectRoot"], {}, TablePaginationOwnerState>;
51
    select?: SlotComponentProps<TablePaginationSlots["select"], {}, TablePaginationOwnerState>;
52
    selectIcon?: SlotComponentProps<TablePaginationSlots["selectIcon"], {}, TablePaginationOwnerState>;
53
    input?: SlotComponentProps<TablePaginationSlots["input"], {}, TablePaginationOwnerState>;
54
    menuItem?: SlotComponentProps<TablePaginationSlots["menuItem"], {}, TablePaginationOwnerState>;
55
    displayedRows?: SlotComponentProps<TablePaginationSlots["displayedRows"], {}, TablePaginationOwnerState>;
56
    actions?: SlotComponentProps<TablePaginationSlots["actions"], {}, TablePaginationOwnerState>;
57
    firstButton?: SlotComponentProps<TablePaginationSlots["firstButton"], {}, TablePaginationOwnerState>;
58
    lastButton?: SlotComponentProps<TablePaginationSlots["lastButton"], {}, TablePaginationOwnerState>;
59
    nextButton?: SlotComponentProps<TablePaginationSlots["nextButton"], {}, TablePaginationOwnerState>;
60
    previousButton?: SlotComponentProps<TablePaginationSlots["previousButton"], {}, TablePaginationOwnerState>;
61
  };
62
  /** Components used for table pagination slots */
63
  slots?: TablePaginationSlots;
64
}
65

66
interface TablePaginationSlots {
67
  /** Root container element */
68
  root?: React.ElementType;
69
  /** Toolbar container element */
70
  toolbar?: React.ElementType;
71
  /** Spacer element for layout */
72
  spacer?: React.ElementType;
73
  /** Label for rows per page selector */
74
  selectLabel?: React.ElementType;
75
  /** Root element for rows per page selector */
76
  selectRoot?: React.ElementType;
77
  /** Select element for rows per page */
78
  select?: React.ElementType;
79
  /** Icon for rows per page selector */
80
  selectIcon?: React.ElementType;
81
  /** Input element for rows per page selector */
82
  input?: React.ElementType;
83
  /** Menu item for rows per page options */
84
  menuItem?: React.ElementType;
85
  /** Element displaying current page info */
86
  displayedRows?: React.ElementType;
87
  /** Container for navigation actions */
88
  actions?: React.ElementType;
89
  /** First page button */
90
  firstButton?: React.ElementType;
91
  /** Last page button */
92
  lastButton?: React.ElementType;
93
  /** Next page button */
94
  nextButton?: React.ElementType;
95
  /** Previous page button */
96
  previousButton?: React.ElementType;
97
}
98

99
interface TablePaginationOwnerState {
100
  count: number;
101
  page: number;
102
  rowsPerPage: number;
103
  showFirstButton: boolean;
104
  showLastButton: boolean;
105
}
106
```
107

108
**Usage Examples:**
109

110
```typescript
111
import { TablePagination } from "@mui/base/TablePagination";
112

113
// Basic table pagination
114
<TablePagination
115
  count={totalRows}
116
  page={currentPage}
117
  rowsPerPage={pageSize}
118
  onPageChange={(event, newPage) => setCurrentPage(newPage)}
119
  onRowsPerPageChange={(event) => setPageSize(parseInt(event.target.value))}
120
/>
121

122
// Customized table pagination
123
<TablePagination
124
  count={1000}
125
  page={page}
126
  rowsPerPage={rowsPerPage}
127
  rowsPerPageOptions={[10, 25, 50, { value: 100, label: '100 rows' }]}
128
  onPageChange={handlePageChange}
129
  onRowsPerPageChange={handleRowsPerPageChange}
130
  showFirstButton
131
  showLastButton
132
  labelRowsPerPage="Items per page:"
133
  labelDisplayedRows={({ from, to, count }) => 
134
    `${from}–${to} of ${count !== -1 ? count : `more than ${to}`}`
135
  }
136
  getItemAriaLabel={(type) => {
137
    switch (type) {
138
      case 'first': return 'Go to first page';
139
      case 'last': return 'Go to last page';
140
      case 'next': return 'Go to next page';
141
      case 'previous': return 'Go to previous page';
142
      default: return '';
143
    }
144
  }}
145
/>
146
```
147

148
### Badge Component
149

150
Badge component for displaying status indicators, counts, and notifications.
151

152
```typescript { .api }
153
/**
154
 * Badge component for status indicators and counts
155
 * @param props - Badge properties including content and visibility options
156
 * @returns Badge element positioned relative to children
157
 */
158
function Badge<RootComponentType extends React.ElementType = "span">(
159
  props: BadgeProps<RootComponentType>
160
): JSX.Element;
161

162
interface BadgeProps<RootComponentType extends React.ElementType = "span">
163
  extends PolymorphicProps<BadgeTypeMap, RootComponentType> {
164
  /** Content rendered within the badge */
165
  badgeContent?: React.ReactNode;
166
  /** The badge will be added relative to this node */
167
  children?: React.ReactNode;
168
  /** If true, the badge is invisible */
169
  invisible?: boolean;
170
  /** Max count to show (default: 99) */
171
  max?: number;
172
  /** Controls whether badge is hidden when badgeContent is zero */
173
  showZero?: boolean;
174
  /** Props for customizing badge slots */
175
  slotProps?: {
176
    root?: SlotComponentProps<BadgeSlots["root"], {}, BadgeOwnerState>;
177
    badge?: SlotComponentProps<BadgeSlots["badge"], {}, BadgeOwnerState>;
178
  };
179
  /** Components used for badge slots */
180
  slots?: BadgeSlots;
181
}
182

183
interface BadgeSlots {
184
  /** Root container element */
185
  root?: React.ElementType;
186
  /** Badge indicator element */
187
  badge?: React.ElementType;
188
}
189

190
interface BadgeOwnerState {
191
  badgeContent: React.ReactNode;
192
  invisible: boolean;
193
  max: number;
194
  showZero: boolean;
195
}
196
```
197

198
**Usage Examples:**
199

200
```typescript
201
import { Badge } from "@mui/base/Badge";
202

203
// Basic badge with count
204
<Badge badgeContent={4}>
205
  <MailIcon />
206
</Badge>
207

208
// Badge with maximum count
209
<Badge badgeContent={100} max={99}>
210
  <NotificationIcon />
211
</Badge>
212

213
// Badge that shows zero
214
<Badge badgeContent={0} showZero>
215
  <ShoppingCartIcon />
216
</Badge>
217

218
// Custom styled badge
219
<Badge 
220
  badgeContent="NEW"
221
  slotProps={{
222
    root: { className: "badge-root" },
223
    badge: { className: "badge-indicator" }
224
  }}
225
>
226
  <ProductItem />
227
</Badge>
228

229
// Invisible badge (hidden)
230
<Badge badgeContent={5} invisible>
231
  <MessageIcon />
232
</Badge>
233
```
234

235
### Snackbar Component
236

237
Toast notification component with automatic dismissal and positioning.
238

239
```typescript { .api }
240
/**
241
 * Toast notification component with auto-hide functionality
242
 * @param props - Snackbar properties including content and timing
243
 * @returns Snackbar element with notification display
244
 */
245
function Snackbar<RootComponentType extends React.ElementType = "div">(
246
  props: SnackbarProps<RootComponentType>
247
): JSX.Element;
248

249
interface SnackbarProps<RootComponentType extends React.ElementType = "div">
250
  extends PolymorphicProps<SnackbarTypeMap, RootComponentType> {
251
  /** Time in milliseconds to auto-hide (default: null) */
252
  autoHideDuration?: number | null;
253
  /** Snackbar content */
254
  children?: React.ReactNode;
255
  /** Whether snackbar is fully exited from view */
256
  exited?: boolean;
257
  /** Close event handler */
258
  onClose?: (event: Event | React.SyntheticEvent<any> | null, reason: SnackbarCloseReason) => void;
259
  /** Whether snackbar is visible */
260
  open?: boolean;
261
  /** Time left before auto-hide when resuming */
262
  resumeHideDuration?: number;
263
}
264

265
type SnackbarCloseReason = 'timeout' | 'clickaway' | 'escapeKeyDown';
266
```
267

268
**Usage Examples:**
269

270
```typescript
271
import { Snackbar } from "@mui/base/Snackbar";
272

273
// Basic success notification
274
<Snackbar 
275
  open={showSuccess}
276
  autoHideDuration={4000}
277
  onClose={() => setShowSuccess(false)}
278
>
279
  <div className="snackbar-success">
280
    Operation completed successfully!
281
  </div>
282
</Snackbar>
283

284
// Error notification that doesn't auto-hide
285
<Snackbar 
286
  open={showError}
287
  onClose={(event, reason) => {
288
    console.log('Closed due to:', reason);
289
    setShowError(false);
290
  }}
291
>
292
  <div className="snackbar-error">
293
    <span>Error: Something went wrong!</span>
294
    <button onClick={() => setShowError(false)}>×</button>
295
  </div>
296
</Snackbar>
297

298
// Notification with pause/resume on hover
299
function SnackbarWithHover() {
300
  const [open, setOpen] = useState(true);
301
  const [resumeDuration, setResumeDuration] = useState<number | undefined>();
302

303
  return (
304
    <Snackbar
305
      open={open}
306
      autoHideDuration={5000}
307
      resumeHideDuration={resumeDuration}
308
      onClose={() => setOpen(false)}
309
      onMouseEnter={() => setResumeDuration(0)} // Pause auto-hide
310
      onMouseLeave={() => setResumeDuration(undefined)} // Resume auto-hide
311
    >
312
      <div className="snackbar-content">
313
        Hover to pause auto-hide
314
      </div>
315
    </Snackbar>
316
  );
317
}
318
```
319

320
## Notification System Patterns
321

322
### Multi-Snackbar Management
323

324
```typescript
325
// Example pattern for managing multiple notifications
326
interface Notification {
327
  id: string;
328
  message: string;
329
  type: 'success' | 'error' | 'warning' | 'info';
330
  duration?: number;
331
}
332

333
function NotificationSystem() {
334
  const [notifications, setNotifications] = useState<Notification[]>([]);
335

336
  const addNotification = (notification: Omit<Notification, 'id'>) => {
337
    const id = Math.random().toString(36);
338
    setNotifications(prev => [...prev, { ...notification, id }]);
339
  };
340

341
  const removeNotification = (id: string) => {
342
    setNotifications(prev => prev.filter(n => n.id !== id));
343
  };
344

345
  return (
346
    <>
347
      {notifications.map(notification => (
348
        <Snackbar
349
          key={notification.id}
350
          open={true}
351
          autoHideDuration={notification.duration || 4000}
352
          onClose={() => removeNotification(notification.id)}
353
        >
354
          <div className={`snackbar-${notification.type}`}>
355
            {notification.message}
356
          </div>
357
        </Snackbar>
358
      ))}
359
    </>
360
  );
361
}
362
```
363

364
### Badge with Dynamic Content
365

366
```typescript
367
// Example pattern for dynamic badge content
368
function NotificationBadge({ notifications }: { notifications: any[] }) {
369
  const unreadCount = notifications.filter(n => !n.read).length;
370
  const hasHighPriority = notifications.some(n => n.priority === 'high' && !n.read);
371

372
  return (
373
    <Badge
374
      badgeContent={hasHighPriority ? '!' : unreadCount}
375
      invisible={unreadCount === 0}
376
      showZero={false}
377
      max={99}
378
      slotProps={{
379
        badge: { 
380
          className: hasHighPriority ? 'badge-urgent' : 'badge-normal' 
381
        }
382
      }}
383
    >
384
      <BellIcon />
385
    </Badge>
386
  );
387
}
388
```
389

390
## Related Hooks
391

392
```typescript { .api }
393
// Badge display logic hook
394
function useBadge(parameters: UseBadgeParameters): UseBadgeReturnValue;
395

396
interface UseBadgeParameters {
397
  badgeContent?: React.ReactNode;
398
  invisible?: boolean;
399
  max?: number;
400
  showZero?: boolean;
401
}
402

403
interface UseBadgeReturnValue {
404
  badgeContent: React.ReactNode;
405
  invisible: boolean;
406
  max: number;
407
  displayValue: React.ReactNode;
408
}
409

410
// Snackbar lifecycle management hook
411
function useSnackbar(parameters: UseSnackbarParameters): UseSnackbarReturnValue;
412

413
interface UseSnackbarParameters {
414
  autoHideDuration?: number | null;
415
  disableWindowBlurListener?: boolean;
416
  exited?: boolean;
417
  onClose?: (event: Event | React.SyntheticEvent<any> | null, reason: SnackbarCloseReason) => void;
418
  open?: boolean;
419
  resumeHideDuration?: number;
420
}
421

422
interface UseSnackbarReturnValue {
423
  getRootProps: () => {
424
    onBlur: React.FocusEventHandler;
425
    onFocus: React.FocusEventHandler;
426
    onMouseEnter: React.MouseEventHandler;
427
    onMouseLeave: React.MouseEventHandler;
428
  };
429
}
430
```