# ExceLike Table - Complete Bundle
🚀 **The ultimate standalone table library with ALL features included and automatically enabled!**
## 📦 What's Included
The complete bundle provides a fully-featured Excel-like table component with **zero configuration required**. Simply include the files and start using - all features are automatically available!
### 📂 Files
- **`excelike-table-complete-bundle.js`** - Complete JavaScript bundle (1.1.0)
- **`excelike-table-complete-bundle.css`** - Complete CSS bundle with all styles
- **`test-complete-bundle.html`** - Live demo showing all features
## ✨ Features (All Automatically Enabled)
### 🎛️ Core Table Features
- ⚙️ **Settings UI** - Gear button with full configuration modal
- 📏 **Column Resizing** - Drag column edges to resize with visual feedback
- 📌 **Column Pinning/Freezing** - Pin columns to the left side
- 👁️ **Column Visibility** - Show/hide columns via settings
- ↕️ **Sorting** - Click headers to sort ascending/descending
- 🔍 **Filtering** - Advanced filter dropdowns with multi-select
- 📄 **Pagination** - Built-in pagination with customizable page sizes
### 🎨 Advanced Features
- 🎯 **Conditional Formatting** - Style cells based on values and conditions
- 🎭 **Theme System** - Light/dark themes with CSS custom properties
- 🔧 **Plugin System** - Extensible architecture for custom functionality
- 📊 **Export Capabilities** - CSV, Excel, PDF, JSON export options
- ✅ **Row Selection** - Multi-row selection with checkboxes
- 🌐 **Internationalization** - Multi-language support
- ♿ **Accessibility** - WCAG compliant with screen reader support
- 📱 **Responsive Design** - Mobile-friendly with touch support
### 🔧 Developer Features
- 🛠️ **TypeScript Definitions** - Full type safety
- 🧩 **Modular Architecture** - Clean separation of concerns
- ⚡ **Performance Optimized** - Virtual scrolling and debounced operations
- 💾 **State Persistence** - Save/restore table settings
- 🔄 **Hot Reloading** - Dynamic data updates
- 📈 **Rich API** - Comprehensive programmatic control
## 🚀 Quick Start
### 1. Include the Files
```html
```
### 2. Initialize the Table
```javascript
// Sample data
const data = [
{ id: 1, name: 'John Doe', email: 'john@example.com', salary: 75000, status: 'Active' },
{ id: 2, name: 'Jane Smith', email: 'jane@example.com', salary: 68000, status: 'Active' },
// ... more data
];
// Define columns using built-in helpers
const columns = [
ColumnHelpers.text('name', 'Full Name', { width: 150 }),
ColumnHelpers.text('email', 'Email Address', { width: 200 }),
ColumnHelpers.number('salary', 'Salary', { currency: '$' }),
ColumnHelpers.status('status', 'Status', {
'Active': '#52c41a',
'Inactive': '#ff4d4f'
}),
ColumnHelpers.actions('Actions', [
{ key: 'edit', label: 'Edit' },
{ key: 'delete', label: 'Delete' }
])
];
// Create table - ALL features automatically enabled!
const table = new ExceLikeTable('#my-table', {
data: data,
columns: columns
});
```
**That's it!** 🎉 All features are now available:
- Click the ⚙️ gear button for settings
- Drag column edges to resize
- Click ↕️ to sort columns
- Click 🔍 to filter data
- Use pagination controls at the bottom
## 📖 Column Helpers
The bundle includes convenient helpers for common column types:
```javascript
// Text column
ColumnHelpers.text('key', 'Title', { width: 150 })
// Number column with formatting
ColumnHelpers.number('price', 'Price', { currency: '$', width: 120 })
// Date column with automatic formatting
ColumnHelpers.date('createdAt', 'Created', { width: 130 })
// Status column with color coding
ColumnHelpers.status('status', 'Status', {
'active': '#52c41a',
'inactive': '#ff4d4f'
})
// Action buttons
ColumnHelpers.actions('Actions', [
{ key: 'edit', label: 'Edit' },
{ key: 'delete', label: 'Delete' }
])
```
## 🎛️ Configuration Options
While all features work with defaults, you can customize as needed:
```javascript
const table = new ExceLikeTable('#container', {
data: myData,
columns: myColumns,
// Table appearance
bordered: true, // Show borders
size: 'medium', // 'small', 'medium', 'large'
// Pagination settings
pagination: {
pageSize: 10, // Rows per page
showSizeChanger: true, // Page size selector
showTotal: true // Show total count
},
// Feature toggles (all enabled by default)
features: [
'sorting',
'filtering',
'pagination',
'columnSettings',
'columnResizing',
'columnPinning',
'conditionalFormatting',
'export',
'rowSelection'
],
// State persistence
tableId: 'my-unique-table', // For saving settings
persistSettings: true, // Save user preferences
// Event handlers
onAction: (action, id) => {
console.log(`Action: ${action} on item: ${id}`);
}
});
```
## 🎨 Theme System
The complete bundle includes a powerful theme system:
```javascript
// Switch themes programmatically
ThemeSystem.applyTheme('dark');
ThemeSystem.applyTheme('light');
// Get available themes
const themes = ThemeSystem.getAvailableThemes();
// ['default', 'dark', 'compact', 'high-contrast', 'material', 'bootstrap']
```
CSS custom properties make theming easy:
```css
:root {
--table-color-primary: #your-brand-color;
--table-color-background: #your-bg-color;
/* ... customize any aspect */
}
```
## 🔧 API Reference
### Table Methods
```javascript
// Data management
table.setData(newData) // Update table data
table.getData() // Get current data
table.getFilteredData() // Get filtered results
// State management
table.clearFilters() // Remove all filters
table.clearSort() // Remove sorting
table.refresh() // Re-render table
// Settings
table.showSettingsModal() // Open settings UI
table.updateColumnWidth(key, width) // Resize column
// Cleanup
table.destroy() // Remove table and cleanup
```
### Global Utilities
```javascript
// DOM helpers
DOMUtils.createElement(tag, content, attrs)
DOMUtils.createModal(content, options)
// Performance helpers
PerformanceUtils.debounce(fn, delay)
PerformanceUtils.throttle(fn, limit)
// Internationalization
I18n.setLocale('en')
I18n.t('pagination.next') // Get translated text
```
## 🔌 Plugin System
Extend functionality with the built-in plugin system:
```javascript
// Create a custom plugin
const MyPlugin = {
name: 'My Custom Plugin',
version: '1.0.0',
init(table, api) {
// Plugin initialization
api.addCSS(customCSS, 'my-plugin');
api.registerHook('render:afterRender', this.onRender);
},
onRender(data, table) {
// Custom rendering logic
}
};
// Register the plugin
table.pluginSystem.registerPlugin('my-plugin', MyPlugin);
```
## 📱 Responsive Design
The table automatically adapts to different screen sizes:
- **Desktop**: Full feature set with all controls
- **Tablet**: Optimized layout with touch-friendly controls
- **Mobile**: Horizontal scrolling with condensed UI
## ♿ Accessibility
Full WCAG 2.1 AA compliance:
- Screen reader support with ARIA labels
- Keyboard navigation for all features
- High contrast mode support
- Reduced motion preferences respected
## 🆚 Complete vs Original Bundle
| Feature | Original Bundle | Complete Bundle |
|---------|----------------|-----------------|
| Basic table | ✅ | ✅ |
| Settings UI (⚙️) | ❌ | ✅ |
| Column resizing | ❌ | ✅ |
| Column pinning | ❌ | ✅ |
| Conditional formatting | ❌ | ✅ |
| Plugin system | ❌ | ✅ |
| Theme system | ❌ | ✅ |
| Export features | ❌ | ✅ |
| Advanced filters | ❌ | ✅ |
| Row selection | ❌ | ✅ |
| Auto-initialization | ❌ | ✅ |
| File size | ~50KB | ~200KB |
## 📊 Performance
Despite including all features, the complete bundle is optimized for performance:
- **Lazy loading**: Features load only when needed
- **Virtual scrolling**: Handle thousands of rows smoothly
- **Debounced operations**: Smooth resize and filter interactions
- **Efficient rendering**: Minimal DOM updates
- **Memory management**: Automatic cleanup prevents leaks
## 🐛 Browser Support
- **Chrome** 60+
- **Firefox** 55+
- **Safari** 12+
- **Edge** 79+
- **IE** 11+ (with polyfills)
## 📄 License
This complete bundle maintains the same license as the original library.
## 🤝 Contributing
Found an issue or want to contribute? The complete bundle is built from the modular source files in the `/src` directory. Submit issues and PRs to the main repository.
## 🆘 Support
- **Demo**: Open `test-complete-bundle.html` for a live example
- **Documentation**: See the main project README for detailed docs
- **Issues**: Report bugs in the main repository
- **Community**: Join discussions in the project issues
---
**🎉 Enjoy your fully-featured Excel-like table with zero configuration!**