0
# Table Inspector
1

2
Tabular inspector for arrays and objects that displays data in a sortable table format, similar to console.table. Ideal for visualizing structured data with consistent schemas.
3

4
## Capabilities
5

6
### TableInspector Component
7

8
Main component for displaying data in a sortable table format with column-based organization.
9

10
```typescript { .api }
11
/**
12
 * Tabular inspector for arrays and objects
13
 * @param props - TableInspector configuration props
14
 * @returns React element displaying the data table
15
 */
16
function TableInspector(props: TableInspectorProps): React.ReactElement;
17

18
interface TableInspectorProps {
19
  /** 
20
   * Array or object to display in table format
21
   * Arrays: each element becomes a row
22
   * Objects: each property becomes a row
23
   */
24
  data: any[] | Record<string, any>;
25
  /** 
26
   * Array of column names to display - filters and orders columns
27
   * If not specified, all columns from data are shown
28
   */
29
  columns?: string[];
30
  /** Theme configuration - preset string or custom theme object */
31
  theme?: string | ThemeObject;
32
}
33
```
34

35
**Usage Examples:**
36

37
```typescript
38
import React from "react";
39
import { TableInspector } from "react-inspector";
40

41
// Basic table from array of objects
42
const users = [
43
  { id: 1, name: "Alice", age: 30, active: true },
44
  { id: 2, name: "Bob", age: 25, active: false },
45
  { id: 3, name: "Charlie", age: 35, active: true }
46
];
47

48
function BasicTableExample() {
49
  return <TableInspector data={users} />;
50
}
51

52
// Table with specific columns
53
function FilteredColumnsExample() {
54
  return (
55
    <TableInspector 
56
      data={users} 
57
      columns={["name", "age"]} 
58
    />
59
  );
60
}
61

62
// Table from object (properties as rows)
63
const config = {
64
  apiUrl: "https://api.example.com",
65
  timeout: 5000,
66
  retries: 3,
67
  debug: true
68
};
69

70
function ObjectTableExample() {
71
  return <TableInspector data={config} />;
72
}
73
```
74

75
### Data Structure Support
76

77
TableInspector adapts to different data structures automatically.
78

79
**Array of Objects (most common):**
80
```typescript
81
const data = [
82
  { name: "Item 1", price: 10.99, category: "A" },
83
  { name: "Item 2", price: 15.50, category: "B" }
84
];
85
// Creates table: name | price | category
86
//                Item 1 | 10.99 | A
87
//                Item 2 | 15.50 | B
88
```
89

90
**Array of Arrays:**
91
```typescript
92
const data = [
93
  ["Alice", 30, true],
94
  ["Bob", 25, false]
95
];
96
// Creates table: 0 | 1 | 2
97
//                Alice | 30 | true
98
//                Bob | 25 | false
99
```
100

101
**Array of Primitives:**
102
```typescript
103
const data = ["apple", "banana", "cherry"];
104
// Creates table with single column showing values
105
```
106

107
**Object (properties as rows):**
108
```typescript
109
const data = { name: "Alice", age: 30, active: true };
110
// Creates table: (index) | Value
111
//                name     | Alice
112
//                age      | 30
113
//                active   | true
114
```
115

116
### Column Management
117

118
Control which columns are displayed and their order.
119

120
```typescript { .api }
121
interface ColumnConfiguration {
122
  /** Array of column names in desired display order */
123
  columns?: string[];
124
}
125
```
126

127
**Column Selection Examples:**
128

129
```typescript
130
const data = [
131
  { id: 1, name: "Alice", email: "alice@example.com", age: 30, department: "Engineering" },
132
  { id: 2, name: "Bob", email: "bob@example.com", age: 25, department: "Design" }
133
];
134

135
// Show only specific columns in custom order
136
<TableInspector 
137
  data={data} 
138
  columns={["name", "department", "age"]} 
139
/>
140

141
// Show all columns (default behavior)
142
<TableInspector data={data} />
143
```
144

145
### Sorting Functionality
146

147
TableInspector provides built-in sorting capabilities for all columns including the index column.
148

149
**Sorting Behavior:**
150
- Click any column header to sort by that column
151
- First click sorts ascending, second click sorts descending
152
- Index column can also be sorted
153
- Sorting works with mixed data types using type precedence
154
- Visual indicators show current sort column and direction
155

156
**Type Precedence for Mixed Sorting:**
157
1. `string`
158
2. `number` 
159
3. `object`
160
4. `symbol`
161
5. `boolean`
162
6. `undefined`
163
7. `function`
164

165
```typescript
166
// Data with mixed types sorts by type precedence first, then by value
167
const mixedData = [
168
  { key: "text", value: "hello" },
169
  { key: "number", value: 42 },
170
  { key: "bool", value: true },
171
  { key: "null", value: null }
172
];
173
// Sorting by 'value' column will group by type, then sort within type
174
```
175

176
### Table Structure
177

178
Understanding the generated table structure for different data types.
179

180
**Array Data Table Structure:**
181
- **Index Column**: Array indices (0, 1, 2, ...)
182
- **Data Columns**: Object properties or array element indices
183
- **Rows**: Each array element
184

185
**Object Data Table Structure:**
186
- **Index Column**: Object property names
187
- **Value Column**: Property values
188
- **Rows**: Each object property
189

190
### Cell Value Rendering
191

192
Table cells display values using the same rendering logic as ObjectValue component:
193

194
- **Strings**: Quoted with string styling
195
- **Numbers**: Numeric styling
196
- **Booleans**: true/false with boolean styling
197
- **null/undefined**: Special styling for null values
198
- **Objects**: Constructor name (Array, Object, Date, etc.)
199
- **Functions**: Function signature with ƒ prefix
200
- **Complex Values**: Appropriate preview representation
201

202
### Empty Data Handling
203

204
TableInspector gracefully handles various empty or invalid data states:
205

206
```typescript
207
// Empty array
208
<TableInspector data={[]} />
209
// Displays empty table with headers
210

211
// Null or non-object data
212
<TableInspector data={null} />
213
<TableInspector data="string" />
214
<TableInspector data={42} />
215
// Displays empty div (no table)
216

217
// Array with inconsistent objects
218
const inconsistentData = [
219
  { name: "Alice", age: 30 },
220
  { name: "Bob", email: "bob@example.com" },
221
  { title: "Manager" }
222
];
223
// Creates table with all unique columns, fills missing values appropriately
224
```
225

226
### Performance Considerations
227

228
For large datasets, consider:
229

230
- **Column Filtering**: Use `columns` prop to limit displayed columns
231
- **Data Preprocessing**: Filter or paginate data before passing to TableInspector
232
- **React Keys**: Ensure stable keys for list items when data changes
233

234
```typescript
235
// Efficient column selection for large datasets
236
<TableInspector 
237
  data={largeDataset} 
238
  columns={["id", "name", "status"]} // Only show essential columns
239
/>
240
```