0
# Data Display Components
1

2
Components for displaying data including tables, lists, badges, progress bars, pagination, and other data presentation elements.
3

4
## Capabilities
5

6
### Table
7

8
Bootstrap table component with extensive styling options for displaying tabular data.
9

10
```javascript { .api }
11
/**
12
 * Bootstrap table component
13
 * @param props.bordered - Add borders to table and cells
14
 * @param props.borderless - Remove all borders
15
 * @param props.striped - Add zebra-striping to table rows
16
 * @param props.dark - Use dark table theme
17
 * @param props.hover - Enable hover state on table rows
18
 * @param props.responsive - Make table responsive (true or breakpoint string)
19
 * @param props.size - Table size ('sm' for small)
20
 * @param props.tag - HTML element to render as (default: 'table')
21
 * @param props.responsiveTag - HTML element for responsive wrapper (default: 'div')
22
 * @param props.className - Additional CSS classes
23
 * @param props.cssModule - CSS Module mapping object
24
 * @param props.children - Table content (thead, tbody, tr, td, etc.)
25
 */
26
function Table(props: {
27
  bordered?: boolean;
28
  borderless?: boolean;
29
  striped?: boolean;
30
  dark?: boolean;
31
  hover?: boolean;
32
  responsive?: boolean | string;
33
  size?: 'sm';
34
  tag?: React.ElementType;
35
  responsiveTag?: React.ElementType;
36
  className?: string;
37
  cssModule?: object;
38
  children?: React.ReactNode;
39
}): JSX.Element;
40
```
41

42
### ListGroup
43

44
Bootstrap list group component for displaying lists of content.
45

46
```javascript { .api }
47
/**
48
 * Bootstrap list group component
49
 * @param props.tag - HTML element to render as (default: 'ul')
50
 * @param props.flush - Remove borders and rounded corners
51
 * @param props.horizontal - Display list items horizontally (true or breakpoint)
52
 * @param props.className - Additional CSS classes
53
 * @param props.cssModule - CSS Module mapping object
54
 * @param props.children - ListGroupItem components
55
 */
56
function ListGroup(props: {
57
  tag?: React.ElementType;
58
  flush?: boolean;
59
  horizontal?: boolean | string;
60
  className?: string;
61
  cssModule?: object;
62
  children?: React.ReactNode;
63
}): JSX.Element;
64
```
65

66
### ListGroupItem
67

68
Individual list group item component.
69

70
```javascript { .api }
71
/**
72
 * Individual list group item
73
 * @param props.tag - HTML element to render as (default: 'li')
74
 * @param props.active - Mark item as active/current
75
 * @param props.disabled - Disable the item
76
 * @param props.color - Item background color theme
77
 * @param props.action - Make item actionable (clickable)
78
 * @param props.className - Additional CSS classes
79
 * @param props.cssModule - CSS Module mapping object
80
 * @param props.children - Item content
81
 */
82
function ListGroupItem(props: {
83
  tag?: React.ElementType;
84
  active?: boolean;
85
  disabled?: boolean;
86
  color?: string;
87
  action?: boolean;
88
  className?: string;
89
  cssModule?: object;
90
  children?: React.ReactNode;
91
  [key: string]: any;
92
}): JSX.Element;
93
```
94

95
### Badge
96

97
Bootstrap badge component for labels, counts, and status indicators.
98

99
```javascript { .api }
100
/**
101
 * Bootstrap badge component for labels and counts
102
 * @param props.color - Badge color theme (primary, secondary, success, etc.)
103
 * @param props.pill - Use pill-shaped badge with rounded corners
104
 * @param props.tag - HTML element to render as (default: 'span')
105
 * @param props.href - Make badge a clickable link
106
 * @param props.className - Additional CSS classes
107
 * @param props.cssModule - CSS Module mapping object
108
 * @param props.children - Badge content
109
 */
110
function Badge(props: {
111
  color?: string;
112
  pill?: boolean;
113
  tag?: React.ElementType;
114
  href?: string;
115
  className?: string;
116
  cssModule?: object;
117
  children?: React.ReactNode;
118
  [key: string]: any;
119
}): JSX.Element;
120
```
121

122
### Progress
123

124
Bootstrap progress bar component for showing completion status.
125

126
```javascript { .api }
127
/**
128
 * Bootstrap progress bar component
129
 * @param props.multi - Enable multiple progress bars
130
 * @param props.tag - HTML element to render as (default: 'div')
131
 * @param props.value - Progress value (0-100)
132
 * @param props.max - Maximum value (default: 100)
133
 * @param props.animated - Enable animated stripes
134
 * @param props.striped - Enable progress bar stripes
135
 * @param props.color - Progress bar color theme
136
 * @param props.bar - Direct bar styling (when not using multi)
137
 * @param props.className - Additional CSS classes for container
138
 * @param props.cssModule - CSS Module mapping object
139
 * @param props.barClassName - CSS classes for progress bar
140
 * @param props.barAriaValueText - ARIA value text for screen readers
141
 * @param props.barAriaLabelledBy - ARIA labelledby for screen readers
142
 * @param props.children - Progress bar content or multiple bars
143
 */
144
function Progress(props: {
145
  multi?: boolean;
146
  tag?: React.ElementType;
147
  value?: number;
148
  max?: number;
149
  animated?: boolean;
150
  striped?: boolean;
151
  color?: string;
152
  bar?: boolean;
153
  className?: string;
154
  cssModule?: object;
155
  barClassName?: string;
156
  barAriaValueText?: string;
157
  barAriaLabelledBy?: string;
158
  children?: React.ReactNode;
159
}): JSX.Element;
160
```
161

162
### Pagination
163

164
Bootstrap pagination component for navigating through pages of content.
165

166
```javascript { .api }
167
/**
168
 * Bootstrap pagination component
169
 * @param props.size - Pagination size ('sm' or 'lg')
170
 * @param props.tag - HTML element to render as (default: 'nav')
171
 * @param props.className - Additional CSS classes
172
 * @param props.cssModule - CSS Module mapping object
173
 * @param props.listClassName - CSS classes for pagination list
174
 * @param props.listTag - HTML element for list (default: 'ul')
175
 * @param props.children - PaginationItem components
176
 */
177
function Pagination(props: {
178
  size?: 'sm' | 'lg';
179
  tag?: React.ElementType;
180
  className?: string;
181
  cssModule?: object;
182
  listClassName?: string;
183
  listTag?: React.ElementType;
184
  children?: React.ReactNode;
185
}): JSX.Element;
186
```
187

188
### PaginationItem
189

190
Individual pagination item component.
191

192
```javascript { .api }
193
/**
194
 * Individual pagination item
195
 * @param props.active - Mark item as current page
196
 * @param props.disabled - Disable the item
197
 * @param props.tag - HTML element to render as (default: 'li')
198
 * @param props.className - Additional CSS classes
199
 * @param props.cssModule - CSS Module mapping object
200
 * @param props.children - PaginationLink or other content
201
 */
202
function PaginationItem(props: {
203
  active?: boolean;
204
  disabled?: boolean;
205
  tag?: React.ElementType;
206
  className?: string;
207
  cssModule?: object;
208
  children?: React.ReactNode;
209
}): JSX.Element;
210
```
211

212
### PaginationLink
213

214
Pagination link component for clickable page navigation.
215

216
```javascript { .api }
217
/**
218
 * Pagination link component
219
 * @param props.previous - Style as previous page link
220
 * @param props.next - Style as next page link
221
 * @param props.first - Style as first page link
222
 * @param props.last - Style as last page link
223
 * @param props.tag - HTML element to render as (default: 'a')
224
 * @param props.innerRef - Ref forwarding
225
 * @param props.className - Additional CSS classes
226
 * @param props.cssModule - CSS Module mapping object
227
 * @param props.href - Link URL
228
 * @param props.children - Link content
229
 */
230
function PaginationLink(props: {
231
  previous?: boolean;
232
  next?: boolean;
233
  first?: boolean;
234
  last?: boolean;
235
  tag?: React.ElementType;
236
  innerRef?: React.Ref;
237
  className?: string;
238
  cssModule?: object;
239
  href?: string;
240
  children?: React.ReactNode;
241
  [key: string]: any;
242
}): JSX.Element;
243
```
244

245
### Spinner
246

247
Bootstrap spinner component for loading indicators.
248

249
```javascript { .api }
250
/**
251
 * Bootstrap spinner loading indicator
252
 * @param props.type - Spinner type ('border' or 'grow')
253
 * @param props.size - Spinner size ('sm')
254
 * @param props.color - Spinner color theme
255
 * @param props.tag - HTML element to render as (default: 'div')
256
 * @param props.className - Additional CSS classes
257
 * @param props.cssModule - CSS Module mapping object
258
 * @param props.children - Spinner content (usually screen reader text)
259
 */
260
function Spinner(props: {
261
  type?: 'border' | 'grow';
262
  size?: 'sm';
263
  color?: 'primary' | 'secondary' | 'success' | 'danger' | 'warning' | 'info' | 'light' | 'dark';
264
  tag?: React.ElementType;
265
  className?: string;
266
  cssModule?: object;
267
  children?: React.ReactNode;
268
}): JSX.Element;
269
```
270

271
### Placeholder
272

273
Bootstrap placeholder component for loading skeletons and content placeholders.
274

275
```javascript { .api }
276
/**
277
 * Bootstrap placeholder component for loading states
278
 * @param props.color - Placeholder color theme
279
 * @param props.size - Placeholder size ('xs', 'sm', 'lg')
280
 * @param props.tag - HTML element to render as (default: 'span')
281
 * @param props.animation - Animation type ('glow' or 'wave')
282
 * @param props.width - Width as percentage or string
283
 * @param props.className - Additional CSS classes
284
 * @param props.cssModule - CSS Module mapping object
285
 * @param props.xs - Column width for extra small screens
286
 * @param props.sm - Column width for small screens
287
 * @param props.md - Column width for medium screens
288
 * @param props.lg - Column width for large screens
289
 * @param props.xl - Column width for extra large screens
290
 * @param props.xxl - Column width for extra extra large screens
291
 * @param props.children - Placeholder content
292
 */
293
function Placeholder(props: {
294
  color?: string;
295
  size?: 'xs' | 'sm' | 'lg';
296
  tag?: React.ElementType;
297
  animation?: 'glow' | 'wave';
298
  width?: string | number;
299
  className?: string;
300
  cssModule?: object;
301
  xs?: string | number;
302
  sm?: string | number;
303
  md?: string | number;
304
  lg?: string | number;
305
  xl?: string | number;
306
  xxl?: string | number;
307
  children?: React.ReactNode;
308
}): JSX.Element;
309
```
310

311
### PlaceholderButton
312

313
Placeholder button component for loading button states.
314

315
```javascript { .api }
316
/**
317
 * Placeholder button component for loading states
318
 * @param props.color - Placeholder color theme
319
 * @param props.size - Placeholder size ('xs', 'sm', 'lg')
320
 * @param props.tag - HTML element to render as (default: 'span')
321
 * @param props.animation - Animation type ('glow' or 'wave')
322
 * @param props.width - Width as percentage or string
323
 * @param props.className - Additional CSS classes
324
 * @param props.cssModule - CSS Module mapping object
325
 * @param props.xs - Column width for extra small screens
326
 * @param props.sm - Column width for small screens
327
 * @param props.md - Column width for medium screens
328
 * @param props.lg - Column width for large screens
329
 * @param props.xl - Column width for extra large screens
330
 * @param props.xxl - Column width for extra extra large screens
331
 * @param props.children - Placeholder content
332
 */
333
function PlaceholderButton(props: {
334
  color?: string;
335
  size?: 'xs' | 'sm' | 'lg';
336
  tag?: React.ElementType;
337
  animation?: 'glow' | 'wave';
338
  width?: string | number;
339
  className?: string;
340
  cssModule?: object;
341
  xs?: string | number;
342
  sm?: string | number;
343
  md?: string | number;
344
  lg?: string | number;
345
  xl?: string | number;
346
  xxl?: string | number;
347
  children?: React.ReactNode;
348
}): JSX.Element;
349
```
350

351
## Usage Examples
352

353
### Basic Table
354

355
```jsx
356
import { Table } from 'reactstrap';
357

358
function BasicTable() {
359
  return (
360
    <Table>
361
      <thead>
362
        <tr>
363
          <th>#</th>
364
          <th>First Name</th>
365
          <th>Last Name</th>
366
          <th>Username</th>
367
        </tr>
368
      </thead>
369
      <tbody>
370
        <tr>
371
          <th scope="row">1</th>
372
          <td>Mark</td>
373
          <td>Otto</td>
374
          <td>@mdo</td>
375
        </tr>
376
        <tr>
377
          <th scope="row">2</th>
378
          <td>Jacob</td>
379
          <td>Thornton</td>
380
          <td>@fat</td>
381
        </tr>
382
      </tbody>
383
    </Table>
384
  );
385
}
386
```
387

388
### List Group
389

390
```jsx
391
import { ListGroup, ListGroupItem } from 'reactstrap';
392

393
function BasicListGroup() {
394
  return (
395
    <ListGroup>
396
      <ListGroupItem>Cras justo odio</ListGroupItem>
397
      <ListGroupItem>Dapibus ac facilisis in</ListGroupItem>
398
      <ListGroupItem>Morbi leo risus</ListGroupItem>
399
      <ListGroupItem>Porta ac consectetur ac</ListGroupItem>
400
      <ListGroupItem>Vestibulum at eros</ListGroupItem>
401
    </ListGroup>
402
  );
403
}
404
```
405

406
### Badges
407

408
```jsx
409
import { Badge } from 'reactstrap';
410

411
function BadgeExample() {
412
  return (
413
    <div>
414
      <h1>Example heading <Badge color="secondary">New</Badge></h1>
415
      <h2>Example heading <Badge color="secondary">New</Badge></h2>
416
      <h3>Example heading <Badge color="secondary">New</Badge></h3>
417
      
418
      <Badge color="primary">Primary</Badge>{' '}
419
      <Badge color="success">Success</Badge>{' '}
420
      <Badge color="info" pill>Info Pill</Badge>{' '}
421
      <Badge color="warning" pill>Warning Pill</Badge>
422
    </div>
423
  );
424
}
425
```
426

427
### Progress Bars
428

429
```jsx
430
import { Progress } from 'reactstrap';
431

432
function ProgressExample() {
433
  return (
434
    <div>
435
      <Progress value="25" />
436
      <Progress color="success" value="50" />
437
      <Progress color="info" value="75" />
438
      <Progress color="warning" value="100" />
439
      
440
      <Progress striped value="25" />
441
      <Progress striped color="success" value="50" />
442
      
443
      <Progress animated value="75" />
444
    </div>
445
  );
446
}
447
```