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 sandhya-lit-table-widget

Usage

ES Modules

import 'sandhya-lit-table-widget';

// Define your data
const employees = [
  { id: 1, name: 'John Doe', email: 'john@example.com', department: 'Engineering' },
  { id: 2, name: 'Jane Smith', email: 'jane@example.com', 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/sandhya-lit-table-widget/dist/index.umd.js"></script>
<script>
  const table = document.querySelector('table-widget');
  table.columns = columns;
  table.data = employees;
</script>

API Reference

Properties

Events

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