Table Widget

A modern, customizable table component built with Lit for web applications.

Features

• ✅ Sorting - Click column headers to sort data
• ✅ Filtering - Filter data by any column
• ✅ Pagination - Handle large datasets efficiently
• ✅ Customizable - Striped rows, borders, compact mode
• ✅ TypeScript - Full TypeScript support
• ✅ Web Components - Works with any framework
• ✅ Responsive - Mobile-friendly design

Installation

npm install aina-table

Usage

ES Modules

import 'aina-table';

// Define your data
const employees = [
  { id: 1, name: 'John Doe', email: '[email protected]', department: 'Engineering' },
  { id: 2, name: 'Jane Smith', email: '[email protected]', department: 'Marketing' }
];

// Define columns
const columns = [
  { key: 'id', title: 'ID', sortable: true, width: '80px' },
  { key: 'name', title: 'Name', sortable: true, filterable: true },
  { key: 'email', title: 'Email', filterable: true },
  { key: 'department', title: 'Department', filterable: true, sortable: true }
];

// Use in HTML
const table = document.querySelector('table-widget');
table.columns = columns;
table.data = employees;
table.sortable = true;
table.filterable = true;
table.pagination = true;

UMD (Browser)

<script src="https://unpkg.com/aina-table/dist/index.umd.js"></script>
<script>
  const table = document.querySelector('table-widget');
  table.columns = columns;
  table.data = employees;
</script>

API Reference

Properties

| Property | Type | Default | Description | |----------|------|---------|-------------| | columns | TableColumn[] | [] | Column definitions | | data | any[] | [] | Table data | | sortable | boolean | true | Enable sorting | | filterable | boolean | true | Enable filtering | | pagination | boolean | false | Enable pagination | | pageSize | number | 10 | Items per page | | striped | boolean | false | Striped rows | | bordered | boolean | true | Show borders | | compact | boolean | false | Compact mode | | loading | boolean | false | Loading state |

Events

| Event | Detail | Description | |-------|--------|-------------| | sort | { column, direction } | Fired when sorting changes | | filter | FilterConfig[] | Fired when filters change | | pageChange | number | Fired when page changes | | rowClick | { row, index } | Fired when row is clicked | | cellClick | { value, row, column, index } | Fired when cell is clicked |

Column Configuration

interface TableColumn<T = any> {
  key: keyof T;
  title: string;
  sortable?: boolean;
  filterable?: boolean;
  width?: string;
  align?: 'left' | 'center' | 'right';
  render?: (value: T[keyof T], row: T, index: number) => string | HTMLElement;
}

Examples

See the demo for a complete example with interactive controls.

License

MIT