0
# Prop Tables
1

2
Automatic prop table generation from React components using PropTypes or React docgen information with intelligent type display and customizable formatting.
3

4
## Capabilities
5

6
### PropTable Component
7

8
Default prop table component that displays component prop information in a structured table format.
9

10
```javascript { .api }
11
/**
12
 * Default prop table component for displaying component props
13
 * @param {Object} props - PropTable component props
14
 */
15
function PropTable(props);
16

17
interface PropTableProps {
18
  /** React component type to analyze for props */
19
  type?: Function;
20
  /** Pre-computed array of prop definitions to display */
21
  propDefinitions?: Array<PropDefinition>;
22
  /** Array of prop names to exclude from the table */
23
  excludedPropTypes?: Array<string>;
24
  /** Maximum object keys to display in prop values */
25
  maxPropObjectKeys: number;
26
  /** Maximum array length to display in prop values */
27
  maxPropArrayLength: number;
28
  /** Maximum string length to display in prop values */
29
  maxPropStringLength: number;
30
}
31

32
interface PropDefinition {
33
  /** Property name */
34
  property: string;
35
  /** PropType information object or string describing the type */
36
  propType: Object | string;
37
  /** Whether the prop is required */
38
  required?: boolean;
39
  /** Prop description from React docgen or JSDoc comments */
40
  description?: string;
41
  /** Default value for the prop */
42
  defaultValue?: any;
43
}
44
```
45

46
**Usage Example:**
47

48
```javascript
49
import { PropTable } from "@storybook/addon-info";
50

51
// Used automatically by withInfo, but can be used standalone
52
<PropTable
53
  type={MyComponent}
54
  maxPropObjectKeys={5}
55
  maxPropArrayLength={3}
56
  maxPropStringLength={100}
57
  excludedPropTypes={['children']}
58
/>
59
```
60

61
### makeTableComponent Factory
62

63
Higher-order component factory that creates prop table components with automatic prop extraction.
64

65
```javascript { .api }
66
/**
67
 * Creates a table component that extracts prop definitions from component types
68
 * @param {React.ComponentType} Component - Base table component to wrap
69
 * @returns {React.ComponentType} Enhanced table component with prop extraction
70
 */
71
function makeTableComponent(Component);
72
```
73

74
**Usage Example:**
75

76
```javascript
77
import { makeTableComponent } from "@storybook/addon-info";
78

79
// Create custom table component
80
const MyCustomTable = ({ propDefinitions }) => (
81
  <div>
82
    {propDefinitions.map(prop => (
83
      <div key={prop.property}>
84
        <strong>{prop.property}</strong>: {prop.propType}
85
      </div>
86
    ))}
87
  </div>
88
);
89

90
const EnhancedTable = makeTableComponent(MyCustomTable);
91

92
// Use in withInfo
93
addDecorator(withInfo({ TableComponent: EnhancedTable }));
94
```
95

96

97
### Multi-line Text Processing
98

99
Utility function for formatting multi-line text content in prop descriptions.
100

101
```javascript { .api }
102
/**
103
 * Formats multi-line text with proper line breaks for display
104
 * @param {string} input - Text input to format
105
 * @returns {React.ReactNode} Formatted text with line breaks
106
 */
107
function multiLineText(input);
108
```
109

110
### PropVal Component
111

112
Component for rendering property values with syntax highlighting and intelligent formatting.
113

114
```javascript { .api }
115
/**
116
 * Renders property values with syntax highlighting and formatting
117
 * @param {Object} props - PropVal component props
118
 */
119
function PropVal(props);
120

121
interface PropValProps {
122
  /** Value to display */
123
  val?: any;
124
  /** Maximum object keys to display */
125
  maxPropObjectKeys?: number;
126
  /** Maximum array length to display */
127
  maxPropArrayLength?: number;
128
  /** Maximum string length to display */
129
  maxPropStringLength?: number;
130
  /** Maximum props per line for objects/arrays */
131
  maxPropsIntoLine?: number;
132
  /** Nesting level for indentation */
133
  level?: number;
134
  /** Theme configuration for colors */
135
  theme?: {
136
    codeColors?: {
137
      func?: string;
138
      attr?: string;
139
      object?: string;
140
      array?: string;
141
      number?: string;
142
      string?: string;
143
      bool?: string;
144
    };
145
  };
146
  /** Custom value styles override */
147
  valueStyles?: ValueStyles;
148
}
149
```
150

151
### PrettyPropType Component
152

153
Component for displaying PropType information with proper formatting for complex types.
154

155
```javascript { .api }
156
/**
157
 * Renders prop type information with proper formatting
158
 * @param {Object} props - PrettyPropType component props
159
 */
160
function PrettyPropType(props);
161

162
interface PrettyPropTypeProps {
163
  /** PropType information to render */
164
  propType?: TypeInfo;
165
  /** Nesting depth for complex types */
166
  depth?: number;
167
}
168
```
169

170
## Types
171

172
```javascript { .api }
173
interface TypeInfo {
174
  /** Type name (e.g., 'string', 'number', 'shape', 'arrayOf') */
175
  name: string;
176
  /** Additional type information for complex types */
177
  value?: any;
178
  /** For union types, array of possible types */
179
  computed?: boolean;
180
  /** Raw PropType for advanced processing */
181
  raw?: string;
182
}
183

184
interface ValueStyles {
185
  func?: Object;
186
  attr?: Object;
187
  object?: Object;
188
  array?: Object;
189
  number?: Object;
190
  string?: Object;
191
  bool?: Object;
192
  empty?: Object;
193
}
194
```
195

196
## Table Structure Components
197

198
### Core Table Components
199

200
Individual table structure components used by PropTable for customizable display.
201

202
```javascript { .api }
203
/**
204
 * Main table container with info-table CSS class
205
 * @param {Object} props - Table component props
206
 */
207
function Table(props);
208

209
/**
210
 * Table header section component
211
 * @param {Object} props - Thead component props
212
 */
213
function Thead(props);
214

215
/**
216
 * Table body section component
217
 * @param {Object} props - Tbody component props
218
 */
219
function Tbody(props);
220

221
/**
222
 * Table row component
223
 * @param {Object} props - Tr component props
224
 */
225
function Tr(props);
226

227
/**
228
 * Table header cell component
229
 * @param {Object} props - Th component props
230
 */
231
function Th(props);
232

233
/**
234
 * Table data cell component with optional monospace styling
235
 * @param {Object} props - Td component props
236
 */
237
function Td(props);
238

239
interface TableProps {
240
  /** Table content (thead, tbody, tr elements) */
241
  children: React.ReactElement | React.ReactElement[];
242
}
243

244
interface TableSectionProps {
245
  /** Section content */
246
  children?: React.ReactNode;
247
}
248

249
interface TdProps {
250
  /** Apply monospace font styling */
251
  isMonospace?: boolean;
252
  /** Cell content */
253
  children?: React.ReactNode;
254
}
255
```
256

257
## Prop Extraction Methods
258

259
The addon supports multiple methods for extracting prop information:
260

261
### React Docgen Integration
262

263
Automatic extraction from React docgen information when available:
264

265
```javascript
266
/**
267
 * Button component description from docgen
268
 * @param {Object} props - Component props
269
 */
270
const DocgenButton = ({ disabled, label, onClick }) => (
271
  <button disabled={disabled} onClick={onClick}>
272
    {label}
273
  </button>
274
);
275

276
DocgenButton.propTypes = {
277
  /** Boolean indicating whether the button should render as disabled */
278
  disabled: PropTypes.bool,
279
  /** Button label text */
280
  label: PropTypes.string.isRequired,
281
  /** Click handler function */
282
  onClick: PropTypes.func,
283
};
284
```
285

286
### PropTypes Extraction
287

288
Fallback extraction from component PropTypes when docgen is unavailable:
289

290
```javascript
291
import PropTypes from 'prop-types';
292

293
const Component = ({ name, age, isActive }) => (
294
  <div>{name} is {age} years old</div>
295
);
296

297
Component.propTypes = {
298
  name: PropTypes.string.isRequired,
299
  age: PropTypes.number,
300
  isActive: PropTypes.bool,
301
};
302

303
Component.defaultProps = {
304
  age: 0,
305
  isActive: false,
306
};
307
```
308

309
## Advanced Prop Types
310

311
### Complex Type Display
312

313
Support for advanced PropTypes with intelligent rendering:
314

315
```javascript
316
import PropTypes from 'prop-types';
317

318
const ComplexComponent = () => <div />;
319

320
ComplexComponent.propTypes = {
321
  // Shape (object with specific structure)
322
  user: PropTypes.shape({
323
    name: PropTypes.string.isRequired,
324
    email: PropTypes.string,
325
    preferences: PropTypes.object,
326
  }),
327
  
328
  // Array of specific type
329
  items: PropTypes.arrayOf(PropTypes.string),
330
  
331
  // Object with values of specific type
332
  mapping: PropTypes.objectOf(PropTypes.number),
333
  
334
  // One of specific values (enum)
335
  status: PropTypes.oneOf(['active', 'inactive', 'pending']),
336
  
337
  // One of multiple types (union)
338
  value: PropTypes.oneOfType([
339
    PropTypes.string,
340
    PropTypes.number,
341
    PropTypes.bool,
342
  ]),
343
  
344
  // Instance of specific class
345
  date: PropTypes.instanceOf(Date),
346
  
347
  // Function with specific signature
348
  callback: PropTypes.func,
349
};
350
```
351

352
## Customization
353

354
### Custom Prop Table Component
355

356
```javascript
357
// Create fully custom prop table
358
const CustomPropTable = ({ propDefinitions }) => {
359
  const requiredProps = propDefinitions.filter(prop => prop.required);
360
  const optionalProps = propDefinitions.filter(prop => !prop.required);
361
  
362
  return (
363
    <div>
364
      {requiredProps.length > 0 && (
365
        <div>
366
          <h4>Required Props</h4>
367
          {requiredProps.map(prop => (
368
            <div key={prop.property}>
369
              <code>{prop.property}</code>: {prop.propType.name}
370
              {prop.description && <p>{prop.description}</p>}
371
            </div>
372
          ))}
373
        </div>
374
      )}
375
      
376
      {optionalProps.length > 0 && (
377
        <div>
378
          <h4>Optional Props</h4>
379
          {optionalProps.map(prop => (
380
            <div key={prop.property}>
381
              <code>{prop.property}</code>: {prop.propType.name}
382
              {prop.defaultValue !== undefined && (
383
                <span> = {String(prop.defaultValue)}</span>
384
              )}
385
              {prop.description && <p>{prop.description}</p>}
386
            </div>
387
          ))}
388
        </div>
389
      )}
390
    </div>
391
  );
392
};
393

394
// Use in info addon
395
addDecorator(withInfo({ TableComponent: CustomPropTable }));
396
```
397

398
### Prop Filtering
399

400
```javascript
401
// Exclude specific props from display
402
export const CleanExample = () => <Component />;
403
CleanExample.story = {
404
  parameters: {
405
    info: {
406
      propTables: [Component],
407
      excludedPropTypes: ['children', 'className', 'style'],
408
    },
409
  },
410
};
411
```