# ConciseListTable Component

A high-performance, lightweight data table component with auto-scroll functionality, custom formatting, and responsive design. Perfect for dashboards, data displays, and real-time monitoring interfaces.

## Features

- **High Performance**: Efficient rendering with minimal DOM manipulation
- **Auto-Scroll**: Seamless infinite scrolling for continuous data display
- **Flexible Columns**: Configurable width, alignment, and custom formatting
- **Responsive Design**: Automatic width adjustment with ResizeObserver
- **Accessibility**: ARIA attributes and keyboard navigation support
- **Custom Styling**: Comprehensive theming and styling options
- **Event Handling**: Row click events and focus management
- **Type Safety**: Full TypeScript support with detailed interfaces

## Basic Usage

```svelte
<script>
import ConciseListTable, { type Column, type TableOptions } from '@ticatec/uniface-element/ConciseListTable';

const columns: Column[] = [
  { title: 'Name', field: 'name', width: 150, align: 'left' },
  { title: 'Age', field: 'age', width: 80, align: 'center' },
  { title: 'Email', field: 'email', width: 200, weight: 1 }
];

const data = [
  { name: 'John Doe', age: 30, email: 'john@example.com' },
  { name: 'Jane Smith', age: 25, email: 'jane@example.com' },
  { name: 'Bob Johnson', age: 35, email: 'bob@example.com' }
];

const options: TableOptions = {
  headerHeight: 40,
  rowHeight: 35,
  backgroundColor: '#ffffff',
  headerBackgroundColor: '#f5f5f5'
};

const handleRowClick = (row) => {
  console.log('Clicked row:', row);
};
</script>

<ConciseListTable 
  list={data}
  {columns}
  {options}
  rowClickHandler={handleRowClick}
/>
```

## Props

| Prop | Type | Default | Description |
|------|------|---------|-------------|
| `list` | `Array<any>` | - | Array of data objects to display |
| `columns` | `Array<Column>` | - | Column definitions with configuration |
| `options` | `TableOptions` | - | Table styling and behavior options |
| `autoScroll` | `boolean` | `false` | Enable automatic scrolling |
| `scrollInterval` | `number` | `2000` | Milliseconds between scroll steps |
| `rowClickHandler` | `RowClickHandler \| null` | `null` | Row click event handler |
| `style` | `string` | `''` | Custom CSS styles for container |
| `className` | `string` | `''` | Additional CSS classes |
| `onfocus` | `((event: FocusEvent) => void) \| null` | `null` | Focus event handler |
| `onblur` | `((event: FocusEvent) => void) \| null` | `null` | Blur event handler |

## Methods

| Method | Description |
|--------|-------------|
| `setFocus()` | Programmatically focus the first table row |

## Column Interface

```typescript
interface Column {
  title: string;                    // Display title for column header
  field: string;                    // Field name in data object
  width: number;                    // Width in pixels
  align?: "left" | "center" | "right"; // Text alignment
  weight?: number;                  // Flex weight (0 = fixed, >0 = proportional)
  formatter?: (value: any) => string; // Custom formatter function
  escapeHTML?: boolean;             // Allow HTML content in cells
}
```

## TableOptions Interface

```typescript
interface TableOptions {
  backgroundColor?: string;           // Table background color
  color?: string;                    // Table text color
  headerHeight?: number;             // Header row height in pixels
  headerBackgroundColor?: string;    // Header background color
  headerColor?: string;              // Header text color
  alternativeBackgroundColor?: string; // Alternate row background color
  alternativeColor?: string;         // Alternate row text color
  rowHeight?: number;                // Data row height in pixels
}
```

## Basic Examples

### Simple Data Table

```svelte
<script>
import ConciseListTable from '@ticatec/uniface-element/ConciseListTable';

const employees = [
  { id: 1, name: 'Alice Johnson', department: 'Engineering', salary: 75000 },
  { id: 2, name: 'Bob Smith', department: 'Marketing', salary: 65000 },
  { id: 3, name: 'Carol Williams', department: 'Sales', salary: 70000 }
];

const columns = [
  { title: 'ID', field: 'id', width: 60, align: 'center' },
  { title: 'Name', field: 'name', width: 150, align: 'left' },
  { title: 'Department', field: 'department', width: 120, align: 'center' },
  { title: 'Salary', field: 'salary', width: 100, align: 'right', 
    formatter: (value) => `$${value.toLocaleString()}` }
];

const options = {
  headerHeight: 40,
  rowHeight: 35,
  headerBackgroundColor: '#f8f9fa',
  alternativeBackgroundColor: '#f8f9fa'
};
</script>

<ConciseListTable 
  list={employees}
  {columns}
  {options}
/>
```

### Table with Auto-Scroll

```svelte
<script>
import ConciseListTable from '@ticatec/uniface-element/ConciseListTable';

const stockPrices = [
  { symbol: 'AAPL', price: 150.25, change: '+2.15', volume: '45.2M' },
  { symbol: 'GOOGL', price: 2800.50, change: '-12.30', volume: '1.8M' },
  { symbol: 'MSFT', price: 305.75, change: '+1.45', volume: '28.5M' },
  { symbol: 'TSLA', price: 850.20, change: '+15.60', volume: '35.1M' },
  // ... more data
];

const columns = [
  { title: 'Symbol', field: 'symbol', width: 80, align: 'center' },
  { title: 'Price', field: 'price', width: 100, align: 'right',
    formatter: (value) => `$${value.toFixed(2)}` },
  { title: 'Change', field: 'change', width: 80, align: 'right' },
  { title: 'Volume', field: 'volume', width: 100, align: 'right' }
];

const options = {
  rowHeight: 30,
  headerHeight: 35,
  backgroundColor: '#000',
  color: '#00ff00',
  headerBackgroundColor: '#333',
  headerColor: '#fff'
};
</script>

<div style="height: 300px;">
  <ConciseListTable 
    list={stockPrices}
    {columns}
    {options}
    autoScroll={true}
    scrollInterval={3000}
  />
</div>
```

### Table with Custom Formatting

```svelte
<script>
import ConciseListTable from '@ticatec/uniface-element/ConciseListTable';

const orders = [
  { id: 'ORD-001', customer: 'John Doe', date: '2024-01-15', 
    amount: 299.99, status: 'shipped' },
  { id: 'ORD-002', customer: 'Jane Smith', date: '2024-01-16', 
    amount: 149.50, status: 'pending' },
  { id: 'ORD-003', customer: 'Bob Johnson', date: '2024-01-17', 
    amount: 599.99, status: 'delivered' }
];

const formatDate = (dateStr) => {
  return new Date(dateStr).toLocaleDateString('en-US', {
    month: 'short', day: 'numeric', year: 'numeric'
  });
};

const formatStatus = (status) => {
  const colors = {
    shipped: '#ffc107',
    pending: '#6c757d', 
    delivered: '#28a745'
  };
  return `<span style="color: ${colors[status]}; font-weight: bold;">${status.toUpperCase()}</span>`;
};

const columns = [
  { title: 'Order ID', field: 'id', width: 100, align: 'left' },
  { title: 'Customer', field: 'customer', width: 150, weight: 1 },
  { title: 'Date', field: 'date', width: 120, align: 'center', 
    formatter: formatDate },
  { title: 'Amount', field: 'amount', width: 100, align: 'right',
    formatter: (value) => `$${value.toFixed(2)}` },
  { title: 'Status', field: 'status', width: 100, align: 'center',
    formatter: formatStatus, escapeHTML: true }
];

const options = {
  headerHeight: 45,
  rowHeight: 40,
  headerBackgroundColor: '#007bff',
  headerColor: '#ffffff',
  alternativeBackgroundColor: '#f8f9fa'
};
</script>

<ConciseListTable 
  list={orders}
  {columns}
  {options}
/>
```

### Responsive Table with Flexible Columns

```svelte
<script>
import ConciseListTable from '@ticatec/uniface-element/ConciseListTable';

const products = [
  { id: 1, name: 'Wireless Headphones Premium Edition', 
    category: 'Electronics', price: 199.99, stock: 15 },
  { id: 2, name: 'Ergonomic Office Chair with Lumbar Support', 
    category: 'Furniture', price: 299.99, stock: 8 },
  { id: 3, name: 'Smart Home Security Camera System', 
    category: 'Electronics', price: 149.99, stock: 23 }
];

const columns = [
  { title: 'ID', field: 'id', width: 50, align: 'center' },
  { title: 'Product Name', field: 'name', width: 200, weight: 2 }, // Flexible
  { title: 'Category', field: 'category', width: 120, weight: 1 }, // Flexible
  { title: 'Price', field: 'price', width: 100, align: 'right',
    formatter: (value) => `$${value.toFixed(2)}` },
  { title: 'Stock', field: 'stock', width: 80, align: 'center' }
];

const options = {
  headerHeight: 40,
  rowHeight: 45,
  backgroundColor: '#ffffff',
  headerBackgroundColor: '#e9ecef',
  alternativeBackgroundColor: '#f8f9fa'
};
</script>

<div style="width: 100%; min-width: 600px;">
  <ConciseListTable 
    list={products}
    {columns}
    {options}
  />
</div>
```

## Event Handling

```svelte
<script>
import ConciseListTable from '@ticatec/uniface-element/ConciseListTable';

let selectedRow = null;
let focusCount = 0;
let tableRef;

const data = [
  { id: 1, name: 'Item 1', value: 100 },
  { id: 2, name: 'Item 2', value: 200 },
  { id: 3, name: 'Item 3', value: 300 }
];

const columns = [
  { title: 'ID', field: 'id', width: 60, align: 'center' },
  { title: 'Name', field: 'name', width: 150 },
  { title: 'Value', field: 'value', width: 100, align: 'right' }
];

const options = {
  headerHeight: 35,
  rowHeight: 30
};

const handleRowClick = (row) => {
  selectedRow = row;
  console.log('Selected row:', row);
};

const handleFocus = (event) => {
  focusCount++;
  console.log('Table focused', focusCount);
};

const handleBlur = (event) => {
  console.log('Table blurred');
};

const focusTable = () => {
  tableRef?.setFocus();
};
</script>

<div>
  <button on:click={focusTable}>Focus Table</button>
  
  <ConciseListTable 
    bind:this={tableRef}
    list={data}
    {columns}
    {options}
    rowClickHandler={handleRowClick}
    onfocus={handleFocus}
    onblur={handleBlur}
  />
  
  {#if selectedRow}
    <div class="selected-info">
      Selected: {selectedRow.name} (ID: {selectedRow.id})
    </div>
  {/if}
  
  <div class="focus-info">
    Focus count: {focusCount}
  </div>
</div>

<style>
  .selected-info, .focus-info {
    margin-top: 10px;
    padding: 8px;
    background: #e7f3ff;
    border: 1px solid #b3d9ff;
    border-radius: 4px;
  }
</style>
```

## Advanced Examples

### Real-Time Data Dashboard

```svelte
<script>
import ConciseListTable from '@ticatec/uniface-element/ConciseListTable';
import { onMount, onDestroy } from 'svelte';

let realtimeData = [];
let updateInterval;

// Simulate real-time data updates
const generateRandomData = () => {
  return Array.from({ length: 20 }, (_, i) => ({
    id: `SRV-${String(i + 1).padStart(3, '0')}`,
    name: `Server ${i + 1}`,
    cpu: (Math.random() * 100).toFixed(1),
    memory: (Math.random() * 100).toFixed(1),
    disk: (Math.random() * 100).toFixed(1),
    status: Math.random() > 0.8 ? 'warning' : 'healthy',
    uptime: Math.floor(Math.random() * 365) + 1
  }));
};

const columns = [
  { title: 'Server ID', field: 'id', width: 100, align: 'center' },
  { title: 'Name', field: 'name', width: 120, weight: 1 },
  { title: 'CPU %', field: 'cpu', width: 80, align: 'right',
    formatter: (value) => `${value}%` },
  { title: 'Memory %', field: 'memory', width: 80, align: 'right',
    formatter: (value) => `${value}%` },
  { title: 'Disk %', field: 'disk', width: 80, align: 'right',
    formatter: (value) => `${value}%` },
  { title: 'Status', field: 'status', width: 100, align: 'center',
    formatter: (status) => {
      const color = status === 'healthy' ? '#28a745' : '#ffc107';
      return `<span style="color: ${color}; font-weight: bold;">${status.toUpperCase()}</span>`;
    },
    escapeHTML: true
  },
  { title: 'Uptime (days)', field: 'uptime', width: 120, align: 'right' }
];

const options = {
  headerHeight: 40,
  rowHeight: 35,
  backgroundColor: '#1a1a1a',
  color: '#ffffff',
  headerBackgroundColor: '#333333',
  headerColor: '#ffffff',
  alternativeBackgroundColor: '#2a2a2a'
};

onMount(() => {
  realtimeData = generateRandomData();
  
  // Update data every 5 seconds
  updateInterval = setInterval(() => {
    realtimeData = generateRandomData();
  }, 5000);
});

onDestroy(() => {
  if (updateInterval) {
    clearInterval(updateInterval);
  }
});
</script>

<div class="dashboard">
  <h3>Server Monitoring Dashboard</h3>
  <div style="height: 400px; border: 1px solid #333;">
    <ConciseListTable 
      list={realtimeData}
      {columns}
      {options}
      autoScroll={true}
      scrollInterval={4000}
    />
  </div>
</div>

<style>
  .dashboard {
    background: #1a1a1a;
    color: #ffffff;
    padding: 20px;
    border-radius: 8px;
  }
  
  .dashboard h3 {
    margin: 0 0 16px 0;
    color: #ffffff;
  }
</style>
```

### Financial Trading Table

```svelte
<script>
import ConciseListTable from '@ticatec/uniface-element/ConciseListTable';

const tradingData = [
  { symbol: 'AAPL', price: 150.25, change: 2.15, changePercent: 1.45, volume: 45200000 },
  { symbol: 'GOOGL', price: 2800.50, change: -12.30, changePercent: -0.44, volume: 1800000 },
  { symbol: 'MSFT', price: 305.75, change: 1.45, changePercent: 0.48, volume: 28500000 },
  { symbol: 'TSLA', price: 850.20, change: 15.60, changePercent: 1.87, volume: 35100000 }
];

const formatPrice = (value) => `$${value.toFixed(2)}`;

const formatChange = (value) => {
  const color = value >= 0 ? '#28a745' : '#dc3545';
  const sign = value >= 0 ? '+' : '';
  return `<span style="color: ${color}; font-weight: bold;">${sign}${value.toFixed(2)}</span>`;
};

const formatPercent = (value) => {
  const color = value >= 0 ? '#28a745' : '#dc3545';
  const sign = value >= 0 ? '+' : '';
  return `<span style="color: ${color};">${sign}${value.toFixed(2)}%</span>`;
};

const formatVolume = (value) => {
  if (value >= 1000000) {
    return `${(value / 1000000).toFixed(1)}M`;
  } else if (value >= 1000) {
    return `${(value / 1000).toFixed(1)}K`;
  }
  return value.toString();
};

const columns = [
  { title: 'Symbol', field: 'symbol', width: 80, align: 'center' },
  { title: 'Price', field: 'price', width: 100, align: 'right', 
    formatter: formatPrice },
  { title: 'Change', field: 'change', width: 80, align: 'right',
    formatter: formatChange, escapeHTML: true },
  { title: 'Change %', field: 'changePercent', width: 80, align: 'right',
    formatter: formatPercent, escapeHTML: true },
  { title: 'Volume', field: 'volume', width: 80, align: 'right',
    formatter: formatVolume }
];

const options = {
  headerHeight: 35,
  rowHeight: 30,
  backgroundColor: '#000000',
  color: '#ffffff',
  headerBackgroundColor: '#1a1a1a',
  headerColor: '#ffffff'
};

const handleStockClick = (stock) => {
  console.log('Selected stock:', stock.symbol);
  // Could open detailed view, place order, etc.
};
</script>

<div class="trading-table">
  <h4>Live Stock Prices</h4>
  <ConciseListTable 
    list={tradingData}
    {columns}
    {options}
    rowClickHandler={handleStockClick}
  />
</div>

<style>
  .trading-table {
    background: #000;
    color: #fff;
    padding: 16px;
    border-radius: 4px;
    font-family: 'Courier New', monospace;
  }
  
  .trading-table h4 {
    margin: 0 0 12px 0;
    color: #00ff00;
  }
</style>
```

## Accessibility

The ConciseListTable component includes comprehensive accessibility features:

- **ARIA Roles**: Proper `table`, `row`, `cell`, and `columnheader` roles
- **Keyboard Navigation**: Tab navigation and Enter/Space activation
- **Screen Reader Support**: Appropriate labeling and row indexing
- **Focus Management**: Programmatic focus control
- **Semantic Structure**: Proper table markup and relationships

### Best Practices

```svelte
<!-- Good: Descriptive table labeling -->
<ConciseListTable 
  list={data}
  columns={columns}
  options={options}
  aria-label="Employee information table"
/>

<!-- Good: Consistent column alignment -->
const columns = [
  { title: 'ID', field: 'id', width: 60, align: 'center' },
  { title: 'Name', field: 'name', width: 150, align: 'left' },
  { title: 'Salary', field: 'salary', width: 100, align: 'right' }
];

<!-- Good: Meaningful formatters -->
{ title: 'Status', field: 'status', formatter: (value) => 
  value ? 'Active' : 'Inactive' }
```

## Performance Optimization

- **Efficient Rendering**: Minimal DOM updates with reactive changes
- **Auto-Scroll Performance**: Optimized transform-based animation
- **ResizeObserver**: Efficient viewport size monitoring
- **Memory Management**: Proper cleanup of timers and observers
- **Type Safety**: Full TypeScript support reduces runtime errors

## Browser Support

Works in all modern browsers that support:
- ES6+ JavaScript
- ResizeObserver API
- CSS transforms and transitions
- Modern DOM APIs

## Migration Notes

When upgrading from older versions:
- `onChange` events are now `onchange` (lowercase)
- `onClick` events are now `onclick` (lowercase)
- New accessibility features require no code changes
- Enhanced TypeScript support provides better development experience