Polarity Integration Component Library

Object Table Component

Renders a JavaScript object as a styled key-value table with support for nested objects and arrays.

Installation

npm install @polarityio/pi-object-table

Peer Dependencies

• lit ^3.0.0

Usage

import '@polarityio/pi-object-table';

<pi-object-table></pi-object-table>

// Set the object via JavaScript property binding
const table = document.querySelector('pi-object-table');
table.objectToRender = {
  name: 'John Smith',
  age: 40,
  hobbies: ['cooking', 'hiking'],
  address: {
    street: '456 Elm St',
    city: 'Nashville',
    state: 'TN'
  }
};

API Reference

Properties

| Property | Type | Default | Description | | ---------------- | -------- | ------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | objectToRender | object | {} | The object or array to display as a key-value table. Must be set via property binding (not an HTML attribute). Nested objects are flattened with dot notation and arrays use bracket notation. |

Theming

Customize the appearance using CSS custom properties. This component uses design tokens from @polarityio/pi-shared for consistent theming across the component library.

License

MIT