Overview

The Table component allows you to visualize an object array in a table format. To get started you just need to provide the data, and the component will automatically generate columns based on the object keys.

Notable features:

• Automatic column generation from object keys
• Custom column configuration with sorting and formatting
• Tree table support for hierarchical data
• Caption and header customization
• Responsive design that adapts to screen sizes
• Sorting and filtering capabilities

Basic Example

Here's a simple example of a Table component with automatic column generation:

Auto-Generated Columns

The simplest way to use the Table component is to provide just the data. The component will automatically create columns for each property in your objects.

You can also provide a caption for the table using the `caption` property to improve accessibility and provide context for the data.

Custom Columns

You can customize the columns of the Table component by using the `columns` prop. This allows you to control which columns are displayed, their order, labels, and behavior.

Column configuration options:

Tree Table

The Table component supports hierarchical data display through tree table functionality. This is useful for nested data structures like organizational charts or file systems.

Tree Table Features:

• Expandable rows: Click to expand/collapse child rows
• Visual hierarchy: Indentation shows data relationships
• Nested sorting: Sort within each level of the hierarchy
• Selective expansion: Control which branches are expanded

Advanced Features

The Table component supports various advanced features for complex data visualization needs.