tessl/npm-react-inspector

Browser DevTools-style inspectors for React applications to display JavaScript objects, tables, and DOM nodes.

—

Pending

Overview

Eval results

Files

Table Inspector

Name: tessl/npm-react-inspector
Author: tessl

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.

Capabilities

TableInspector Component

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

/**
 * Tabular inspector for arrays and objects
 * @param props - TableInspector configuration props
 * @returns React element displaying the data table
 */
function TableInspector(props: TableInspectorProps): React.ReactElement;

interface TableInspectorProps {
  /** 
   * Array or object to display in table format
   * Arrays: each element becomes a row
   * Objects: each property becomes a row
   */
  data: any[] | Record<string, any>;
  /** 
   * Array of column names to display - filters and orders columns
   * If not specified, all columns from data are shown
   */
  columns?: string[];
  /** Theme configuration - preset string or custom theme object */
  theme?: string | ThemeObject;
}

Usage Examples:

import React from "react";
import { TableInspector } from "react-inspector";

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

function BasicTableExample() {
  return <TableInspector data={users} />;
}

// Table with specific columns
function FilteredColumnsExample() {
  return (
    <TableInspector 
      data={users} 
      columns={["name", "age"]} 
    />
  );
}

// Table from object (properties as rows)
const config = {
  apiUrl: "https://api.example.com",
  timeout: 5000,
  retries: 3,
  debug: true
};

function ObjectTableExample() {
  return <TableInspector data={config} />;
}

Data Structure Support

TableInspector adapts to different data structures automatically.

Array of Objects (most common):

const data = [
  { name: "Item 1", price: 10.99, category: "A" },
  { name: "Item 2", price: 15.50, category: "B" }
];
// Creates table: name | price | category
//                Item 1 | 10.99 | A
//                Item 2 | 15.50 | B

Array of Arrays:

const data = [
  ["Alice", 30, true],
  ["Bob", 25, false]
];
// Creates table: 0 | 1 | 2
//                Alice | 30 | true
//                Bob | 25 | false

Array of Primitives:

const data = ["apple", "banana", "cherry"];
// Creates table with single column showing values

Object (properties as rows):

const data = { name: "Alice", age: 30, active: true };
// Creates table: (index) | Value
//                name     | Alice
//                age      | 30
//                active   | true

Column Management

Control which columns are displayed and their order.

interface ColumnConfiguration {
  /** Array of column names in desired display order */
  columns?: string[];
}

Column Selection Examples:

const data = [
  { id: 1, name: "Alice", email: "alice@example.com", age: 30, department: "Engineering" },
  { id: 2, name: "Bob", email: "bob@example.com", age: 25, department: "Design" }
];

// Show only specific columns in custom order
<TableInspector 
  data={data} 
  columns={["name", "department", "age"]} 
/>

// Show all columns (default behavior)
<TableInspector data={data} />

Sorting Functionality

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

Sorting Behavior:

Click any column header to sort by that column
First click sorts ascending, second click sorts descending
Index column can also be sorted
Sorting works with mixed data types using type precedence
Visual indicators show current sort column and direction

Type Precedence for Mixed Sorting:

string
number
object
symbol
boolean
undefined
function

// Data with mixed types sorts by type precedence first, then by value
const mixedData = [
  { key: "text", value: "hello" },
  { key: "number", value: 42 },
  { key: "bool", value: true },
  { key: "null", value: null }
];
// Sorting by 'value' column will group by type, then sort within type

Table Structure

Understanding the generated table structure for different data types.

Array Data Table Structure:

Index Column: Array indices (0, 1, 2, ...)
Data Columns: Object properties or array element indices
Rows: Each array element

Object Data Table Structure:

Index Column: Object property names
Value Column: Property values
Rows: Each object property

Cell Value Rendering

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

Strings: Quoted with string styling
Numbers: Numeric styling
Booleans: true/false with boolean styling
null/undefined: Special styling for null values
Objects: Constructor name (Array, Object, Date, etc.)
Functions: Function signature with ƒ prefix
Complex Values: Appropriate preview representation

Empty Data Handling

TableInspector gracefully handles various empty or invalid data states:

// Empty array
<TableInspector data={[]} />
// Displays empty table with headers

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

// Array with inconsistent objects
const inconsistentData = [
  { name: "Alice", age: 30 },
  { name: "Bob", email: "bob@example.com" },
  { title: "Manager" }
];
// Creates table with all unique columns, fills missing values appropriately

Performance Considerations

For large datasets, consider:

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

// Efficient column selection for large datasets
<TableInspector 
  data={largeDataset} 
  columns={["id", "name", "status"]} // Only show essential columns
/>

Install with Tessl CLI